@automattic/jetpack-components 1.4.16 → 1.5.0

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback, useContext } from 'react';
-import { NavigatorModalContext } from "./context.js";
+import { NavigatorModalContext } from './context.js';
 /**
  * Renders a footer.
  *
@@ -21,7 +21,8 @@ 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.js

@@ -3,7 +3,7 @@ import { Button, useNavigator } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, close } from '@wordpress/icons';
 import { useCallback, useContext } from 'react';
-import { NavigatorModalContext } from "./context.js";
+import { NavigatorModalContext } from './context.js';
 /**
  * Renders a header for the NavigatorModal.
  * @param {HeaderProps} props - Props
@@ -16,5 +16,7 @@ export function Header({ icon, title, isScreenLocked }) {
     const onGoBack = useCallback(() => {
         navigator.goBack();
     }, [navigator]);
-    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: context.onClose, 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: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
 }

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

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback, useContext } from 'react';
-import { NavigatorModalContext } from "./context.js";
-import { Screen } from "./screen.js";
+import { NavigatorModalContext } from './context.js';
+import { Screen } from './screen.js';
 import './styles.scss';
 /**
  * Renders the internal NavigatorModal component.

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { Footer } from "./footer.js";
-import { Header } from "./header.js";
+import { Footer } from './footer.js';
+import { Header } from './header.js';
 /**
  * Renders a screen.
  *
@@ -12,5 +12,7 @@ import { Header } from "./header.js";
  */
 export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, 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 }), _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 }), _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,6 +30,7 @@ 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,6 +1,8 @@
 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

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCurrencyObject } from '@automattic/number-formatters';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { LoadingPlaceholder } from '@automattic/jetpack-components';
-import TermsOfService from "../terms-of-service/index.js";
+import TermsOfService from '../terms-of-service/index.js';
 import './style.scss';
 /**
  * Whether or not to display a price's decimal part in the UI.
@@ -27,6 +27,12 @@ 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, { className: "jp-components__pricing-card__button", label: props.ctaText, 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, { className: "jp-components__pricing-card__button", label: props.ctaText, 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

@@ -3,10 +3,10 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
 import { createContext, useContext, Children, cloneElement, } from 'react';
-import IconTooltip from "../icon-tooltip/index.js";
-import useBreakpointMatch from "../layout/use-breakpoint-match/index.js";
-import TermsOfService from "../terms-of-service/index.js";
-import Text from "../text/index.js";
+import IconTooltip from '../icon-tooltip/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import TermsOfService from '../terms-of-service/index.js';
+import Text from '../text/index.js';
 import styles from './styles.module.scss';
 const INCLUDED_TEXT = __('Included', 'jetpack-components');
 const NOT_INCLUDED_TEXT = __('Not included', 'jetpack-components');
@@ -44,9 +44,11 @@ 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), 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), 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,10 +62,13 @@ export const PricingTableColumn = ({ primary = false, children, className, }) =>
 };
 const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, }) => {
     const [isLg] = useBreakpointMatch('lg');
-    return (_jsxs(PricingTableContext.Provider, { value: items, children: [_jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
+    return (_jsxs(PricingTableContext.Provider, { value: items, 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) {
@@ -71,7 +76,10 @@ 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), 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), 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/product-offer/icons-card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, plus } from '@wordpress/icons';
 import { Fragment } from 'react';
-import { getIconBySlug } from "../icons/index.js";
+import { getIconBySlug } from '../icons/index.js';
 import styles from './style.module.scss';
 /**
  * Icons composition for a bundle product,
@@ -18,6 +18,7 @@ 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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
 import clsx from 'clsx';
-import Alert from "../alert/index.js";
-import Button from "../button/index.js";
-import { CheckmarkIcon } from "../icons/index.js";
-import ProductPrice from "../product-price/index.js";
-import Text, { H3, Title } from "../text/index.js";
-import { IconsCard } from "./icons-card.js";
-import { ProductOfferHeader } from "./product-offer-header.js";
+import Alert from '../alert/index.js';
+import Button from '../button/index.js';
+import { CheckmarkIcon } from '../icons/index.js';
+import ProductPrice from '../product-price/index.js';
+import Text, { H3, Title } from '../text/index.js';
+import { IconsCard } from './icons-card.js';
+import { ProductOfferHeader } from './product-offer-header.js';
 import styles from './style.module.scss';
 /**
  * Product Detail component.
@@ -25,7 +25,12 @@ 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";
+export * from './icons-card.js';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import { Icon, starFilled as star } from '@wordpress/icons';
-import Text from "../text/index.js";
+import Text from '../text/index.js';
 import styles from './style.module.scss';
 /**
  * Product Detail Card Header component.
@@ -10,5 +10,7 @@ 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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * External dependencies
  */
@@ -7,8 +7,8 @@ import clsx from 'clsx';
 /*
  * Internal dependencies
  */
-import Text from "../text/index.js";
-import { Price } from "./price.js";
+import Text from '../text/index.js';
+import { Price } from './price.js';
 import styles from './style.module.scss';
 /**
  * React component to render the price.
@@ -27,11 +27,19 @@ 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";
+export * from './price.js';

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

@@ -1,7 +1,7 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCurrencyObject } from '@automattic/number-formatters';
 import clsx from 'clsx';
-import Text from "../text/index.js";
+import Text from '../text/index.js';
 import styles from './style.module.scss';
 /**
  * React component to render a Price composition.
@@ -16,5 +16,6 @@ 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,14 +27,29 @@ 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/spinner/index.d.ts

@@ -1,11 +1,11 @@
 import './style.scss';
-declare const Spinner: {
-    ({ color, className, size }: {
-        color?: string;
-        className?: string;
-        size?: number;
-    }): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
+declare function Spinner({ color, className, size }: {
+    className?: string;
+    color?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    var propTypes: {
         /** The spinner color. */
         color: any;
         /** CSS class names. */
@@ -13,5 +13,5 @@ declare const Spinner: {
         /** The spinner size. */
         size: any;
     };
-};
+}
 export default Spinner;

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

@@ -9,6 +9,8 @@ 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

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import Text from "../text/index.js";
+import Text from '../text/index.js';
 import styles from './style.module.scss';
 /**
  * StatCard component
@@ -19,6 +19,9 @@ 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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Text from "../text/index.js";
+import Text from '../text/index.js';
 import styles from './style.module.scss';
 const Status = ({ className, label, status = 'inactive' }) => {
     const defaultLabels = {
@@ -13,6 +13,8 @@ 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.d.ts

@@ -1,12 +1,12 @@
 import './style.scss';
 export declare const Swipeable: ({ hasDynamicHeight, children, currentPage, onPageSelect, pageClassName, containerClassName, isClickEnabled, ...otherProps }: {
     [x: string]: any;
-    hasDynamicHeight?: boolean;
     children: any;
+    containerClassName: any;
     currentPage?: number;
+    hasDynamicHeight?: boolean;
+    isClickEnabled: any;
     onPageSelect: any;
     pageClassName: any;
-    containerClassName: any;
-    isClickEnabled: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Swipeable;

package/build/components/swipeable/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import clsx from 'clsx';
 import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
@@ -275,14 +275,16 @@ 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, {
@@ -292,6 +294,8 @@ 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/terms-of-service/index.js

@@ -3,8 +3,8 @@ import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { getRedirectUrl } from "../../index.js";
-import Text from "../text/index.js";
+import { getRedirectUrl } from '../../index.js';
+import Text from '../text/index.js';
 import './styles.scss';
 const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
     const getTOSContent = () => {

package/build/components/testimonials/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from "../gridicon/index.js";
-import { Testimonial } from "./testimonial.js";
+import Gridicon from '../gridicon/index.js';
+import { Testimonial } from './testimonial.js';
 const Testimonials = ({ testimonials }) => {
     const [currentTestimonialIndex, setcurrentTestimonialIndex] = useState(0);
     const incrementTestimonial = useCallback(() => {

package/build/components/testimonials/testimonial.js

@@ -2,6 +2,16 @@ 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/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, useMemo } from 'react';
-import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from "./constants.js";
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
 import styles from './style.module.scss';
 /**
  * Text component.
@@ -50,4 +50,4 @@ export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
  * @return {ReactElement} - JSX.Element
  */
 export const Title = ({ children, size = 'medium', ...componentProps }) => (_jsx(Text, { variant: `title-${size}`, mb: 1, ...componentProps, children: children }));
-export * from "./constants.js";
+export * from './constants.js';