@automattic/jetpack-components 1.12.16 → 1.12.17

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

@@ -27,12 +27,6 @@ const PricingCard = ({ currencyCode = 'USD', priceDetails = __('/month, paid yea
     const currencyObjectAfter = getCurrencyObject(props.priceAfter, currencyCode);
     return (_jsxs("div", { className: "jp-components__pricing-card", children: [props.icon && (_jsx("div", { className: "jp-components__pricing-card__icon", children: 'string' === typeof props.icon ? (_jsx("img", { src: props.icon, alt: sprintf(
                     /* translators: %s: the product name */
-                    __('Icon for the product %s', 'jetpack-components'), props.title) })) : (props.icon) })), _jsx("h1", { className: "jp-components__pricing-card__title", children: props.title }), _jsxs("div", { className: "jp-components__pricing-card__pricing", children: [props.priceAfter === 0 && _jsx(LoadingPlaceholder, { width: "100%", height: 48 }), props.priceBefore !== props.priceAfter && props.priceAfter > 0 && (_jsxs("div", { className: "jp-components__pricing-card__price-before", children: [
-                            _jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectBefore.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectBefore.integer }), showPriceDecimals(currencyObjectBefore) && (_jsxs("span", { className: "jp-components__pricing-card__price-decimal", children: [' ', currencyObjectBefore.fraction] })), _jsx("div", { className: "jp-components__pricing-card__price-strikethrough" })
-                        ] })), props.priceAfter > 0 && (_jsxs(_Fragment, { children: [
-                            _jsxs("div", { className: "jp-components__pricing-card__price-after", children: [
-                                    _jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectAfter.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectAfter.integer }), showPriceDecimals(currencyObjectAfter) && (_jsx("span", { className: "jp-components__pricing-card__price-decimal", children: currencyObjectAfter.fraction }))] }), _jsx("span", { className: "jp-components__pricing-card__price-details", children: priceDetails })
-                        ] }))] }), props.children && (_jsx("div", { className: "jp-components__pricing-card__extra-content-wrapper", children: props.children })), props.tosText && _jsx("div", { className: "jp-components__pricing-card__tos", children: props.tosText }), props.ctaText && (_jsxs(_Fragment, { children: [!props.tosText && (_jsx("div", { className: "jp-components__pricing-card__tos", children: _jsx(TermsOfService, { agreeButtonLabel: props.ctaText }) })), _jsx("div", { className: "jp-components__pricing-card__cta", children: _jsx(Button, { variant: "solid", className: "jp-components__pricing-card__button", onClick: props.onCtaClick, children: props.ctaText }) })
-                ] })), props.infoText && (_jsx("div", { className: "jp-components__pricing-card__info", children: props.infoText }))] }));
+                    __('Icon for the product %s', 'jetpack-components'), props.title) })) : (props.icon) })), _jsx("h1", { className: "jp-components__pricing-card__title", children: props.title }), _jsxs("div", { className: "jp-components__pricing-card__pricing", children: [props.priceAfter === 0 && _jsx(LoadingPlaceholder, { width: "100%", height: 48 }), props.priceBefore !== props.priceAfter && props.priceAfter > 0 && (_jsxs("div", { className: "jp-components__pricing-card__price-before", children: [_jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectBefore.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectBefore.integer }), showPriceDecimals(currencyObjectBefore) && (_jsxs("span", { className: "jp-components__pricing-card__price-decimal", children: [' ', currencyObjectBefore.fraction] })), _jsx("div", { className: "jp-components__pricing-card__price-strikethrough" })] })), props.priceAfter > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "jp-components__pricing-card__price-after", children: [_jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectAfter.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectAfter.integer }), showPriceDecimals(currencyObjectAfter) && (_jsx("span", { className: "jp-components__pricing-card__price-decimal", children: currencyObjectAfter.fraction }))] }), _jsx("span", { className: "jp-components__pricing-card__price-details", children: priceDetails })] }))] }), props.children && (_jsx("div", { className: "jp-components__pricing-card__extra-content-wrapper", children: props.children })), props.tosText && _jsx("div", { className: "jp-components__pricing-card__tos", children: props.tosText }), props.ctaText && (_jsxs(_Fragment, { children: [!props.tosText && (_jsx("div", { className: "jp-components__pricing-card__tos", children: _jsx(TermsOfService, { agreeButtonLabel: props.ctaText }) })), _jsx("div", { className: "jp-components__pricing-card__cta", children: _jsx(Button, { variant: "solid", className: "jp-components__pricing-card__button", onClick: props.onCtaClick, children: props.ctaText }) })] })), props.infoText && (_jsx("div", { className: "jp-components__pricing-card__info", children: props.infoText }))] }));
 };
 export default PricingCard;

package/build/components/pricing-table/index.js

@@ -30,8 +30,8 @@ const getItemLabels = (isComingSoon, isIncluded, featureNameLabel) => {
     };
 };
 export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, index = 0, label = null, tooltipInfo, tooltipTitle, tooltipClassName = '', }) => {
-    const isLg = useViewportMatch('large');
-    const item = useContext(PricingTableContext)[index];
+    const { items, isLg } = useContext(PricingTableContext);
+    const item = items[index];
     const isExplicitlyEmpty = label === '';
     const showTick = isComingSoon || isIncluded;
     const featureNameLabel = item.name;
@@ -44,11 +44,9 @@ export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, ind
     if (isExplicitlyEmpty) {
         return (_jsx("div", { className: clsx(styles.item, styles.value, styles.empty) }));
     }
-    return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [
-            _jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
+    return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [_jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
 };
-export const PricingTableHeader = ({ title, children }) => (_jsxs("div", { className: styles.headerContainer, children: [title && (_jsx(Text, { variant: "headline-small", className: styles.title, children: title })), _jsx("div", { className: styles.header, children: children })
-    ] }));
+export const PricingTableHeader = ({ title, children }) => (_jsxs("div", { className: styles.headerContainer, children: [title && (_jsx(Text, { variant: "headline-small", className: styles.title, children: title })), _jsx("div", { className: styles.header, children: children })] }));
 export const PricingTableColumn = ({ primary = false, children, className, }) => {
     let index = 0;
     return (_jsx("div", { className: clsx(styles.card, { [styles['is-primary']]: primary }, className), children: Children.map(children, child => {
@@ -60,15 +58,12 @@ export const PricingTableColumn = ({ primary = false, children, className, }) =>
             return item;
         }) }));
 };
-const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, }) => {
-    const isLg = useViewportMatch('large');
-    return (_jsxs(PricingTableContext.Provider, { value: items, children: [
-            _jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
+const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, breakpoint = 'large', }) => {
+    const isLg = useViewportMatch(breakpoint);
+    return (_jsxs(PricingTableContext.Provider, { value: { items, isLg }, children: [_jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
                     '--rows': items.length + 1,
                     '--columns': Children.toArray(children).length + 1,
-                }, children: _jsxs("div", { className: styles.table, children: [
-                        _jsxs("div", { children: [headerLogo && _jsx("div", { className: styles['header-logo'], children: headerLogo }), _jsx(Text, { variant: "headline-small", className: styles.tableTitle, children: title })
-                            ] }), isLg &&
+                }, children: _jsxs("div", { className: styles.table, children: [_jsxs("div", { children: [headerLogo && _jsx("div", { className: styles['header-logo'], children: headerLogo }), _jsx(Text, { variant: "headline-small", className: styles.tableTitle, children: title })] }), isLg &&
                             items.map((item, i) => {
                                 // Skip rendering feature names that are empty
                                 if (!item.name) {
@@ -76,10 +71,7 @@ const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDiscla
                                 }
                                 return (_jsxs("div", { className: clsx(styles.item, styles.feature, {
                                         [styles['last-feature']]: i === items.length - 1,
-                                    }), children: [
-                                        _jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i));
-                            }), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })
-                    ] }) })
-        ] }));
+                                    }), children: [_jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i));
+                            }), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })] }) })] }));
 };
 export default PricingTable;

package/build/components/pricing-table/types.d.ts

@@ -26,6 +26,14 @@ export type PricingTableProps = {
      * Whether to show the intro offer disclaimer text with the ToS.
      */
     showIntroOfferDisclaimer?: boolean;
+    /**
+     * Viewport breakpoint at or above which the table renders as columns
+     * (below it, offers stack into blocks). Defaults to 'large' (960px).
+     * Interstitials hosting 3 offers can pass 'xlarge' (1080px) to stack
+     * earlier and avoid cramped columns. Accepts any `@wordpress/compose`
+     * viewport-match breakpoint name.
+     */
+    breakpoint?: 'mobile' | 'small' | 'medium' | 'large' | 'xlarge' | 'wide' | 'huge' | 'xhuge';
 };
 export type PricingTableColumnProps = {
     /**

package/build/components/product-offer/icons-card.js

@@ -18,7 +18,6 @@ export const IconsCard = ({ products, icon, size = 24 }) => {
     return (_jsx("div", { className: styles['product-bundle-icons'], children: products.map((product, index) => {
             const ProductIcon = getIconBySlug(product);
             const ProIcon = ProductIcon ? ProductIcon : () => null;
-            return (_jsxs(Fragment, { children: [
-                    _jsx(ProIcon, { size: size }), index !== products.length - 1 && (_jsx(Icon, { className: styles['plus-icon'], icon: plus, size: 16 }, `icon-plugs${index * 2 + 1}`))] }, index));
+            return (_jsxs(Fragment, { children: [_jsx(ProIcon, { size: size }), index !== products.length - 1 && (_jsx(Icon, { className: styles['plus-icon'], icon: plus, size: 16 }, `icon-plugs${index * 2 + 1}`))] }, index));
         }) }));
 };

package/build/components/product-offer/index.js

@@ -25,12 +25,7 @@ const ProductOffer = ({ addProductUrl, buttonDisclaimer, buttonText = '', classN
     return (_jsxs("div", { className: clsx(styles.wrapper, className, {
             [styles['is-bundle-card']]: isBundle,
             [styles['is-card']]: isCard || isBundle, // is card when is bundle.
-        }), children: [isBundle && _jsx(ProductOfferHeader, {}), _jsxs("div", { className: styles['card-container'], children: [
-                    _jsx(IconsCard, { icon: icon, products: supportedProducts?.length ? supportedProducts : [slug], size: 32 }), _jsx(H3, { children: title }), subTitle && _jsx(Title, { mb: 3, children: subTitle }), description && _jsx(Text, { mb: 3, children: description }), _jsx("ul", { className: styles.features, children: features.map((feature, id) => (_jsxs(Text, { component: "li", variant: "body", children: [
-                                _jsx(Icon, { icon: check, size: 24, className: styles.check }), feature] }, `feature-${id}`))) }), needsPurchase && (_jsx(ProductPrice, { price: price, offPrice: offPrice, currency: currency })), isFree && _jsx(H3, { children: __('Free', 'jetpack-components') }), _jsx(Alert, { level: "error", showIcon: !!error, children: error }), buttonDisclaimer, (!isBundle || (isBundle && !hasRequiredPlan)) && (_jsx(Button, { onClick: addProductUrl ? null : onAdd, isLoading: isLoading, disabled: isLoading, variant: isLoading || !isBundle ? 'primary' : 'secondary', className: styles['add-button'], ...(addProductUrl ? { href: addProductUrl } : {}), children: buttonText || defautlButtonText })), isBundle && hasRequiredPlan && (_jsxs("div", { className: styles['product-has-required-plan'], children: [
-                            _jsx(CheckmarkIcon, { size: 36 }), _jsx(Text, { children: __('Active on your site', 'jetpack-components') })
-                        ] }))] })
-        ] }));
+        }), children: [isBundle && _jsx(ProductOfferHeader, {}), _jsxs("div", { className: styles['card-container'], children: [_jsx(IconsCard, { icon: icon, products: supportedProducts?.length ? supportedProducts : [slug], size: 32 }), _jsx(H3, { children: title }), subTitle && _jsx(Title, { mb: 3, children: subTitle }), description && _jsx(Text, { mb: 3, children: description }), _jsx("ul", { className: styles.features, children: features.map((feature, id) => (_jsxs(Text, { component: "li", variant: "body", children: [_jsx(Icon, { icon: check, size: 24, className: styles.check }), feature] }, `feature-${id}`))) }), needsPurchase && (_jsx(ProductPrice, { price: price, offPrice: offPrice, currency: currency })), isFree && _jsx(H3, { children: __('Free', 'jetpack-components') }), _jsx(Alert, { level: "error", showIcon: !!error, children: error }), buttonDisclaimer, (!isBundle || (isBundle && !hasRequiredPlan)) && (_jsx(Button, { onClick: addProductUrl ? null : onAdd, isLoading: isLoading, disabled: isLoading, variant: isLoading || !isBundle ? 'primary' : 'secondary', className: styles['add-button'], ...(addProductUrl ? { href: addProductUrl } : {}), children: buttonText || defautlButtonText })), isBundle && hasRequiredPlan && (_jsxs("div", { className: styles['product-has-required-plan'], children: [_jsx(CheckmarkIcon, { size: 36 }), _jsx(Text, { children: __('Active on your site', 'jetpack-components') })] }))] })] }));
 };
 export default ProductOffer;
 export * from './icons-card.js';

package/build/components/product-offer/product-offer-header.js

@@ -10,7 +10,5 @@ import styles from './style.module.scss';
  * @return {ReactNode}  ProductOfferHeader react component.
  */
 export const ProductOfferHeader = ({ title = __('Popular upgrade', 'jetpack-components'), }) => {
-    return (_jsxs("div", { className: styles['card-header'], children: [
-            _jsx(Icon, { icon: star, className: styles['product-bundle-icon'], size: 24 }), _jsx(Text, { variant: "label", children: title })
-        ] }));
+    return (_jsxs("div", { className: styles['card-header'], children: [_jsx(Icon, { icon: star, className: styles['product-bundle-icon'], size: 24 }), _jsx(Text, { variant: "label", children: title })] }));
 };

package/build/components/product-price/index.js

@@ -27,19 +27,11 @@ const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true,
     const showDiscountLabel = !hideDiscountLabel && discount && discount > 0;
     const discountElt = showDiscountLabel ? discount + __('% off', 'jetpack-components') : null;
     if (variant === 'simple') {
-        return (_jsxs("div", { className: styles.simple, children: [
-                _jsxs("div", { className: styles.currentPrice, children: [
-                        _jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: legend })
-                    ] }), showNotOffPrice && (_jsxs("div", { className: styles.originalPrice, children: [
-                        _jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: discount &&
+        return (_jsxs("div", { className: styles.simple, children: [_jsxs("div", { className: styles.currentPrice, children: [_jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: legend })] }), showNotOffPrice && (_jsxs("div", { className: styles.originalPrice, children: [_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: discount &&
                                 discount > 0 &&
-                                discount + __('% off the first year', 'jetpack-components') })
-                    ] }))] }));
+                                discount + __('% off the first year', 'jetpack-components') })] }))] }));
     }
-    return (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: styles.container, children: _jsxs("div", { className: clsx(styles['price-container'], 'product-price_container'), children: [
-                        _jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction }), showNotOffPrice && (_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction })), discountElt && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: discountElt }))] }) }), _jsxs("div", { className: styles.footer, children: [children ? (children) : (_jsx(Text, { className: clsx(styles.legend, 'product-price_legend'), children: legend })), promoLabel && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: promoLabel }))] })
-        ] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.container, children: _jsxs("div", { className: clsx(styles['price-container'], 'product-price_container'), children: [_jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction }), showNotOffPrice && (_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction })), discountElt && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: discountElt }))] }) }), _jsxs("div", { className: styles.footer, children: [children ? (children) : (_jsx(Text, { className: clsx(styles.legend, 'product-price_legend'), children: legend })), promoLabel && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: promoLabel }))] })] }));
 };
 export default ProductPrice;
 export * from './price.js';

package/build/components/product-price/price.js

@@ -16,6 +16,5 @@ export const Price = ({ value, currency, isOff, hidePriceFraction, inline = fals
     });
     const { symbol, integer, fraction } = getCurrencyObject(value, currency);
     const showPriceFraction = !hidePriceFraction || !fraction.endsWith('00');
-    return (_jsxs(Text, { className: classNames, variant: "headline-medium", component: "p", children: [inline ? (_jsxs(_Fragment, { children: [symbol, integer] })) : (_jsxs(_Fragment, { children: [
-                    _jsx(Text, { className: styles.symbol, component: "sup", variant: "title-medium", children: symbol }), integer] })), showPriceFraction && (_jsx(Text, { component: "sup", variant: "body-small", "data-testid": "PriceFraction", children: _jsx("strong", { children: fraction }) }))] }));
+    return (_jsxs(Text, { className: classNames, variant: "headline-medium", component: "p", children: [inline ? (_jsxs(_Fragment, { children: [symbol, integer] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { className: styles.symbol, component: "sup", variant: "title-medium", children: symbol }), integer] })), showPriceFraction && (_jsx(Text, { component: "sup", variant: "body-small", "data-testid": "PriceFraction", children: _jsx("strong", { children: fraction }) }))] }));
 };

package/build/components/record-meter-bar/index.js

@@ -27,29 +27,14 @@ const RecordMeterBar = ({ totalCount, items = [], showLegendLabelBeforeCount = f
         }
         return items;
     }, [items, sortByCount]);
-    return (_jsxs("div", { className: clsx('record-meter-bar', className), children: [
-            _jsx("div", { className: "record-meter-bar__items", "aria-hidden": "true", children: itemsToRender.map(({ count, label, backgroundColor }) => {
+    return (_jsxs("div", { className: clsx('record-meter-bar', className), children: [_jsx("div", { className: "record-meter-bar__items", "aria-hidden": "true", children: itemsToRender.map(({ count, label, backgroundColor }) => {
                     const widthPercent = ((count / total) * 100).toPrecision(2);
                     return (_jsx("div", { style: { backgroundColor, flexBasis: `${widthPercent}%` } }, label));
                 }) }), _jsxs("div", { className: "record-meter-bar__legend", "aria-hidden": "true", children: [legendTitle && _jsx("div", { className: "record-meter-bar__legend--title", children: legendTitle }), _jsx("ul", { className: "record-meter-bar__legend--items", children: itemsToRender.map(({ count, label, backgroundColor }) => {
                             const formattedCount = formatNumber(count);
-                            return (_jsxs("li", { className: "record-meter-bar__legend--item", children: [
-                                    _jsx("div", { className: "record-meter-bar__legend--item-circle", style: { backgroundColor } }), !showLegendLabelBeforeCount && (_jsxs("span", { children: [
-                                            _jsx("span", { className: "record-meter-bar__legend--item-count", children: formattedCount }), _jsx("span", { className: "record-meter-bar__legend--item-label", children: label })
-                                        ] })), showLegendLabelBeforeCount && (_jsxs("span", { children: [
-                                            _jsx("span", { className: "record-meter-bar__legend--item-label record-meter-bar__legend--item-label-first", children: label }), _jsxs("span", { className: "record-meter-bar__legend--item-count", children: ["(", formattedCount, ")"] })
-                                        ] }))] }, label));
-                        }) })
-                ] }), _jsxs("table", { className: "screen-reader-text", children: [
-                    _jsx("caption", { children: tableCaption || __('Summary of the records', 'jetpack-components') }), _jsxs("tbody", { children: [
-                            _jsxs("tr", { children: [
-                                    _jsx("th", { scope: "col", children: recordTypeLabel || __('Record type', 'jetpack-components') }), _jsx("th", { scope: "col", children: recordCountLabel || __('Record count', 'jetpack-components') })
-                                ] }), itemsToRender.map(({ label, count }) => {
-                                return (_jsxs("tr", { children: [
-                                        _jsx("td", { children: label }), _jsx("td", { children: count })
-                                    ] }, label));
-                            })] })
-                ] })
-        ] }));
+                            return (_jsxs("li", { className: "record-meter-bar__legend--item", children: [_jsx("div", { className: "record-meter-bar__legend--item-circle", style: { backgroundColor } }), !showLegendLabelBeforeCount && (_jsxs("span", { children: [_jsx("span", { className: "record-meter-bar__legend--item-count", children: formattedCount }), _jsx("span", { className: "record-meter-bar__legend--item-label", children: label })] })), showLegendLabelBeforeCount && (_jsxs("span", { children: [_jsx("span", { className: "record-meter-bar__legend--item-label record-meter-bar__legend--item-label-first", children: label }), _jsxs("span", { className: "record-meter-bar__legend--item-count", children: ["(", formattedCount, ")"] })] }))] }, label));
+                        }) })] }), _jsxs("table", { className: "screen-reader-text", children: [_jsx("caption", { children: tableCaption || __('Summary of the records', 'jetpack-components') }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { scope: "col", children: recordTypeLabel || __('Record type', 'jetpack-components') }), _jsx("th", { scope: "col", children: recordCountLabel || __('Record count', 'jetpack-components') })] }), itemsToRender.map(({ label, count }) => {
+                                return (_jsxs("tr", { children: [_jsx("td", { children: label }), _jsx("td", { children: count })] }, label));
+                            })] })] })] }));
 };
 export default RecordMeterBar;

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

@@ -9,8 +9,6 @@ const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...b
         className: styles.button,
         ...buttonProps,
     };
-    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [
-                _jsx(Button, { ...wpButtonProps }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })
-            ] }) }));
+    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { ...wpButtonProps }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
 };
 export default SplitButton;

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

@@ -19,9 +19,6 @@ import styles from './style.module.scss';
 const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
     const formattedValue = formatNumber(value);
     const compactValue = formatNumberCompact(value);
-    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [
-            _jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [
-                    _jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsx(Tooltip, { text: formattedValue, placement: "top", children: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })
-        ] }));
+    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsx(Tooltip, { text: formattedValue, placement: "top", children: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
 };
 export default StatCard;

package/build/components/status/index.js

@@ -24,8 +24,6 @@ const Status = ({ className, label, status = 'inactive' }) => {
     };
     return (_jsxs(Text, { variant: "body-extra-small", className: clsx(styles.status, {
             [styles[`is-${status}`]]: status,
-        }, className), children: [
-            _jsx("span", { className: styles.status__indicator }), _jsx("span", { className: styles.status__label, children: label || label === '' ? label : defaultLabels[status] })
-        ] }));
+        }, className), children: [_jsx("span", { className: styles.status__indicator }), _jsx("span", { className: styles.status__label, children: label || label === '' ? label : defaultLabels[status] })] }));
 };
 export default Status;

package/build/components/swipeable/index.js

@@ -275,16 +275,14 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
         return null;
     }, [handleDragStart, handleDrag, handleDragEnd]);
     const offset = getOffset(currentPage);
-    return (_jsxs(_Fragment, { children: [
-            _createElement("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, 
+    return (_jsxs(_Fragment, { children: [_createElement("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, 
                 // Ensure that state is reset when the window is resized
                 key: containerWidth?.toString() },
                 _jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
                         ...pagesStyle,
                         width: getPagesWidth(containerWidth, numPages + 2),
                         transform: `translate3d(${offset}px, 0px, 0px)`,
-                    }, onTransitionEnd: handleTransitionEnd, children: [
-                        _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                    }, onTransitionEnd: handleTransitionEnd, children: [_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
                                 'is-clone': true,
                                 'is-prev': currentPage === 0,
                             }), children: Children.toArray(children)[numPages - 1] }, `clone-prev-${numPages - 1}`), Children.map(children, (child, index) => (_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
@@ -294,8 +292,6 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
                             }), "data-testid": `swipeable-page-${index + 1}`, children: child }, `page-${index}`))), _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
                                 'is-clone': true,
                                 'is-next': currentPage === numPages - 1,
-                            }), children: Children.toArray(children)[0] }, `clone-next-0`)
-                    ] })), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })
-        ] }));
+                            }), children: Children.toArray(children)[0] }, `clone-next-0`)] })), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
 };
 export default Swipeable;

package/build/components/testimonials/testimonial.js

@@ -2,16 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import './style.scss';
 const Testimonial = ({ quote, author, profession, img, hidden }) => {
-    return (_jsxs("div", { className: clsx('testimonial', hidden ? 'hidden' : 'show'), children: [
-            _jsx("img", { className: "testimonial__author-img", src: img, alt: author }), _jsxs("div", { className: "testimonial__content", children: [
-                    _jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "testimonial__quote-icon", children: [
-                            _jsx("path", { d: "M14.6667 24L6.66675 24L6.66675 16L14.6667 16L14.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M26.6667 24L18.6667 24L18.6667 16L26.6667 16L26.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M6.66675 24.0001C6.66675 19.5573 6.66675 14.9337 6.66675 10.6686C6.66675 6.40254 10.0001 6.67016 12.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" }), _jsx("path", { d: "M18.6668 24.0001C18.6667 19.5573 18.6667 14.9337 18.6667 10.6686C18.6667 6.40254 22.0001 6.67016 24.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" })
-                        ] }), _jsxs("div", { className: "testimonial__text-block", children: [
-                            _jsxs("blockquote", { className: "testimonial__quote", children: ["\u201C", quote, "\u201D"] }), _jsxs("figcaption", { children: [
-                                    _jsx("span", { className: "testimonial__author", children: author }), _jsx("span", { className: "testimonial__profession", children: profession })
-                                ] })
-                        ] })
-                ] })
-        ] }, author));
+    return (_jsxs("div", { className: clsx('testimonial', hidden ? 'hidden' : 'show'), children: [_jsx("img", { className: "testimonial__author-img", src: img, alt: author }), _jsxs("div", { className: "testimonial__content", children: [_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "testimonial__quote-icon", children: [_jsx("path", { d: "M14.6667 24L6.66675 24L6.66675 16L14.6667 16L14.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M26.6667 24L18.6667 24L18.6667 16L26.6667 16L26.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M6.66675 24.0001C6.66675 19.5573 6.66675 14.9337 6.66675 10.6686C6.66675 6.40254 10.0001 6.67016 12.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" }), _jsx("path", { d: "M18.6668 24.0001C18.6667 19.5573 18.6667 14.9337 18.6667 10.6686C18.6667 6.40254 22.0001 6.67016 24.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" })] }), _jsxs("div", { className: "testimonial__text-block", children: [_jsxs("blockquote", { className: "testimonial__quote", children: ["\u201C", quote, "\u201D"] }), _jsxs("figcaption", { children: [_jsx("span", { className: "testimonial__author", children: author }), _jsx("span", { className: "testimonial__profession", children: profession })] })] })] })] }, author));
 };
 export { Testimonial };

package/build/components/text/constants.d.ts

@@ -1,14 +1,14 @@
 export declare const VARIANTS_MAPPING: {
-    readonly 'headline-medium': "h1";
-    readonly 'headline-small': "h2";
-    readonly 'headline-small-regular': "h2";
-    readonly 'title-medium': "h3";
-    readonly 'title-medium-semi-bold': "h3";
-    readonly 'title-small': "h4";
-    readonly body: "p";
-    readonly 'body-small': "p";
-    readonly 'body-extra-small': "p";
-    readonly 'body-extra-small-bold': "p";
-    readonly label: "p";
+    readonly 'headline-medium': 'h1';
+    readonly 'headline-small': 'h2';
+    readonly 'headline-small-regular': 'h2';
+    readonly 'title-medium': 'h3';
+    readonly 'title-medium-semi-bold': 'h3';
+    readonly 'title-small': 'h4';
+    readonly body: 'p';
+    readonly 'body-small': 'p';
+    readonly 'body-extra-small': 'p';
+    readonly 'body-extra-small-bold': 'p';
+    readonly label: 'p';
 };
-export declare const BOX_MODEL_VALUES: readonly ["mt", "mr", "mb", "ml", "mx", "my", "m", "pt", "pr", "pb", "pl", "px", "py", "p"];
+export declare const BOX_MODEL_VALUES: readonly ['mt', 'mr', 'mb', 'ml', 'mx', 'my', 'm', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'p'];

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

@@ -14,13 +14,8 @@ import './style.scss';
  */
 const UpsellBanner = props => {
     const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;
-    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [
-                        _jsxs("div", { className: "upsell-banner--content-info", children: [
-                                _jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
                                         br: _jsx("br", {}),
-                                    }) })
-                            ] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })
-                    ] })
-            ] }) }));
+                                    }) })] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })] })] }) }));
 };
 export default UpsellBanner;

package/components/jetpack-footer/style.scss

@@ -7,6 +7,7 @@
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
+	display: flex;
 
 	.jetpack-footer__menu-item {
 

package/components/pricing-table/index.tsx

@@ -59,8 +59,8 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	tooltipTitle,
 	tooltipClassName = '',
 } ) => {
-	const isLg = useViewportMatch( 'large' );
-	const item = useContext( PricingTableContext )[ index ];
+	const { items, isLg } = useContext( PricingTableContext );
+	const item = items[ index ];
 	const isExplicitlyEmpty = label === '';
 	const showTick = isComingSoon || isIncluded;
 
@@ -157,11 +157,12 @@ const PricingTable: FC< PricingTableProps > = ( {
 	items,
 	children,
 	showIntroOfferDisclaimer = false,
+	breakpoint = 'large',
 } ) => {
-	const isLg = useViewportMatch( 'large' );
+	const isLg = useViewportMatch( breakpoint );
 
 	return (
-		<PricingTableContext.Provider value={ items }>
+		<PricingTableContext.Provider value={ { items, isLg } }>
 			<div
 				className={ clsx( styles.container, { [ styles[ 'is-viewport-large' ] ]: isLg } ) }
 				style={

package/components/pricing-table/types.ts

@@ -31,6 +31,15 @@ export type PricingTableProps = {
 	 * Whether to show the intro offer disclaimer text with the ToS.
 	 */
 	showIntroOfferDisclaimer?: boolean;
+
+	/**
+	 * Viewport breakpoint at or above which the table renders as columns
+	 * (below it, offers stack into blocks). Defaults to 'large' (960px).
+	 * Interstitials hosting 3 offers can pass 'xlarge' (1080px) to stack
+	 * earlier and avoid cramped columns. Accepts any `@wordpress/compose`
+	 * viewport-match breakpoint name.
+	 */
+	breakpoint?: 'mobile' | 'small' | 'medium' | 'large' | 'xlarge' | 'wide' | 'huge' | 'xhuge';
 };
 
 export type PricingTableColumnProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.16",
+	"version": "1.12.17",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -73,22 +73,22 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.31",
-		"@automattic/jetpack-boost-score-api": "^1.0.54",
-		"@automattic/jetpack-script-data": "^0.6.5",
-		"@automattic/number-formatters": "^1.2.6",
+		"@automattic/jetpack-api": "^1.0.32",
+		"@automattic/jetpack-boost-score-api": "^1.0.55",
+		"@automattic/jetpack-script-data": "^0.6.6",
+		"@automattic/number-formatters": "^1.2.7",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
 		"@wordpress/admin-ui": "2.5.0",
-		"@wordpress/browserslist-config": "6.50.0",
-		"@wordpress/components": "36.1.0",
-		"@wordpress/compose": "8.3.0",
-		"@wordpress/data": "10.50.0",
-		"@wordpress/date": "5.50.0",
-		"@wordpress/element": "8.2.0",
-		"@wordpress/i18n": "6.23.0",
+		"@wordpress/browserslist-config": "6.51.0",
+		"@wordpress/components": "37.0.0",
+		"@wordpress/compose": "8.4.0",
+		"@wordpress/data": "10.51.0",
+		"@wordpress/date": "5.51.0",
+		"@wordpress/element": "8.3.0",
+		"@wordpress/i18n": "6.24.0",
 		"@wordpress/icons": "15.1.0",
-		"@wordpress/notices": "5.50.0",
+		"@wordpress/notices": "5.51.0",
 		"@wordpress/theme": "0.17.0",
 		"@wordpress/ui": "0.17.0",
 		"clsx": "2.1.1",
@@ -96,12 +96,12 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.17",
+		"social-logos": "^3.3.18",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.9",
+		"@automattic/jetpack-base-styles": "^1.2.10",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.4.1",
 		"@storybook/addon-docs": "10.4.6",
@@ -113,14 +113,14 @@
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
-		"@typescript/native-preview": "7.0.0-dev.20260225.1",
+		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.4.2",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
 		"storybook": "10.4.6",
 		"ts-dedent": "2.2.0",
-		"typescript": "5.9.3",
+		"typescript": "6.0.3",
 		"webpack": "5.107.2",
 		"webpack-cli": "6.0.1"
 	},