@automattic/jetpack-components 1.1.7 → 1.1.9

package/components/icon-tooltip/index.tsx

@@ -1,6 +1,6 @@
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState, ReactElement, FC } from 'react';
 import Button from '../button/index.tsx';
 import Gridicon from '../gridicon/index.tsx';
 import { IconTooltipProps, Placement, Position } from './types.ts';
@@ -24,9 +24,9 @@ const placementsToPositions = ( placement: Placement ): Position => {
  * Generate Icon Tooltip
  *
  * @param {IconTooltipProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-const IconTooltip: React.FC< IconTooltipProps > = ( {
+const IconTooltip: FC< IconTooltipProps > = ( {
 	className = '',
 	iconClassName = '',
 	placement = 'bottom-end',

package/components/icon-tooltip/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 
 export type Position =
@@ -47,7 +49,7 @@ export type IconTooltipProps = {
 	/**
 	 * The main body content of Popover.
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 
 	/**
 	 * The icon square width and height size (in px) also calculate the Popover shift.

package/components/icons/index.tsx

@@ -3,15 +3,15 @@ import clsx from 'clsx';
 import { SocialLogo } from 'social-logos';
 import styles from './style.module.scss';
 import { BaseIconProps } from './types.ts';
-import type React from 'react';
+import type { ComponentProps, ComponentType, FC, ReactNode } from 'react';
 
 /**
  * Icon Wrapper component.
  *
  * @param {BaseIconProps} props - Component props.
- * @return {React.ReactNode} Icon Wrapper component.
+ * @return {ReactNode} Icon Wrapper component.
  */
-const IconWrapper: React.FC< BaseIconProps > = ( {
+const IconWrapper: FC< BaseIconProps > = ( {
 	className,
 	size = 24,
 	viewBox = '0 0 24 24',
@@ -38,7 +38,7 @@ const IconWrapper: React.FC< BaseIconProps > = ( {
 	);
 };
 
-export const AntiSpamIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const AntiSpamIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path
 			d="M13.2,4.7l4.7,12.8c0.4,1.1,1,1.5,2.1,1.6c0.1,0,0.1,0,0.1,0l0.1,0.1l0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1
@@ -67,7 +67,7 @@ export const AntiSpamIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, co
 	</IconWrapper>
 );
 
-export const BackupIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const BackupIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path
 			d="M2.1,5.8c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.5,0.1-0.7c0.1-0.4,0.4-0.6,0.7-0.8l8.3-2.9c0.1-0.1,0.3-0.1,0.4-0.1l0.5,0.1
@@ -88,7 +88,7 @@ export const BackupIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, colo
 	</IconWrapper>
 );
 
-export const BoostIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const BoostIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path
 			fillRule="evenodd"
@@ -98,49 +98,44 @@ export const BoostIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color
 	</IconWrapper>
 );
 
-export const CrmIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const CrmIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path d="M15.5 9.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm-2.25 6v-2a2.75 2.75 0 0 0-2.75-2.75h-4A2.75 2.75 0 0 0 3.75 15v2h1.5v-2c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v2h1.5Zm7-2v2h-1.5v-2c0-.69-.56-1.25-1.25-1.25H15v-1.5h2.5A2.75 2.75 0 0 1 20.25 15ZM9.5 8.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1.5 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
 	</IconWrapper>
 );
 
-export const ExtrasIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const ExtrasIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path d="M18.5 5.5V8H20V5.5h2.5V4H20V1.5h-1.5V4H16v1.5h2.5ZM12 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6h-1.5v6a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h6V4Z" />
 	</IconWrapper>
 );
 
-export const ProtectIcon: React.FC< BaseIconProps > = ( {
-	opacity = 1,
-	size,
-	className,
-	color,
-} ) => (
+export const ProtectIcon: FC< BaseIconProps > = ( { opacity = 1, size, className, color } ) => (
 	<IconWrapper className={ className } size={ size } opacity={ opacity } color={ color }>
 		<Path d="M12 3.17627L18.75 6.24445V10.8183C18.75 14.7173 16.2458 18.4089 12.7147 19.5735C12.2507 19.7265 11.7493 19.7265 11.2853 19.5735C7.75416 18.4089 5.25 14.7173 5.25 10.8183V6.24445L12 3.17627ZM6.75 7.21032V10.8183C6.75 14.1312 8.89514 17.2057 11.7551 18.149C11.914 18.2014 12.086 18.2014 12.2449 18.149C15.1049 17.2057 17.25 14.1312 17.25 10.8183V7.21032L12 4.82396L6.75 7.21032Z" />
 		<Path d="M15.5291 10.0315L11.1818 14.358L8.47095 11.66L9.52907 10.5968L11.1818 12.2417L14.4709 8.96826L15.5291 10.0315Z" />
 	</IconWrapper>
 );
 
-export const ScanIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const ScanIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path d="m12 3.176 6.75 3.068v4.574c0 3.9-2.504 7.59-6.035 8.755a2.283 2.283 0 0 1-1.43 0c-3.53-1.164-6.035-4.856-6.035-8.755V6.244L12 3.176ZM6.75 7.21v3.608c0 3.313 2.145 6.388 5.005 7.33.159.053.331.053.49 0 2.86-.942 5.005-4.017 5.005-7.33V7.21L12 4.824 6.75 7.21Z" />
 	</IconWrapper>
 );
 
-export const SearchIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const SearchIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path d="M17.5 11.5a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm1.5 0a5.5 5.5 0 0 1-9.142 4.121l-3.364 2.943-.988-1.128 3.373-2.952A5.5 5.5 0 1 1 19 11.5Z" />
 	</IconWrapper>
 );
 
-export const SocialIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const SocialIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path d="M15.5 3.97809V18.0219L7.5 15.5977V20H6V15.1431L3.27498 14.3173C2.22086 13.9979 1.5 13.0262 1.5 11.9248V10.0752C1.5 8.97375 2.22087 8.00207 3.27498 7.68264L15.5 3.97809ZM14 16L7.5 14.0303L7.5 7.96969L14 5.99999V16ZM6 8.42423L6 13.5757L3.70999 12.8818C3.28835 12.754 3 12.3654 3 11.9248V10.0752C3 9.63462 3.28835 9.24595 3.70999 9.11818L6 8.42423ZM17.5 11.75H21.5V10.25H17.5V11.75ZM21.5 16L17.5 15V13.5L21.5 14.5V16ZM17.5 8.5L21.5 7.5V6L17.5 7V8.5Z" />
 	</IconWrapper>
 );
 
-export const VideopressIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
+export const VideopressIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => (
 	<IconWrapper size={ size } opacity={ opacity } color={ color }>
 		<Path
 			fillRule="evenodd"
@@ -152,7 +147,7 @@ export const VideopressIcon: React.FC< BaseIconProps > = ( { opacity = 1, size,
 	</IconWrapper>
 );
 
-export const StarIcon: React.FC< BaseIconProps > = ( {
+export const StarIcon: FC< BaseIconProps > = ( {
 	size,
 	className = styles[ 'star-icon' ],
 	color,
@@ -162,7 +157,7 @@ export const StarIcon: React.FC< BaseIconProps > = ( {
 	</IconWrapper>
 );
 
-export const CheckmarkIcon: React.FC< BaseIconProps > = ( {
+export const CheckmarkIcon: FC< BaseIconProps > = ( {
 	size,
 	className = styles[ 'checkmark-icon' ],
 	color,
@@ -172,7 +167,7 @@ export const CheckmarkIcon: React.FC< BaseIconProps > = ( {
 	</IconWrapper>
 );
 
-export const ClipboardIcon: React.FC< BaseIconProps > = ( {
+export const ClipboardIcon: FC< BaseIconProps > = ( {
 	size,
 	className = styles[ 'clipboard-icon' ],
 	color,
@@ -182,11 +177,7 @@ export const ClipboardIcon: React.FC< BaseIconProps > = ( {
 	</IconWrapper>
 );
 
-export const JetpackIcon: React.FC< BaseIconProps > = ( {
-	size,
-	className = styles.jetpack,
-	color,
-} ) => {
+export const JetpackIcon: FC< BaseIconProps > = ( { size, className = styles.jetpack, color } ) => {
 	return (
 		<IconWrapper className={ className } size={ size } color={ color } viewBox="0 0 32 32">
 			<Path
@@ -199,7 +190,7 @@ export const JetpackIcon: React.FC< BaseIconProps > = ( {
 	);
 };
 
-export const ShareIcon: React.FC< BaseIconProps > = ( { size = 16, className, color } ) => {
+export const ShareIcon: FC< BaseIconProps > = ( { size = 16, className, color } ) => {
 	return (
 		<IconWrapper className={ className } size={ size } color={ color } viewBox="0 0 16 16">
 			<Path
@@ -212,7 +203,7 @@ export const ShareIcon: React.FC< BaseIconProps > = ( { size = 16, className, co
 	);
 };
 
-export const AiIcon: React.FC< BaseIconProps > = ( {
+export const AiIcon: FC< BaseIconProps > = ( {
 	size = 24,
 	color = '#069e08', // JP green
 } ) => {
@@ -234,7 +225,7 @@ export const AiIcon: React.FC< BaseIconProps > = ( {
 	);
 };
 
-export const StatsIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => {
+export const StatsIcon: FC< BaseIconProps > = ( { opacity = 1, size, color } ) => {
 	return (
 		<IconWrapper size={ size } opacity={ opacity } color={ color }>
 			<Path
@@ -278,7 +269,7 @@ export type IconSlug = keyof IconsMap;
  * Return icon component by slug.
  *
  * @param {string} slug - Icon slug.
- * @return {React.ComponentType<BaseIconProps>}   Icon component.
+ * @return {ComponentType<BaseIconProps>}   Icon component.
  */
 export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[ Slug ] {
 	if ( ! iconsMap[ slug ] ) {
@@ -288,8 +279,8 @@ export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[
 	return iconsMap[ slug ];
 }
 
-export const SocialServiceIcon: React.FC< {
-	serviceName: React.ComponentProps< typeof SocialLogo >[ 'icon' ];
+export const SocialServiceIcon: FC< {
+	serviceName: ComponentProps< typeof SocialLogo >[ 'icon' ];
 	className?: string;
 	iconSize?: number;
 } > = ( { serviceName, className, iconSize } ) => {

package/components/icons/types.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { ReactNode } from 'react';
 
 export type BaseIconProps = {
 	/**
@@ -19,7 +19,7 @@ export type BaseIconProps = {
 	/**
 	 * Icon component children.
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 
 	/**
 	 * Icon class name. Optional.

package/components/indeterminate-progress-bar/index.tsx

@@ -8,15 +8,15 @@ import clsx from 'clsx';
  */
 import styles from './style.module.scss';
 import { IndeterminateProgressBarProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * Indeterminate Progress Bar component
  *
  * @param {IndeterminateProgressBarProps} props - Component props.
- * @return {React.ReactNode} - IndeterminateProgressBar react component.
+ * @return {ReactNode} - IndeterminateProgressBar react component.
  */
-const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( { className } ) => {
+const IndeterminateProgressBar: FC< IndeterminateProgressBarProps > = ( { className } ) => {
 	return (
 		<div
 			className={ clsx( className, styles[ 'indeterminate-progress-bar' ] ) }

package/components/jetpack-footer/index.tsx

@@ -1,7 +1,6 @@
 import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
-import React from 'react';
 import { getRedirectUrl } from '../../index.ts';
 import getSiteAdminUrl from '../../tools/get-site-admin-url/index.ts';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
@@ -9,12 +8,13 @@ import './style.scss';
 import JetpackLogo from '../jetpack-logo/index.tsx';
 import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
+import type { FC, ReactNode } from 'react';
 
-const JetpackIcon: React.FC = () => (
+const JetpackIcon: FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
 );
 
-const ExternalIcon: React.FC = () => (
+const ExternalIcon: FC = () => (
 	<>
 		<Icon icon={ external } size={ 16 } />
 		<span className="jp-dashboard-footer__accessible-external-link">
@@ -30,9 +30,9 @@ const ExternalIcon: React.FC = () => (
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {React.ReactNode} JetpackFooter component.
+ * @return {ReactNode} JetpackFooter component.
  */
-const JetpackFooter: React.FC< JetpackFooterProps > = ( {
+const JetpackFooter: FC< JetpackFooterProps > = ( {
 	moduleName = __( 'Jetpack', 'jetpack-components' ),
 	className,
 	moduleNameHref = 'https://jetpack.com',

package/components/jetpack-logo/index.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { JetpackLogoProps } from './types.ts';
+import type { FC } from 'react';
 
-const JetpackLogo: React.FC< JetpackLogoProps > = ( {
+const JetpackLogo: FC< JetpackLogoProps > = ( {
 	logoColor = '#069e08',
 	showText = true,
 	className,

package/components/jetpack-protect-logo/index.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { JetpackProtectLogoProps } from './types.ts';
+import type { FC } from 'react';
 
-const JetpackProtectLogo: React.FC< JetpackProtectLogoProps > = ( {
+const JetpackProtectLogo: FC< JetpackProtectLogoProps > = ( {
 	logoColor = '#069e08',
 	showText = true,
 	className,

package/components/jetpack-search-logo/index.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { JetpackSearchLogoProps } from './types.ts';
+import type { FC } from 'react';
 
-const JetpackSearchLogo: React.FC< JetpackSearchLogoProps > = ( {
+const JetpackSearchLogo: FC< JetpackSearchLogoProps > = ( {
 	logoColor = '#069e08',
 	showText = true,
 	className,

package/components/jetpack-vaultpress-backup-logo/index.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { JetpackLogoProps } from './types.ts';
+import type { FC } from 'react';
 
-const JetpackVaultPressBackupLogo: React.FC< JetpackLogoProps > = ( {
+const JetpackVaultPressBackupLogo: FC< JetpackLogoProps > = ( {
 	showText = true,
 	className,
 	height = 32,

package/components/jetpack-videopress-logo/index.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { JetpackLogoProps } from './types.tsx';
+import type { FC } from 'react';
 
-const JetpackVideoPressLogo: React.FC< JetpackLogoProps > = ( {
+const JetpackVideoPressLogo: FC< JetpackLogoProps > = ( {
 	showText = true,
 	className,
 	height = 32,

package/components/layout/col/index.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { createElement } from 'react';
 import { ColProps } from '../types.ts';
 import styles from './style.module.scss';
-import type React from 'react';
+import type { FC, ReactElement } from 'react';
 
 const smCols = Number( styles.smCols );
 const mdCols = Number( styles.mdCols );
@@ -12,9 +12,9 @@ const lgCols = Number( styles.lgCols );
  * The basic Col component.
  *
  * @param {ColProps} props - Component properties.
- * @return {React.ReactElement}   Col component.
+ * @return {ReactElement}   Col component.
  */
-const Col: React.FC< ColProps > = props => {
+const Col: FC< ColProps > = props => {
 	const { children, tagName = 'div', className } = props;
 
 	const sm = Math.min( smCols, typeof props.sm === 'number' ? props.sm : smCols ); // max of 4, if undefined = 4

package/components/layout/container/index.tsx

@@ -2,14 +2,14 @@ import clsx from 'clsx';
 import { createElement, forwardRef, useMemo } from 'react';
 import { ContainerProps } from '../types.ts';
 import styles from './style.module.scss';
-import type React from 'react';
+import type { MutableRefObject, ReactElement } from 'react';
 
 /**
  * JP Container
  *
- * @param {ContainerProps}         props - Component properties.
- * @param {React.MutableRefObject} ref   - Ref to the component
- * @return {React.ReactElement}   Container component.
+ * @param {ContainerProps}   props - Component properties.
+ * @param {MutableRefObject} ref   - Ref to the component
+ * @return {ReactElement}   Container component.
  */
 const Container = (
 	{
@@ -20,8 +20,8 @@ const Container = (
 		horizontalGap = 1,
 		horizontalSpacing = 1,
 	}: ContainerProps,
-	ref: React.MutableRefObject< HTMLElement | null >
-): React.ReactElement => {
+	ref: MutableRefObject< HTMLElement | null >
+): ReactElement => {
 	const containerStyle = useMemo( () => {
 		const padding = `calc( var(--horizontal-spacing) * ${ horizontalSpacing } )`;
 		const rowGap = `calc( var(--horizontal-spacing) * ${ horizontalGap } )`;

package/components/layout/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 type ColSpan = number | { start: number; end: number };
 
 export type ColProps = {
@@ -29,7 +31,7 @@ export type ColProps = {
 	/**
 	 * Children to be inserted.
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 };
 
 export type ContainerProps = {
@@ -61,5 +63,5 @@ export type ContainerProps = {
 	/**
 	 * Children to be inserted.
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 };

package/components/loading-placeholder/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
 import styles from './style.module.scss';
+import type { ReactNode } from 'react';
 
 const LoadingPlaceholder = ( {
 	children = null,
@@ -8,7 +8,7 @@ const LoadingPlaceholder = ( {
 	height = null,
 	className = '',
 }: {
-	children?: React.ReactNode;
+	children?: ReactNode;
 	width?: number | string;
 	height?: number;
 	className?: string;

package/components/notice/index.tsx

@@ -1,7 +1,7 @@
 import { Icon, warning, info, check, close } from '@wordpress/icons';
 import clsx from 'clsx';
-import React from 'react';
 import styles from './style.module.scss';
+import type { Component, FC, ReactElement, ReactNode } from 'react';
 
 type NoticeProps = {
 	/** The severity of the alert. */
@@ -11,7 +11,7 @@ type NoticeProps = {
 	title?: string;
 
 	/** A list of action elements to show across the bottom */
-	actions?: React.ReactNode[];
+	actions?: ReactNode[];
 
 	/** Hide close button */
 	hideCloseButton?: boolean;
@@ -20,7 +20,7 @@ type NoticeProps = {
 	onClose?: () => void;
 
 	/** Children to be rendered inside the alert. */
-	children: React.ReactNode;
+	children: ReactNode;
 };
 
 const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
@@ -41,16 +41,16 @@ const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
 /**
  * Notice component
  *
- * @param {object}            props                 - The component properties.
- * @param {string}            props.level           - The notice level: error, warning, info, success.
- * @param {boolean}           props.hideCloseButton - Whether to hide the close button.
- * @param {Function}          props.onClose         - The function to call when the close button is clicked.
- * @param {string}            props.title           - The title of the notice.
- * @param {React.ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {React.Component}   props.children        - The notice content.
- * @return {React.ReactElement}              The `Notice` component.
+ * @param {object}      props                 - The component properties.
+ * @param {string}      props.level           - The notice level: error, warning, info, success.
+ * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
+ * @param {Function}    props.onClose         - The function to call when the close button is clicked.
+ * @param {string}      props.title           - The title of the notice.
+ * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
+ * @param {Component}   props.children        - The notice content.
+ * @return {ReactElement}              The `Notice` component.
  */
-const Notice: React.FC< NoticeProps > = ( {
+const Notice: FC< NoticeProps > = ( {
 	level = 'info',
 	title,
 	children,

package/components/number-slider/index.tsx

@@ -1,7 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
+import { useState } from 'react';
 import ReactSlider, { ReactSliderProps } from 'react-slider';
 import { NumberSliderProps } from './types.ts';
+import type { ComponentType, FC, ReactElement } from 'react';
 import './style.scss';
 
 /**
@@ -9,9 +10,9 @@ import './style.scss';
  * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
  *
  * @param {NumberSliderProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-const NumberSlider: React.FC< NumberSliderProps > = ( {
+const NumberSlider: FC< NumberSliderProps > = ( {
 	className,
 	maxValue = 100,
 	minValue = 0,
@@ -22,7 +23,7 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 	onAfterChange,
 	renderThumb,
 } ) => {
-	const [ isThumbHolding, setIsThumbHolding ] = React.useState( false );
+	const [ isThumbHolding, setIsThumbHolding ] = useState( false );
 
 	const componentClassName = clsx( 'jp-components-number-slider', className, {
 		'jp-components-number-slider--is-holding': isThumbHolding,
@@ -60,7 +61,7 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 	 * Type casting to prevent TypeScript error:
 	 * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
 	 */
-	const TypedReactSlider = ReactSlider as unknown as React.ComponentType< ReactSliderProps >;
+	const TypedReactSlider = ReactSlider as unknown as ComponentType< ReactSliderProps >;
 
 	return (
 		<div className={ componentClassName } data-testid="number-slider">

package/components/number-slider/types.ts

@@ -1,4 +1,4 @@
-import type { HTMLProps, RefCallback } from 'react';
+import type { HTMLProps, RefCallback, JSX } from 'react';
 
 interface HTMLPropsWithRefCallback< T > extends HTMLProps< T > {
 	ref: RefCallback< T >;
@@ -54,5 +54,5 @@ export type NumberSliderProps = {
 	renderThumb?: (
 		props: HTMLPropsWithRefCallback< HTMLDivElement >,
 		state: { index: number; value: number | ReadonlyArray< number >; valueNow: number }
-	) => React.JSX.Element | null;
+	) => JSX.Element | null;
 };

package/components/popover/index.tsx

@@ -1,12 +1,13 @@
 import './style.scss';
+import type { FC, ReactNode } from 'react';
 
 type PopoverProps = {
-	action: React.ReactNode;
-	icon?: React.ReactNode;
-	children?: React.ReactNode;
+	action: ReactNode;
+	icon?: ReactNode;
+	children?: ReactNode;
 };
 
-const Popover: React.FC< PopoverProps > = ( { icon, children, action } ) => {
+const Popover: FC< PopoverProps > = ( { icon, children, action } ) => {
 	return (
 		<div className="jp-popover">
 			<div className="jp-popover__icon">{ icon }</div>

package/components/pricing-card/index.tsx

@@ -5,7 +5,7 @@ import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import TermsOfService from '../terms-of-service/index.tsx';
 import type { PricingCardProps } from './types.ts';
 import type { CurrencyObject } from '@automattic/number-formatters';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 import './style.scss';
 
@@ -25,9 +25,9 @@ const showPriceDecimals = ( currencyObject: CurrencyObject ): boolean => {
  * The Pricing card component.
  *
  * @param {PricingCardProps} props -- The component props.
- * @return {React.ReactNode} The rendered component.
+ * @return {ReactNode} The rendered component.
  */
-const PricingCard: React.FC< PricingCardProps > = ( {
+const PricingCard: FC< PricingCardProps > = ( {
 	currencyCode = 'USD',
 	priceDetails = __( '/month, paid yearly', 'jetpack-components' ),
 	...props

package/components/pricing-card/types.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { Button } from '@wordpress/components';
-import type React from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 export type PricingCardProps = {
 	/**
@@ -12,7 +12,7 @@ export type PricingCardProps = {
 	/**
 	 * The Icon.
 	 */
-	icon?: string | React.ReactNode;
+	icon?: string | ReactNode;
 	/**
 	 * Price before discount.
 	 */
@@ -36,17 +36,17 @@ export type PricingCardProps = {
 	/**
 	 * The CTA callback to be called on click.
 	 */
-	onCtaClick?: React.ComponentProps< typeof Button >[ 'onClick' ];
+	onCtaClick?: ComponentProps< typeof Button >[ 'onClick' ];
 	/**
 	 * Optional informative text.
 	 */
-	infoText?: React.ReactNode;
+	infoText?: ReactNode;
 	/**
 	 * The TOS copy.
 	 */
-	tosText?: React.ReactNode;
+	tosText?: ReactNode;
 	/**
 	 * Optional Child nodes
 	 */
-	children?: React.ReactNode;
+	children?: ReactNode;
 };