@automattic/jetpack-ai-client 0.33.0 → 0.33.2

package/CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.33.2] - 2025-07-14
+### Changed
+- Update package dependencies. [#44217] [#44219]
+
+## [0.33.1] - 2025-07-07
+### Changed
+- Jetpack AI: Change Chrome AI experiment name to v2. [#44135]
+- Update package dependencies. [#44148]
+
 ## [0.33.0] - 2025-06-30
 ### Changed
 - Create custom explat client with public-api fetch for assignments. [#44081]
@@ -654,6 +663,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.33.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.1...v0.33.2
+[0.33.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.0...v0.33.1
 [0.33.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.32.1...v0.33.0
 [0.32.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.32.0...v0.32.1
 [0.32.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.31.2...v0.32.0

package/build/chrome-ai/get-availability.js

@@ -60,7 +60,7 @@ export async function isChromeAIAvailable() {
         logError: debug,
         isDevelopmentMode: false,
     });
-    const { variationName } = await loadExperimentAssignmentWithAuth('calypso_jetpack_ai_gemini_api_202503_v1');
+    const { variationName } = await loadExperimentAssignmentWithAuth('calypso_jetpack_ai_gemini_api_202503_v2');
     debug('variationName', variationName);
     return variationName === 'treatment';
 }

package/build/components/ai-control/ai-control.d.ts

@@ -2,13 +2,12 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import React from 'react';
 import './style.scss';
 /**
  * Types
  */
 import type { RequestingStateProp } from '../../types.ts';
-import type { ReactElement } from 'react';
+import type { MutableRefObject, ReactElement } from 'react';
 type AIControlProps = {
     className?: string;
     disabled?: boolean;
@@ -22,7 +21,7 @@ type AIControlProps = {
     actions?: ReactElement;
     message?: ReactElement;
     promptUserInputRef?: PlainText.Props['ref'];
-    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
+    wrapperRef?: MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Base AIControl component. Contains the main structure of the control component and slots for banner, error, actions and message.

package/build/components/ai-control/block-ai-control.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
 import './style.scss';
 /**
  * Types
  */
 import type { RequestingStateProp } from '../../types.ts';
-import type { ReactElement } from 'react';
+import type { MutableRefObject, ReactElement } from 'react';
 type BlockAIControlProps = {
     disabled?: boolean;
     value: string;
@@ -29,10 +28,10 @@ type BlockAIControlProps = {
 /**
  * BlockAIControl component. Used by the AI Assistant block, adding logic and components to the base AIControl component.
  *
- * @param {BlockAIControlProps}    props - Component props
- * @param {React.MutableRefObject} ref   - Ref to the component
+ * @param {BlockAIControlProps} props - Component props
+ * @param {MutableRefObject}    ref   - Ref to the component
  * @return {ReactElement}             Rendered component
  */
-export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, lastAction, }: BlockAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
-declare const _default: React.ForwardRefExoticComponent<BlockAIControlProps & React.RefAttributes<HTMLInputElement>>;
+export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, lastAction, }: BlockAIControlProps, ref: MutableRefObject<HTMLInputElement>): ReactElement;
+declare const _default: import("react").ForwardRefExoticComponent<BlockAIControlProps & import("react").RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/components/ai-control/block-ai-control.js

@@ -19,8 +19,8 @@ const debug = debugFactory('jetpack-ai-client:block-ai-control');
 /**
  * BlockAIControl component. Used by the AI Assistant block, adding logic and components to the base AIControl component.
  *
- * @param {BlockAIControlProps}    props - Component props
- * @param {React.MutableRefObject} ref   - Ref to the component
+ * @param {BlockAIControlProps} props - Component props
+ * @param {MutableRefObject}    ref   - Ref to the component
  * @return {ReactElement}             Rendered component
  */
 export function BlockAIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange, onSend, onStop, onAccept, onDiscard, showRemove = false, banner = null, error = null, lastAction, }, ref) {

package/build/components/ai-control/extension-ai-control.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
 import './style.scss';
 /**
  * Types
  */
 import type { RequestingErrorProps, RequestingStateProp } from '../../types.ts';
-import type { ReactElement, MouseEvent } from 'react';
+import type { MutableRefObject, ReactElement, MouseEvent } from 'react';
 type ExtensionAIControlProps = {
     className?: string;
     disabled?: boolean;
@@ -19,7 +18,7 @@ type ExtensionAIControlProps = {
     showUpgradeMessage?: boolean;
     showFairUsageMessage?: boolean;
     upgradeUrl?: string;
-    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
+    wrapperRef?: MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
     onStop?: () => void;
@@ -34,9 +33,9 @@ type ExtensionAIControlProps = {
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
  *
  * @param {ExtensionAIControlProps} props - Component props
- * @param {React.MutableRefObject}  ref   - Ref to the component
+ * @param {MutableRefObject}        ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
-declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType, }: ExtensionAIControlProps, ref: MutableRefObject<HTMLInputElement>): ReactElement;
+declare const _default: import("react").ForwardRefExoticComponent<ExtensionAIControlProps & import("react").RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/components/ai-control/extension-ai-control.js

@@ -18,7 +18,7 @@ import './style.scss';
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
  *
  * @param {ExtensionAIControlProps} props - Component props
- * @param {React.MutableRefObject}  ref   - Ref to the component
+ * @param {MutableRefObject}        ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
 export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, showFairUsageMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType, }, ref) {

package/build/components/ai-feedback/index.d.ts

@@ -2,7 +2,7 @@ import './style.scss';
 /**
  * Types
  */
-import type React from 'react';
+import type { ReactElement } from 'react';
 type AiFeedbackThumbsProps = {
     disabled?: boolean;
     iconSize?: number;
@@ -21,7 +21,7 @@ type AiFeedbackThumbsProps = {
  * AiFeedbackThumbs component.
  *
  * @param {AiFeedbackThumbsProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
-export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate, }: AiFeedbackThumbsProps): React.ReactElement;
+export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate, }: AiFeedbackThumbsProps): ReactElement;
 export {};

package/build/components/ai-feedback/index.js

@@ -25,7 +25,7 @@ function getFeatureAvailability(feature) {
  * AiFeedbackThumbs component.
  *
  * @param {AiFeedbackThumbsProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiFeedbackThumbs({ disabled = false, iconSize = 24, ratedItem = '', feature = '', savedRatings = {}, options = {}, onRate, }) {
     if (!getFeatureAvailability('ai-response-feedback')) {

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

@@ -2,7 +2,7 @@ export declare const AiSVG: import("react/jsx-runtime").JSX.Element;
 /**
  * AiIcon component
  * @param {string} className - The wrapper class name.
- * @return {React.ReactElement} The `AiIcon` component.
+ * @return {ReactElement} The `AiIcon` component.
  */
 export default function AiIcon({ className, size }: {
     className?: string;

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

@@ -1,7 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { G, Path, SVG, Rect } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 import { Defs } from '@wordpress/primitives';
@@ -9,7 +6,7 @@ export const AiSVG = (_jsxs(SVG, { width: "42", height: "42", viewBox: "0 0 42 4
 /**
  * AiIcon component
  * @param {string} className - The wrapper class name.
- * @return {React.ReactElement} The `AiIcon` component.
+ * @return {ReactElement} The `AiIcon` component.
  */
 export default function AiIcon({ className, size = 42 }) {
     return _jsx(Icon, { icon: AiSVG, width: size, height: size, className: className });

package/build/components/ai-image/components/ai-image-modal.d.ts

@@ -1,9 +1,7 @@
-/**
- * Internal dependencies
- */
 import { ImageStyleObject, ImageStyle } from '../../../hooks/use-image-generator/constants.ts';
 import { CarrouselImages } from './carrousel.tsx';
 import './ai-image-modal.scss';
+import type { JSX } from 'react';
 type AiImageModalProps = {
     title: string;
     cost: number;
@@ -30,7 +28,7 @@ type AiImageModalProps = {
     hasError: boolean;
     handlePreviousImage: () => void;
     handleNextImage: () => void;
-    acceptButton: React.JSX.Element;
+    acceptButton: JSX.Element;
     autoStart?: boolean;
     autoStartAction?: ({ userPrompt, style }: {
         userPrompt?: string;
@@ -49,7 +47,7 @@ type AiImageModalProps = {
 /**
  * AiImageModal component
  * @param {AiImageModalProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiImageModal({ title, cost, open, images, currentIndex, onClose, onTryAgain, onGenerate, generating, notEnoughRequests, requireUpgrade, currentLimit, currentUsage, isUnlimited, upgradeDescription, hasError, handlePreviousImage, handleNextImage, acceptButton, autoStart, autoStartAction, instructionsPlaceholder, imageStyles, onGuessStyle, prompt, setPrompt, initialStyle, inputDisabled, actionDisabled, }: AiImageModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ai-image/components/ai-image-modal.js

@@ -1,15 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { SelectControl } from '@wordpress/components';
 import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
 import { IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO, } from "../../../hooks/use-image-generator/constants.js";
 import { AiModalPromptInput } from "../../../logo-generator/index.js";
 import AiModalFooter from "../../ai-modal-footer/index.js";
@@ -23,7 +17,7 @@ const debug = debugFactory('jetpack-ai-client:ai-image-modal');
 /**
  * AiImageModal component
  * @param {AiImageModalProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiImageModal({ title, cost, open, images, currentIndex = 0, onClose = null, onTryAgain = null, onGenerate = null, generating = false, notEnoughRequests = false, requireUpgrade = false, currentLimit = null, currentUsage = null, isUnlimited = false, upgradeDescription = null, hasError = false, handlePreviousImage = () => { }, handleNextImage = () => { }, acceptButton = null, autoStart = false, autoStartAction = null, instructionsPlaceholder = null, imageStyles = [], onGuessStyle = null, prompt = '', setPrompt = () => { }, initialStyle = null, inputDisabled = false, actionDisabled = false, }) {
     const { tracks } = useAnalytics();

package/build/components/ai-image/components/carrousel.d.ts

@@ -1,4 +1,5 @@
 import './carrousel.scss';
+import type { JSX } from 'react';
 export type CarrouselImageData = {
     image?: string;
     libraryId?: number | string;
@@ -16,12 +17,12 @@ type CarrouselProps = {
     current: number;
     handlePreviousImage: () => void;
     handleNextImage: () => void;
-    actions?: React.JSX.Element;
+    actions?: JSX.Element;
 };
 /**
  * Carrousel component
  * @param {CarrouselProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions, }: CarrouselProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ai-image/components/carrousel.js

@@ -1,22 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { Spinner } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import clsx from 'clsx';
-/**
- * Internal dependencies
- */
 import AiFeedbackThumbs from "../../ai-feedback/index.js";
 import AiIcon from "../../ai-icon/index.js";
 import './carrousel.scss';
 /**
  * BlankImage component
  * @param {BlankImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 function BlankImage({ children, isDotted = false, contentClassName = '' }) {
     const blankImage = (_jsx("img", { className: "ai-assistant-image__carrousel-image", src: "data:image/svg+xml,<svg viewBox='0 0 1 1' width='1024' height='768' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L1 0 L1 1 L0 1 L0 0 Z' fill='none' /></svg>", alt: "" }));
@@ -27,7 +21,7 @@ function BlankImage({ children, isDotted = false, contentClassName = '' }) {
 /**
  * Carrousel component
  * @param {CarrouselProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions = null, }) {
     const [imageFeedbackDisabled, setImageFeedbackDisabled] = useState(false);

package/build/components/ai-image/components/usage-counter.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import './usage-counter.scss';
 type UsageCounterProps = {
     currentLimit: number;
@@ -10,7 +7,7 @@ type UsageCounterProps = {
 /**
  * UsageCounter component
  * @param {UsageCounterProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function UsageCounter({ currentLimit, currentUsage, cost }: UsageCounterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ai-image/components/usage-counter.js

@@ -1,17 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
 import './usage-counter.scss';
 /**
  * UsageCounter component
  * @param {UsageCounterProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function UsageCounter({ currentLimit, currentUsage, cost }) {
     const requestsBalance = currentLimit - currentUsage;

package/build/components/ai-image/featured-image.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import './style.scss';
 type FeaturedImageProps = {
     busy: boolean;
@@ -11,7 +8,7 @@ type FeaturedImageProps = {
 /**
  * FeaturedImage component
  * @param {FeaturedImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function FeaturedImage({ busy, disabled, placement, onClose, }: FeaturedImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ai-image/featured-image.js

@@ -1,7 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { useAnalytics, PLAN_TYPE_UNLIMITED, usePlanType, } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -9,9 +6,6 @@ import { store as editorStore } from '@wordpress/editor';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
 import './style.scss';
 import { PLACEMENT_JETPACK_SIDEBAR, PLACEMENT_DOCUMENT_SETTINGS } from "../../constants.js";
 import useAiFeature from "../../hooks/use-ai-feature/index.js";
@@ -25,7 +19,7 @@ const debug = debugFactory('jetpack-ai-client:featured-image');
 /**
  * FeaturedImage component
  * @param {FeaturedImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function FeaturedImage({ busy, disabled, placement, onClose = () => { }, }) {
     const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(placement === PLACEMENT_MEDIA_SOURCE_DROPDOWN);

package/build/components/ai-image/general-purpose-image.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import './style.scss';
 /**
  * The type for the callback function that is called when the user selects an image.
@@ -17,7 +14,7 @@ type GeneralPurposeImageProps = {
 /**
  * GeneralPurposeImage component
  * @param {GeneralPurposeImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function GeneralPurposeImage({ placement, onClose, onSetImage, }: GeneralPurposeImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ai-image/general-purpose-image.js

@@ -1,15 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { useAnalytics, PLAN_TYPE_UNLIMITED, usePlanType, } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
 import './style.scss';
 import useAiFeature from "../../hooks/use-ai-feature/index.js";
 import usePostContent from "../../hooks/use-post-content.js";
@@ -22,7 +16,7 @@ const debug = debugFactory('jetpack-ai:general-purpose-image');
 /**
  * GeneralPurposeImage component
  * @param {GeneralPurposeImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function GeneralPurposeImage({ placement, onClose = () => { }, onSetImage = () => { }, }) {
     const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(true);

package/build/components/ai-image/hooks/use-ai-image.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ImageStyleObject, ImageStyle } from '../../../hooks/use-image-generator/constants.ts';
 /**
  * Types
@@ -34,14 +33,14 @@ type UseAiImageProps = {
  */
 export default function useAiImage({ feature, type, cost, autoStart, previousMediaId, }: UseAiImageProps): {
     current: number;
-    setCurrent: React.Dispatch<React.SetStateAction<number>>;
+    setCurrent: import("react").Dispatch<import("react").SetStateAction<number>>;
     processImageGeneration: ({ userPrompt, postContent, notEnoughRequests, style, }: ProcessImageGenerationProps) => Promise<ImageResponse>;
     handlePreviousImage: () => void;
     handleNextImage: () => void;
     currentImage: CarrouselImageData;
     currentPointer: CarrouselImageData;
     images: CarrouselImages;
-    pointer: React.MutableRefObject<number>;
+    pointer: import("react").MutableRefObject<number>;
     imageStyles: ImageStyleObject[];
     guessStyle: (prompt: string, requestType?: string, content?: string) => Promise<ImageStyle | null>;
 };

package/build/components/ai-modal-footer/index.d.ts

@@ -5,7 +5,7 @@ import './style.scss';
 /**
  * Types
  */
-import type React from 'react';
+import type { ReactElement } from 'react';
 type AiModalFooterProps = {
     onGuidelinesClick?: () => void;
     onFeedbackClick?: () => void;
@@ -14,7 +14,7 @@ type AiModalFooterProps = {
  * AiModalFooter component.
  *
  * @param {AiModalFooterProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
-export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }: AiModalFooterProps): React.ReactElement;
+export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }: AiModalFooterProps): ReactElement;
 export {};

package/build/components/ai-modal-footer/index.js

@@ -14,7 +14,7 @@ import './style.scss';
  * AiModalFooter component.
  *
  * @param {AiModalFooterProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }) {
     const handleGuidelinesClick = useCallback(() => {

package/build/components/ai-status-indicator/index.d.ts

@@ -1,6 +1,6 @@
 import type { RequestingStateProp } from '../../types.ts';
 export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
-import type React from 'react';
+import type { ReactElement } from 'react';
 import './style.scss';
 export type AiStatusIndicatorProps = {
     state?: RequestingStateProp;
@@ -10,6 +10,6 @@ export type AiStatusIndicatorProps = {
  * AiStatusIndicator component.
  *
  * @param {AiStatusIndicatorProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
-export default function AiStatusIndicator({ state }: AiStatusIndicatorProps): React.ReactElement;
+export default function AiStatusIndicator({ state }: AiStatusIndicatorProps): ReactElement;

package/build/components/ai-status-indicator/index.js

@@ -9,7 +9,7 @@ import './style.scss';
  * AiStatusIndicator component.
  *
  * @param {AiStatusIndicatorProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiStatusIndicator({ state }) {
     return (_jsx("div", { className: clsx('jetpack-ai-status-indicator__icon-wrapper', {

package/build/components/audio-duration-display/index.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { ReactElement } from 'react';
 type AudioDurationDisplayProps = {
     duration: number;
     className?: string | null;
@@ -7,7 +7,7 @@ type AudioDurationDisplayProps = {
  * AudioDurationDisplay component.
  *
  * @param {AudioDurationDisplayProps} props - Component props.
- * @return {React.ReactElement}              Rendered component.
+ * @return {ReactElement}              Rendered component.
  */
-export default function AudioDurationDisplay({ duration, className, }: AudioDurationDisplayProps): React.ReactElement;
+export default function AudioDurationDisplay({ duration, className, }: AudioDurationDisplayProps): ReactElement;
 export {};

package/build/components/audio-duration-display/index.js

@@ -7,7 +7,7 @@ import { formatTime } from "./lib/media.js";
  * AudioDurationDisplay component.
  *
  * @param {AudioDurationDisplayProps} props - Component props.
- * @return {React.ReactElement}              Rendered component.
+ * @return {ReactElement}              Rendered component.
  */
 export default function AudioDurationDisplay({ duration, className, }) {
     return _jsx("span", { className: className, children: formatTime(duration, { addDecimalPart: false }) });

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

@@ -6,7 +6,7 @@ import './style.scss';
  * Types
  */
 import type { SuggestionErrorCode } from '../../types.ts';
-import type React from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 export declare const MESSAGE_SEVERITY_WARNING = "warning";
 export declare const MESSAGE_SEVERITY_ERROR = "error";
 export declare const MESSAGE_SEVERITY_SUCCESS = "success";
@@ -20,15 +20,15 @@ type AiFeedbackThumbsOptions = {
     onRate?: (rating: string) => void;
 };
 export type MessageProps = {
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     severity?: MessageSeverityProp;
     aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
-    children: React.ReactNode;
+    children: ReactNode;
 };
 export type GuidelineMessageProps = {
     aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
 };
-export type OnUpgradeClick = (event?: React.MouseEvent<HTMLButtonElement>) => void;
+export type OnUpgradeClick = (event?: MouseEvent<HTMLButtonElement>) => void;
 export type UpgradeMessageProps = {
     requestsRemaining: number;
     severity?: MessageSeverityProp;
@@ -46,34 +46,34 @@ export type ErrorMessageProps = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement}    Banner component.
+ * @return {ReactElement}    Banner component.
  */
-export default function Message({ severity, icon, aiFeedbackThumbsOptions, children, }: MessageProps): React.ReactElement;
+export default function Message({ severity, icon, aiFeedbackThumbsOptions, children, }: MessageProps): ReactElement;
 /**
  * React component to render a guideline message.
  *
  * @param {GuidelineMessageProps} props - Component props.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function GuidelineMessage({ aiFeedbackThumbsOptions, }: GuidelineMessageProps): React.ReactElement;
+export declare function GuidelineMessage({ aiFeedbackThumbsOptions, }: GuidelineMessageProps): ReactElement;
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function FairUsageLimitMessage(): React.ReactElement;
+export declare function FairUsageLimitMessage(): ReactElement;
 /**
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: UpgradeMessageProps): React.ReactElement;
+export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: UpgradeMessageProps): ReactElement;
 /**
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): React.ReactElement;
+export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): ReactElement;
 export {};