@automattic/jetpack-components 1.1.6 → 1.1.8

package/components/pricing-table/index.tsx

@@ -1,7 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
-import React, {
+import {
 	createContext,
 	useContext,
 	Children,
@@ -21,6 +21,7 @@ import {
 	PricingTableHeaderProps,
 	PricingTableItemProps,
 } from './types.ts';
+import type { FC } from 'react';
 
 const INCLUDED_TEXT = __( 'Included', 'jetpack-components' );
 const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack-components' );
@@ -49,7 +50,7 @@ const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
 	};
 };
 
-export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
+export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	isIncluded = false,
 	isComingSoon = false,
 	index = 0,
@@ -102,11 +103,11 @@ export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
 	);
 };
 
-export const PricingTableHeader: React.FC< PricingTableHeaderProps > = ( { children } ) => (
+export const PricingTableHeader: FC< PricingTableHeaderProps > = ( { children } ) => (
 	<div className={ styles.header }>{ children }</div>
 );
 
-export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
+export const PricingTableColumn: FC< PricingTableColumnProps > = ( {
 	primary = false,
 	children,
 } ) => {
@@ -130,7 +131,7 @@ export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
 	);
 };
 
-const PricingTable: React.FC< PricingTableProps > = ( {
+const PricingTable: FC< PricingTableProps > = ( {
 	title,
 	items,
 	children,

package/components/pricing-table/types.ts

@@ -1,4 +1,5 @@
 import type { Placement } from '../icon-tooltip/types.ts';
+import type { ReactElement, ReactNode } from 'react';
 
 export type PricingTableProps = {
 	/**
@@ -11,7 +12,7 @@ export type PricingTableProps = {
 	 */
 	items: {
 		name: string;
-		tooltipInfo?: React.ReactNode;
+		tooltipInfo?: ReactNode;
 		tooltipTitle?: string;
 		tooltipPlacement?: Placement;
 	}[];
@@ -19,7 +20,7 @@ export type PricingTableProps = {
 	/**
 	 * The columns to add to the table.
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 
 	/**
 	 * Whether to show the intro offer disclaimer text with the ToS.
@@ -36,14 +37,14 @@ export type PricingTableColumnProps = {
 	/**
 	 * Items to show in a column.
 	 */
-	children: React.ReactElement[];
+	children: ReactElement[];
 };
 
 export type PricingTableHeaderProps = {
 	/**
 	 * Items to show in a header.
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 };
 
 export type PricingTableItemProps = {
@@ -60,7 +61,7 @@ export type PricingTableItemProps = {
 	/**
 	 * A custom label to display instead of the default one.
 	 */
-	label?: string | number | React.ReactElement;
+	label?: string | number | ReactElement;
 
 	/**
 	 * Index of the item, relative to other PricingTableItem components. Internal use only.
@@ -70,7 +71,7 @@ export type PricingTableItemProps = {
 	/*
 	 * If the item has more description a popover info can contain that.
 	 */
-	tooltipInfo?: React.ReactNode;
+	tooltipInfo?: ReactNode;
 
 	/**
 	 * Title for the popover, not required.

package/components/product-offer/icons-card.tsx

@@ -1,17 +1,18 @@
 import { Icon, plus } from '@wordpress/icons';
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { getIconBySlug } from '../icons/index.tsx';
 import styles from './style.module.scss';
 import { IconsCardProps } from './types.ts';
+import type { FC, ReactNode } from 'react';
 
 /**
  * Icons composition for a bundle product,
  * based on the list of supported products.
  *
  * @param {IconsCardProps} props - Component props.
- * @return {React.ReactNode}      Bundle product icons react component.
+ * @return {ReactNode}      Bundle product icons react component.
  */
-export const IconsCard: React.FC< IconsCardProps > = ( { products, icon, size = 24 } ) => {
+export const IconsCard: FC< IconsCardProps > = ( { products, icon, size = 24 } ) => {
 	if ( icon ) {
 		const CustomIcon = getIconBySlug( icon );
 		return (

package/components/product-offer/index.tsx

@@ -10,15 +10,15 @@ import { IconsCard } from './icons-card.tsx';
 import { ProductOfferHeader } from './product-offer-header.tsx';
 import styles from './style.module.scss';
 import { ProductOfferProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * Product Detail component.
  *
  * @param {ProductOfferProps} props - Component props.
- * @return {React.ReactNode} - ProductOffer react component.
+ * @return {ReactNode} - ProductOffer react component.
  */
-const ProductOffer: React.FC< ProductOfferProps > = ( {
+const ProductOffer: FC< ProductOfferProps > = ( {
 	addProductUrl,
 	buttonDisclaimer,
 	buttonText = '',

package/components/product-offer/product-offer-header.tsx

@@ -3,15 +3,15 @@ import { Icon, starFilled as star } from '@wordpress/icons';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import { ProductOfferHeaderProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * Product Detail Card Header component.
  *
  * @param {ProductOfferHeaderProps} props - Component props.
- * @return {React.ReactNode}  ProductOfferHeader react component.
+ * @return {ReactNode}  ProductOfferHeader react component.
  */
-export const ProductOfferHeader: React.FC< ProductOfferHeaderProps > = ( {
+export const ProductOfferHeader: FC< ProductOfferHeaderProps > = ( {
 	title = __( 'Popular upgrade', 'jetpack-components' ),
 } ) => {
 	return (

package/components/product-offer/types.ts

@@ -1,5 +1,6 @@
 import { ProductPriceProps } from '../product-price/types.ts';
 import type { JetpackIconSlug } from '../icons/index.tsx';
+import type { ReactNode } from 'react';
 
 export type ProductOfferProps = {
 	/**
@@ -90,7 +91,7 @@ export type ProductOfferProps = {
 	/**
 	 * Content displayed below the Add button.
 	 */
-	buttonDisclaimer?: React.ReactNode;
+	buttonDisclaimer?: ReactNode;
 
 	/**
 	 * Error message.

package/components/product-price/index.tsx

@@ -10,15 +10,15 @@ import Text from '../text/index.tsx';
 import { Price } from './price.tsx';
 import styles from './style.module.scss';
 import type { ProductPriceProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * React component to render the price.
  *
  * @param {ProductPriceProps} props - Component props.
- * @return {React.ReactNode} Price react component.
+ * @return {ReactNode} Price react component.
  */
-const ProductPrice: React.FC< ProductPriceProps > = ( {
+const ProductPrice: FC< ProductPriceProps > = ( {
 	price,
 	offPrice,
 	currency = '',

package/components/product-price/price.tsx

@@ -3,15 +3,15 @@ import clsx from 'clsx';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import type { PriceProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * React component to render a Price composition.
  *
  * @param {PriceProps} props - Component props.
- * @return {React.ReactNode} -Price react component.
+ * @return {ReactNode} -Price react component.
  */
-export const Price: React.FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
+export const Price: FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
 	const classNames = clsx( styles.price, 'product-price_price', {
 		[ styles[ 'is-not-off-price' ] ]: ! isOff,
 	} );

package/components/product-price/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 export type ProductPriceProps = {
 	/**
 	 * Product price.
@@ -47,7 +49,7 @@ export type ProductPriceProps = {
 	/**
 	 * Alternative legend with HTML syntax
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 };
 
 export type PriceProps = {

package/components/progress-bar/index.tsx

@@ -7,15 +7,15 @@ import clsx from 'clsx';
  */
 import styles from './style.module.scss';
 import { ProgressBarProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * Progress Bar component
  *
  * @param {ProgressBarProps} props - Component props.
- * @return {React.ReactNode} - ProgressBar react component.
+ * @return {ReactNode} - ProgressBar react component.
  */
-const ProgressBar: React.FC< ProgressBarProps > = ( {
+const ProgressBar: FC< ProgressBarProps > = ( {
 	className,
 	progressClassName,
 	progress,

package/components/qr-code/index.tsx

@@ -1,8 +1,8 @@
 import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
-import type React from 'react';
+import type { ComponentProps, FC, ReactNode } from 'react';
 
-type QRCodeCanvasProps = React.ComponentProps< typeof QRCodeCanvas >;
-type QRCodeSVGProps = React.ComponentProps< typeof QRCodeSVG >;
+type QRCodeCanvasProps = ComponentProps< typeof QRCodeCanvas >;
+type QRCodeSVGProps = ComponentProps< typeof QRCodeSVG >;
 
 export type QRCodeProps = {
 	/**
@@ -50,9 +50,9 @@ export type QRCodeProps = {
  * Renders a QR Code.
  *
  * @param {QRCodeProps} props - Component props
- * @return {React.ReactNode} - React component.
+ * @return {ReactNode} - React component.
  */
-const QRCode: React.FC< QRCodeProps > = ( {
+const QRCode: FC< QRCodeProps > = ( {
 	value = 'https://jetpack.com',
 	size = 248,
 	bgColor,

package/components/radio-control/index.tsx

@@ -1,6 +1,7 @@
 import { RadioControl as WPRadioControl } from '@wordpress/components';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
+import type { FC, ReactNode } from 'react';
 
 interface RadioControlProps {
 	/** The current value. */
@@ -13,10 +14,10 @@ interface RadioControlProps {
 	disabled?: boolean;
 
 	/** Additional information to display below the radio control. */
-	help?: React.ReactNode;
+	help?: ReactNode;
 
 	/** The label for the radio control. */
-	label?: React.ReactNode;
+	label?: ReactNode;
 
 	/** If true, the label will only be visible to screen readers. */
 	hideLabelFromVision?: boolean;
@@ -28,7 +29,7 @@ interface RadioControlProps {
 	onChange: ( value: string ) => void;
 }
 
-const RadioControl: React.FC< RadioControlProps > = ( {
+const RadioControl: FC< RadioControlProps > = ( {
 	selected,
 	className,
 	disabled,

package/components/record-meter-bar/index.tsx

@@ -1,7 +1,8 @@
 import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import type { FC, ReactElement } from 'react';
 
 import './style.scss';
 
@@ -63,9 +64,9 @@ export type RecordMeterBarProps = {
  * Generate Record Meter bar
  *
  * @param {RecordMeterBarProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
+const RecordMeterBar: FC< RecordMeterBarProps > = ( {
 	totalCount,
 	items = [],
 	showLegendLabelBeforeCount = false,

package/components/spinner/README.md

@@ -8,10 +8,10 @@ Spinner is a React component for rendering a loading indicator.
 ## Usage
 
 ```jsx
-import React from 'react';
+import { Component } from 'react';
 import Spinner from '@automattic/jetpack-components';
 
-export default class extends React.Component {
+export default class extends Component {
 	render() {
 		return <Spinner />;
 	}

package/components/spinner/index.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import './style.scss';
 

package/components/split-button/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 import { SplitButtonProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 
 const DownIcon = () => (
 	<svg width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="10 9 4 7">
@@ -13,7 +13,7 @@ const DownIcon = () => (
 	</svg>
 );
 
-const SplitButton: React.FC< SplitButtonProps > = ( {
+const SplitButton: FC< SplitButtonProps > = ( {
 	variant,
 	controls,
 	popoverProps,

package/components/split-button/types.ts

@@ -1,14 +1,12 @@
-/**
- * External dependencies
- */
 import type { Button, DropdownMenu } from '@wordpress/components';
+import type { ComponentProps } from 'react';
 
 type AllowedDropdownMenuProps = Pick<
-	React.ComponentProps< typeof DropdownMenu >,
+	ComponentProps< typeof DropdownMenu >,
 	'controls' | 'popoverProps' | 'toggleProps' | 'label'
 >;
 
-export type SplitButtonProps = Omit< React.ComponentProps< typeof Button >, 'controls' > &
+export type SplitButtonProps = Omit< ComponentProps< typeof Button >, 'controls' > &
 	AllowedDropdownMenuProps &
 	// make `controls` prop required
 	Required< Pick< AllowedDropdownMenuProps, 'controls' > >;

package/components/stat-card/index.tsx

@@ -10,13 +10,13 @@ import clsx from 'clsx';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import { StatCardProps } from './types.ts';
-import type React from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * StatCard component
  *
  * @param {StatCardProps} props - Component props.
- * @return {React.ReactNode} - StatCard react component.
+ * @return {ReactNode} - StatCard react component.
  */
 const StatCard = ( {
 	className,

package/components/stat-card/types.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 export type StatCardProps = {
 	/**
 	 * Custom className to be inserted.
@@ -12,7 +14,7 @@ export type StatCardProps = {
 	/**
 	 * The stat card icon.
 	 */
-	icon: React.JSX.Element;
+	icon: JSX.Element;
 
 	/**
 	 * The stat label.

package/components/status/index.tsx

@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
+import type { JSX } from 'react';
 
 interface StatusProps {
 	status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
@@ -9,7 +10,7 @@ interface StatusProps {
 	className?: string;
 }
 
-const Status = ( { className, label, status = 'inactive' }: StatusProps ): React.JSX.Element => {
+const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.Element => {
 	const defaultLabels: Record< string, string > = {
 		active: __( 'Active', 'jetpack-components' ),
 		error: __( 'Error', 'jetpack-components' ),

package/components/swipeable/index.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React, { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 
 import './style.scss';
 
@@ -17,10 +18,10 @@ const TRANSITION_DURATION = '300ms';
 /**
  * Custom hook to observe and handle resize events on a DOM element.
  *
- * @return {[React.Dispatch<React.SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
+ * @return {[Dispatch<SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
  */
 function useResizeObserver(): [
-	React.Dispatch< React.SetStateAction< HTMLElement | null > >,
+	Dispatch< SetStateAction< HTMLElement | null > >,
 	ResizeObserverEntry | null,
 ] {
 	const [ observerEntry, setObserverEntry ] = useState< ResizeObserverEntry | null >( null );

package/components/terms-of-service/index.tsx

@@ -5,9 +5,10 @@ import clsx from 'clsx';
 import { getRedirectUrl } from '../../index.ts';
 import Text from '../text/index.tsx';
 import type { TermsOfServiceProps } from './types.ts';
+import type { FC, ReactNode } from 'react';
 import './styles.scss';
 
-const TermsOfService: React.FC< TermsOfServiceProps > = ( {
+const TermsOfService: FC< TermsOfServiceProps > = ( {
 	className,
 	multipleButtons,
 	agreeButtonLabel,
@@ -92,7 +93,7 @@ const TermsOfServiceTextOnly = () =>
 		}
 	);
 
-const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
+const Link: FC< { slug: string; children?: ReactNode } > = ( { slug, children } ) => (
 	<ExternalLink className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
 		{ children }
 	</ExternalLink>

package/components/text/index.tsx

@@ -1,14 +1,15 @@
 import clsx from 'clsx';
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.ts';
 import styles from './style.module.scss';
 import type { H3Props, TextProps, TitleProps } from './types.ts';
+import type { FC, ReactElement } from 'react';
 
 /**
  * Text component.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
 const Text = forwardRef< HTMLElement, TextProps >(
 	( { variant = 'body', children, component, className, ...componentProps }, ref ) => {
@@ -45,9 +46,9 @@ export default Text;
  * Heading component - Medium size.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export const H2: React.FC< TextProps > = ( { children, ...componentProps } ) => (
+export const H2: FC< TextProps > = ( { children, ...componentProps } ) => (
 	<Text variant="headline-medium" mb={ 3 } { ...componentProps }>
 		{ children }
 	</Text>
@@ -57,9 +58,9 @@ export const H2: React.FC< TextProps > = ( { children, ...componentProps } ) =>
  * Heading component - Small size,
  *
  * @param {H3Props} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export const H3: React.FC< H3Props > = ( { children, weight = 'bold', ...componentProps } ) => {
+export const H3: FC< H3Props > = ( { children, weight = 'bold', ...componentProps } ) => {
 	const variant = `headline-small${
 		weight === 'bold' ? '' : `-${ weight }`
 	}` as TextProps[ 'variant' ];
@@ -75,13 +76,9 @@ export const H3: React.FC< H3Props > = ( { children, weight = 'bold', ...compone
  * Title component, based on Text component.
  *
  * @param {TitleProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export const Title: React.FC< TitleProps > = ( {
-	children,
-	size = 'medium',
-	...componentProps
-} ) => (
+export const Title: FC< TitleProps > = ( { children, size = 'medium', ...componentProps } ) => (
 	<Text variant={ `title-${ size }` } mb={ 1 } { ...componentProps }>
 		{ children }
 	</Text>

package/components/text/types.ts

@@ -1,5 +1,5 @@
 import { VARIANTS_MAPPING } from './constants.ts';
-import type React from 'react';
+import type { CSSProperties, ElementType, FC, ReactNode } from 'react';
 
 export type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
@@ -36,10 +36,10 @@ export type TextProps = {
 	/** HTML Class */
 	className?: string;
 	/** The text itself that will be rendered. */
-	children: React.ReactNode;
+	children: ReactNode;
 	/** Force an specific tag (span, div) or use a custom component that will receive className and children */
-	component?: React.FC< { [ prop: string ]: unknown } > | React.ElementType;
-	style?: React.CSSProperties;
+	component?: FC< { [ prop: string ]: unknown } > | ElementType;
+	style?: CSSProperties;
 };
 
 export type H3Props = TextProps & {

package/components/theme-provider/index.tsx

@@ -1,6 +1,7 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import styles from './globals.module.scss';
 import { ThemeInstance, ThemeProviderProps } from './types.ts';
+import type { FC, ReactNode } from 'react';
 
 export const typography = {
 	// Headline
@@ -112,9 +113,9 @@ const setup = ( root: HTMLElement, id: string, withGlobalStyles?: boolean ) => {
  * ThemeProvider React component.
  *
  * @param {ThemeProviderProps} props - Component properties.
- * @return {React.ReactNode}        ThemeProvider component.
+ * @return {ReactNode}        ThemeProvider component.
  */
-const ThemeProvider: React.FC< ThemeProviderProps > = ( {
+const ThemeProvider: FC< ThemeProviderProps > = ( {
 	children = null,
 	targetDom,
 	id,

package/components/theme-provider/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 export type ThemeProviderProps = {
 	/**
 	 * An optional id to register and identify the provider instance.
@@ -12,7 +14,7 @@ export type ThemeProviderProps = {
 	/**
 	 * Content
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 	/**
 	 * Inser global/reset styles
 	 */

package/components/toggle-control/index.tsx

@@ -2,6 +2,7 @@ import { ToggleControl as WPToggleControl } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 import styles from './styles.module.scss';
+import type { FC, ReactNode } from 'react';
 
 interface ToggleControlProps {
 	/** Whether or not the toggle is currently enabled. */
@@ -14,13 +15,13 @@ interface ToggleControlProps {
 	disabled?: boolean;
 
 	/** Additional information to display below the toggle. */
-	help?: React.ReactNode;
+	help?: ReactNode;
 
 	/** Whether or not the toggling is currently toggling. */
 	toggling?: boolean;
 
 	/** The label for the toggle. */
-	label?: React.ReactNode;
+	label?: ReactNode;
 
 	/** The size of the toggle. */
 	size?: 'small' | 'normal';
@@ -29,7 +30,7 @@ interface ToggleControlProps {
 	onChange: ( value: boolean ) => void;
 }
 
-const ToggleControl: React.FC< ToggleControlProps > = ( {
+const ToggleControl: FC< ToggleControlProps > = ( {
 	checked,
 	className,
 	disabled,

package/components/upsell-banner/index.tsx

@@ -1,8 +1,8 @@
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import React from 'react';
 import { Button } from '@automattic/jetpack-components';
 import { UpsellBannerProps } from './types.ts';
+import type { FC, ReactNode } from 'react';
 
 import './style.scss';
 
@@ -13,9 +13,9 @@ import './style.scss';
  * - The secondary CTA is the first button, at the left position.
  *
  * @param {UpsellBannerProps} props - Component props.
- * @return {React.ReactNode} - UpsellBanner component.
+ * @return {ReactNode} - UpsellBanner component.
  */
-const UpsellBanner: React.FC< UpsellBannerProps > = props => {
+const UpsellBanner: FC< UpsellBannerProps > = props => {
 	const {
 		icon,
 		title,