@automattic/jetpack-components 1.1.6 → 1.1.8

package/build/components/toggle-control/index.d.ts

@@ -1,3 +1,4 @@
+import type { FC, ReactNode } from 'react';
 interface ToggleControlProps {
     /** Whether or not the toggle is currently enabled. */
     checked?: boolean;
@@ -6,15 +7,15 @@ interface ToggleControlProps {
     /** Whether or not the toggle is currently disabled. */
     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';
     /** A callback function invoked when the toggle is clicked. */
     onChange: (value: boolean) => void;
 }
-declare const ToggleControl: React.FC<ToggleControlProps>;
+declare const ToggleControl: FC<ToggleControlProps>;
 export default ToggleControl;

package/build/components/upsell-banner/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { UpsellBannerProps } from './types.ts';
+import type { FC } from 'react';
 import './style.scss';
 /**
  * Upsell banner component.
@@ -8,7 +8,7 @@ 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.
  */
-declare const UpsellBanner: React.FC<UpsellBannerProps>;
+declare const UpsellBanner: FC<UpsellBannerProps>;
 export default UpsellBanner;

package/build/components/upsell-banner/index.js

@@ -10,7 +10,7 @@ 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 = props => {
     const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;

package/components/action-button/index.jsx

@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import React from 'react';
 import Button from '../button/index.tsx';
 import styles from './style.module.scss';
 
@@ -20,7 +13,7 @@ import styles from './style.module.scss';
  * It is useful to async actions when the user has to wait the result of a request or process.
  *
  * @param {object} props - The properties.
- * @return {React.ReactNode} The `ActionButton` component.
+ * @return {import('react').ReactNode} The `ActionButton` component.
  */
 const ActionButton = props => {
 	const {

package/components/action-popover/index.tsx

@@ -16,7 +16,6 @@ import styles from './styles.module.scss';
  * Types
  */
 import { ActionPopoverProps } from './types.ts';
-import type React from 'react';
 
 const ActionPopover = ( {
 	hideCloseButton = false,

package/components/action-popover/types.ts

@@ -2,17 +2,18 @@
  * Types
  */
 import type { Popover } from '@wordpress/components';
+import type { ComponentProps, ReactNode } from 'react';
 
-export type ActionPopoverProps = React.ComponentProps< typeof Popover > & {
+export type ActionPopoverProps = ComponentProps< typeof Popover > & {
 	anchor?: Element;
 	offset?: number;
 } & {
 	hideCloseButton?: boolean;
 	title: string;
-	children: React.ReactNode;
+	children: ReactNode;
 	step?: number;
 	totalSteps?: number;
-	buttonContent?: React.ReactNode;
+	buttonContent?: ReactNode;
 	buttonDisabled?: boolean;
 	buttonHref?: string;
 	buttonExternalLink?: boolean;

package/components/admin-page/index.tsx

@@ -8,7 +8,7 @@ import Col from '../layout/col/index.tsx';
 import Container from '../layout/container/index.tsx';
 import styles from './style.module.scss';
 import type { AdminPageProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.
@@ -16,9 +16,9 @@ import type React from 'react';
  * All content must be passed as children wrapped in as many <AdminSection> elements as needed.
  *
  * @param {AdminPageProps} props - Component properties.
- * @return {React.ReactNode} AdminPage component.
+ * @return {ReactNode} AdminPage component.
  */
-const AdminPage: React.FC< AdminPageProps > = ( {
+const AdminPage: FC< AdminPageProps > = ( {
 	children,
 	className,
 	moduleName = __( 'Jetpack', 'jetpack-components' ),

package/components/admin-page/types.ts

@@ -1,10 +1,11 @@
 import type { JetpackFooterMenuItem } from '../jetpack-footer/types.ts';
+import type { ReactNode } from 'react';
 
 export type AdminPageProps = {
 	/**
 	 * The page content
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 
 	/**
 	 * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
@@ -19,7 +20,7 @@ export type AdminPageProps = {
 	/**
 	 * Custom header. Optional
 	 */
-	header?: React.ReactNode;
+	header?: ReactNode;
 
 	/**
 	 * Whether or not to display the Footer

package/components/admin-section/basic/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
 import styles from './style.module.scss';
 import type { AdminSectionBaseProps } from '../types.ts';
+import type { ReactNode, FC } from 'react';
 
 /**
  * This is the wrapper component to build sections within your admin page.
  *
  * @param {AdminSectionBaseProps} props - Component properties.
- * @return {React.ReactNode} AdminSection component.
+ * @return {ReactNode} AdminSection component.
  */
-const AdminSection: React.FC< AdminSectionBaseProps > = ( { children } ) => {
+const AdminSection: FC< AdminSectionBaseProps > = ( { children } ) => {
 	return <div className={ styles.section }>{ children }</div>;
 };
 

package/components/admin-section/hero/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
 import styles from './style.module.scss';
 import type { AdminSectionBaseProps } from '../types.ts';
+import type { Component, FC } from 'react';
 
 /**
  * The wrapper component for a Hero Section to be used in admin pages.
  *
  * @param {AdminSectionBaseProps} props - Component properties.
- * @return {React.Component} AdminSectionHero component.
+ * @return {Component} AdminSectionHero component.
  */
-const AdminSectionHero: React.FC< AdminSectionBaseProps > = ( { children } ) => {
+const AdminSectionHero: FC< AdminSectionBaseProps > = ( { children } ) => {
 	return <div className={ styles[ 'section-hero' ] }>{ children }</div>;
 };
 

package/components/admin-section/types.ts

@@ -1,7 +1,9 @@
+import type { ReactNode } from 'react';
+
 export type AdminSectionBaseProps = {
 	/**
 	 * The section content
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 	className?: string;
 };

package/components/alert/index.tsx

@@ -1,7 +1,7 @@
 import { Icon, warning, info, check } from '@wordpress/icons';
 import clsx from 'clsx';
-import React from 'react';
 import styles from './style.module.scss';
+import type { ReactNode, Component, ReactElement, FC } from 'react';
 
 type AlertProps = {
 	/** The severity of the alert. */
@@ -11,7 +11,7 @@ type AlertProps = {
 	showIcon?: boolean;
 
 	/** Children to be rendered inside the alert. */
-	children: React.ReactNode;
+	children: ReactNode;
 
 	/** Wrapper class name */
 	className?: string;
@@ -35,19 +35,14 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
 /**
  * Alert component
  *
- * @param {object}          props           - The component properties.
- * @param {string}          props.level     - The alert level: error, warning, info, success.
- * @param {boolean}         props.showIcon  - Whether to show the alert icon.
- * @param {string}          props.className - The wrapper class name.
- * @param {React.Component} props.children  - The alert content.
- * @return {React.ReactElement}             The `Alert` component.
+ * @param {object}    props           - The component properties.
+ * @param {string}    props.level     - The alert level: error, warning, info, success.
+ * @param {boolean}   props.showIcon  - Whether to show the alert icon.
+ * @param {string}    props.className - The wrapper class name.
+ * @param {Component} props.children  - The alert content.
+ * @return {ReactElement}             The `Alert` component.
  */
-const Alert: React.FC< AlertProps > = ( {
-	level = 'warning',
-	children,
-	showIcon = true,
-	className,
-} ) => {
+const Alert: FC< AlertProps > = ( { level = 'warning', children, showIcon = true, className } ) => {
 	const classes = clsx( styles.container, styles[ `is-${ level }` ], className );
 
 	return (

package/components/automattic-byline-logo/index.tsx

@@ -1,15 +1,15 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React from 'react';
 import { AutomatticBylineLogoProps } from './types.ts';
+import type { ReactNode, FC } from 'react';
 
 /**
  * Automattic "By line" Logo component.
  *
  * @param {AutomatticBylineLogoProps} props - Component properties.
- * @return {React.ReactNode} AutomatticBylineLogo component.
+ * @return {ReactNode} AutomatticBylineLogo component.
  */
-const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
+const AutomatticBylineLogo: FC< AutomatticBylineLogoProps > = ( {
 	title = __( 'An Automattic Airline', 'jetpack-components' ),
 	height = 7,
 	className,

package/components/automattic-byline-logo/types.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
+import type { SVGProps } from 'react';
 
-export interface AutomatticBylineLogoProps extends React.SVGProps< SVGSVGElement > {
+export interface AutomatticBylineLogoProps extends SVGProps< SVGSVGElement > {
 	/**
 	 * Title for SVG.
 	 */

package/components/automattic-for-agencies-logo/index.tsx

@@ -1,18 +1,18 @@
 import { Path, SVG } from '@wordpress/components';
-import React from 'react';
+import type { ReactElement } from 'react';
 
 /**
  * Automattic for Agencies Logo component
  *
  * @param {object} props       - Component props
  * @param {string} props.color - Color code for the logo text
- * @return {React.ReactElement} Component template
+ * @return {ReactElement} Component template
  */
 export default function AutomatticForAgenciesLogo( {
 	color = '#FFFFFF',
 }: {
 	color: string;
-} ): React.ReactElement {
+} ): ReactElement {
 	return (
 		<SVG
 			clipRule="evenodd"

package/components/automattic-icon-logo/index.tsx

@@ -1,5 +1,5 @@
 import { Path, SVG } from '@wordpress/components';
-import React from 'react';
+import type { ReactElement } from 'react';
 
 /**
  * Automattic Icon Logo component
@@ -7,7 +7,7 @@ import React from 'react';
  * @param {object} props            - Component props
  * @param {string} props.innerColor - Color code for the line in the middle of the logo.
  * @param {string} props.outerColor - Color code for the logo's outer
- * @return {React.ReactElement} Component template
+ * @return {ReactElement} Component template
  */
 export default function AutomatticIconLogo( {
 	innerColor = '#00A3E0',
@@ -15,7 +15,7 @@ export default function AutomatticIconLogo( {
 }: {
 	innerColor: string;
 	outerColor: string;
-} ): React.ReactElement {
+} ): ReactElement {
 	return (
 		<SVG
 			clipRule="evenodd"

package/components/badge/index.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
 import styles from './style.module.scss';
+import type { ReactNode, ReactElement, FC } from 'react';
 
 type BadgeProps = {
-	children?: React.ReactNode;
+	children?: ReactNode;
 	className?: string;
 	variant?: 'success' | 'warning' | 'danger';
 	[ key: string ]: unknown;
@@ -17,9 +17,9 @@ type BadgeProps = {
  * @param {JSX.Element} props.children  - Badge text or content.
  * @param {string}      props.className - Additional class name to pass to the Badge component.
  *
- * @return {React.ReactElement} The `Badge` component.
+ * @return {ReactElement} The `Badge` component.
  */
-const Badge: React.FC< BadgeProps > = ( { children, className, variant, ...props } ) => {
+const Badge: FC< BadgeProps > = ( { children, className, variant, ...props } ) => {
 	const classes = clsx(
 		styles.badge,
 		{

package/components/boost-score-graph/index.tsx

@@ -1,7 +1,7 @@
-import React, { type FunctionComponent } from 'react';
 import Text from '../text/index.tsx';
 import Background from './background.tsx';
 import UplotLineChart from './uplot-line-chart.tsx';
+import type { FunctionComponent, ReactElement } from 'react';
 import './style.scss';
 
 export interface Period {
@@ -44,7 +44,7 @@ export type ScoreGraphAlignedData = [
  * @param {string}               props.title             - Title for the chart.
  * @param {Period[]}             props.periods           - The periods to display in the chart.
  * @param {boolean}              [props.isLoading=false] - Whether the component is in a loading state.
- * @return {React.ReactElement} The JSX element representing the BoostScoreGraph component, or null if loading.
+ * @return {ReactElement} The JSX element representing the BoostScoreGraph component, or null if loading.
  */
 export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 	periods = [],

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -1,6 +1,6 @@
 import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
-import React, { useMemo, useRef, useCallback } from 'react';
+import { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { getUserLocale } from '../../lib/locale/index.ts';
@@ -12,6 +12,7 @@ import { tooltipsPlugin } from './tooltips-plugin.ts';
 import { useBoostScoreTransform } from './use-boost-score-transform.ts';
 import useResize from './use-resize.ts';
 import './style-uplot.scss';
+import type { ReactElement, RefObject, ComponentType } from 'react';
 
 const DEFAULT_DIMENSIONS = {
 	height: 300,
@@ -22,7 +23,7 @@ interface UplotChartProps {
 	periods: Period[];
 	annotations?: Annotation[];
 	options?: Partial< uPlot.Options >;
-	legendContainer?: React.RefObject< HTMLDivElement >;
+	legendContainer?: RefObject< HTMLDivElement >;
 	solidFill?: boolean;
 	period?: string;
 	range?: { startDate: number; endDate: number };
@@ -99,7 +100,7 @@ function getColor( score: number, opacity = 'FF' ) {
  * @param {{ startDate: number, endDate: number }} props.range       - The date range of the chart.
  * @param {Period[]}                               props.periods     - The periods to display in the chart.
  * @param {Annotation[]}                           props.annotations - The annotations to display in the chart.
- * @return {React.Element} The JSX element representing the UplotLineChart component.
+ * @return {ReactElement} The JSX element representing the UplotLineChart component.
  */
 export default function UplotLineChart( { range, periods, annotations = [] }: UplotChartProps ) {
 	const uplot = useRef< uPlot | null >( null );
@@ -215,7 +216,7 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
 	 * Type casting to prevent TypeScript error:
 	 * TS2604: JSX element type 'UplotReact' does not have any construct or call signatures.
 	 */
-	const TypedUplotReact = UplotReact as unknown as React.ComponentType< UplotReactProps >;
+	const TypedUplotReact = UplotReact as unknown as ComponentType< UplotReactProps >;
 
 	return (
 		<div ref={ uplotContainer } className="boost-uplot-container">

package/components/boost-score-graph/use-resize.ts

@@ -1,18 +1,19 @@
 import { throttle } from '@wordpress/compose';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import uPlot from 'uplot';
+import type { RefObject } from 'react';
 
 const THROTTLE_DURATION = 400; // in ms
 
 /**
  * Custom hook to handle resizing of uPlot charts.
  *
- * @param {React.RefObject<uPlot>}          uplotRef     - The ref object for the uPlot instance.
- * @param {React.RefObject<HTMLDivElement>} containerRef - The ref object for the container div.
+ * @param {RefObject<uPlot>}          uplotRef     - The ref object for the uPlot instance.
+ * @param {RefObject<HTMLDivElement>} containerRef - The ref object for the container div.
  */
 export default function useResize(
-	uplotRef: React.RefObject< uPlot >,
-	containerRef: React.RefObject< HTMLDivElement >
+	uplotRef: RefObject< uPlot >,
+	containerRef: RefObject< HTMLDivElement >
 ) {
 	useEffect( () => {
 		if ( ! uplotRef.current || ! containerRef.current ) {

package/components/button/index.tsx

@@ -1,22 +1,17 @@
-/**
- * External dependencies
- */
 import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-/**
- * Internal dependencies
- */
+import { forwardRef } from 'react';
 import styles from './style.module.scss';
 import type { ButtonProps } from './types.ts';
+import type { ReactNode } from 'react';
 
 /**
  * Button component
  *
  * @param {ButtonProps} props - Component Props
- * @return {React.ReactNode} Rendered button
+ * @return {ReactNode} Rendered button
  */
 const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 	const {

package/components/button/types.ts

@@ -1,9 +1,9 @@
 import { Button } from '@wordpress/components';
-import type React from 'react';
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
 
 type JetpackButtonBaseProps = {
 	className?: string;
-	children?: React.ReactNode;
+	children?: ReactNode;
 	disabled?: boolean;
 	isDestructive?: boolean;
 	isLoading?: boolean;
@@ -13,9 +13,9 @@ type JetpackButtonBaseProps = {
 	variant?: 'primary' | 'secondary' | 'link' | 'tertiary';
 	weight?: 'bold' | 'regular';
 	fullWidth?: boolean;
-	ref?: React.ForwardedRef< unknown >;
+	ref?: ForwardedRef< unknown >;
 };
 
-type WPButtonProps = Omit< React.ComponentProps< typeof Button >, 'size' | 'variant' >;
+type WPButtonProps = Omit< ComponentProps< typeof Button >, 'size' | 'variant' >;
 
 export type ButtonProps = JetpackButtonBaseProps & WPButtonProps;

package/components/chip/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
 import styles from './style.module.scss';
+import type { ReactElement, FC } from 'react';
 
 type ChipProps = {
 	text?: string;
@@ -13,9 +13,9 @@ type ChipProps = {
  * @param {object} props      - The component properties.
  * @param {string} props.type - The type new or info
  * @param {string} props.text - Chip text
- * @return {React.ReactElement} The `Chip` component.
+ * @return {ReactElement} The `Chip` component.
  */
-const Chip: React.FC< ChipProps > = ( { type = 'info', text } ) => {
+const Chip: FC< ChipProps > = ( { type = 'info', text } ) => {
 	const classes = clsx( styles.chip, styles[ `is-${ type }` ] );
 	return <span className={ classes }>{ text }</span>;
 };

package/components/contextual-upgrade-trigger/index.tsx

@@ -4,9 +4,9 @@ import IconTooltip from '../icon-tooltip/index.tsx';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import { CutBaseProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 
-const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {
+const ContextualUpgradeTrigger: FC< CutBaseProps > = ( {
 	description,
 	cta,
 	onClick,

package/components/copy-to-clipboard/index.tsx

@@ -4,9 +4,9 @@ import { __ } from '@wordpress/i18n';
 import Button from '../button/index.tsx';
 import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
 import { CopyToClipboardProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
-export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {
+export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 	buttonStyle = 'icon',
 	textToCopy,
 	onCopy,
@@ -40,8 +40,8 @@ export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {
 		};
 	}, [] );
 
-	let icon: React.ReactNode = null;
-	let label: React.ReactNode = null;
+	let icon: ReactNode = null;
+	let label: ReactNode = null;
 
 	if ( 'text' !== buttonStyle ) {
 		icon = hasCopied ? <CheckmarkIcon /> : <ClipboardIcon />;

package/components/decorative-card/index.tsx

@@ -1,19 +1,15 @@
 import type { DecorativeCardProps } from './types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 import './style.scss';
 
 /**
  * A decorative card used in the disconnection flow.
  *
  * @param {DecorativeCardProps} props - The properties.
- * @return {React.ReactNode} - The DecorativeCard component.
+ * @return {ReactNode} - The DecorativeCard component.
  */
 
-const DecorativeCard: React.FC< DecorativeCardProps > = ( {
-	format = 'horizontal',
-	icon,
-	imageUrl,
-} ) => {
+const DecorativeCard: FC< DecorativeCardProps > = ( { format = 'horizontal', icon, imageUrl } ) => {
 	return (
 		<div
 			className={

package/components/details-viewer/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './styles.module.scss';
 
 /**

package/components/dialog/index.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import React from 'react';
 import Col from '../layout/col/index.tsx';
 import Container from '../layout/container/index.tsx';
 import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import styles from './style.module.scss';
+import type { ReactNode, FC } from 'react';
 
 type DialogProps = {
-	primary: React.ReactNode;
-	secondary?: React.ReactNode;
+	primary: ReactNode;
+	secondary?: ReactNode;
 	isTwoSections?: boolean;
 	isCard?: boolean;
 	containerProps: object;
@@ -16,14 +16,14 @@ type DialogProps = {
 /**
  * Dialog component.
  *
- * @param {object}          props                - React component props.
- * @param {React.ReactNode} props.primary        - Primary-section content.
- * @param {React.ReactNode} props.secondary      - Secondary-section content.
- * @param {boolean}         props.isTwoSections  - Handle two sections layout when true.
- * @param {object}          props.containerProps - Props to pass to the container component.
- * @return {React.ReactNode}                 Rendered dialog
+ * @param {object}    props                - React component props.
+ * @param {ReactNode} props.primary        - Primary-section content.
+ * @param {ReactNode} props.secondary      - Secondary-section content.
+ * @param {boolean}   props.isTwoSections  - Handle two sections layout when true.
+ * @param {object}    props.containerProps - Props to pass to the container component.
+ * @return {ReactNode}                 Rendered dialog
  */
-const Dialog: React.FC< DialogProps > = ( {
+const Dialog: FC< DialogProps > = ( {
 	primary,
 	secondary,
 	isTwoSections = false,

package/components/donut-meter/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import './style.scss';
+import type { ReactElement, FC } from 'react';
 
 export type DonutMeterProps = {
 	/**
@@ -72,9 +72,9 @@ const getAdaptiveType = ( percentage: number ) => {
  * Generate record meter donut bar
  *
  * @param {DonutMeterProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-const DonutMeter: React.FC< DonutMeterProps > = ( {
+const DonutMeter: FC< DonutMeterProps > = ( {
 	className = '',
 	description = '',
 	donutWidth = '64px',

package/components/dot-pager/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
+import { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
 import { Swipeable } from '../swipeable/index.tsx';
 
 import './style.scss';