@automattic/jetpack-components 1.1.7 → 1.1.9

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.1.9] - 2025-07-03
+### Changed
+- Update package dependencies. [#44151]
+
+## [1.1.8] - 2025-07-01
+### Changed
+- Internal updates.
+
 ## [1.1.7] - 2025-06-30
 ### Changed
 - Update dependencies.
@@ -1450,6 +1458,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.1.9]: https://github.com/Automattic/jetpack-components/compare/1.1.8...1.1.9
+[1.1.8]: https://github.com/Automattic/jetpack-components/compare/1.1.7...1.1.8
 [1.1.7]: https://github.com/Automattic/jetpack-components/compare/1.1.6...1.1.7
 [1.1.6]: https://github.com/Automattic/jetpack-components/compare/1.1.5...1.1.6
 [1.1.5]: https://github.com/Automattic/jetpack-components/compare/1.1.4...1.1.5

package/build/components/action-button/index.d.ts

@@ -7,9 +7,9 @@ export default ActionButton;
  * 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.
  */
-declare function ActionButton(props: object): React.ReactNode;
+declare function ActionButton(props: object): import("react").ReactNode;
 declare namespace ActionButton {
     namespace propTypes {
         let label: any;
@@ -22,4 +22,3 @@ declare namespace ActionButton {
         let isExternalLink: any;
     }
 }
-import React from 'react';

package/build/components/action-button/index.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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.js";
 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 { label, onClick, isLoading = false, loadingText, isDisabled, displayError = false, errorMessage = __('An error occurred. Please try again.', 'jetpack-components'), variant = 'primary', isExternalLink = false, customClass, } = props;

package/build/components/action-popover/types.d.ts

@@ -2,16 +2,17 @@
  * Types
  */
 import type { Popover } from '@wordpress/components';
-export type ActionPopoverProps = React.ComponentProps<typeof Popover> & {
+import type { ComponentProps, ReactNode } from 'react';
+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/build/components/admin-page/index.d.ts

@@ -1,12 +1,12 @@
 import type { AdminPageProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.
  *
  * 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.
  */
-declare const AdminPage: React.FC<AdminPageProps>;
+declare const AdminPage: FC<AdminPageProps>;
 export default AdminPage;

package/build/components/admin-page/index.js

@@ -14,7 +14,7 @@ import styles from './style.module.scss';
  * 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 = ({ children, className, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
     useEffect(() => {

package/build/components/admin-page/types.d.ts

@@ -1,9 +1,10 @@
 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.
      */
@@ -15,7 +16,7 @@ export type AdminPageProps = {
     /**
      * Custom header. Optional
      */
-    header?: React.ReactNode;
+    header?: ReactNode;
     /**
      * Whether or not to display the Footer
      */

package/build/components/admin-section/basic/index.d.ts

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

package/build/components/admin-section/basic/index.js

@@ -4,7 +4,7 @@ import styles from './style.module.scss';
  * 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 = ({ children }) => {
     return _jsx("div", { className: styles.section, children: children });

package/build/components/admin-section/hero/index.d.ts

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

package/build/components/admin-section/hero/index.js

@@ -4,7 +4,7 @@ import styles from './style.module.scss';
  * 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 = ({ children }) => {
     return _jsx("div", { className: styles['section-hero'], children: children });

package/build/components/admin-section/types.d.ts

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

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

@@ -1,23 +1,23 @@
-import React from 'react';
+import type { ReactNode, FC } from 'react';
 type AlertProps = {
     /** The severity of the alert. */
     level: 'error' | 'warning' | 'info' | 'success';
     /** Show/Hide icon */
     showIcon?: boolean;
     /** Children to be rendered inside the alert. */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Wrapper class name */
     className?: string;
 };
 /**
  * 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.
  */
-declare const Alert: React.FC<AlertProps>;
+declare const Alert: FC<AlertProps>;
 export default Alert;

package/build/components/alert/index.js

@@ -19,14 +19,14 @@ const getIconByLevel = (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 = ({ level = 'warning', children, showIcon = true, className, }) => {
+const Alert = ({ level = 'warning', children, showIcon = true, className }) => {
     const classes = clsx(styles.container, styles[`is-${level}`], className);
     return (_jsxs("div", { className: classes, children: [showIcon && (_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) })), _jsx("div", { children: children })] }));
 };

package/build/components/automattic-byline-logo/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
 import { AutomatticBylineLogoProps } from './types.ts';
+import type { FC } from 'react';
 /**
  * Automattic "By line" Logo component.
  *
  * @param {AutomatticBylineLogoProps} props - Component properties.
- * @return {React.ReactNode} AutomatticBylineLogo component.
+ * @return {ReactNode} AutomatticBylineLogo component.
  */
-declare const AutomatticBylineLogo: React.FC<AutomatticBylineLogoProps>;
+declare const AutomatticBylineLogo: FC<AutomatticBylineLogoProps>;
 export default AutomatticBylineLogo;

package/build/components/automattic-byline-logo/index.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
  * Automattic "By line" Logo component.
  *
  * @param {AutomatticBylineLogoProps} props - Component properties.
- * @return {React.ReactNode} AutomatticBylineLogo component.
+ * @return {ReactNode} AutomatticBylineLogo component.
  */
 const AutomatticBylineLogo = ({ title = __('An Automattic Airline', 'jetpack-components'), height = 7, className, ...otherProps }) => {
     return (_jsxs("svg", { role: "img", x: "0", y: "0", viewBox: "0 0 935 38.2", enableBackground: "new 0 0 935 38.2", "aria-labelledby": "jp-automattic-byline-logo-title", height: height, className: clsx('jp-automattic-byline-logo', className), ...otherProps, children: [_jsx("desc", { id: "jp-automattic-byline-logo-title", children: title }), _jsx("path", { d: "M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" }), _jsx("path", { d: "M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" }), _jsx("path", { d: "M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" })] }));

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

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

package/build/components/automattic-for-agencies-logo/index.d.ts

@@ -1,11 +1,11 @@
-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, }: {
     color: string;
-}): React.ReactElement;
+}): ReactElement;

package/build/components/automattic-for-agencies-logo/index.js

@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/components';
  *
  * @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', }) {
     return (_jsx(SVG, { clipRule: "evenodd", fillRule: "evenodd", width: "251", height: "47", viewBox: "0 0 251 47", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx(Path, { d: "M20.256 17H17.04L14.928 13.04L5.544 13.04L3.504 17H0.336L8.976 1.016L11.472 1.016L20.256 17ZM13.752 10.856L10.152 4.136L6.672 10.856L13.752 10.856ZM42.7174 10.352C42.7174 14.312 40.1734 17.624 34.1494 17.624C28.4134 17.624 25.7494 14.504 25.7494 10.352L25.7494 1.016H28.7254L28.7254 10.4C28.7254 13.352 30.6694 15.104 34.3654 15.104C38.1574 15.104 39.7174 13.352 39.7174 10.4V1.016L42.7174 1.016V10.352ZM66.6443 3.512L59.6603 3.512V17H56.6603V3.512L49.6763 3.512V1.016L66.6443 1.016V3.512ZM91.1207 9.296C91.1207 13.544 87.4487 17.624 81.7607 17.624C76.0967 17.624 72.4247 13.544 72.4247 9.296V8.768C72.4247 4.448 76.0967 0.439999 81.7607 0.439999C87.4487 0.439999 91.1207 4.448 91.1207 8.768V9.296ZM88.0967 9.2V8.816C88.0967 5.72 85.8407 2.96 81.7607 2.96C77.6807 2.96 75.4487 5.72 75.4487 8.816V9.2C75.4487 12.296 77.6807 15.104 81.7607 15.104C85.8407 15.104 88.0967 12.296 88.0967 9.2ZM120.609 17H117.609V4.352L116.817 5.744L110.121 17H108.657L102.033 5.744L101.241 4.352V17H98.3128V1.016H102.465L108.777 11.984L109.521 13.328L110.265 11.984L116.505 1.016L120.609 1.016V17ZM146.748 17H143.532L141.42 13.04H132.036L129.996 17H126.828L135.468 1.016H137.964L146.748 17ZM140.244 10.856L136.644 4.136L133.164 10.856L140.244 10.856ZM166.919 3.512L159.935 3.512V17L156.935 17V3.512L149.951 3.512V1.016L166.919 1.016V3.512ZM190.136 3.512H183.152V17H180.152V3.512H173.168V1.016L190.136 1.016V3.512ZM200.346 17H197.346V1.016L200.346 1.016V17ZM225.532 3.632L223.66 5.528C222.22 4.208 220.108 2.96 217.252 2.96C212.98 2.96 210.58 5.888 210.58 8.936V9.248C210.58 12.272 213.004 15.104 217.468 15.104C220.132 15.104 222.34 13.832 223.732 12.536L225.532 14.432C223.78 16.16 220.804 17.624 217.276 17.624C211.228 17.624 207.556 13.688 207.556 9.368V8.84C207.556 4.52 211.564 0.439999 217.42 0.439999C220.804 0.439999 223.876 1.856 225.532 3.632ZM16.512 32.512H5.256L5.256 37.096H13.632V39.472H5.256L5.256 46H2.28L2.28 30.016H16.512V32.512ZM40.8426 38.296C40.8426 42.544 37.1706 46.624 31.4826 46.624C25.8186 46.624 22.1466 42.544 22.1466 38.296V37.768C22.1466 33.448 25.8186 29.44 31.4826 29.44C37.1706 29.44 40.8426 33.448 40.8426 37.768V38.296ZM37.8186 38.2V37.816C37.8186 34.72 35.5626 31.96 31.4826 31.96C27.4026 31.96 25.1706 34.72 25.1706 37.816V38.2C25.1706 41.296 27.4026 44.104 31.4826 44.104C35.5626 44.104 37.8186 41.296 37.8186 38.2ZM64.5227 46H61.8107C60.9947 46 60.6347 44.872 60.5387 43.432L60.4427 41.8C60.3467 40.216 59.6987 39.544 56.6987 39.544H51.0347V46H48.0347V30.016H56.7467C61.5467 30.016 63.7067 31.936 63.7067 34.408C63.7067 36.16 62.8187 37.816 59.6987 38.392C62.8187 38.632 63.4907 40.048 63.5147 41.92L63.5387 43.24C63.5627 44.344 63.7547 45.136 64.5227 45.928V46ZM60.6827 34.984V34.792C60.6827 33.64 59.7467 32.512 57.1787 32.512H51.0347V37.312H57.4427C59.6507 37.312 60.6827 36.256 60.6827 34.984ZM101.054 46H97.8384L95.7264 42.04L86.3424 42.04L84.3024 46H81.1344L89.7744 30.016H92.2704L101.054 46ZM94.5504 39.856L90.9504 33.136L87.4704 39.856H94.5504ZM123.597 46H121.677L121.221 43.84C119.685 45.616 117.501 46.624 114.789 46.624C109.125 46.624 105.453 42.736 105.453 38.296V38.008C105.453 33.472 109.461 29.44 115.317 29.44C118.917 29.44 121.845 30.928 123.429 32.632L121.557 34.528C120.117 33.208 117.885 31.96 115.293 31.96C110.829 31.96 108.477 34.816 108.477 37.936V38.2C108.477 41.32 110.997 44.104 115.077 44.104C118.173 44.104 120.381 42.208 120.381 40.288V40.12H115.461V37.744H123.597V46ZM145.697 46L131.177 46V30.016L145.697 30.016V32.512L134.177 32.512V36.616H143.033V39.04H134.177V43.504L145.697 43.504V46ZM170.003 46H167.411L157.019 35.296L156.011 34.168V46H153.011V30.016H155.891L165.971 40.696L167.003 41.848V30.016H170.003V46ZM195.19 32.632L193.318 34.528C191.878 33.208 189.766 31.96 186.91 31.96C182.638 31.96 180.238 34.888 180.238 37.936V38.248C180.238 41.272 182.662 44.104 187.126 44.104C189.79 44.104 191.998 42.832 193.39 41.536L195.19 43.432C193.438 45.16 190.462 46.624 186.934 46.624C180.886 46.624 177.214 42.688 177.214 38.368V37.84C177.214 33.52 181.222 29.44 187.078 29.44C190.462 29.44 193.534 30.856 195.19 32.632ZM205.164 46L202.164 46V30.016L205.164 30.016V46ZM227.855 46H213.335V30.016H227.855V32.512H216.335V36.616H225.191V39.04H216.335V43.504H227.855V46ZM251.009 41.512C251.009 44.632 247.601 46.624 242.849 46.624C239.609 46.624 236.609 45.736 234.137 44.56L235.241 42.184C237.761 43.432 240.425 44.176 242.993 44.176C246.449 44.176 247.985 43.048 247.985 41.824C247.985 38.008 234.593 40.552 234.593 34.696C234.593 31.72 237.809 29.44 242.873 29.44C246.017 29.44 248.945 30.544 250.745 31.72L249.113 33.736C247.625 32.776 245.177 31.888 242.777 31.888C239.657 31.888 237.593 32.944 237.593 34.312C237.593 37.792 251.009 35.464 251.009 41.512Z", fill: color }) }));

package/build/components/automattic-icon-logo/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
+import type { ReactElement } from 'react';
 /**
  * Automattic Icon Logo component
  *
  * @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, outerColor, }: {
     innerColor: string;
     outerColor: string;
-}): React.ReactElement;
+}): ReactElement;

package/build/components/automattic-icon-logo/index.js

@@ -6,7 +6,7 @@ import { Path, SVG } from '@wordpress/components';
  * @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', outerColor = '#FFFFFF', }) {
     return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 47 43", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z", fill: outerColor })] }));

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { ReactNode, FC } from 'react';
 type BadgeProps = {
-    children?: React.ReactNode;
+    children?: ReactNode;
     className?: string;
     variant?: 'success' | 'warning' | 'danger';
     [key: string]: unknown;
@@ -13,7 +13,7 @@ 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.
  */
-declare const Badge: React.FC<BadgeProps>;
+declare const Badge: FC<BadgeProps>;
 export default Badge;

package/build/components/badge/index.js

@@ -9,7 +9,7 @@ import styles from './style.module.scss';
  * @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 = ({ children, className, variant, ...props }) => {
     const classes = clsx(styles.badge, {

package/build/components/boost-score-graph/index.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 import './style.scss';
 export interface Period {
     timestamp: number;
@@ -38,7 +38,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 declare const BoostScoreGraph: FunctionComponent<BoostScoreGraphProps>;
 export default BoostScoreGraph;

package/build/components/boost-score-graph/index.js

@@ -10,7 +10,7 @@ import './style.scss';
  * @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 = ({ periods = [], annotations = [], startDate = 0, endDate = 0, title, isPlaceholder = false, }) => {
     // Sort periods by timestamp

package/build/components/boost-score-graph/uplot-line-chart.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
 import uPlot from 'uplot';
 import { type Annotation, Period } from './index.tsx';
 import './style-uplot.scss';
+import type { RefObject } from 'react';
 interface UplotChartProps {
     periods: Period[];
     annotations?: Annotation[];
     options?: Partial<uPlot.Options>;
-    legendContainer?: React.RefObject<HTMLDivElement>;
+    legendContainer?: RefObject<HTMLDivElement>;
     solidFill?: boolean;
     period?: string;
     range?: {
@@ -21,7 +21,7 @@ interface UplotChartProps {
  * @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): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/boost-score-graph/uplot-line-chart.js

@@ -73,7 +73,7 @@ function getColor(score, 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 = [] }) {
     const uplot = useRef(null);

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import uPlot from 'uplot';
+import type { RefObject } from 'react';
 /**
  * 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>): void;
+export default function useResize(uplotRef: RefObject<uPlot>, containerRef: RefObject<HTMLDivElement>): void;

package/build/components/boost-score-graph/use-resize.js

@@ -4,8 +4,8 @@ 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, containerRef) {
     useEffect(() => {

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import type { ButtonProps } from './types.ts';
 /**
  * Button component
  *
  * @param {ButtonProps} props - Component Props
- * @return {React.ReactNode} Rendered button
+ * @return {ReactNode} Rendered button
  */
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Button;

package/build/components/button/index.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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 { forwardRef } from 'react';
-/**
- * Internal dependencies
- */
 import styles from './style.module.scss';
 /**
  * Button component
  *
  * @param {ButtonProps} props - Component Props
- * @return {React.ReactNode} Rendered button
+ * @return {ReactNode} Rendered button
  */
 const Button = forwardRef((props, ref) => {
     const { children, variant = 'primary', size = 'normal', weight = 'bold', icon, iconSize, disabled, isDestructive, isLoading, isExternalLink, className: propsClassName, text, fullWidth, ...componentProps } = props;

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

@@ -1,8 +1,8 @@
 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;
@@ -12,8 +12,8 @@ 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;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FC } from 'react';
 type ChipProps = {
     text?: string;
     type?: 'new' | 'info';
@@ -9,7 +9,7 @@ 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.
  */
-declare const Chip: React.FC<ChipProps>;
+declare const Chip: FC<ChipProps>;
 export default Chip;

package/build/components/chip/index.js

@@ -7,7 +7,7 @@ import styles from './style.module.scss';
  * @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 = ({ type = 'info', text }) => {
     const classes = clsx(styles.chip, styles[`is-${type}`]);

package/build/components/contextual-upgrade-trigger/index.d.ts

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

package/build/components/copy-to-clipboard/index.d.ts

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

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

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

package/build/components/decorative-card/index.js

@@ -4,9 +4,9 @@ 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 = ({ format = 'horizontal', icon, imageUrl, }) => {
+const DecorativeCard = ({ format = 'horizontal', icon, imageUrl }) => {
     return (_jsxs("div", { className: 'jp-components__decorative-card ' +
             (format ? 'jp-components__decorative-card--' + format : ''), children: [_jsx("div", { className: "jp-components__decorative-card__image", style: { backgroundImage: imageUrl ? `url( ${imageUrl} )` : '' } }), _jsx("div", { className: "jp-components__decorative-card__content", children: _jsx("div", { className: "jp-components__decorative-card__lines" }) }), icon ? (_jsx("div", { className: "jp-components__decorative-card__icon-container", children: _jsx("span", { className: 'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon }) })) : null] }));
 };