@automattic/jetpack-components 1.1.7 → 1.1.8

package/build/components/dialog/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { ReactNode, FC } from 'react';
 type DialogProps = {
-    primary: React.ReactNode;
-    secondary?: React.ReactNode;
+    primary: ReactNode;
+    secondary?: ReactNode;
     isTwoSections?: boolean;
     isCard?: boolean;
     containerProps: object;
@@ -9,12 +9,12 @@ 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
  */
-declare const Dialog: React.FC<DialogProps>;
+declare const Dialog: FC<DialogProps>;
 export default Dialog;

package/build/components/dialog/index.js

@@ -7,12 +7,12 @@ import styles from './style.module.scss';
 /**
  * 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 = ({ primary, secondary, isTwoSections = false, ...containerProps }) => {
     const [isSmall, isLowerThanLarge] = useBreakpointMatch(['sm', 'lg'], [null, '<']);

package/build/components/donut-meter/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import './style.scss';
+import type { FC } from 'react';
 export type DonutMeterProps = {
     /**
      * Total number of items for the donut meter.
@@ -52,7 +52,7 @@ export type DonutMeterProps = {
  * Generate record meter donut bar
  *
  * @param {DonutMeterProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-declare const DonutMeter: React.FC<DonutMeterProps>;
+declare const DonutMeter: FC<DonutMeterProps>;
 export default DonutMeter;

package/build/components/donut-meter/index.js

@@ -13,7 +13,7 @@ const getAdaptiveType = (percentage) => {
  * Generate record meter donut bar
  *
  * @param {DonutMeterProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
 const DonutMeter = ({ className = '', description = '', donutWidth = '64px', segmentCount, thickness = '3.5', title = '', totalCount, type, useAdaptiveColors, }) => {
     const validDivisor = totalCount === 0 ? 1 : totalCount;

package/build/components/icon-tooltip/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import { FC } from 'react';
 import { IconTooltipProps } from './types.ts';
 import './style.scss';
 /**
  * Generate Icon Tooltip
  *
  * @param {IconTooltipProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-declare const IconTooltip: React.FC<IconTooltipProps>;
+declare const IconTooltip: FC<IconTooltipProps>;
 export default IconTooltip;

package/build/components/icon-tooltip/index.js

@@ -20,7 +20,7 @@ const placementsToPositions = (placement) => {
  * Generate Icon Tooltip
  *
  * @param {IconTooltipProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
 const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-end', animate = true, iconCode = 'info-outline', iconSize = 18, offset = 10, title, children, popoverAnchorStyle = 'icon', forceShow = false, hoverShow = false, wide = false, inline = true, shift = false, }) => {
     const POPOVER_HELPER_WIDTH = 124;

package/build/components/icon-tooltip/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
 export type IconTooltipProps = {
@@ -32,7 +33,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/build/components/icons/index.d.ts

@@ -1,56 +1,56 @@
 import { SocialLogo } from 'social-logos';
 import { BaseIconProps } from './types.ts';
-import type React from 'react';
-export declare const AntiSpamIcon: React.FC<BaseIconProps>;
-export declare const BackupIcon: React.FC<BaseIconProps>;
-export declare const BoostIcon: React.FC<BaseIconProps>;
-export declare const CrmIcon: React.FC<BaseIconProps>;
-export declare const ExtrasIcon: React.FC<BaseIconProps>;
-export declare const ProtectIcon: React.FC<BaseIconProps>;
-export declare const ScanIcon: React.FC<BaseIconProps>;
-export declare const SearchIcon: React.FC<BaseIconProps>;
-export declare const SocialIcon: React.FC<BaseIconProps>;
-export declare const VideopressIcon: React.FC<BaseIconProps>;
-export declare const StarIcon: React.FC<BaseIconProps>;
-export declare const CheckmarkIcon: React.FC<BaseIconProps>;
-export declare const ClipboardIcon: React.FC<BaseIconProps>;
-export declare const JetpackIcon: React.FC<BaseIconProps>;
-export declare const ShareIcon: React.FC<BaseIconProps>;
-export declare const AiIcon: React.FC<BaseIconProps>;
-export declare const StatsIcon: React.FC<BaseIconProps>;
+import type { ComponentProps, FC } from 'react';
+export declare const AntiSpamIcon: FC<BaseIconProps>;
+export declare const BackupIcon: FC<BaseIconProps>;
+export declare const BoostIcon: FC<BaseIconProps>;
+export declare const CrmIcon: FC<BaseIconProps>;
+export declare const ExtrasIcon: FC<BaseIconProps>;
+export declare const ProtectIcon: FC<BaseIconProps>;
+export declare const ScanIcon: FC<BaseIconProps>;
+export declare const SearchIcon: FC<BaseIconProps>;
+export declare const SocialIcon: FC<BaseIconProps>;
+export declare const VideopressIcon: FC<BaseIconProps>;
+export declare const StarIcon: FC<BaseIconProps>;
+export declare const CheckmarkIcon: FC<BaseIconProps>;
+export declare const ClipboardIcon: FC<BaseIconProps>;
+export declare const JetpackIcon: FC<BaseIconProps>;
+export declare const ShareIcon: FC<BaseIconProps>;
+export declare const AiIcon: FC<BaseIconProps>;
+export declare const StatsIcon: FC<BaseIconProps>;
 declare const jetpackIcons: {
-    'anti-spam': React.FC<BaseIconProps>;
-    backup: React.FC<BaseIconProps>;
-    boost: React.FC<BaseIconProps>;
-    crm: React.FC<BaseIconProps>;
-    extras: React.FC<BaseIconProps>;
-    protect: React.FC<BaseIconProps>;
-    scan: React.FC<BaseIconProps>;
-    search: React.FC<BaseIconProps>;
-    social: React.FC<BaseIconProps>;
-    star: React.FC<BaseIconProps>;
-    videopress: React.FC<BaseIconProps>;
-    jetpack: React.FC<BaseIconProps>;
-    share: React.FC<BaseIconProps>;
-    ai: React.FC<BaseIconProps>;
-    stats: React.FC<BaseIconProps>;
+    'anti-spam': FC<BaseIconProps>;
+    backup: FC<BaseIconProps>;
+    boost: FC<BaseIconProps>;
+    crm: FC<BaseIconProps>;
+    extras: FC<BaseIconProps>;
+    protect: FC<BaseIconProps>;
+    scan: FC<BaseIconProps>;
+    search: FC<BaseIconProps>;
+    social: FC<BaseIconProps>;
+    star: FC<BaseIconProps>;
+    videopress: FC<BaseIconProps>;
+    jetpack: FC<BaseIconProps>;
+    share: FC<BaseIconProps>;
+    ai: FC<BaseIconProps>;
+    stats: FC<BaseIconProps>;
 };
 declare const iconsMap: {
-    'anti-spam': React.FC<BaseIconProps>;
-    backup: React.FC<BaseIconProps>;
-    boost: React.FC<BaseIconProps>;
-    crm: React.FC<BaseIconProps>;
-    extras: React.FC<BaseIconProps>;
-    protect: React.FC<BaseIconProps>;
-    scan: React.FC<BaseIconProps>;
-    search: React.FC<BaseIconProps>;
-    social: React.FC<BaseIconProps>;
-    star: React.FC<BaseIconProps>;
-    videopress: React.FC<BaseIconProps>;
-    jetpack: React.FC<BaseIconProps>;
-    share: React.FC<BaseIconProps>;
-    ai: React.FC<BaseIconProps>;
-    stats: React.FC<BaseIconProps>;
+    'anti-spam': FC<BaseIconProps>;
+    backup: FC<BaseIconProps>;
+    boost: FC<BaseIconProps>;
+    crm: FC<BaseIconProps>;
+    extras: FC<BaseIconProps>;
+    protect: FC<BaseIconProps>;
+    scan: FC<BaseIconProps>;
+    search: FC<BaseIconProps>;
+    social: FC<BaseIconProps>;
+    star: FC<BaseIconProps>;
+    videopress: FC<BaseIconProps>;
+    jetpack: FC<BaseIconProps>;
+    share: FC<BaseIconProps>;
+    ai: FC<BaseIconProps>;
+    stats: FC<BaseIconProps>;
 };
 export type JetpackIconSlug = keyof typeof jetpackIcons;
 export type IconsMap = typeof iconsMap;
@@ -59,11 +59,11 @@ 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 declare function getIconBySlug<Slug extends IconSlug>(slug: Slug): IconsMap[Slug];
-export declare const SocialServiceIcon: React.FC<{
-    serviceName: React.ComponentProps<typeof SocialLogo>['icon'];
+export declare const SocialServiceIcon: FC<{
+    serviceName: ComponentProps<typeof SocialLogo>['icon'];
     className?: string;
     iconSize?: number;
 }>;

package/build/components/icons/index.js

@@ -7,7 +7,7 @@ import styles from './style.module.scss';
  * Icon Wrapper component.
  *
  * @param {BaseIconProps} props - Component props.
- * @return {React.ReactNode} Icon Wrapper component.
+ * @return {ReactNode} Icon Wrapper component.
  */
 const IconWrapper = ({ className, size = 24, viewBox = '0 0 24 24', opacity = 1, color = '#2C3338', children, }) => {
     const iconProps = {
@@ -28,7 +28,7 @@ export const BackupIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, {
 export const BoostIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M4.19505 16.2545C4.47368 16.561 4.94802 16.5836 5.25451 16.3049L10.2595 11.7549L14.2842 15.2765L19 10.5607V13.75H20.5V9.5V8.75239V8.7476V8H19.7529H19.7471H19H14.75V9.5H17.9393L14.2158 13.2235L10.2405 9.74507L4.2455 15.195C3.93901 15.4737 3.91642 15.948 4.19505 16.2545Z" }) }));
 export const CrmIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(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" }) }));
 export const ExtrasIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(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" }) }));
-export const ProtectIcon = ({ opacity = 1, size, className, color, }) => (_jsxs(IconWrapper, { className: className, size: size, opacity: opacity, color: color, children: [_jsx(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" }), _jsx(Path, { d: "M15.5291 10.0315L11.1818 14.358L8.47095 11.66L9.52907 10.5968L11.1818 12.2417L14.4709 8.96826L15.5291 10.0315Z" })] }));
+export const ProtectIcon = ({ opacity = 1, size, className, color }) => (_jsxs(IconWrapper, { className: className, size: size, opacity: opacity, color: color, children: [_jsx(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" }), _jsx(Path, { d: "M15.5291 10.0315L11.1818 14.358L8.47095 11.66L9.52907 10.5968L11.1818 12.2417L14.4709 8.96826L15.5291 10.0315Z" })] }));
 export const ScanIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(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" }) }));
 export const SearchIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(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" }) }));
 export const SocialIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(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" }) }));
@@ -36,7 +36,7 @@ export const VideopressIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrappe
 export const StarIcon = ({ size, className = styles['star-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304" }) }));
 export const CheckmarkIcon = ({ size, className = styles['checkmark-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M11 17.768l-4.884-4.884 1.768-1.768L11 14.232l8.658-8.658C17.823 3.39 15.075 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-1.528-.353-2.97-.966-4.266L11 17.768z" }) }));
 export const ClipboardIcon = ({ size, className = styles['clipboard-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M5.625 5.5H15.375C15.444 5.5 15.5 5.55596 15.5 5.625V15.375C15.5 15.444 15.444 15.5 15.375 15.5H5.625C5.55596 15.5 5.5 15.444 5.5 15.375V5.625C5.5 5.55596 5.55596 5.5 5.625 5.5ZM4 5.625C4 4.72754 4.72754 4 5.625 4H15.375C16.2725 4 17 4.72754 17 5.625V10V15.375C17 16.2725 16.2725 17 15.375 17C15.375 17 6.52246 17 5.625 17C4.72754 17 4 16.2725 4 15.375V5.625ZM18.5 17.2812V8.28125H20V17.2812C20 18.7995 18.7704 20 17.2511 20H6.25V18.5H17.2511C17.9409 18.5 18.5 17.9721 18.5 17.2812Z" }) }));
-export const JetpackIcon = ({ size, className = styles.jetpack, color, }) => {
+export const JetpackIcon = ({ size, className = styles.jetpack, color }) => {
     return (_jsxs(IconWrapper, { className: className, size: size, color: color, viewBox: "0 0 32 32", children: [_jsx(Path, { className: "jetpack-logo__icon-circle", d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z" }), _jsx(Polygon, { fill: "#fff", points: "15,19 7,19 15,3" }), _jsx(Polygon, { fill: "#fff", points: "17,29 17,13 25,13" })] }));
 };
 export const ShareIcon = ({ size = 16, className, color }) => {
@@ -73,7 +73,7 @@ const 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) {
     if (!iconsMap[slug]) {

package/build/components/icons/types.d.ts

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

package/build/components/indeterminate-progress-bar/index.d.ts

@@ -1,10 +1,10 @@
 import { IndeterminateProgressBarProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * Indeterminate Progress Bar component
  *
  * @param {IndeterminateProgressBarProps} props - Component props.
- * @return {React.ReactNode} - IndeterminateProgressBar react component.
+ * @return {ReactNode} - IndeterminateProgressBar react component.
  */
-declare const IndeterminateProgressBar: React.FC<IndeterminateProgressBarProps>;
+declare const IndeterminateProgressBar: FC<IndeterminateProgressBarProps>;
 export default IndeterminateProgressBar;

package/build/components/indeterminate-progress-bar/index.js

@@ -12,7 +12,7 @@ import styles from './style.module.scss';
  * Indeterminate Progress Bar component
  *
  * @param {IndeterminateProgressBarProps} props - Component props.
- * @return {React.ReactNode} - IndeterminateProgressBar react component.
+ * @return {ReactNode} - IndeterminateProgressBar react component.
  */
 const IndeterminateProgressBar = ({ className }) => {
     return (_jsx("div", { className: clsx(className, styles['indeterminate-progress-bar']), "aria-label": __('Indeterminate Progress Bar', 'jetpack-components') }));

package/build/components/jetpack-footer/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
 import './style.scss';
 import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
 /**
  * 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.
  */
-declare const JetpackFooter: React.FC<JetpackFooterProps>;
+declare const JetpackFooter: FC<JetpackFooterProps>;
 export default JetpackFooter;

package/build/components/jetpack-footer/index.js

@@ -16,7 +16,7 @@ const ExternalIcon = () => (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: ext
  * 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 = ({ moduleName = __('Jetpack', 'jetpack-components'), className, moduleNameHref = 'https://jetpack.com', menu, useInternalLinks, onAboutClick, onPrivacyClick, onTermsClick, ...otherProps }) => {
     const [isSm] = useBreakpointMatch('sm', '<=');

package/build/components/jetpack-logo/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { JetpackLogoProps } from './types.ts';
-declare const JetpackLogo: React.FC<JetpackLogoProps>;
+import type { FC } from 'react';
+declare const JetpackLogo: FC<JetpackLogoProps>;
 export default JetpackLogo;

package/build/components/jetpack-protect-logo/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { JetpackProtectLogoProps } from './types.ts';
-declare const JetpackProtectLogo: React.FC<JetpackProtectLogoProps>;
+import type { FC } from 'react';
+declare const JetpackProtectLogo: FC<JetpackProtectLogoProps>;
 export default JetpackProtectLogo;

package/build/components/jetpack-search-logo/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { JetpackSearchLogoProps } from './types.ts';
-declare const JetpackSearchLogo: React.FC<JetpackSearchLogoProps>;
+import type { FC } from 'react';
+declare const JetpackSearchLogo: FC<JetpackSearchLogoProps>;
 export default JetpackSearchLogo;

package/build/components/jetpack-vaultpress-backup-logo/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { JetpackLogoProps } from './types.ts';
-declare const JetpackVaultPressBackupLogo: React.FC<JetpackLogoProps>;
+import type { FC } from 'react';
+declare const JetpackVaultPressBackupLogo: FC<JetpackLogoProps>;
 export default JetpackVaultPressBackupLogo;

package/build/components/jetpack-videopress-logo/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { JetpackLogoProps } from './types.tsx';
-declare const JetpackVideoPressLogo: React.FC<JetpackLogoProps>;
+import type { FC } from 'react';
+declare const JetpackVideoPressLogo: FC<JetpackLogoProps>;
 export default JetpackVideoPressLogo;

package/build/components/layout/col/index.d.ts

@@ -1,10 +1,10 @@
 import { ColProps } from '../types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * The basic Col component.
  *
  * @param {ColProps} props - Component properties.
- * @return {React.ReactElement}   Col component.
+ * @return {ReactElement}   Col component.
  */
-declare const Col: React.FC<ColProps>;
+declare const Col: FC<ColProps>;
 export default Col;

package/build/components/layout/col/index.js

@@ -8,7 +8,7 @@ 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 = props => {
     const { children, tagName = 'div', className } = props;

package/build/components/layout/container/index.d.ts

@@ -1,4 +1,3 @@
 import { ContainerProps } from '../types.ts';
-import type React from 'react';
-declare const _default: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLElement>>;
 export default _default;

package/build/components/layout/container/index.js

@@ -4,9 +4,9 @@ import styles from './style.module.scss';
 /**
  * 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 = ({ children, fluid = false, tagName = 'div', className, horizontalGap = 1, horizontalSpacing = 1, }, ref) => {
     const containerStyle = useMemo(() => {

package/build/components/layout/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 type ColSpan = number | {
     start: number;
     end: number;
@@ -26,7 +27,7 @@ export type ColProps = {
     /**
      * Children to be inserted.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 export type ContainerProps = {
     /**
@@ -52,6 +53,6 @@ export type ContainerProps = {
     /**
      * Children to be inserted.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 export {};

package/build/components/loading-placeholder/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 declare const LoadingPlaceholder: ({ children, width, height, className, }: {
-    children?: React.ReactNode;
+    children?: ReactNode;
     width?: number | string;
     height?: number;
     className?: string;

package/build/components/notice/index.d.ts

@@ -1,29 +1,29 @@
-import React from 'react';
+import type { FC, ReactNode } from 'react';
 type NoticeProps = {
     /** The severity of the alert. */
     level?: 'error' | 'warning' | 'info' | 'success';
     /** The title of the notice */
     title?: string;
     /** A list of action elements to show across the bottom */
-    actions?: React.ReactNode[];
+    actions?: ReactNode[];
     /** Hide close button */
     hideCloseButton?: boolean;
     /** Method to call when the close button is clicked */
     onClose?: () => void;
     /** Children to be rendered inside the alert. */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 /**
  * 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.
  */
-declare const Notice: React.FC<NoticeProps>;
+declare const Notice: FC<NoticeProps>;
 export default Notice;

package/build/components/notice/index.js

@@ -19,14 +19,14 @@ const getIconByLevel = (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 = ({ level = 'info', title, children, actions, hideCloseButton = false, onClose, }) => {
     const classes = clsx(styles.container, styles[`is-${level}`]);

package/build/components/number-slider/index.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
 import { NumberSliderProps } from './types.ts';
+import type { FC } from 'react';
 import './style.scss';
 /**
  * Generate Number Slider
  * 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
  */
-declare const NumberSlider: React.FC<NumberSliderProps>;
+declare const NumberSlider: FC<NumberSliderProps>;
 export default NumberSlider;

package/build/components/number-slider/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import React from 'react';
+import { useState } from 'react';
 import ReactSlider from 'react-slider';
 import './style.scss';
 /**
@@ -8,10 +8,10 @@ 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 = ({ className, maxValue = 100, minValue = 0, step = 1, value, onChange, onBeforeChange, 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,
     });

package/build/components/number-slider/types.d.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>;
 }
@@ -45,6 +45,6 @@ export type NumberSliderProps = {
         index: number;
         value: number | ReadonlyArray<number>;
         valueNow: number;
-    }) => React.JSX.Element | null;
+    }) => JSX.Element | null;
 };
 export {};

package/build/components/popover/index.d.ts

@@ -1,8 +1,9 @@
 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;
 };
-declare const Popover: React.FC<PopoverProps>;
+declare const Popover: FC<PopoverProps>;
 export default Popover;

package/build/components/pricing-card/index.d.ts

@@ -1,11 +1,11 @@
 import type { PricingCardProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 import './style.scss';
 /**
  * The Pricing card component.
  *
  * @param {PricingCardProps} props -- The component props.
- * @return {React.ReactNode} The rendered component.
+ * @return {ReactNode} The rendered component.
  */
-declare const PricingCard: React.FC<PricingCardProps>;
+declare const PricingCard: FC<PricingCardProps>;
 export default PricingCard;