@automattic/jetpack-components 0.68.2 → 0.69.1

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCurrencyObject } from '@automattic/format-currency';
+import clsx from 'clsx';
+import Text from '../text/index.js';
+import styles from './style.module.scss';
+/**
+ * React component to render a Price composition.
+ *
+ * @param {PriceProps} props - Component props.
+ * @return {React.ReactNode} -Price react component.
+ */
+export const Price = ({ value, currency, isOff, hidePriceFraction }) => {
+    const classNames = clsx(styles.price, 'product-price_price', {
+        [styles['is-not-off-price']]: !isOff,
+    });
+    const { symbol, integer, fraction } = getCurrencyObject(value, currency);
+    const showPriceFraction = !hidePriceFraction || !fraction.endsWith('00');
+    return (_jsxs(Text, { className: classNames, variant: "headline-medium", component: "p", 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/product-price/types.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" resolution-mode="require"/>
+export type ProductPriceProps = {
+    /**
+     * Product price.
+     */
+    price?: number;
+    /**
+     * Product price with discount.
+     */
+    offPrice?: number;
+    /**
+     * Product currency code.
+     */
+    currency?: string;
+    /**
+     * Product legend.
+     */
+    legend?: string;
+    /**
+     * Show the not off price.
+     */
+    showNotOffPrice?: boolean;
+    /**
+     * Force the price as a not off price.
+     */
+    isNotConvenientPrice?: boolean;
+    /**
+     * Hides the price fraction if fraction is zero.
+     */
+    hidePriceFraction?: boolean;
+    /**
+     * Hides discount label
+     */
+    hideDiscountLabel?: boolean;
+    /**
+     * Custom promo label
+     */
+    promoLabel?: string;
+    /**
+     * Alternative legend with HTML syntax
+     */
+    children?: React.ReactNode;
+};
+export type PriceProps = {
+    /**
+     * Price value.
+     */
+    value: number;
+    /**
+     * Price currency code.
+     */
+    currency: string;
+    /**
+     * True when it is an off price.
+     */
+    isOff: boolean;
+    /**
+     * Hides the price fraction if fraction is zero.
+     */
+    hidePriceFraction?: boolean;
+};

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

@@ -0,0 +1 @@
+export {};

package/build/components/progress-bar/index.d.ts

@@ -0,0 +1,10 @@
+import { ProgressBarProps } from './types.js';
+import type React from 'react';
+/**
+ * Progress Bar component
+ *
+ * @param {ProgressBarProps} props - Component props.
+ * @return {React.ReactNode} - ProgressBar react component.
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/build/components/progress-bar/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.scss';
+/**
+ * Progress Bar component
+ *
+ * @param {ProgressBarProps} props - Component props.
+ * @return {React.ReactNode} - ProgressBar react component.
+ */
+const ProgressBar = ({ className, progressClassName, progress, size = 'normal', }) => {
+    if (progress == null) {
+        return null;
+    }
+    const normalizedProgress = Math.max(Math.min(progress, 1), 0);
+    const style = {
+        width: `${normalizedProgress * 100}%`,
+    };
+    return (_jsx("div", { className: clsx(className, styles.wrapper, { [styles.small]: size === 'small' }), children: _jsx("div", { className: clsx(progressClassName, styles.progress), style: style }) }));
+};
+export default ProgressBar;

package/build/components/progress-bar/types.d.ts

@@ -0,0 +1,18 @@
+export type ProgressBarProps = {
+    /**
+     * Optional classname to apply to the root element.
+     */
+    className?: string;
+    /**
+     * Optional classname to apply to the progress element.
+     */
+    progressClassName?: string;
+    /**
+     * The current progress percentage, from 0 to 1.
+     */
+    progress: number;
+    /**
+     * The progress bar height.
+     */
+    size?: 'normal' | 'small';
+};

package/build/components/progress-bar/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/qr-code/index.d.ts

@@ -0,0 +1,46 @@
+import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
+import type React from 'react';
+type QRCodeCanvasProps = React.ComponentProps<typeof QRCodeCanvas>;
+type QRCodeSVGProps = React.ComponentProps<typeof QRCodeSVG>;
+export type QRCodeProps = {
+    /**
+     * The value to encode.
+     */
+    value?: string;
+    /**
+     * Background color of the QR code.
+     */
+    bgColor?: string;
+    /**
+     * Foreground color of the QR code.
+     */
+    fgColor?: string;
+    /**
+     * Error correction level of the QR code.
+     */
+    level?: QRCodeCanvasProps['level'] | QRCodeSVGProps['level'];
+    /**
+     * Whether to include margin in the QR code.
+     */
+    includeMargin?: boolean;
+    /**
+     * Render the QR code as a `canvas` or `svg`.
+     */
+    renderAs?: 'canvas' | 'svg';
+    /**
+     * Size of the QR code.
+     */
+    size?: number;
+    /**
+     * Image settings for the QR code.
+     */
+    imageSettings?: QRCodeCanvasProps['imageSettings'] | QRCodeSVGProps['imageSettings'];
+};
+/**
+ * Renders a QR Code.
+ *
+ * @param {QRCodeProps} props - Component props
+ * @return {React.ReactNode} - React component.
+ */
+declare const QRCode: React.FC<QRCodeProps>;
+export default QRCode;

package/build/components/qr-code/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
+/**
+ * Renders a QR Code.
+ *
+ * @param {QRCodeProps} props - Component props
+ * @return {React.ReactNode} - React component.
+ */
+const QRCode = ({ value = 'https://jetpack.com', size = 248, bgColor, fgColor, level, includeMargin, imageSettings, renderAs = 'canvas', }) => {
+    const commonProps = {
+        value,
+        size,
+        bgColor,
+        fgColor,
+        level,
+        includeMargin,
+        imageSettings,
+    };
+    return renderAs === 'svg' ? (_jsx(QRCodeSVG, { ...commonProps })) : (_jsx(QRCodeCanvas, { ...commonProps }));
+};
+export default QRCode;

package/build/components/radio-control/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" resolution-mode="require"/>
+interface RadioControlProps {
+    /** The current value. */
+    selected: string;
+    /** Custom class name to append to the component. */
+    className?: string;
+    /** Whether or not the radio control is currently disabled. */
+    disabled?: boolean;
+    /** Additional information to display below the radio control. */
+    help?: React.ReactNode;
+    /** The label for the radio control. */
+    label?: React.ReactNode;
+    /** If true, the label will only be visible to screen readers. */
+    hideLabelFromVision?: boolean;
+    /** A list of options to show. */
+    options: {
+        label: string;
+        value: string;
+    }[];
+    /** A callback function invoked when the value is changed. */
+    onChange: (value: string) => void;
+}
+declare const RadioControl: React.FC<RadioControlProps>;
+export default RadioControl;

package/build/components/radio-control/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioControl as WPRadioControl } from '@wordpress/components';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+const RadioControl = ({ selected, className, disabled, help, label, hideLabelFromVision, options, onChange, }) => {
+    return (_jsx(WPRadioControl, { selected: selected, className: clsx(styles.radio, className), disabled: disabled, help: help, label: label, hideLabelFromVision: hideLabelFromVision, options: options, onChange: onChange }));
+};
+export default RadioControl;

package/build/components/record-meter-bar/index.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import './style.scss';
+type RecordMeterBarItem = {
+    /**
+     * Count for the given item
+     */
+    count: number;
+    /**
+     * Label to be used for the given item
+     */
+    label: string;
+    /**
+     * Color code for the background color for the item
+     */
+    backgroundColor: string;
+};
+export type RecordMeterBarProps = {
+    /**
+     * Total number of items for the record meter. If not provided, its is the sum of item.count of all items.
+     */
+    totalCount?: number;
+    /**
+     * The items to display in Record meter.
+     */
+    items: Array<RecordMeterBarItem>;
+    /**
+     * The formatting style for legend item display. If not provided, it defaults to showing legend label after count
+     */
+    showLegendLabelBeforeCount?: boolean;
+    /**
+     * The sort style for legend item. If not provided, it defaults to no sorting.
+     */
+    sortByCount?: 'ascending' | 'descending';
+    /**
+     * Additional class name to be added to the component
+     */
+    className?: string;
+    /**
+     * Table caption
+     */
+    tableCaption?: string;
+    /**
+     * Title/label for the legend
+     */
+    legendTitle?: string;
+    /**
+     * Recorc type label for screen readers
+     */
+    recordTypeLabel?: string;
+    /**
+     * Record count label for screen readers
+     */
+    recordCountLabel?: string;
+};
+/**
+ * Generate Record Meter bar
+ *
+ * @param {RecordMeterBarProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+declare const RecordMeterBar: React.FC<RecordMeterBarProps>;
+export default RecordMeterBar;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import numberFormat from '../number-format/index.js';
+import './style.scss';
+/**
+ * Generate Record Meter bar
+ *
+ * @param {RecordMeterBarProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+const RecordMeterBar = ({ totalCount, items = [], showLegendLabelBeforeCount = false, sortByCount, className, tableCaption, legendTitle, recordTypeLabel, recordCountLabel, }) => {
+    const total = useMemo(() => {
+        // If total count is not given, then compute it from items' count
+        return (totalCount ||
+            items.reduce((currentTotal, { count }) => {
+                return currentTotal + count;
+            }, 0));
+    }, [items, totalCount]);
+    const itemsToRender = useMemo(() => {
+        if (sortByCount) {
+            // create a new array because .sort() updates the array in place.
+            return [...items].sort((a, z) => {
+                return 'ascending' === sortByCount ? a.count - z.count : z.count - a.count;
+            });
+        }
+        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 }) => {
+                    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 = numberFormat(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));
+                            })] })] })] }));
+};
+export default RecordMeterBar;

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

@@ -0,0 +1,13 @@
+export default Spinner;
+declare function Spinner({ color, className, size }: {
+    color?: string;
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    namespace propTypes {
+        const color: any;
+        const className: any;
+        const size: any;
+    }
+}

package/build/components/spinner/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import React from 'react';
+import './style.scss';
+const Spinner = ({ color = '#FFFFFF', className = '', size = 20 }) => {
+    const theClassName = className + ' jp-components-spinner';
+    const styleOuter = {
+        width: size,
+        height: size,
+        fontSize: size,
+        borderTopColor: color,
+    };
+    const styleInner = {
+        borderTopColor: color,
+        borderRightColor: color,
+    };
+    return (_jsx("div", { className: theClassName, children: _jsx("div", { className: "jp-components-spinner__outer", style: styleOuter, children: _jsx("div", { className: "jp-components-spinner__inner", style: styleInner }) }) }));
+};
+Spinner.propTypes = {
+    /** The spinner color. */
+    color: PropTypes.string,
+    /** CSS class names. */
+    className: PropTypes.string,
+    /** The spinner size. */
+    size: PropTypes.number,
+};
+export default Spinner;

package/build/components/split-button/index.d.ts

@@ -0,0 +1,4 @@
+import { SplitButtonProps } from './types.js';
+import type React from 'react';
+declare const SplitButton: React.FC<SplitButtonProps>;
+export default SplitButton;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import styles from './style.module.scss';
+const DownIcon = () => (_jsx("svg", { width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "10 9 4 7", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m18.004 10.555-6.005 5.459-6.004-5.459 1.009-1.11 4.995 4.542 4.996-4.542 1.009 1.11Z" }) }));
+const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...buttonProps }) => {
+    return (_jsxs(ButtonGroup, { className: styles['split-button'], children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _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/split-button/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * External dependencies
+ */
+import type { Button, DropdownMenu } from '@wordpress/components';
+type AllowedDropdownMenuProps = Pick<React.ComponentProps<typeof DropdownMenu>, 'controls' | 'popoverProps' | 'toggleProps' | 'label'>;
+export type SplitButtonProps = Omit<React.ComponentProps<typeof Button>, 'controls'> & AllowedDropdownMenuProps & Required<Pick<AllowedDropdownMenuProps, 'controls'>>;
+export {};

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

@@ -0,0 +1 @@
+export {};

package/build/components/stat-card/index.d.ts

@@ -0,0 +1,9 @@
+import { StatCardProps } from './types.js';
+/**
+ * StatCard component
+ *
+ * @param {StatCardProps} props - Component props.
+ * @return {React.ReactNode} - StatCard react component.
+ */
+declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCard;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import numberFormat from '../number-format/index.js';
+import Text from '../text/index.js';
+import styles from './style.module.scss';
+/**
+ * StatCard component
+ *
+ * @param {StatCardProps} props - Component props.
+ * @return {React.ReactNode} - StatCard react component.
+ */
+const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
+    const formattedValue = numberFormat(value);
+    const compactValue = numberFormat(value, {
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    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/stat-card/types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" resolution-mode="require"/>
+export type StatCardProps = {
+    /**
+     * Custom className to be inserted.
+     */
+    className?: string;
+    /**
+     * Whether to hide the value.
+     */
+    hideValue?: boolean;
+    /**
+     * The stat card icon.
+     */
+    icon: React.JSX.Element;
+    /**
+     * The stat label.
+     */
+    label: string;
+    /**
+     * The stat value.
+     */
+    value: number;
+    /**
+     * The component variant.
+     *
+     * @default 'square'
+     */
+    variant?: 'square' | 'horizontal';
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+interface StatusProps {
+    status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
+    label?: string;
+    className?: string;
+}
+declare const Status: ({ className, label, status }: StatusProps) => React.JSX.Element;
+export default Status;

package/build/components/status/index.js

@@ -0,0 +1,18 @@
+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 styles from './style.module.scss';
+const Status = ({ className, label, status = 'inactive' }) => {
+    const defaultLabels = {
+        active: __('Active', 'jetpack-components'),
+        error: __('Error', 'jetpack-components'),
+        action: __('Action needed', 'jetpack-components'),
+        inactive: __('Inactive', 'jetpack-components'),
+        initializing: __('Setting up', 'jetpack-components'),
+    };
+    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] })] }));
+};
+export default Status;

package/build/components/terms-of-service/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { TermsOfServiceProps } from './types.js';
+import './styles.scss';
+declare const TermsOfService: React.FC<TermsOfServiceProps>;
+export default TermsOfService;

package/build/components/terms-of-service/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { getRedirectUrl } from '../../../components/index.js';
+import Text from '../text/index.js';
+import './styles.scss';
+const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, ...textProps }) => (_jsx(Text, { className: clsx(className, 'terms-of-service'), ...textProps, children: multipleButtons ? (_jsx(MultipleButtonsText, { multipleButtonsLabels: multipleButtons })) : (_jsx(SingleButtonText, { agreeButtonLabel: agreeButtonLabel })) }));
+const MultipleButtonsText = ({ multipleButtonsLabels }) => {
+    if (Array.isArray(multipleButtonsLabels) && multipleButtonsLabels.length > 1) {
+        return createInterpolateElement(sprintf(
+        /* translators: %1$s is button label 1 and %2$s is button label 2 */
+        __('By clicking <strong>%1$s</strong> or <strong>%2$s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), multipleButtonsLabels[0], multipleButtonsLabels[1]), {
+            strong: _jsx("strong", {}),
+            tosLink: _jsx(Link, { slug: "wpcom-tos" }),
+            shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+        });
+    }
+    return createInterpolateElement(__('By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), {
+        tosLink: _jsx(Link, { slug: "wpcom-tos" }),
+        shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+    });
+};
+const SingleButtonText = ({ agreeButtonLabel }) => createInterpolateElement(sprintf(
+/* translators: %s is a button label */
+__('By clicking <strong>%s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), agreeButtonLabel), {
+    strong: _jsx("strong", {}),
+    tosLink: _jsx(Link, { slug: "wpcom-tos" }),
+    shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+});
+const Link = ({ slug, children }) => (_jsx("a", { className: "terms-of-service__link", href: getRedirectUrl(slug), rel: "noopener noreferrer", target: "_blank", children: children }));
+export default TermsOfService;

package/build/components/terms-of-service/types.d.ts

@@ -0,0 +1,23 @@
+import { TextProps } from '../text/types.js';
+type MultipleButtonsProps = {
+    /**
+     * Indicates whether there are multiple buttons present that would imply agreement if clicked.
+     */
+    multipleButtons: true;
+    /**
+     * The text label of the button someone would click to agree to the terms.
+     */
+    agreeButtonLabel?: undefined;
+};
+type SingleButtonProps = {
+    /**
+     * Indicates whether there are multiple buttons present that would imply agreement if clicked.
+     */
+    multipleButtons?: false;
+    /**
+     * The text label of the button someone would click to agree to the terms.
+     */
+    agreeButtonLabel: string;
+};
+export type TermsOfServiceProps = Pick<TextProps, 'variant' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'className' | 'component'> & (MultipleButtonsProps | SingleButtonProps);
+export {};

package/build/components/terms-of-service/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { TestimonialsType } from './types.js';
+declare const Testimonials: TestimonialsType;
+export default Testimonials;

package/build/components/testimonials/index.js

@@ -0,0 +1,18 @@
+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';
+const Testimonials = ({ testimonials }) => {
+    const [currentTestimonialIndex, setcurrentTestimonialIndex] = useState(0);
+    const incrementTestimonial = useCallback(() => {
+        const newIndex = currentTestimonialIndex === testimonials.length - 1 ? 0 : currentTestimonialIndex + 1;
+        setcurrentTestimonialIndex(newIndex);
+    }, [currentTestimonialIndex, testimonials]);
+    const decrementTestimonial = useCallback(() => {
+        const newIndex = currentTestimonialIndex === 0 ? testimonials.length - 1 : currentTestimonialIndex - 1;
+        setcurrentTestimonialIndex(newIndex);
+    }, [currentTestimonialIndex, testimonials]);
+    const shouldShowArrows = testimonials.length > 1;
+    return (_jsxs("div", { className: "testimonials", children: [shouldShowArrows && (_jsx("button", { "data-testid": "left-arrow", className: "testimonials__left-arrow", onClick: decrementTestimonial, children: _jsx(Gridicon, { icon: "chevron-left", size: 48 }) })), testimonials.map((testimonial, index) => (_jsx(Testimonial, { ...testimonial, hidden: currentTestimonialIndex !== index }, index))), shouldShowArrows && (_jsx("button", { "data-testid": "right-arrow", className: "testimonials__right-arrow", onClick: incrementTestimonial, children: _jsx(Gridicon, { icon: "chevron-right", size: 48 }) }))] }));
+};
+export default Testimonials;

package/build/components/testimonials/testimonial.d.ts

@@ -0,0 +1,4 @@
+import type { TestimonialType } from './types.js';
+import './style.scss';
+declare const Testimonial: TestimonialType;
+export { Testimonial };

package/build/components/testimonials/testimonial.js

@@ -0,0 +1,7 @@
+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));
+};
+export { Testimonial };