@automattic/jetpack-components 1.12.14 → 1.12.17

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 declare const LoadingPlaceholder: ({ children, width, height, className, }: {
     children?: ReactNode;
-    width?: string | number;
+    width?: number | string;
     height?: number;
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/components/marked-lines/index.js

@@ -38,15 +38,13 @@ const markup = (marks, content) => {
 };
 const MarkedLines = ({ context }) => {
     const { marks, ...lines } = context;
-    return (_jsxs("div", { className: styles['marked-lines'], children: [
-            _jsx("div", { className: styles['marked-lines__line-numbers'], children: Object.keys(lines).map(lineNumber => {
+    return (_jsxs("div", { className: styles['marked-lines'], children: [_jsx("div", { className: styles['marked-lines__line-numbers'], children: Object.keys(lines).map(lineNumber => {
                     const hasMarks = Object.hasOwn(marks, lineNumber);
                     return (_jsx("div", { className: `${styles['marked-lines__line-number']} ${hasMarks ? styles['marked-lines__marked-line'] : ''}`, children: lineNumber }, lineNumber));
                 }) }), _jsx("div", { className: styles['marked-lines__lines'], children: Object.keys(lines).map(lineNumber => {
                     const lineContent = lines[lineNumber] || ' ';
                     const hasMarks = Object.hasOwn(marks, lineNumber);
                     return (_jsx("div", { className: `${styles['marked-lines__line']} ${hasMarks ? styles['marked-lines__marked-line'] : ''} `, children: _jsx(_Fragment, { children: hasMarks ? markup(marks[lineNumber], lineContent) : lineContent }) }, lineNumber));
-                }) })
-        ] }));
+                }) })] }));
 };
 export default MarkedLines;

package/build/components/navigator-modal/footer.js

@@ -21,8 +21,7 @@ export function Footer({ children, actions, isScreenLocked, className, ...props
             context.onClose?.();
         }
     }, [isScreenLocked, navigator, context]);
-    return (_jsxs(Flex, { className: clsx('jp-navigator-modal__footer', className), ...props, children: [
-            _jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map((action, index) => {
+    return (_jsxs(Flex, { className: clsx('jp-navigator-modal__footer', className), ...props, children: [_jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map((action, index) => {
                         if (typeof action === 'function') {
                             return action({ navigate });
                         }

package/build/components/navigator-modal/header.d.ts

@@ -26,4 +26,4 @@ export type HeaderProps = {
  *
  * @return component
  */
-export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/header.js

@@ -21,7 +21,5 @@ export function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, on
         onCloseProp?.();
         context.onClose?.();
     }, [onCloseProp, context]);
-    return (_jsxs("div", { className: "jp-navigator-modal__header", children: [
-            _jsxs("div", { className: "jp-navigator-modal__title-wrap", children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, icon, _jsx("h1", { children: title })
-                ] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: onCloseModal, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
+    return (_jsxs("div", { className: "jp-navigator-modal__header", children: [_jsxs("div", { className: "jp-navigator-modal__title-wrap", children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, icon, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: onCloseModal, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
 }

package/build/components/navigator-modal/screen.js

@@ -12,7 +12,5 @@ import { Header } from './header.js';
  */
 export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }) {
     const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
-    return (_jsx(Navigator.Screen, { path: path, className: clsx('jp-navigator-modal__screen', className), ...props, children: _jsxs(Flex, { direction: "column", gap: 0, children: [
-                _jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon, onGoBack: onGoBack, onClose: onClose }), _jsxs(Flex, { gap: 0, align: "start", className: "jp-navigator-modal__body", children: [sidebar ? _jsx("div", { className: "jp-navigator-modal__sidebar", children: sidebar }) : null, _jsx("div", { className: "jp-navigator-modal__content", children: content ?? children })
-                    ] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
+    return (_jsx(Navigator.Screen, { path: path, className: clsx('jp-navigator-modal__screen', className), ...props, children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon, onGoBack: onGoBack, onClose: onClose }), _jsxs(Flex, { gap: 0, align: "start", className: "jp-navigator-modal__body", children: [sidebar ? _jsx("div", { className: "jp-navigator-modal__sidebar", children: sidebar }) : null, _jsx("div", { className: "jp-navigator-modal__content", children: content ?? children })] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
 }

package/build/components/notice/index.js

@@ -30,7 +30,6 @@ const getIconByLevel = (level) => {
  */
 const Notice = ({ level = 'info', title, children, actions, hideCloseButton = false, onClose, }) => {
     const classes = clsx(styles.container, styles[`is-${level}`]);
-    return (_jsxs("div", { className: classes, children: [
-            _jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) }), _jsxs("div", { className: styles['main-content'], children: [title && _jsx("div", { className: styles.title, children: title }), children, actions && actions.length > 0 && (_jsx("div", { className: styles['action-bar'], children: actions.map((action, index) => (_jsx("div", { className: styles.action, children: action }, index))) }))] }), !hideCloseButton && (_jsx("button", { "aria-label": "close", className: styles['close-button'], onClick: onClose, children: _jsx(Icon, { icon: close }) }))] }));
+    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) }), _jsxs("div", { className: styles['main-content'], children: [title && _jsx("div", { className: styles.title, children: title }), children, actions && actions.length > 0 && (_jsx("div", { className: styles['action-bar'], children: actions.map((action, index) => (_jsx("div", { className: styles.action, children: action }, index))) }))] }), !hideCloseButton && (_jsx("button", { "aria-label": "close", className: styles['close-button'], onClick: onClose, children: _jsx(Icon, { icon: close }) }))] }));
 };
 export default Notice;

package/build/components/popover/index.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './style.scss';
 const Popover = ({ icon, children, action }) => {
-    return (_jsxs("div", { className: "jp-popover", children: [
-            _jsx("div", { className: "jp-popover__icon", children: icon }), _jsx("div", { className: "jp-popover__body", children: children }), _jsx("div", { className: "jp-popover__action", children: action })
-        ] }));
+    return (_jsxs("div", { className: "jp-popover", children: [_jsx("div", { className: "jp-popover__icon", children: icon }), _jsx("div", { className: "jp-popover__body", children: children }), _jsx("div", { className: "jp-popover__action", children: action })] }));
 };
 export default Popover;

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/styles.module.scss

@@ -1,5 +1,3 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
-
 .container {
 	--padding: calc(var(--spacing-base) * 4);
 	--padding-horizontal: calc(var(--spacing-base) * 3);
@@ -98,11 +96,7 @@
 			background-image: url(./gradient.svg);
 			background-repeat: no-repeat;
 			background-size: 450px;
-			background-position-x: center;
-
-			@media (max-width: gb.$break-large) {
-				background-position-x: right;
-			}
+			background-position-x: right;
 		}
 
 		> :last-child {

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.d.ts

@@ -7,7 +7,7 @@ export interface StatusProps {
 /**
  * Status component.
  *
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
  *
  * @param {StatusProps} props           - The component properties.
  * @param {string}      props.className - Optional className forwarded to the outer element.

package/build/components/status/index.js

@@ -6,7 +6,7 @@ import styles from './style.module.scss';
 /**
  * Status component.
  *
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
  *
  * @param {StatusProps} props           - The component properties.
  * @param {string}      props.className - Optional className forwarded to the outer element.
@@ -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/admin-page/style.module.scss

@@ -105,9 +105,9 @@
 	// We override only the bits that need to differ from those defaults.
 	float: none;
 	text-align: right;
-	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
+	background: var(--wpds-color-background-surface-neutral-strong, #fff);
 	font-style: italic;
-	color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
+	color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);
 	border-bottom: none;
 
 	@media (max-width: 659px) {

package/components/icons/index.tsx

@@ -1,6 +1,7 @@
 import { Path, SVG, G, Polygon } from '@wordpress/components';
 import clsx from 'clsx';
 import { SocialLogo } from 'social-logos';
+import 'social-logos/colors.css';
 import styles from './style.module.scss';
 import { BaseIconProps } from './types.ts';
 import type { ComponentProps, ComponentType, FC, ReactNode } from 'react';