@automattic/jetpack-shared-extension-utils 0.16.4 → 0.17.0

package/src/icons.js

@@ -0,0 +1,525 @@
+import colorStudio from '@automattic/color-studio';
+import { G, Path, Polygon, Rect, SVG, Circle } from '@wordpress/components';
+import clsx from 'clsx';
+import React from 'react';
+import { getIconColor } from './block-icons';
+
+import './icons.scss';
+
+/**
+ * Constants
+ */
+const PALETTE = colorStudio.colors;
+const COLOR_JETPACK = PALETTE[ 'Jetpack Green 40' ];
+
+export const MediaLibraryIcon = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" />
+		<Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" />
+	</SVG>
+);
+
+export const GooglePhotosIcon = props => (
+	<SVG
+		height="24"
+		width="24"
+		viewBox="1.2 10.8 169.6 169.6"
+		xmlns="http://www.w3.org/2000/svg"
+		{ ...props }
+	>
+		<Path
+			d="m43.6 49.4c23.4 0 42.4 19 42.4 42.4v3.9h-80.9c-2.1 0-3.8-1.7-3.9-3.9 0-23.4 19-42.4 42.4-42.4z"
+			fill="#f6bc04"
+		/>
+		<Path
+			d="m132.2 53.2c0 23.4-19 42.4-42.4 42.4h-3.8v-80.9c0-2.1 1.7-3.9 3.8-3.9 23.5 0 42.4 19 42.4 42.4z"
+			fill="#ea4335"
+		/>
+		<Path
+			d="m128.4 141.9c-23.4 0-42.4-19-42.4-42.4v-3.9h80.9c2.1 0 3.9 1.7 3.9 3.8 0 23.5-19 42.5-42.4 42.5z"
+			fill="#4285f4"
+		/>
+		<Path
+			d="m39.8 138c0-23.4 19-42.4 42.4-42.4h3.8v80.9c0 2.1-1.7 3.8-3.9 3.9-23.4 0-42.3-19-42.3-42.4z"
+			fill="#34a853"
+		/>
+	</SVG>
+);
+
+export const GooglePhotosMediaIcon = props => (
+	<SVG
+		viewBox="0 0 160 160"
+		enableBackground="new 0 0 160 160"
+		xmlns="http://www.w3.org/2000/svg"
+		{ ...props }
+	>
+		<Path
+			d="M25.7 133.8c10.4-.3 20.8-.5 31.2-.6l31.2-.4s20.8-.1 31.2-.1l31.2-.1-1.4 1.4-.3-13.3c-.1-4.4-.3-8.9-.1-13.3v-26.9l.1-53.5 1.3 1.3-62.2-.3-31.1-.3-31.1-.3.6-.6-.1 9.4c0 .3-.2.5-.5.5s-.5-.2-.5-.5l-.1-9.4c0-.3.2-.6.6-.6h.1l31.1-.2h30.9l62.1-.3c.7 0 1.3.6 1.3 1.3l.1 53.5v26.8c0 8.9.3 17.9.4 26.8 0 .8-.6 1.4-1.4 1.4l-31.2-.1c-10.4 0-20.8 0-31.2-.1-10.4-.1-20.8-.1-31.2-.4l-31.2-.6c-.1 0-.2-.1-.3-.3.2-.1.4-.1.5-.2zm1-60.7v-2.4c0-1.6-.1-3.3-.5-4.9 0-.2-.1-.3-.3-.4h-.5c-.1.1-.2.2-.2.3-.4 1.6-.5 3.2-.5 4.9-.1 1.7-.1 3.2-.1 4.9 0 .8 0 1.6.1 2.4.1 2.3.1 4.8.4 7.1 0 .3.3.6.6.6s.5-.2.6-.5c.3-2.3.5-4.5.4-6.8 0-.9 0-1.8.1-2.7l-.1-2.5z"
+			fill="#a7aaad"
+		/>
+		<Path
+			d="M17.2 121.2h122s-4.6-28.1-19.1-32.1c-12.8-3.5-17.9 4.3-28.5 4.3-8.5 0-11.8-20-28-20-30.7-.2-46.4 47.8-46.4 47.8z"
+			fill="none"
+			stroke="#a7aaad"
+			strokeWidth="1.2679"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeDasharray="6.3396,6.3396"
+		/>
+		<Circle
+			cx="116.8"
+			cy="58.9"
+			r="10.9"
+			fill="none"
+			stroke="#a7aaad"
+			strokeWidth="1.2679"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeDasharray="6.3396,6.3396"
+		/>
+		<Path
+			d="M7.3 57.8l6.3-.1c.3 0 .5.2.5.5s-.2.5-.5.5l-6.3-.1c-.2 0-.4-.2-.4-.4-.1-.3.1-.4.4-.4zm9.6-3.1c.6-2.1 1.6-4 2.8-5.8.1-.3.5-.3.8-.1.3.1.3.5.1.8-1.2 1.7-2.1 3.6-2.7 5.6-.1.2-.4.4-.6.4-.4-.4-.5-.6-.4-.9zm7.9-10c1-.4 2.2-.6 3.3-.5 1.1 0 2.2.2 3.3.6.3.1.5.5.4.8-.1.3-.5.5-.8.4-1.8-.7-3.9-.8-5.7-.1-.3.1-.6 0-.7-.3v-.1c-.3-.4-.1-.7.2-.8zm10.9 4.7c.3.2.6.2.9.1.5-.3 1-.5 1.5-.6 1.1-.3 2.2-.4 3.3-.4.4 0 .6.3.6.6 0 .4-.3.6-.6.6-1 0-2 .1-2.9.4-.5.2-1 .4-1.4.6-.7.3-1.5.3-2.2-.1-.3-.3-.3-.8 0-1.1.2-.1.5-.2.8-.1zm11.6 2c.6 1 1 2 1.1 3.2.2 1.1.2 2.2.1 3.3 0 .3-.3.5-.6.5s-.5-.2-.5-.5c.2-2-.3-4.1-1.3-5.8-.1-.3-.1-.6.1-.8.4-.2 1-.2 1.1.1zm6.8 6.3h4.7c.2 0 .4.2.4.4s-.1.4-.3.4h-4.8c-.3 0-.5-.2-.5-.5.1 0 .2-.3.5-.3z"
+			fill="#a7aaad"
+		/>
+	</SVG>
+);
+
+export const OpenverseIcon = props => (
+	<SVG
+		style={ {
+			fill: '#30272e',
+			background: '#ffe033',
+			padding: '3px',
+			width: '22px',
+			height: '24px',
+		} }
+		width="46"
+		height="42"
+		viewBox="0 0 46 42"
+		xmlns="http://www.w3.org/2000/svg"
+		{ ...props }
+	>
+		<G>
+			<Path d="M0 9.3975C0 14.5687 4.1722 18.795 9.3353 18.795V0C4.1722 0 0 4.2 0 9.3975Z" />
+			<Path d="M13.6118 9.3975C13.6118 14.5687 17.784 18.795 22.9471 18.795V0C17.8101 0 13.6118 4.2 13.6118 9.3975Z" />
+			<Path d="M36.5589 18.795C41.7147 18.795 45.8942 14.5876 45.8942 9.3975C45.8942 4.2074 41.7147 0 36.5589 0C31.4032 0 27.2236 4.2074 27.2236 9.3975C27.2236 14.5876 31.4032 18.795 36.5589 18.795Z" />
+			<Path d="M0 32.6025C0 37.8 4.1722 42 9.3353 42V23.2312C4.1722 23.2312 0 27.4312 0 32.6025Z" />
+			<Path d="M13.6118 32.5238C13.6118 37.695 17.784 41.9213 22.9471 41.9213V23.1525C17.8101 23.1525 13.6118 27.3525 13.6118 32.5238Z" />
+			<Path d="M36.5589 41.9212C41.7147 41.9212 45.8942 37.7138 45.8942 32.5238C45.8942 27.3337 41.7147 23.1263 36.5589 23.1263C31.4032 23.1263 27.2236 27.3337 27.2236 32.5238C27.2236 37.7138 31.4032 41.9212 36.5589 41.9212Z" />
+		</G>
+	</SVG>
+);
+
+export const PexelsIcon = props => (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" { ...props }>
+		<Path d="M14 7H9v10h3.9v-3.8H14c1.7 0 3.1-1.4 3.1-3.1C17.2 8.4 15.8 7 14 7z" />
+		<Path d="M20.5 2h-17C2.7 2 2 2.7 2 3.5v17c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5v-17c0-.8-.7-1.5-1.5-1.5zm-5.6 13.2V19H7V5h7c2.8 0 5.1 2.3 5.1 5.1.1 2.5-1.8 4.7-4.2 5.1z" />
+	</SVG>
+);
+
+export const GooglePhotosLogo = () => {
+	const st0 = '#F6B704';
+	const st1 = '#E54335';
+	const st2 = '#4280EF';
+	const st3 = '#34A353';
+	const st4 = '#757575';
+	return (
+		<SVG
+			version="1.1"
+			id="Layer_1"
+			xmlns="http://www.w3.org/2000/SVG"
+			x="0px"
+			y="0px"
+			viewBox="0 0 1292 448"
+			style={ {
+				enableBackground: 'new 0 0 1292 448',
+			} }
+		>
+			<G id="Icon">
+				<Path
+					class="st0"
+					fill={ st0 }
+					d="M171.6,177.4c23.4,0,42.4,19,42.4,42.4v3.9h-80.9c-2.1,0-3.8-1.7-3.9-3.9C129.2,196.4,148.2,177.4,171.6,177.4
+		C171.6,177.4,171.6,177.4,171.6,177.4z"
+				></Path>
+				<Path
+					class="st1"
+					fill={ st1 }
+					d="M260.2,181.2c0,23.4-19,42.4-42.4,42.4H214v-80.9c0-2.1,1.7-3.9,3.8-3.9h0
+		C241.3,138.8,260.2,157.8,260.2,181.2C260.2,181.2,260.2,181.2,260.2,181.2z"
+				></Path>
+				<Path
+					class="st2"
+					fill={ st2 }
+					d="M256.4,269.9c-23.4,0-42.4-19-42.4-42.4v-3.9h80.9c2.1,0,3.9,1.7,3.9,3.8v0
+		C298.8,250.9,279.8,269.9,256.4,269.9C256.4,269.9,256.4,269.9,256.4,269.9z"
+				></Path>
+				<Path
+					class="st3"
+					fill={ st3 }
+					d="M167.8,266c0-23.4,19-42.4,42.4-42.4c0,0,0,0,0,0h3.9v80.9c0,2.1-1.7,3.8-3.9,3.9
+		C186.7,308.4,167.8,289.4,167.8,266z"
+				></Path>
+			</G>
+			<G id="Photos">
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M796,272v-91.6h31.2c15.2,0,28.7,11.3,28.7,27.3s-13.4,27.3-28.7,27.3h-19.4V272H796z M827.5,223.6
+		c8.8,0,16-7.2,16-16s-7.2-16-16-16h-19.7v32H827.5z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M875.8,209.3l-0.5,8.7h0.5c3.3-5.8,11.3-10.8,19.8-10.8c16,0,23.9,10.9,23.9,26.4V272h-11.8v-36.6
+		c0-13-6.5-17.4-15.5-17.4c-10.2,0-16.5,9.7-16.5,19.3V272H864v-91.6h11.8V209.3z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M993.8,240.6c0,19.1-13.4,33.4-32.2,33.4s-32.2-14.3-32.2-33.4s13.4-33.4,32.2-33.4S993.8,221.6,993.8,240.6z
+		 M982,240.6c0-14.3-10-22.6-20.5-22.6s-20.5,8.3-20.5,22.6s10,22.7,20.5,22.7S982,255,982,240.6L982,240.6z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M1008,252.9V220h-11v-10.7h11v-19.2h11.8v19.2h15.3V220h-15.3v32c0,7,2.9,10.2,8.4,10.2c1.8,0.1,3.7-0.3,5.4-1
+		l4.1,10.1c-3,1.2-6.2,1.8-9.5,1.7C1015,273,1008,265.7,1008,252.9z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M1105.8,240.6c0,19.1-13.4,33.4-32.2,33.4s-32.2-14.3-32.2-33.4s13.4-33.4,32.2-33.4
+		S1105.8,221.6,1105.8,240.6z M1094,240.6c0-14.3-10-22.6-20.5-22.6s-20.5,8.3-20.5,22.6s10,22.7,20.5,22.7S1094,255,1094,240.6
+		L1094,240.6z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M1111,256.1l10.5-4.4c3.3,7.9,9.5,11.8,17,11.8c7.3,0,12.5-3.6,12.5-8.8c0-3.2-1.9-6.6-8.6-8.3l-12.7-3.1
+		c-5.8-1.4-16.8-6.4-16.8-17.4c0-11.4,11.8-18.7,24.8-18.7c10.9,0,20.3,5,24.2,14.6l-10.2,4.2c-2.4-5.9-8.2-8.3-14.3-8.3
+		c-6.7,0-12.4,3-12.4,8.1c0,4,3.3,6.1,8.3,7.3l12.4,2.9c12.4,2.9,17.3,10.6,17.3,18.3c0,11.1-10,19.7-24.7,19.7
+		C1123.2,274,1114.7,265.1,1111,256.1z"
+				></Path>
+			</G>
+			<G id="Google">
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M348.7,221.6c0-28.9,24.3-52.5,53.2-52.5c13.5-0.2,26.4,5,36,14.5l-10.1,10.1c-6.9-6.7-16.2-10.4-25.9-10.2
+		c-21.1,0-37.6,17-37.6,38.2s16.5,38.1,37.6,38.1c13.7,0,21.5-5.5,26.5-10.5c4.1-4.1,6.8-10,7.8-18H402v-14.4h48.3
+		c0.5,3,0.8,6,0.8,9c0,10.8-2.9,24.1-12.4,33.5c-9.2,9.6-21,14.7-36.6,14.7C373,274,348.7,250.5,348.7,221.6z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M490,206.5c-18.7,0-33.9,14.2-33.9,33.8S471.3,274,490,274s33.9-14.3,33.9-33.8S508.7,206.5,490,206.5z
+		 M490,260.7c-10.2,0-19.1-8.4-19.1-20.5s8.8-20.5,19.1-20.5s19.1,8.3,19.1,20.5S500.2,260.7,490,260.7z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M564,206.5c-18.7,0-33.9,14.2-33.9,33.8S545.3,274,564,274s33.9-14.3,33.9-33.8S582.7,206.5,564,206.5z
+		 M564,260.7c-10.2,0-19.1-8.4-19.1-20.5s8.8-20.5,19.1-20.5s19.1,8.3,19.1,20.5S574.2,260.7,564,260.7z"
+				></Path>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M654.8,208.5v5.5h-0.5c-3.3-4-9.7-7.6-17.8-7.6c-16.9,0-32.4,14.9-32.4,33.9s15.5,33.7,32.4,33.7
+		c8.1,0,14.5-3.6,17.8-7.7h0.5v4.9c0,12.9-6.9,19.8-18,19.8c-9.1,0-14.7-6.5-17-12l-12.9,5.4c5,12.1,16.8,20.1,30,20
+		c17.4,0,32.1-10.2,32.1-35.2v-60.7H654.8z M637.8,260.7c-10.2,0-18.8-8.6-18.8-20.4s8.6-20.6,18.8-20.6s18,8.7,18,20.6
+		S647.9,260.7,637.8,260.7L637.8,260.7z"
+				></Path>
+				<Rect x="679.2" y="172.7" class="st4" fill={ st4 } width="14.8" height="99.3"></Rect>
+				<Path
+					class="st4"
+					fill={ st4 }
+					d="M734.7,260.7c-7.6,0-12.9-3.5-16.4-10.2l45.2-18.7L762,228c-2.8-7.6-11.4-21.5-28.9-21.5s-31.9,13.7-31.9,33.8
+		c0,19,14.3,33.8,33.5,33.8c11.3,0.1,21.9-5.6,28.2-15l-11.5-7.7C747.5,257,742.3,260.7,734.7,260.7z M733.6,219.5
+		c5.9,0,10.9,2.9,12.5,7.2l-30.2,12.5C715.5,226.2,726,219.5,733.6,219.5L733.6,219.5z"
+				></Path>
+			</G>
+		</SVG>
+	);
+};
+
+export const JetpackLogo = ( { size = 24, border = 0, className, color = COLOR_JETPACK } ) => {
+	const borderOffset = border ? ( -border / size ) * 32 : 0;
+
+	return (
+		<SVG
+			className={ clsx( 'jetpack-logo', className ) }
+			width={ size }
+			height={ size }
+			viewBox={ `${ borderOffset } ${ borderOffset } ${ 32 - borderOffset * 2 } ${
+				32 - borderOffset * 2
+			}` }
+		>
+			<Path
+				className="jetpack-logo__icon-circle"
+				fill={ color }
+				stroke={ border ? '#fff' : 'transparent' }
+				strokeWidth={ border }
+				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
+			/>
+			<Polygon
+				className="jetpack-logo__icon-triangle"
+				fill="#fff"
+				points={ `15,19 ${ 7 - borderOffset * 0.5 },19 15,${ 3 - borderOffset }` }
+			/>
+			<Polygon
+				className="jetpack-logo__icon-triangle"
+				fill="#fff"
+				points={ `17,${ 29 + borderOffset } 17,13 ${ 25 + borderOffset * 0.5 },13` }
+			/>
+		</SVG>
+	);
+};
+
+export const JetpackMobileAppIcon = props => {
+	return (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{ ...props }
+		>
+			<Rect width="24" height="24" rx="5" fill="#069E08" />
+			<G clipPath="url(#clip0_2_1297)">
+				<Path
+					d="M11.9829 3C7.02857 3 3 7.02857 3 11.9829C3 16.9371 7.02857 20.9657 11.9829 20.9657C16.9371 20.9657 20.9657 16.9371 20.9657 11.9829C20.9657 7.02857 16.9371 3 11.9829 3ZM11.52 13.4743H7.04571L11.52 4.76571V13.4743ZM12.4286 19.1829V10.4743H16.9029L12.4286 19.1829Z"
+					fill="white"
+				/>
+			</G>
+		</SVG>
+	);
+};
+
+export const JetpackAppIcon = () => {
+	return (
+		<SVG
+			width="104"
+			height="59"
+			viewBox="0 0 104 59"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className="jetpack-app-icon"
+		>
+			<Path
+				d="M55 29.5C55 14.3475 42.6525 2 27.5 2C12.32 2 0 14.3475 0 29.5C0 44.68 12.32 57 27.5 57C42.6525 57 55 44.68 55 29.5ZM21.395 44.2675L12.0175 19.105C13.53 19.05 15.235 18.885 15.235 18.885C16.61 18.72 16.445 15.7775 15.07 15.8325C15.07 15.8325 11.0825 16.135 8.5525 16.135C8.0575 16.135 7.535 16.135 6.9575 16.1075C11.33 9.3975 18.8925 5.0525 27.5 5.0525C33.9075 5.0525 39.7375 7.445 44.1375 11.4875C42.2675 11.185 39.6 12.56 39.6 15.8325C39.6 17.8675 40.8375 19.5725 42.075 21.6075C43.0375 23.285 43.5875 25.3475 43.5875 28.3725C43.5875 32.47 39.7375 42.1225 39.7375 42.1225L31.405 19.105C32.89 19.05 33.66 18.6375 33.66 18.6375C35.035 18.5 34.87 15.2 33.495 15.2825C33.495 15.2825 29.535 15.6125 26.95 15.6125C24.5575 15.6125 20.5425 15.2825 20.5425 15.2825C19.1675 15.2 19.0025 18.5825 20.3775 18.6375L22.9075 18.8575L26.3725 28.235L21.395 44.2675ZM47.8775 29.5C48.5375 27.74 49.9125 24.3575 49.06 17.8125C50.985 21.36 51.9475 25.265 51.9475 29.5C51.9475 38.5475 47.19 46.66 39.8475 50.895C42.515 43.7725 45.1825 36.595 47.8775 29.5ZM16.775 51.7475C8.58 47.7875 3.0525 39.2075 3.0525 29.5C3.0525 25.925 3.685 22.68 5.0325 19.6275C8.9375 30.325 12.8425 41.05 16.775 51.7475ZM27.8575 33.515L34.9525 52.71C32.5875 53.5075 30.1125 53.9475 27.5 53.9475C25.3275 53.9475 23.1825 53.645 21.2025 53.04C23.43 46.495 25.6575 40.005 27.8575 33.515Z"
+				fill="#0675C4"
+			/>
+			<Rect x="46" y="1" width="57" height="57" rx="28.5" fill="white" />
+			<Path
+				d="M74.5 2C59.3497 2 47 14.316 47 29.5C47 44.6841 59.316 57 74.5 57C89.6841 57 102 44.6841 102 29.5C102 14.316 89.6841 2 74.5 2ZM73.0828 34.0552H59.3834L73.0828 7.39877V34.0552ZM75.8834 51.5337V24.8773H89.5491L75.8834 51.5337Z"
+				fill="#069E08"
+			/>
+			<Rect x="46" y="1" width="57" height="57" rx="28.5" stroke="white" strokeWidth="2" />
+		</SVG>
+	);
+};
+
+export const LoomIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 100 100">
+			<Path d="M100,44H72.4l23.9-13.8l-6-10.4L66.4,33.6L80.2,9.7l-10.4-6L56,27.59V0H44v27.6L30.2,3.7l-10.4,6l13.8,23.9 L9.7,19.8l-6,10.4L27.6,44H0V56h27.6L3.7,69.8l6,10.4l23.9-13.8L19.8,90.3l10.4,6L44,72.4V100H56V72.41l13.8,23.9l10.4-6L66.4,66.4 l23.9,13.8l6-10.4L72.4,56H100V44z M50,65.23c-8.41,0-15.23-6.82-15.23-15.23c0-8.41,6.82-15.23,15.23-15.23S65.23,41.59,65.23,50 C65.23,58.41,58.41,65.23,50,65.23z" />
+		</SVG>
+	),
+};
+
+export const SmartFrameIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.7 17" xmlSpace="preserve">
+			<Path d="m20.7 12.9-.9-11c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5L1.9 0h-.1c-.2 0-.5 0-.7.1C.9.2.7.4.5.5.4.7.2.9.1 1.1c-.1.2-.1.5-.1.7v.1l.9 13.4c0 .5.2.9.5 1.3.3.2.8.4 1.3.4H3l16.1-2c.4 0 .9-.3 1.1-.6.3-.3.5-.8.5-1.2v-.3zm-3.1.8L4.2 15.3H4c-.4 0-.8-.1-1-.4-.3-.3-.4-.6-.5-1L1.7 3.2v-.1c0-.4.2-.8.5-1 .3-.3.7-.4 1-.4h.1l13.5.1c.4 0 .8.1 1 .4.3.3.4.6.5 1L19 12v.3c0 .4-.2.7-.4 1-.3.2-.6.4-1 .4z" />
+		</SVG>
+	),
+};
+
+export const DescriptIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 43" xmlSpace="preserve">
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M12 31.908c0 1.376.893 2.268 2.27 2.268h6.63c3.956 0 7.192-1.337 9.392-3.68H12v1.412zM20.901 9H14.27C12.893 9 12 9.893 12 11.269v1.411h18.294C28.093 10.338 24.857 9 20.9 9zm5.787 16.176c0 1.113.726 1.835 1.845 1.835h3.973c.45-1.117.753-2.345.894-3.671h-4.867c-1.119 0-1.845.722-1.845 1.836zm-5.507-7.166c0 1.113.725 1.836 1.844 1.836H33.4a13.644 13.644 0 0 0-.894-3.672h-9.481c-1.119 0-1.844.723-1.844 1.836zm1.843 7.166c0-1.114-.726-1.836-1.845-1.836H12v3.671h9.18c1.118 0 1.843-.722 1.843-1.835zm-5.508-7.166c0-1.113-.726-1.836-1.844-1.836H12v3.672h3.672c1.118 0 1.844-.723 1.844-1.836zm41.151 3.199"
+			/>
+		</SVG>
+	),
+};
+
+export const DonationsIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 24 24">
+			<Rect x="0" fill="none" width="24" height="24" />
+			<G>
+				<Path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z" />
+			</G>
+		</SVG>
+	),
+};
+
+export const ConversationIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 24 24">
+			<Rect x="0" fill="none" width="24" height="24" />
+			<G>
+				<Path d="M15.9216 2H2.98533C2.43803 2 1.99023 2.45 1.99023 3V17L5.97062 13H15.9216C16.4689 13 16.9167 12.55 16.9167 12V3C16.9167 2.45 16.4689 2 15.9216 2ZM14.9265 4V11H5.14469L3.98043 12.17V4H14.9265ZM18.9069 6H20.8971C21.4444 6 21.8922 6.45 21.8922 7V22L17.9118 18H6.96572C6.41842 18 5.97062 17.55 5.97062 17V15H18.9069V6Z" />
+			</G>
+		</SVG>
+	),
+};
+
+export const DialogueIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 24 24">
+			<Rect x="0" fill="none" width="24" height="24" />
+			<G>
+				<Path d="M3.98042 2H19.9019C20.9965 2 21.8921 2.9 21.8921 4V16C21.8921 17.1 20.9965 18 19.9019 18H5.97061L1.99023 22V4C1.99023 2.9 2.88582 2 3.98042 2ZM5.97061 16H19.9019V4H3.98042V18L5.97061 16Z" />
+			</G>
+		</SVG>
+	),
+};
+
+export const TranscriptIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 24 24">
+			<Rect x="0" fill="none" width="24" height="24" />
+			<G>
+				<Path
+					d="M11.1114 8H20.0002M11.1113 15H20.0002"
+					stroke={ getIconColor() }
+					strokeWidth="1.5"
+				/>
+				<Path d="M4 10V6L8 8L4 10Z" fill={ getIconColor() } />
+				<Path d="M4 17V13L8 15L4 17Z" fill={ getIconColor() } />
+			</G>
+		</SVG>
+	),
+};
+
+export const TranscriptSpeakerIcon = {
+	foreground: getIconColor(),
+	src: (
+		<SVG viewBox="0 0 24 24">
+			<Rect x="0" fill="none" width="24" height="24" />
+			<G>
+				<Path d="M4 12V4L11 8L4 12Z" />
+				<Path d="M4 14.5H20V16H4V14.5Z" />
+				<Path d="M4 18.5H13V20H4V18.5Z" />
+			</G>
+		</SVG>
+	),
+};
+
+export const formatUppercase = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M2.5 7.5V4.5H15.5V7.5H10.5V19.5H7.5V7.5H2.5ZM12.5 9.5H21.5V12.5H18.5V19.5H15.5V12.5H12.5V9.5Z" />
+	</SVG>
+);
+
+export const ControlForwardFiveIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12.7049 2V6C8.30658 6 4.74414 9.58 4.74414 14C4.74414 18.42 8.30658 22 12.7049 22C17.1032 22 20.6656 18.42 20.6656 14H18.6755C18.6755 17.31 15.9987 20 12.7049 20C9.41113 20 6.73433 17.31 6.73433 14C6.73433 10.69 9.41113 8 12.7049 8V12L17.6804 7L12.7049 2ZM11.6501 12.73L11.4013 14.9L12.068 15.06C12.0753 15.0526 12.0827 15.0447 12.0901 15.0366C12.1131 15.0116 12.1375 14.9851 12.1675 14.97C12.1874 14.96 12.2073 14.9475 12.2272 14.935C12.2471 14.9225 12.2671 14.91 12.287 14.9C12.3268 14.88 12.3865 14.86 12.4362 14.85C12.486 14.84 12.5556 14.83 12.6352 14.83C12.7447 14.83 12.8542 14.85 12.9338 14.88C13.0134 14.91 13.083 14.96 13.1427 15.03C13.2024 15.1 13.2422 15.17 13.2721 15.27C13.302 15.37 13.3119 15.47 13.3119 15.58V15.58C13.3119 15.69 13.3119 15.79 13.2821 15.89C13.2522 15.99 13.2124 16.07 13.1726 16.14C13.1328 16.21 13.0631 16.27 12.9935 16.31C12.9238 16.35 12.8343 16.37 12.7248 16.37C12.5556 16.37 12.4163 16.31 12.3069 16.22C12.1974 16.13 12.1377 15.99 12.1178 15.81H11.2819C11.2819 16.01 11.3317 16.19 11.4113 16.34C11.4909 16.49 11.5904 16.63 11.7297 16.73C11.869 16.83 12.0183 16.92 12.1874 16.97C12.3566 17.02 12.5357 17.05 12.7148 17.05C12.9636 17.05 13.1726 17 13.3517 16.93C13.5308 16.86 13.6801 16.75 13.7995 16.62C13.9189 16.49 14.0085 16.34 14.0682 16.17C14.1279 16 14.1577 15.82 14.1577 15.63C14.1577 15.41 14.1179 15.21 14.0682 15.03C14.0184 14.85 13.9289 14.7 13.8194 14.58C13.7099 14.46 13.5706 14.37 13.4114 14.3C13.2522 14.23 13.0731 14.2 12.8641 14.2C12.7945 14.2 12.7248 14.21 12.6651 14.22C12.6352 14.225 12.6054 14.2325 12.5755 14.24C12.5457 14.2475 12.5158 14.255 12.486 14.26C12.4263 14.27 12.3765 14.29 12.3367 14.31C12.3201 14.3183 12.3035 14.325 12.2876 14.3313C12.2654 14.3401 12.2446 14.3483 12.2272 14.36L12.3367 13.44H14.0284V12.73H11.6501Z" />
+	</SVG>
+);
+
+export const ControlBackFiveIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11.9412 2V6C16.3395 6 19.902 9.58 19.902 14C19.902 18.42 16.3395 22 11.9412 22C7.54291 22 3.98047 18.42 3.98047 14H5.97066C5.97066 17.31 8.64746 20 11.9412 20C15.235 20 17.9118 17.31 17.9118 14C17.9118 10.69 15.235 8 11.9412 8V12L6.96575 7L11.9412 2ZM10.8864 12.73L10.6376 14.9L11.3044 15.06C11.3117 15.0526 11.319 15.0447 11.3264 15.0366C11.3494 15.0116 11.3738 14.9851 11.4039 14.97C11.4238 14.96 11.4437 14.9475 11.4636 14.935C11.4835 14.9225 11.5034 14.91 11.5233 14.9C11.5631 14.88 11.6228 14.86 11.6725 14.85C11.7223 14.84 11.792 14.83 11.8716 14.83C11.981 14.83 12.0905 14.85 12.1701 14.88C12.2497 14.91 12.3194 14.96 12.3791 15.03C12.4388 15.1 12.4786 15.17 12.5084 15.27C12.5383 15.37 12.5482 15.47 12.5482 15.58V15.58C12.5482 15.69 12.5482 15.79 12.5184 15.89C12.4885 15.99 12.4487 16.07 12.4089 16.14C12.3691 16.21 12.2995 16.27 12.2298 16.31C12.1601 16.35 12.0706 16.37 11.9611 16.37C11.792 16.37 11.6526 16.31 11.5432 16.22C11.4337 16.13 11.374 15.99 11.3541 15.81H10.5182C10.5182 16.01 10.568 16.19 10.6476 16.34C10.7272 16.49 10.8267 16.63 10.966 16.73C11.1053 16.83 11.2546 16.92 11.4238 16.97C11.5929 17.02 11.7721 17.05 11.9512 17.05C12.1999 17.05 12.4089 17 12.588 16.93C12.7672 16.86 12.9164 16.75 13.0358 16.62C13.1552 16.49 13.2448 16.34 13.3045 16.17C13.3642 16 13.3941 15.82 13.3941 15.63C13.3941 15.41 13.3543 15.21 13.3045 15.03C13.2547 14.85 13.1652 14.7 13.0557 14.58C12.9463 14.46 12.807 14.37 12.6477 14.3C12.4885 14.23 12.3094 14.2 12.1004 14.2C12.0308 14.2 11.9611 14.21 11.9014 14.22C11.8716 14.225 11.8417 14.2325 11.8119 14.24C11.782 14.2475 11.7522 14.255 11.7223 14.26C11.6626 14.27 11.6128 14.29 11.573 14.31C11.5564 14.3183 11.5398 14.325 11.5239 14.3313C11.5017 14.3401 11.481 14.3483 11.4636 14.36L11.573 13.44H13.2647V12.73H10.8864Z" />
+	</SVG>
+);
+
+export const flashIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M0 0h24v24H0z" fill="none" />
+		<Path d="M7 2v11h3v9l7-12h-4l4-8z" fill="currentColor" />
+	</SVG>
+);
+
+export const VideoPressIcon = (
+	<SVG width="29" height="21" viewBox="0 0 29 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M2.79037 0.59375C4.0363 0.59375 5.13102 1.41658 5.47215 2.60947L8.8452 14.4044C8.8486 14.4164 8.85411 14.4273 8.86124 14.4368L12.8572 0.59375H15.0927H21.2721C25.6033 0.59375 28.5066 3.39892 28.5066 7.64565C28.5066 11.9411 25.5272 14.6196 21.0818 14.6196H18.1499H14.3719L13.6379 16.8813C12.9796 18.9095 11.0827 20.2839 8.94152 20.2839C6.80035 20.2839 4.90341 18.9095 4.24517 16.8813L0.137069 4.22276C-0.444671 2.43022 0.898038 0.59375 2.79037 0.59375ZM15.7374 10.4119H20.0156C21.8718 10.4119 22.9856 9.35018 22.9856 7.64565C22.9856 5.93137 21.8718 4.91839 20.0156 4.91839H17.5202L15.7374 10.4119Z"
+			fill="#000000"
+		/>
+	</SVG>
+);
+
+export const PlayIcon = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M4.75725 2.075C4.60279 1.97745 4.41041 1.97489 4.25365 2.06832C4.09689 2.16174 4 2.3367 4 2.52632V21.4737C4 21.6633 4.09689 21.8383 4.25365 21.9317C4.41041 22.0251 4.60279 22.0226 4.75725 21.925L19.7573 12.4513C19.9079 12.3562 20 12.1849 20 12C20 11.8151 19.9079 11.6438 19.7573 11.5487L4.75725 2.075Z"
+			fill="white"
+		/>
+	</SVG>
+);
+
+export const PluginIcon = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={ { fill: 'none' } }>
+		<Path
+			d="M13.9 16.55L13.75 16.75V17V19C13.75 19.1381 13.6381 19.25 13.5 19.25H10.5C10.3619 19.25 10.25 19.1381 10.25 19V17V16.75L10.1 16.55L7.25 12.75V9C7.25 8.86193 7.36193 8.75 7.5 8.75H16.5C16.6381 8.75 16.75 8.86193 16.75 9V12.75L13.9 16.55Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<line x1="9.75" y1="9" x2="9.75" y2="4" stroke="currentColor" strokeWidth="1.5" />
+		<line x1="14.25" y1="9" x2="14.25" y2="4" stroke="currentColor" strokeWidth="1.5" />
+	</SVG>
+);
+
+export const MailIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M18 6.75H6C5.30964 6.75 4.75 7.30964 4.75 8V16C4.75 16.6904 5.30964 17.25 6 17.25H18C18.6904 17.25 19.25 16.6904 19.25 16V8C19.25 7.30964 18.6904 6.75 18 6.75Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<Path d="M5 7L12 13L19 7" stroke="currentColor" strokeWidth="1.5" />
+	</SVG>
+);
+
+export const NewsletterIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M7 2.75H6.25V3.5V8.25H5.5C4.25736 8.25 3.25 9.25736 3.25 10.5V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H18C19.2426 20.75 20.25 19.7426 20.25 18.5V10.5C20.25 9.25736 19.2426 8.25 18 8.25H9.5V9.75H18C18.4142 9.75 18.75 10.0858 18.75 10.5V18.5C18.75 18.9142 18.4142 19.25 18 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V10.5C4.75 10.0858 5.08579 9.75 5.5 9.75H6.25V10H7.75V6.5H7.75229H7.75464H7.75699H7.75934H7.76169H7.76405H7.7664H7.76875H7.77111H7.77346H7.77582H7.77817H7.78053H7.78289H7.78524H7.7876H7.78996H7.79232H7.79468H7.79704H7.7994H7.80176H7.80412H7.80648H7.80884H7.8112H7.81357H7.81593H7.81829H7.82065H7.82302H7.82538H7.82774H7.83011H7.83247H7.83484H7.8372H7.83956H7.84193H7.84429H7.84666H7.84902H7.85139H7.85375H7.85612H7.85848H7.86085H7.86322H7.86558H7.86795H7.87031H7.87268H7.87504H7.87741H7.87977H7.88214H7.8845H7.88687H7.88923H7.8916H7.89396H7.89633H7.89869H7.90106H7.90342H7.90578H7.90815H7.91051H7.91287H7.91524H7.9176H7.91996H7.92232H7.92468H7.92704H7.9294H7.93177H7.93412H7.93648H7.93884H7.9412H7.94356H7.94592H7.94828H7.95063H7.95299H7.95535H7.9577H7.96006H7.96241H7.96477H7.96712H7.96947H7.97182H7.97418H7.97653H7.97888H7.98123H7.98358H7.98592H7.98827H7.99062H7.99297H7.99531H7.99766H8H13.5V5.5V5V4.25V4V2.75H7Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+export const CloudIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15.6416 9.51049L16.3128 10.701L17.5605 10.1432C17.8568 10.0108 18.1778 9.94237 18.5024 9.94253H18.5032C19.7889 9.94253 20.8543 10.9979 20.8543 12.3265C20.8543 13.655 19.7889 14.7104 18.5032 14.7104C18.3449 14.7104 18.1896 14.6946 18.0348 14.6638L16.9668 14.4513L16.434 15.401C16.2045 15.81 15.7702 16.0783 15.2884 16.0783L15.2855 16.0783C15.0869 16.0787 14.8909 16.0337 14.7125 15.9467L13.2933 15.2546L12.6749 16.7074C12.4124 17.3238 11.8034 17.75 11.1027 17.75C10.3678 17.75 9.74128 17.289 9.49859 16.6313L9.04988 15.4152L7.78159 15.6829C7.68225 15.7039 7.58099 15.7144 7.47947 15.7143H7.47856C6.67732 15.7143 6 15.0516 6 14.203C6 13.6392 6.30098 13.1495 6.75148 12.8837L7.89299 12.2103L7.36523 10.9945C7.25853 10.7487 7.20361 10.4836 7.20389 10.2156V10.2141C7.20389 9.13045 8.08351 8.25 9.17451 8.25C9.69379 8.25 10.1669 8.451 10.5168 8.77912L10.5156 8.78033L10.5156 8.78034L10.5156 8.78036L10.5156 8.78039L10.5157 8.78042L10.5157 8.78047L10.5158 8.78051L10.5158 8.7806L10.5159 8.78065L10.516 8.78075L10.5161 8.78081L10.5162 8.78095L10.5163 8.78102L10.5164 8.78118L10.5165 8.78126L10.5167 8.78145L10.5168 8.78153L10.517 8.78176L10.5171 8.78184L10.5173 8.7821L10.5174 8.78219L10.5177 8.78248L10.5178 8.78257L10.5181 8.7829L10.5182 8.78299L10.5186 8.78336L10.5187 8.78344L10.5191 8.78385L10.5192 8.78392L10.5196 8.78438L10.5197 8.78444L10.5202 8.78495L10.5202 8.78499L10.5208 8.78556L10.5208 8.78558L10.5214 8.7862L10.5214 8.78621L10.5221 8.78686L10.5221 8.7869L10.5228 8.78755L10.5229 8.78762L10.5235 8.78827L10.5236 8.78839L10.5243 8.78903L10.5244 8.78919L10.5251 8.78982L10.5253 8.79003L10.5259 8.79065L10.5261 8.79091L10.5267 8.7915L10.5271 8.79183L10.5276 8.79239L10.528 8.79279L10.5286 8.79332L10.529 8.79379L10.5295 8.79427L10.5301 8.79483L10.5305 8.79526L10.5311 8.79591L10.5315 8.79629L10.5323 8.79702L10.5326 8.79734L10.5334 8.79818L10.5337 8.79843L10.5346 8.79938L10.5348 8.79955L10.5359 8.80062L10.5359 8.8007L10.5371 8.80188L10.5371 8.8019L10.5383 8.80309L10.5385 8.80322L10.5396 8.80434L10.5398 8.80458L10.5409 8.80562L10.5412 8.80598L10.5422 8.80693L10.5427 8.80743L10.5435 8.80827L10.5441 8.80891L10.5449 8.80964L10.5457 8.81043L10.5463 8.81105L10.5472 8.812L10.5477 8.81248L10.5488 8.81361L10.5492 8.81395L10.5505 8.81526L10.5507 8.81544L10.5522 8.81695L10.5522 8.81697L10.5538 8.81853L10.5539 8.81868L10.5554 8.82011L10.5557 8.82046L10.557 8.82173L10.5575 8.82227L10.5586 8.82338L10.5594 8.82413L10.5603 8.82506L10.5613 8.82603L10.562 8.82676L10.5632 8.82798L10.5637 8.8285L10.5652 8.82996L10.5655 8.83027L10.5672 8.83199L10.5673 8.83206L10.5691 8.83389L10.5693 8.83406L10.571 8.83574L10.5714 8.83618L10.5729 8.83763L10.5736 8.83834L10.5748 8.83954L10.5758 8.84054L10.5767 8.84148L10.578 8.84278L10.5787 8.84345L10.5803 8.84507L10.5807 8.84545L10.5826 8.8474L10.5827 8.84748L10.5848 8.84954L10.585 8.84978L10.5869 8.85162L10.5874 8.8522L10.589 8.85373L10.5899 8.85466L10.5911 8.85587L10.5924 8.85717L10.5933 8.85804L10.595 8.85972L10.5955 8.86023L10.5976 8.86231L10.5977 8.86246L10.5999 8.86471L10.6002 8.86495L10.6022 8.86699L10.6029 8.86764L10.6045 8.86929L10.6056 8.87037L10.6069 8.87162L10.6084 8.87314L10.6092 8.87398L10.6112 8.87596L10.6116 8.87637L10.614 8.87878L10.6141 8.87883L10.6165 8.88122L10.617 8.88174L10.6189 8.88369L10.6199 8.88469L10.6214 8.88618L10.6229 8.88769L10.6239 8.8887L10.626 8.89074L10.6265 8.89124L10.629 8.89381L10.6291 8.89383L10.6316 8.89641L10.6322 8.89697L10.6324 8.89712C10.6683 8.93709 10.7026 8.97856 10.7351 9.02142L10.7474 9.01213L10.7482 9.01292L10.7483 9.01306L10.7517 9.01642L10.7529 9.01768L10.7552 9.01995L10.7576 9.02236L10.7587 9.02349L10.7623 9.02706L10.7623 9.02708L10.7659 9.03064L10.7671 9.03185L10.7695 9.03425L10.7719 9.03667L10.7731 9.03787L10.7768 9.04152L10.7768 9.04155L10.7804 9.04519L10.7817 9.04647L10.7841 9.04887L10.7867 9.05144L10.7878 9.05258L10.7915 9.0563L10.7917 9.05647L10.7953 9.06005L10.7968 9.06155L10.799 9.06381L10.8019 9.06667L10.8028 9.06759L10.8066 9.0714L10.8071 9.07185L10.8105 9.07522L10.8123 9.07708L10.8143 9.07906L10.8176 9.08236L10.8182 9.08291L10.822 9.08679L10.8229 9.08769L10.8259 9.09068L10.8283 9.09308L10.8298 9.0946L10.8338 9.09852L10.8338 9.09853L10.8377 9.10248L10.8392 9.104L10.8417 9.10644L10.8457 9.11043L10.8497 9.11443L10.8537 9.11845L10.8577 9.12249L10.8618 9.12654L10.8659 9.13061L10.8699 9.1347L10.874 9.13881L10.8782 9.14293L10.8823 9.14707L10.8865 9.15122L10.8906 9.15539L10.8948 9.15958L10.899 9.16378L10.9032 9.168L10.9075 9.17224L10.9117 9.17649L10.916 9.18076L10.9203 9.18504L10.9246 9.18934L10.9289 9.19365L10.9332 9.19798L10.9376 9.20232L10.9419 9.20668L10.9463 9.21105L10.9507 9.21544L10.9551 9.21984L10.9595 9.22425L10.9639 9.22868L10.9684 9.23313L10.9728 9.23758L10.9773 9.24205L10.9818 9.24654L10.9863 9.25104L10.9908 9.25555L10.9953 9.26008L10.9999 9.26462L11.0044 9.26917L11.009 9.27373L11.0135 9.27831L11.0181 9.2829L11.0227 9.2875L11.0274 9.29212L11.032 9.29674L11.0366 9.30138L11.0413 9.30604L11.0459 9.3107L11.0506 9.31537L11.0553 9.32006L11.06 9.32476L11.0647 9.32947L11.0694 9.33419L11.0742 9.33892L11.0789 9.34367L11.0837 9.34842L11.0884 9.35319L11.0932 9.35796L11.098 9.36275L11.1028 9.36755L11.1076 9.37235L11.1124 9.37717L11.1172 9.382L11.1221 9.38683L11.1269 9.39168L11.1318 9.39654L11.1366 9.4014L11.1415 9.40628L11.1464 9.41116L11.1513 9.41606L11.1562 9.42096L11.1611 9.42587L11.166 9.43079L11.171 9.43572L11.1759 9.44066L11.1808 9.4456L11.1858 9.45056L11.1908 9.45552L11.1957 9.46049L11.2007 9.46547L11.2057 9.47046L11.2107 9.47545L11.2157 9.48045L11.2207 9.48546L11.2257 9.49048L11.2307 9.4955L11.2358 9.50053L11.2408 9.50557L11.2458 9.51061L11.2509 9.51566L11.256 9.52072L11.261 9.52578L11.2661 9.53085L11.2712 9.53592L11.2762 9.54101L11.2813 9.54609L11.2864 9.55119L11.2915 9.55628L11.2966 9.56139L11.3017 9.5665L11.3069 9.57161L11.312 9.57673L11.3171 9.58186L11.3222 9.58699L11.3274 9.59212L11.3325 9.59726L11.3376 9.6024L11.3428 9.60755L11.3479 9.6127L11.3531 9.61786L11.3583 9.62302L11.3634 9.62818L11.3686 9.63335L11.3738 9.63852L11.3789 9.6437L11.3841 9.64887L11.3893 9.65406L11.3945 9.65924L11.3997 9.66443L11.4049 9.66962L11.41 9.67481L11.4152 9.68001L11.4204 9.6852L11.4256 9.6904L11.4308 9.69561L11.436 9.70081L11.4413 9.70602L11.4465 9.71122L11.4517 9.71643L11.4569 9.72165L11.4621 9.72686L11.4673 9.73207L11.4725 9.73729L11.4777 9.7425L11.483 9.74772L11.4882 9.75294L11.4934 9.75816L11.4986 9.76338L11.5038 9.7686L11.5091 9.77382L11.5143 9.77904L11.5195 9.78426L11.5247 9.78948L11.5299 9.7947L11.5352 9.79992L11.5404 9.80514L11.5456 9.81036L11.5508 9.81558L11.556 9.82079L11.5612 9.82601L11.5665 9.83123L11.5717 9.83644L11.5769 9.84165L11.5821 9.84686L11.5873 9.85207L11.5925 9.85728L11.5977 9.86249L11.6029 9.86769L11.6081 9.87289L11.6133 9.87809L11.6185 9.88329L11.6237 9.88849L11.6289 9.89368L11.6341 9.89887L11.6393 9.90406L11.6445 9.90924L11.6497 9.91442L11.6548 9.9196L11.66 9.92477L11.6652 9.92994L11.6703 9.93511L11.6755 9.94027L11.6807 9.94543L11.6858 9.95059L11.691 9.95574L11.6961 9.96089L11.7013 9.96603L11.7064 9.97117L11.7115 9.9763L11.7167 9.98143L11.7218 9.98656L11.7269 9.99167L11.732 9.99679L11.7371 10.0019L11.7422 10.007L11.7473 10.0121L11.7524 10.0172L11.7575 10.0223L11.7626 10.0274L11.7677 10.0324L11.7727 10.0375L11.7778 10.0426L11.7829 10.0476L11.7879 10.0527L11.793 10.0577L11.798 10.0627L11.803 10.0678L11.808 10.0728L11.8131 10.0778L11.8181 10.0828L11.8231 10.0878L11.8281 10.0928L11.833 10.0978L11.838 10.1028L11.843 10.1077L11.8479 10.1127L11.8529 10.1177L11.8578 10.1226L11.8628 10.1275L11.8677 10.1325L11.8726 10.1374L11.8775 10.1423L11.8824 10.1472L11.8873 10.1521L11.8922 10.157L11.8971 10.1619L11.902 10.1667L11.9068 10.1716L11.9117 10.1764L11.9165 10.1813L11.9213 10.1861L11.9261 10.1909L11.9309 10.1957L11.9357 10.2005L11.9405 10.2053L11.9453 10.2101L11.9501 10.2148L11.9548 10.2196L11.9596 10.2243L11.9643 10.2291L11.969 10.2338L11.9737 10.2385L11.9784 10.2432L11.9831 10.2479L11.9878 10.2525L11.9924 10.2572L11.9971 10.2619L12.0017 10.2665L12.0064 10.2711L12.011 10.2757L12.0156 10.2803L13.0762 9.21967L13.0716 9.21507L13.067 9.21045L13.0624 9.20583L13.0577 9.20119L13.0531 9.19654L13.0484 9.19188L13.0438 9.1872L13.0391 9.18252L13.0344 9.17782L13.0297 9.17311L13.025 9.16839L13.0202 9.16366L13.0155 9.15892L13.0107 9.15417L13.006 9.1494L13.0012 9.14463L12.9964 9.13984L12.9916 9.13505L12.9868 9.13024L12.982 9.12542L12.9772 9.1206L12.9723 9.11576L12.9675 9.11092L12.9626 9.10606L12.9578 9.1012L12.9529 9.09632L12.948 9.09144L12.9431 9.08655L12.9382 9.08164L12.9333 9.07673L12.9284 9.07181L12.9234 9.06689L12.9185 9.06195L12.9136 9.057L12.9086 9.05205L12.9048 9.04829L13.0111 9.15036C13.3196 8.82924 13.7369 8.64023 14.1928 8.64023C14.7957 8.64023 15.3379 8.97179 15.6416 9.51049ZM11.9483 8.0917C12.1799 7.85456 12.4472 7.65398 12.7412 7.49903C13.1764 7.26964 13.67 7.14023 14.1928 7.14023C15.3737 7.14023 16.3972 7.7963 16.9483 8.77385C17.4375 8.55516 17.9673 8.44226 18.5032 8.44253C20.6289 8.44253 22.3543 10.1811 22.3543 12.3265C22.3543 14.4718 20.6289 16.2104 18.5032 16.2104C18.2434 16.2104 17.9901 16.1843 17.7421 16.135C17.2599 16.9944 16.3382 17.5783 15.2884 17.5783C14.957 17.579 14.6288 17.5208 14.319 17.4073C14.2294 17.3744 14.1412 17.337 14.055 17.2949C14.0121 17.3958 13.9641 17.4941 13.9114 17.5894C13.3647 18.5786 12.3115 19.25 11.1027 19.25C9.71839 19.25 8.54402 18.3774 8.09134 17.1506C7.88985 17.1931 7.68448 17.2145 7.47856 17.2143C5.83183 17.2143 4.5 15.8628 4.5 14.203C4.5 13.0877 5.09965 12.1167 5.98928 11.5918C5.80055 11.157 5.7034 10.688 5.70389 10.2141C5.70389 8.29833 7.25878 6.75 9.17451 6.75C9.91511 6.75 10.6042 6.98301 11.1683 7.38015C11.3677 7.52056 11.5515 7.68148 11.7164 7.85987L11.7168 7.86025L11.7196 7.86308L11.7197 7.86309L11.7225 7.86597L11.7232 7.86663L11.7254 7.86886L11.7268 7.87024L11.7283 7.87178L11.7304 7.87389L11.7313 7.87472L11.7341 7.87759L11.7343 7.87769L11.7372 7.88068L11.7379 7.88133L11.7403 7.8837L11.7417 7.88513L11.7433 7.88674L11.7455 7.88897L11.7464 7.8898L11.7494 7.89286L11.7494 7.89288L11.7526 7.89599L11.7534 7.89679L11.7557 7.89912L11.7573 7.90078L11.7588 7.90228L11.7614 7.90481L11.762 7.90546L11.7652 7.90866L11.7655 7.90889L11.7684 7.91188L11.7696 7.91302L11.7717 7.91512L11.7738 7.9172L11.7749 7.91839L11.778 7.92143L11.7782 7.92168L11.7815 7.92499L11.7823 7.92571L11.7849 7.92832L11.7866 7.93003L11.7882 7.93168L11.791 7.93441L11.7916 7.93505L11.795 7.93845L11.7954 7.93883L11.7984 7.94187L11.7999 7.9433L11.8019 7.94531L11.8044 7.94783L11.8053 7.94877L11.8088 7.95226L11.809 7.9524L11.8123 7.95576L11.8136 7.95702L11.8158 7.95929L11.8183 7.9617L11.8194 7.96283L11.823 7.9664L11.823 7.96642L11.8265 7.96998L11.8277 7.97119L11.8301 7.97359L11.8326 7.97601L11.8338 7.97721L11.8374 7.98086L11.8374 7.98089L11.8411 7.98453L11.8424 7.98581L11.8448 7.98821L11.8473 7.99078L11.8485 7.99192L11.8522 7.99564L11.8524 7.99581L11.8559 7.99939L11.8574 8.00089L11.8597 8.00315L11.8626 8.00601L11.8635 8.00693L11.8673 8.01074L11.8677 8.01119L11.8711 8.01456L11.873 8.01642L11.875 8.0184L11.8783 8.0217L11.8788 8.02225L11.8827 8.02613L11.8836 8.02703L11.8866 8.03002L11.889 8.03242L11.8905 8.03394L11.8944 8.03785L11.8944 8.03787L11.8984 8.04182L11.8999 8.04334L11.9023 8.04578L11.9063 8.04977L11.9103 8.05377L11.9143 8.05779L11.9184 8.06183L11.9224 8.06588L11.9265 8.06995L11.9306 8.07404L11.9347 8.07815L11.9388 8.08227L11.943 8.08641L11.9471 8.09056L11.9483 8.0917Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+export const FacebookIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M20 3H4c-.6 0-1 .4-1 1v16c0 .5.4 1 1 1h8.6v-7h-2.3v-2.7h2.3v-2c0-2.3 1.4-3.6 3.5-3.6 1 0 1.8.1 2.1.1v2.4h-1.4c-1.1 0-1.3.5-1.3 1.3v1.7h2.7l-.4 2.8h-2.3v7H20c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1z" />
+	</SVG>
+);
+
+export const InstagramIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<G>
+			<Path d="M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z"></Path>
+		</G>
+	</SVG>
+);

package/src/icons.native.scss

@@ -0,0 +1,19 @@
+.jetpack-gutenberg-social-icon {
+	fill: $gray-700;
+
+	&.is-facebook {
+		fill: var( --color-facebook );
+	}
+	&.is-twitter {
+		fill: var( --color-twitter );
+	}
+	&.is-linkedin {
+		fill: var( --color-linkedin );
+	}
+	&.is-tumblr {
+		fill: var( --color-tumblr );
+	}
+	&.is-google {
+		fill: var( --color-gplus );
+	}
+}

package/src/icons.scss

@@ -0,0 +1,21 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.jetpack-gutenberg-social-icon {
+	fill: $gray-700;
+
+	&.is-facebook {
+		fill: var( --color-facebook );
+	}
+	&.is-twitter {
+		fill: var( --color-twitter );
+	}
+	&.is-linkedin {
+		fill: var( --color-linkedin );
+	}
+	&.is-tumblr {
+		fill: var( --color-tumblr );
+	}
+	&.is-google {
+		fill: var( --color-gplus );
+	}
+}

package/src/is-current-user-connected.js

@@ -6,5 +6,12 @@ import getJetpackData from './get-jetpack-data';
  * @return {boolean} Whether the current user is connected.
  */
 export default function isCurrentUserConnected() {
-	return getJetpackData()?.jetpack?.is_current_user_connected ?? false;
+	if (
+		getJetpackData()?.jetpack?.is_current_user_connected ||
+		window?.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isUserConnected
+	) {
+		return true;
+	}
+
+	return false;
 }

package/src/libs/connection/index.ts

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+import { isAtomicSite, isSimpleSite } from '../../site-type-utils';
+
+const initialState = window?.JP_CONNECTION_INITIAL_STATE;
+const debug = debugFactory( 'shared-extension-utils:connection' );
+let hasCheckedConnection = false;
+
+const debugOnce = content => {
+	if ( ! hasCheckedConnection ) {
+		debug( content );
+		hasCheckedConnection = true;
+	}
+};
+
+/**
+ * Return the initial connection status.
+ *
+ * @return {boolean} true if the user is connected, false otherwise.
+ */
+export function isUserConnected(): boolean {
+	if ( isSimpleSite() ) {
+		debugOnce( 'Simple site connected ✅' );
+		return true;
+	}
+
+	if ( isAtomicSite() ) {
+		debugOnce( 'Atomic site connected ✅' );
+		return true;
+	}
+
+	if ( initialState?.connectionStatus?.isUserConnected ) {
+		debugOnce( 'Jetpack user is connected ✅' );
+		return true;
+	}
+
+	debugOnce( 'User is not connected ❌' );
+	return false;
+}
+
+/**
+ * Return whether the user can purchase plan.
+ *
+ * @return {boolean} true if the user can purchase plan, false otherwise.
+ */
+export function canUserPurchasePlan(): boolean {
+	if ( isSimpleSite() ) {
+		// Roles on simple sites can't be inferred from the connection status.
+		return true;
+	}
+
+	const permissions =
+		initialState?.userConnectionData?.currentUser?.permissions ??
+		( {} as { manage_options?: boolean } );
+
+	return ! permissions.manage_options === false;
+}