@automattic/jetpack-components 0.55.7 → 0.55.9

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.55.9] - 2024-08-21
+### Fixed
+- Revert recent SVG image optimizations. [#38981]
+
+## [0.55.8] - 2024-08-19
+### Changed
+- Updated package dependencies. [#38893]
+
+### Fixed
+- Lossless image optimization for images (should improve performance with no visible changes). [#38750]
+
 ## [0.55.7] - 2024-08-15
 ### Changed
 - Updated package dependencies. [#38665]
@@ -1122,6 +1133,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.55.9]: https://github.com/Automattic/jetpack-components/compare/0.55.8...0.55.9
+[0.55.8]: https://github.com/Automattic/jetpack-components/compare/0.55.7...0.55.8
 [0.55.7]: https://github.com/Automattic/jetpack-components/compare/0.55.6...0.55.7
 [0.55.6]: https://github.com/Automattic/jetpack-components/compare/0.55.5...0.55.6
 [0.55.5]: https://github.com/Automattic/jetpack-components/compare/0.55.4...0.55.5

package/components/action-button/index.jsx

@@ -20,7 +20,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.
- * @returns {React.Component} The `ActionButton` component.
+ * @return {React.Component} The `ActionButton` component.
  */
 const ActionButton = props => {
 	const {

package/components/admin-page/index.tsx

@@ -14,7 +14,7 @@ import type React from 'react';
  * All content must be passed as children wrapped in as many <AdminSection> elements as needed.
  *
  * @param {AdminPageProps} props - Component properties.
- * @returns {React.ReactNode} AdminPage component.
+ * @return {React.ReactNode} AdminPage component.
  */
 const AdminPage: React.FC< AdminPageProps > = ( {
 	children,

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

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

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

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

package/components/alert/index.tsx

@@ -35,12 +35,12 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
 /**
  * Alert component
  *
- * @param {object} props                   - The component properties.
- * @param {string} props.level             - The alert level: error, warning, info, success.
- * @param {boolean} props.showIcon         - Whether to show the alert icon.
- * @param {string} props.className         - The wrapper class name.
- * @param {React.Component} props.children - The alert content.
- * @returns {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 {React.Component} props.children  - The alert content.
+ * @return {React.ReactElement}             The `Alert` component.
  */
 const Alert: React.FC< AlertProps > = ( {
 	level = 'warning',

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

@@ -7,7 +7,7 @@ import { AutomatticBylineLogoProps } from './types';
  * Automattic "By line" Logo component.
  *
  * @param {AutomatticBylineLogoProps} props - Component properties.
- * @returns {React.ReactNode} AutomatticBylineLogo component.
+ * @return {React.ReactNode} AutomatticBylineLogo component.
  */
 const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
 	title = __( 'An Automattic Airline', 'jetpack' ),

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

@@ -4,9 +4,9 @@ import React from 'react';
 /**
  * Automattic for Agencies Logo component
  *
- * @param {object} props        - Component props
- * @param {string} props.color  - Color code for the logo text
- * @returns {React.ReactElement} Component template
+ * @param {object} props       - Component props
+ * @param {string} props.color - Color code for the logo text
+ * @return {React.ReactElement} Component template
  */
 export default function AutomatticForAgenciesLogo( {
 	color = '#FFFFFF',

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

@@ -4,10 +4,10 @@ import React 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
- * @returns {React.ReactElement} Component template
+ * @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
  */
 export default function AutomatticIconLogo( {
 	innerColor = '#00A3E0',

package/components/boost-score-graph/day-highlight-plugin.ts

@@ -3,7 +3,7 @@ import uPlot from 'uplot';
 /**
  * Definition of the column highlight plugin.
  *
- * @returns {object} The uPlot plugin object with hooks.
+ * @return {object} The uPlot plugin object with hooks.
  */
 export function dayHighlightPlugin() {
 	let overEl, highlightEl;

package/components/boost-score-graph/get-date-format.ts

@@ -4,10 +4,10 @@ const MONTH_FORMAT = 'short';
 /**
  * Returns a formatted date based on the provided template and locale.
  *
- * @param {string} template - The template used to format the date.
- * @param {Date} date - The date object to be formatted.
+ * @param {string} template      - The template used to format the date.
+ * @param {Date}   date          - The date object to be formatted.
  * @param {string} [locale='en'] - The locale code specifying the language and region to be used for formatting. Default 'en'.
- * @returns {string} The formatted date as a string.
+ * @return {string} The formatted date as a string.
  */
 export default function getDateFormat( template: string, date: Date, locale = 'en' ): string {
 	let newDayMonthFormat;

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

@@ -40,11 +40,11 @@ export type ScoreGraphAlignedData = [
 /**
  * BoostScoreGraph component composed by the chart and the legend.
  *
- * @param {BoostScoreGraphProps} props - The props object for the BoostScoreGraph component.
- * @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.
- * @returns {React.ReactElement} The JSX element representing the BoostScoreGraph component, or null if loading.
+ * @param {BoostScoreGraphProps} props                   - The props object for the BoostScoreGraph component.
+ * @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.
  */
 export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 	periods = [],

package/components/boost-score-graph/tooltips-plugin.ts

@@ -7,7 +7,7 @@ import { Period } from '.';
  * Custom tooltips plugin for uPlot.
  *
  * @param {Period[]} periods - The periods to display in the tooltip.
- * @returns {object} The uPlot plugin object with hooks.
+ * @return {object} The uPlot plugin object with hooks.
  */
 export function tooltipsPlugin( periods ) {
 	const reactRoot = document.createElement( 'div' );
@@ -17,7 +17,7 @@ export function tooltipsPlugin( periods ) {
 	/**
 	 * Initializes the tooltips plugin.
 	 *
-	 * @param {uPlot} u - The uPlot instance.
+	 * @param {uPlot}  u     - The uPlot instance.
 	 * @param {object} _opts - Options for the uPlot instance.
 	 */
 	function init( u: uPlot, _opts: object ) {

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

@@ -33,7 +33,7 @@ interface UplotChartProps {
  *
  * @param {string} label - The label for the series.
  * @param {number} score - The last score for the series.
- * @returns {object} The series information object.
+ * @return {object} The series information object.
  */
 function createSerieInfo( label: string, score ) {
 	const { spline } = uPlot.paths;
@@ -67,9 +67,9 @@ function createSerieInfo( label: string, score ) {
 /**
  * Get the color value based on the score.
  *
- * @param {number} score - The score to get the color for.
+ * @param {number} score   - The score to get the color for.
  * @param {string} opacity - Whether to return a transparent color.
- * @returns {string} The color value.
+ * @return {string} The color value.
  */
 function getColor( score: number, opacity = 'FF' ) {
 	let color = '#D63638'; // bad
@@ -86,11 +86,11 @@ function getColor( score: number, opacity = 'FF' ) {
 /**
  * UplotLineChart component.
  *
- * @param {object} props - The props object for the UplotLineChart component.
- * @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.
- * @returns {React.Element} The JSX element representing the UplotLineChart component.
+ * @param {object}                                 props             - The props object for the UplotLineChart component.
+ * @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.
  */
 export default function UplotLineChart( { range, periods, annotations = [] }: UplotChartProps ) {
 	const uplot = useRef< uPlot | null >( null );

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

@@ -18,7 +18,7 @@ const getPeriodDimension = function ( key: string, periods: Period[] ) {
  * Transforms an array of periods into an array of arrays, where the first array is the timestamps, and the rest are the values for each key
  *
  * @param {Period[]} periods - Array of periods to transform
- * @returns {ScoreGraphAlignedData | []} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ * @return {ScoreGraphAlignedData | []} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
  */
 export function useBoostScoreTransform( periods: Period[] ): ScoreGraphAlignedData | [] {
 	return useMemo( () => {

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

@@ -7,7 +7,7 @@ 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<uPlot>}          uplotRef     - The ref object for the uPlot instance.
  * @param {React.RefObject<HTMLDivElement>} containerRef - The ref object for the container div.
  */
 export default function useResize(

package/components/button/index.tsx

@@ -16,7 +16,7 @@ import type { ButtonProps } from './types';
  * Button component
  *
  * @param {ButtonProps} props - Component Props
- * @returns {React.ReactNode} Rendered button
+ * @return {React.ReactNode} Rendered button
  */
 const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 	const {

package/components/chip/index.tsx

@@ -10,10 +10,10 @@ type ChipProps = {
 /**
  * Chip component
  *
- * @param {object} props         - The component properties.
- * @param {string} props.type    - The type new or info
- * @param {string} props.text    - Chip text
- * @returns {React.ReactElement} The `Chip` component.
+ * @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.
  */
 const Chip: React.FC< ChipProps > = ( { type = 'info', text } ) => {
 	const classes = clsx( styles.chip, styles[ `is-${ type }` ] );

package/components/decorative-card/index.tsx

@@ -6,7 +6,7 @@ import './style.scss';
  * A decorative card used in the disconnection flow.
  *
  * @param {DecorativeCardProps} props - The properties.
- * @returns {React.ReactNode} - The DecorativeCard component.
+ * @return {React.ReactNode} - The DecorativeCard component.
  */
 
 const DecorativeCard: React.FC< DecorativeCardProps > = ( {

package/components/dialog/index.tsx

@@ -16,12 +16,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.
- * @returns {React.ReactNode}                 Rendered dialog
+ * @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
  */
 const Dialog: React.FC< DialogProps > = ( {
 	primary,

package/components/donut-meter/index.tsx

@@ -72,7 +72,7 @@ const getAdaptiveType = ( percentage: number ) => {
  * Generate record meter donut bar
  *
  * @param {DonutMeterProps} props - Props
- * @returns {React.ReactElement} - JSX element
+ * @return {React.ReactElement} - JSX element
  */
 const DonutMeter: React.FC< DonutMeterProps > = ( {
 	className = '',

package/components/global-notices/global-notices.tsx

@@ -11,7 +11,7 @@ export type GlobalNoticesProps = {
  *
  * @param {GlobalNoticesProps} props - Component props.
  *
- * @returns {import('react').ReactNode} The rendered notices list.
+ * @return {import('react').ReactNode} The rendered notices list.
  */
 export function GlobalNotices( { maxVisibleNotices = 3 }: GlobalNoticesProps ) {
 	const { getNotices, removeNotice } = useGlobalNotices();

package/components/global-notices/use-global-notices.ts

@@ -9,7 +9,7 @@ export type TGlobalNotices = ReturnType< NoticesStore[ 'getActions' ] > &
 /**
  * The global notices hook.
  *
- * @returns {TGlobalNotices} The global notices selectors and actions.
+ * @return {TGlobalNotices} The global notices selectors and actions.
  */
 export function useGlobalNotices(): TGlobalNotices {
 	const actionCreators = useDispatch( noticesStore );

package/components/icon-tooltip/index.tsx

@@ -24,7 +24,7 @@ const placementsToPositions = ( placement: Placement ): Position => {
  * Generate Icon Tooltip
  *
  * @param {IconTooltipProps} props - Props
- * @returns {React.ReactElement} - JSX element
+ * @return {React.ReactElement} - JSX element
  */
 const IconTooltip: React.FC< IconTooltipProps > = ( {
 	className = '',

package/components/icons/index.tsx

@@ -9,7 +9,7 @@ import type React from 'react';
  * Icon Wrapper component.
  *
  * @param {BaseIconProps} props - Component props.
- * @returns {React.ReactNode} Icon Wrapper component.
+ * @return {React.ReactNode} Icon Wrapper component.
  */
 const IconWrapper: React.FC< BaseIconProps > = ( {
 	className,
@@ -264,8 +264,8 @@ export type IconSlug = keyof IconsMap;
 /**
  * Return icon component by slug.
  *
- * @param {string} slug       - Icon slug.
- * @returns {React.ComponentType<BaseIconProps>}   Icon component.
+ * @param {string} slug - Icon slug.
+ * @return {React.ComponentType<BaseIconProps>}   Icon component.
  */
 export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[ Slug ] {
 	if ( ! iconsMap[ slug ] ) {

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

@@ -14,7 +14,7 @@ import type React from 'react';
  * Indeterminate Progress Bar component
  *
  * @param {IndeterminateProgressBarProps} props - Component props.
- * @returns {React.ReactNode} - IndeterminateProgressBar react component.
+ * @return {React.ReactNode} - IndeterminateProgressBar react component.
  */
 const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( { className } ) => {
 	return (

package/components/jetpack-footer/index.tsx

@@ -32,7 +32,7 @@ const ExternalIcon: React.FC = () => (
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @returns {React.ReactNode} JetpackFooter component.
+ * @return {React.ReactNode} JetpackFooter component.
  */
 const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 	moduleName = __( 'Jetpack', 'jetpack' ),

package/components/layout/col/index.tsx

@@ -11,8 +11,8 @@ const lgCols = Number( styles.lgCols );
 /**
  * The basic Col component.
  *
- * @param {ColProps} props         - Component properties.
- * @returns {React.ReactElement}   Col component.
+ * @param {ColProps} props - Component properties.
+ * @return {React.ReactElement}   Col component.
  */
 const Col: React.FC< ColProps > = props => {
 	const { children, tagName = 'div', className } = props;

package/components/layout/container/index.tsx

@@ -8,7 +8,7 @@ import type React from 'react';
  * JP Container
  *
  * @param {ContainerProps} props - Component properties.
- * @returns {React.ReactElement}   Container component.
+ * @return {React.ReactElement}   Container component.
  */
 const Container: React.FC< ContainerProps > = ( {
 	children,

package/components/layout/use-breakpoint-match/index.ts

@@ -39,9 +39,9 @@ const getMediaByOperator = (
 /**
  * Hook to match if current viewport is equal, greater or less than expected breakpoint
  *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch	  - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)} operatorToMatch				  - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @returns {Array<boolean>}																					- List of matches, following breakpoints sequence.
+ * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
+ * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
+ * @return {Array<boolean>} - List of matches, following breakpoints sequence.
  * @example
  *
  * ```es6

package/components/notice/index.tsx

@@ -41,14 +41,14 @@ const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
 /**
  * Notice component
  *
- * @param {object} props                    - The component properties.
- * @param {string} props.level              - The notice level: error, warning, info, success.
- * @param {boolean} props.hideCloseButton   - Whether to hide the close button.
- * @param {Function} props.onClose          - The function to call when the close button is clicked.
- * @param {string} props.title              - The title of the notice.
- * @param {React.ReactNode[]} props.actions - Actions to show across the bottom of the bar.
- * @param {React.Component} props.children  - The notice content.
- * @returns {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 {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.
  */
 const Notice: React.FC< NoticeProps > = ( {
 	level = 'info',

package/components/number-format/index.ts

@@ -3,9 +3,9 @@ import { getUserLocale } from '../../lib/locale';
 /**
  * Format a number using the locale in use by the user viewing the page.
  *
- * @param {number} number - The number to format.
+ * @param {number}                   number  - The number to format.
  * @param {Intl.NumberFormatOptions} options - The format options
- * @returns {string} Formatted number.
+ * @return {string} Formatted number.
  */
 const numberFormat = ( number: number, options: Intl.NumberFormatOptions = {} ): string => {
 	const locale = getUserLocale();

package/components/number-slider/index.tsx

@@ -9,7 +9,7 @@ import './style.scss';
  * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
  *
  * @param {NumberSliderProps} props - Props
- * @returns {React.ReactElement} - JSX element
+ * @return {React.ReactElement} - JSX element
  */
 const NumberSlider: React.FC< NumberSliderProps > = ( {
 	className,

package/components/pricing-card/index.tsx

@@ -15,7 +15,7 @@ import './style.scss';
  * doesn't exist.
  *
  * @param {CurrencyObject} currencyObject -- A currency object returned from `getCurrencyObject`.
- * @returns {boolean} Whether or not to display the price decimal part.
+ * @return {boolean} Whether or not to display the price decimal part.
  */
 const showPriceDecimals = ( currencyObject: CurrencyObject ): boolean => {
 	return currencyObject.fraction.indexOf( '00' ) === -1;
@@ -25,7 +25,7 @@ const showPriceDecimals = ( currencyObject: CurrencyObject ): boolean => {
  * The Pricing card component.
  *
  * @param {PricingCardProps} props -- The component props.
- * @returns {React.ReactNode} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 const PricingCard: React.FC< PricingCardProps > = ( {
 	currencyCode = 'USD',

package/components/product-offer/icons-card.tsx

@@ -8,8 +8,8 @@ import { IconsCardProps } from './types';
  * Icons composition for a bundle product,
  * based on the list of supported products.
  *
- * @param {IconsCardProps} props         - Component props.
- * @returns {React.ReactNode}      Bundle product icons react component.
+ * @param {IconsCardProps} props - Component props.
+ * @return {React.ReactNode}      Bundle product icons react component.
  */
 export const IconsCard: React.FC< IconsCardProps > = ( { products, icon, size = 24 } ) => {
 	if ( icon ) {

package/components/product-offer/index.tsx

@@ -16,7 +16,7 @@ import type React from 'react';
  * Product Detail component.
  *
  * @param {ProductOfferProps} props - Component props.
- * @returns {React.ReactNode} - ProductOffer react component.
+ * @return {React.ReactNode} - ProductOffer react component.
  */
 const ProductOffer: React.FC< ProductOfferProps > = ( {
 	addProductUrl,

package/components/product-offer/product-offer-header.tsx

@@ -9,7 +9,7 @@ import type React from 'react';
  * Product Detail Card Header component.
  *
  * @param {ProductOfferHeaderProps} props - Component props.
- * @returns {React.ReactNode}  ProductOfferHeader react component.
+ * @return {React.ReactNode}  ProductOfferHeader react component.
  */
 export const ProductOfferHeader: React.FC< ProductOfferHeaderProps > = ( {
 	title = __( 'Popular upgrade', 'jetpack' ),

package/components/product-price/index.tsx

@@ -16,7 +16,7 @@ import type React from 'react';
  * React component to render the price.
  *
  * @param {ProductPriceProps} props - Component props.
- * @returns {React.ReactNode} Price react component.
+ * @return {React.ReactNode} Price react component.
  */
 const ProductPrice: React.FC< ProductPriceProps > = ( {
 	price,

package/components/product-price/price.tsx

@@ -8,8 +8,8 @@ import type React from 'react';
 /**
  * React component to render a Price composition.
  *
- * @param {PriceProps} props  - Component props.
- * @returns {React.ReactNode} -Price react component.
+ * @param {PriceProps} props - Component props.
+ * @return {React.ReactNode} -Price react component.
  */
 export const Price: React.FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
 	const classNames = clsx( styles.price, 'product-price_price', {

package/components/progress-bar/index.tsx

@@ -13,7 +13,7 @@ import type React from 'react';
  * Progress Bar component
  *
  * @param {ProgressBarProps} props - Component props.
- * @returns {React.ReactNode} - ProgressBar react component.
+ * @return {React.ReactNode} - ProgressBar react component.
  */
 const ProgressBar: React.FC< ProgressBarProps > = ( {
 	className,

package/components/qr-code/index.tsx

@@ -49,7 +49,7 @@ export type QRCodeProps = {
  * Renders a QR Code.
  *
  * @param {QRCodeProps} props - Component props
- * @returns {React.ReactNode} - React component.
+ * @return {React.ReactNode} - React component.
  */
 const QRCode: React.FC< QRCodeProps > = ( {
 	value = 'https://jetpack.com',

package/components/record-meter-bar/index.tsx

@@ -63,7 +63,7 @@ export type RecordMeterBarProps = {
  * Generate Record Meter bar
  *
  * @param {RecordMeterBarProps} props - Props
- * @returns {React.ReactElement} - JSX element
+ * @return {React.ReactElement} - JSX element
  */
 const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 	totalCount,

package/components/stat-card/index.tsx

@@ -16,7 +16,7 @@ import type React from 'react';
  * StatCard component
  *
  * @param {StatCardProps} props - Component props.
- * @returns {React.ReactNode} - StatCard react component.
+ * @return {React.ReactNode} - StatCard react component.
  */
 const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => {
 	const formattedValue = numberFormat( value );

package/components/text/index.tsx

@@ -8,7 +8,7 @@ import type { H3Props, TextProps, TitleProps } from './types';
  * Text component.
  *
  * @param {TextProps} props - Component props.
- * @returns {React.ReactElement} - JSX.Element
+ * @return {React.ReactElement} - JSX.Element
  */
 const Text = forwardRef< HTMLElement, TextProps >(
 	( { variant = 'body', children, component, className, ...componentProps }, ref ) => {
@@ -45,8 +45,8 @@ export default Text;
 /**
  * Heading component - Medium size.
  *
- * @param {TextProps} props      - Component props.
- * @returns {React.ReactElement} - JSX.Element
+ * @param {TextProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
  */
 export const H2: React.FC< TextProps > = ( { children, ...componentProps } ) => (
 	<Text variant="headline-medium" mb={ 3 } { ...componentProps }>
@@ -57,8 +57,8 @@ export const H2: React.FC< TextProps > = ( { children, ...componentProps } ) =>
 /**
  * Heading component - Small size,
  *
- * @param {H3Props} props        - Component props.
- * @returns {React.ReactElement} - JSX.Element
+ * @param {H3Props} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
  */
 export const H3: React.FC< H3Props > = ( { children, weight = 'bold', ...componentProps } ) => {
 	const variant = `headline-small${
@@ -75,8 +75,8 @@ export const H3: React.FC< H3Props > = ( { children, weight = 'bold', ...compone
 /**
  * Title component, based on Text component.
  *
- * @param {TitleProps} props     - Component props.
- * @returns {React.ReactElement} - JSX.Element
+ * @param {TitleProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
  */
 export const Title: React.FC< TitleProps > = ( {
 	children,

package/components/theme-provider/index.tsx

@@ -111,8 +111,8 @@ const setup = ( root: HTMLElement, id: string, withGlobalStyles?: boolean ) => {
 /**
  * ThemeProvider React component.
  *
- * @param {ThemeProviderProps} props           - Component properties.
- * @returns {React.ReactNode}        ThemeProvider component.
+ * @param {ThemeProviderProps} props - Component properties.
+ * @return {React.ReactNode}        ThemeProvider component.
  */
 const ThemeProvider: React.FC< ThemeProviderProps > = ( {
 	children = null,

package/components/upsell-banner/index.tsx

@@ -13,7 +13,7 @@ import './style.scss';
  * - The secondary CTA is the first button, at the left position.
  *
  * @param {UpsellBannerProps} props - Component props.
- * @returns {React.ReactNode} - UpsellBanner component.
+ * @return {React.ReactNode} - UpsellBanner component.
  */
 const UpsellBanner: React.FC< UpsellBannerProps > = props => {
 	const {

package/lib/locale/index.ts

@@ -4,7 +4,7 @@ import { getSettings } from '@wordpress/date';
  * Clean up WP locale so it matches the format expected by browsers.
  *
  * @param {string} locale - Locale given by WordPress.
- * @returns {string} Browser-formatted locale.
+ * @return {string} Browser-formatted locale.
  */
 export const cleanLocale = ( locale: string ) => {
 	const regex = /^([a-z]{2,3})(_[a-z]{2}|_[a-z][a-z0-9]{4,7})?(?:_.*)?$/i;
@@ -30,7 +30,7 @@ declare const global: typeof globalThis;
 /**
  * Current user locale, or browser locale as fallback.
  *
- * @returns {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
+ * @return {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
  */
 export const getUserLocale = () => {
 	const {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.55.7",
+	"version": "0.55.9",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.34",
+		"@automattic/jetpack-boost-score-api": "^0.1.35",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.5.0",
 		"@wordpress/components": "28.5.0",
@@ -30,7 +30,7 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.4",
+		"social-logos": "^3.1.6",
 		"uplot": "1.6.24",
 		"uplot-react": "1.1.4"
 	},
@@ -39,9 +39,9 @@
 		"@babel/core": "7.24.7",
 		"@babel/preset-react": "7.24.7",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "8.1.6",
-		"@storybook/blocks": "8.1.6",
-		"@storybook/react": "8.1.6",
+		"@storybook/addon-actions": "8.2.9",
+		"@storybook/blocks": "8.2.9",
+		"@storybook/react": "8.2.9",
 		"@testing-library/dom": "10.1.0",
 		"@testing-library/react": "15.0.7",
 		"@testing-library/user-event": "14.5.2",
@@ -57,6 +57,7 @@
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
 		"resize-observer-polyfill": "1.5.1",
+		"storybook": "8.2.9",
 		"ts-dedent": "2.2.0",
 		"typescript": "5.0.4",
 		"webpack": "5.76.0",

package/tools/get-product-checkout-url/index.ts

@@ -1,11 +1,11 @@
 /**
  * Return the checkout URL for the given product.
  *
- * @param {string} productSlug      - wpcom product slug.
- * @param {string} siteSuffix	    - Site suffix
- * @param {string} redirectUrl	    - Redirect URL used to define redirect_to
+ * @param {string}  productSlug     - wpcom product slug.
+ * @param {string}  siteSuffix      - Site suffix
+ * @param {string}  redirectUrl     - Redirect URL used to define redirect_to
  * @param {boolean} isUserConnected - True when the user is connected Jetpack
- * @returns {string}                  The Calypso checkout URL
+ * @return {string}                  The Calypso checkout URL
  */
 export default function getProductCheckoutUrl(
 	productSlug: string,

package/tools/get-site-admin-url/index.ts

@@ -1,7 +1,7 @@
 /**
  * Returns the site admin URL.
  *
- * @returns {?string} The site admin URL or null if not available.
+ * @return {?string} The site admin URL or null if not available.
  */
 export default function getSiteAdminUrl() {
 	return (

package/tools/jp-redirect/index.ts

@@ -12,13 +12,13 @@ import { GetRedirectUrlArgs, QueryVars } from './types';
  * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
  *
  * @since 0.2.0
- * @param {string} source - The URL handler registered in the server or the full destination URL (starting with https://).
- * @param {GetRedirectUrlArgs} args - Additional arguments to build the url.
- * This is not a complete list as any argument passed here
- * will be sent to as a query parameter to the Redirect server.
- * These parameters will not necessarily be passed over to the final destination URL.
- * If you want to add a parameter to the final destination URL, use the `query` argument.
- * @returns {string} The redirect URL
+ * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
+ *                                    This is not a complete list as any argument passed here
+ *                                    will be sent to as a query parameter to the Redirect server.
+ *                                    These parameters will not necessarily be passed over to the final destination URL.
+ *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @return {string} The redirect URL
  */
 export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs = {} ) {
 	const queryVars: QueryVars = {};

package/tools/pricing-utils/index.ts

@@ -4,7 +4,7 @@ import { IntroOffer } from './types';
  * Returns whether an Introductory Offer is a first month trial
  *
  * @param {IntroOffer} introOffer - an intro offer object
- * @returns {boolean}               Whether it's a first month trial or not
+ * @return {boolean}               Whether it's a first month trial or not
  */
 export function isFirstMonthTrial( introOffer: IntroOffer ): boolean {
 	return introOffer?.interval_count === 1 && introOffer?.interval_unit === 'month';