@automattic/jetpack-components 0.68.2 → 0.69.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.69.1] - 2025-03-18
+### Changed
+- Update package dependencies. [#42509] [#42511]
+
+## [0.69.0] - 2025-03-17
+### Added
+- Add build. [#41536]
+
 ## [0.68.2] - 2025-03-12
 ### Added
 - Add role to Jetpack footer. [#42156]
@@ -1310,6 +1318,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.69.1]: https://github.com/Automattic/jetpack-components/compare/0.69.0...0.69.1
+[0.69.0]: https://github.com/Automattic/jetpack-components/compare/0.68.2...0.69.0
 [0.68.2]: https://github.com/Automattic/jetpack-components/compare/0.68.1...0.68.2
 [0.68.1]: https://github.com/Automattic/jetpack-components/compare/0.68.0...0.68.1
 [0.68.0]: https://github.com/Automattic/jetpack-components/compare/0.67.1...0.68.0

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

@@ -0,0 +1,25 @@
+export default ActionButton;
+/**
+ * The Jetpack Action button.
+ *
+ * This component extends the regular `Button` component and adds a `isLoading` prop that will disable and display a spinner, giving the user the feedback that some action is happening. It also provides a generic error message.
+ *
+ * It is useful to async actions when the user has to wait the result of a request or process.
+ *
+ * @param {object} props - The properties.
+ * @return {React.Component} The `ActionButton` component.
+ */
+declare function ActionButton(props: object): React.Component;
+declare namespace ActionButton {
+    namespace propTypes {
+        const label: any;
+        const onClick: any;
+        const isLoading: any;
+        const isDisabled: any;
+        const displayError: any;
+        const errorMessage: any;
+        const variant: any;
+        const isExternalLink: any;
+    }
+}
+import React from 'react';

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+/**
+ * Internal dependencies
+ */
+import React from 'react';
+import Button from '../button/index.js';
+import styles from './style.module.scss';
+/**
+ * The Jetpack Action button.
+ *
+ * This component extends the regular `Button` component and adds a `isLoading` prop that will disable and display a spinner, giving the user the feedback that some action is happening. It also provides a generic error message.
+ *
+ * It is useful to async actions when the user has to wait the result of a request or process.
+ *
+ * @param {object} props - The properties.
+ * @return {React.Component} The `ActionButton` component.
+ */
+const ActionButton = props => {
+    const { label, onClick, isLoading = false, loadingText, isDisabled, displayError = false, errorMessage = __('An error occurred. Please try again.', 'jetpack-components'), variant = 'primary', isExternalLink = false, customClass, } = props;
+    const loadingContent = loadingText || _jsx(Spinner, {});
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { className: clsx(styles.button, 'jp-action-button--button', customClass), label: label, onClick: onClick, variant: isExternalLink ? 'link' : variant, isExternalLink: isExternalLink, disabled: isLoading || isDisabled, children: isLoading ? loadingContent : label }), displayError && (_jsx("p", { className: clsx(styles.error, 'jp-action-button__error'), children: errorMessage }))] }));
+};
+ActionButton.propTypes = {
+    /** The button label. */
+    label: PropTypes.string.isRequired,
+    /** The callback to be called on click. */
+    onClick: PropTypes.func,
+    /** Will disable the button and display a spinner if set to true. */
+    isLoading: PropTypes.bool,
+    /** Will disable the button with no spinner. */
+    isDisabled: PropTypes.bool,
+    /** Displays an error message */
+    displayError: PropTypes.bool,
+    /** The error message string */
+    errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    /** The type/variant of button */
+    variant: PropTypes.arrayOf(PropTypes.oneOf(['primary', 'secondary', 'link'])),
+    /** Will display the button as a link with an external icon. */
+    isExternalLink: PropTypes.bool,
+};
+export default ActionButton;

package/build/components/action-popover/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Types
+ */
+import { ActionPopoverProps } from './types.js';
+declare const ActionPopover: ({ hideCloseButton, title, children, step, totalSteps, buttonContent, buttonDisabled, buttonHref, buttonExternalLink, offset, onClose, onClick, ...otherPopoverProps }: ActionPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default ActionPopover;

package/build/components/action-popover/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Popover } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import Button from '../button/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Text from '../text/index.js';
+/**
+ * Internal dependencies
+ */
+import ThemeProvider from '../theme-provider/index.js';
+import styles from './styles.module.scss';
+const ActionPopover = ({ hideCloseButton = false, title, children, step = null, totalSteps = null, buttonContent = null, buttonDisabled = false, buttonHref = null, buttonExternalLink = false, offset = 32, onClose, onClick, ...otherPopoverProps }) => {
+    const [isSm] = useBreakpointMatch('sm');
+    if (!title || !children || !buttonContent) {
+        return null;
+    }
+    if (!otherPopoverProps.position) {
+        otherPopoverProps.position = isSm ? 'top center' : 'middle right';
+    }
+    const popoverProps = {
+        ...otherPopoverProps,
+        offset,
+        onClose,
+    };
+    const showSteps = Number.isFinite(step) && Number.isFinite(totalSteps);
+    let stepsText = null;
+    if (showSteps) {
+        stepsText = sprintf(
+        /* translators: 1 Current step, 2 Total steps */
+        __('%1$d of %2$d', 'jetpack-components'), step, totalSteps);
+    }
+    return (_jsx(Popover, { ...popoverProps, children: _jsx(ThemeProvider, { children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.header, children: [_jsx(Text, { variant: "title-small", className: styles.title, children: title }), !hideCloseButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "small", variant: "tertiary", "aria-label": "close", className: styles['close-button'], icon: close, iconSize: 16, onClick: onClose }) }))] }), children, _jsxs("div", { className: styles.footer, children: [showSteps && (_jsx(Text, { variant: "body", className: styles.steps, children: stepsText })), _jsx(Button, { variant: "primary", className: styles['action-button'], disabled: buttonDisabled, onClick: onClick, isExternalLink: buttonExternalLink, href: buttonHref, children: buttonContent })] })] }) }) }));
+};
+export default ActionPopover;

package/build/components/action-popover/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * Types
+ */
+import type { Popover } from '@wordpress/components';
+export type ActionPopoverProps = React.ComponentProps<typeof Popover> & {
+    anchor?: Element;
+    offset?: number;
+} & {
+    hideCloseButton?: boolean;
+    title: string;
+    children: React.ReactNode;
+    step?: number;
+    totalSteps?: number;
+    buttonContent?: React.ReactNode;
+    buttonDisabled?: boolean;
+    buttonHref?: string;
+    buttonExternalLink?: boolean;
+    onClick?(): void;
+};

package/build/components/action-popover/types.js

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

package/build/components/admin-page/index.d.ts

@@ -0,0 +1,12 @@
+import type { AdminPageProps } from './types.js';
+import type React from 'react';
+/**
+ * This is the base structure for any admin page. It comes with Header and Footer.
+ *
+ * All content must be passed as children wrapped in as many <AdminSection> elements as needed.
+ *
+ * @param {AdminPageProps} props - Component properties.
+ * @return {React.ReactNode} AdminPage component.
+ */
+declare const AdminPage: React.FC<AdminPageProps>;
+export default AdminPage;

package/build/components/admin-page/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import restApi from '@automattic/jetpack-api';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { useEffect, useCallback } from 'react';
+import JetpackFooter from '../jetpack-footer/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
+import styles from './style.module.scss';
+/**
+ * This is the base structure for any admin page. It comes with Header and Footer.
+ *
+ * All content must be passed as children wrapped in as many <AdminSection> elements as needed.
+ *
+ * @param {AdminPageProps} props - Component properties.
+ * @return {React.ReactNode} AdminPage component.
+ */
+const AdminPage = ({ children, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
+    useEffect(() => {
+        restApi.setApiRoot(apiRoot);
+        restApi.setApiNonce(apiNonce);
+    }, [apiRoot, apiNonce]);
+    const rootClassName = clsx(styles['admin-page'], {
+        [styles.background]: showBackground,
+    });
+    const testConnection = useCallback(async () => {
+        try {
+            const connectionTest = await restApi.fetchSiteConnectionTest();
+            // eslint-disable-next-line no-alert
+            window.alert(connectionTest.message);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-alert
+            window.alert(sprintf(
+            /* translators: placeholder is an error message. */
+            __('There was an error testing Jetpack. Error: %s', 'jetpack-components'), error.message));
+        }
+    }, []);
+    return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: styles['admin-page-header'], children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+                            role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && (_jsx(Container, { horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }))] }));
+};
+export default AdminPage;

package/build/components/admin-page/types.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
+export type AdminPageProps = {
+    /**
+     * The page content
+     */
+    children: React.ReactNode;
+    /**
+     * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
+     */
+    moduleName?: string;
+    /**
+     * Whether or not to display the Header
+     */
+    showHeader?: boolean;
+    /**
+     * Custom header. Optional
+     */
+    header?: React.ReactNode;
+    /**
+     * Whether or not to display the Footer
+     */
+    showFooter?: boolean;
+    /**
+     * Whether or not to link to Jetpack plugin admin pages.
+     */
+    useInternalLinks?: boolean;
+    /**
+     * Link that the Footer Module name will link to (optional).
+     */
+    moduleNameHref?: string;
+    /**
+     * Whether or not to display the Background Color
+     */
+    showBackground?: boolean;
+    /**
+     * URL of the site WP Admin.
+     */
+    siteAdminUrl?: string;
+    /**
+     * The domain of the sanboxed API.
+     */
+    sandboxedDomain?: string;
+    /**
+     * The root URL of the API.
+     */
+    apiRoot?: string;
+    /**
+     * The nonce of the API.
+     */
+    apiNonce?: string;
+    /**
+     * Optional menu items to be displayed
+     */
+    optionalMenuItems?: JetpackFooterMenuItem[];
+};

package/build/components/admin-page/types.js

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

package/build/components/admin-section/basic/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { AdminSectionBaseProps } from '../types.js';
+/**
+ * This is the wrapper component to build sections within your admin page.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @return {React.ReactNode} AdminSection component.
+ */
+declare const AdminSection: React.FC<AdminSectionBaseProps>;
+export default AdminSection;

package/build/components/admin-section/basic/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './style.module.scss';
+/**
+ * This is the wrapper component to build sections within your admin page.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @return {React.ReactNode} AdminSection component.
+ */
+const AdminSection = ({ children }) => {
+    return _jsx("div", { className: styles.section, children: children });
+};
+export default AdminSection;

package/build/components/admin-section/hero/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { AdminSectionBaseProps } from '../types.js';
+/**
+ * The wrapper component for a Hero Section to be used in admin pages.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @return {React.Component} AdminSectionHero component.
+ */
+declare const AdminSectionHero: React.FC<AdminSectionBaseProps>;
+export default AdminSectionHero;

package/build/components/admin-section/hero/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './style.module.scss';
+/**
+ * The wrapper component for a Hero Section to be used in admin pages.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @return {React.Component} AdminSectionHero component.
+ */
+const AdminSectionHero = ({ children }) => {
+    return _jsx("div", { className: styles['section-hero'], children: children });
+};
+export default AdminSectionHero;

package/build/components/admin-section/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+export type AdminSectionBaseProps = {
+    /**
+     * The section content
+     */
+    children: React.ReactNode;
+    className?: string;
+};

package/build/components/admin-section/types.js

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+type AlertProps = {
+    /** The severity of the alert. */
+    level: 'error' | 'warning' | 'info' | 'success';
+    /** Show/Hide icon */
+    showIcon?: boolean;
+    /** Children to be rendered inside the alert. */
+    children: React.ReactNode;
+    /** Wrapper class name */
+    className?: string;
+};
+/**
+ * Alert component
+ *
+ * @param {object}          props           - The component properties.
+ * @param {string}          props.level     - The alert level: error, warning, info, success.
+ * @param {boolean}         props.showIcon  - Whether to show the alert icon.
+ * @param {string}          props.className - The wrapper class name.
+ * @param {React.Component} props.children  - The alert content.
+ * @return {React.ReactElement}             The `Alert` component.
+ */
+declare const Alert: React.FC<AlertProps>;
+export default Alert;

package/build/components/alert/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, warning, info, check } from '@wordpress/icons';
+import clsx from 'clsx';
+import styles from './style.module.scss';
+const getIconByLevel = (level) => {
+    switch (level) {
+        case 'error':
+            return warning;
+        case 'warning':
+            return warning;
+        case 'info':
+            return info;
+        case 'success':
+            return check;
+        default:
+            return warning;
+    }
+};
+/**
+ * Alert component
+ *
+ * @param {object}          props           - The component properties.
+ * @param {string}          props.level     - The alert level: error, warning, info, success.
+ * @param {boolean}         props.showIcon  - Whether to show the alert icon.
+ * @param {string}          props.className - The wrapper class name.
+ * @param {React.Component} props.children  - The alert content.
+ * @return {React.ReactElement}             The `Alert` component.
+ */
+const Alert = ({ level = 'warning', children, showIcon = true, className, }) => {
+    const classes = clsx(styles.container, styles[`is-${level}`], className);
+    return (_jsxs("div", { className: classes, children: [showIcon && (_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) })), _jsx("div", { children: children })] }));
+};
+export default Alert;

package/build/components/automattic-byline-logo/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AutomatticBylineLogoProps } from './types.js';
+/**
+ * Automattic "By line" Logo component.
+ *
+ * @param {AutomatticBylineLogoProps} props - Component properties.
+ * @return {React.ReactNode} AutomatticBylineLogo component.
+ */
+declare const AutomatticBylineLogo: React.FC<AutomatticBylineLogoProps>;
+export default AutomatticBylineLogo;

package/build/components/automattic-byline-logo/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+/**
+ * Automattic "By line" Logo component.
+ *
+ * @param {AutomatticBylineLogoProps} props - Component properties.
+ * @return {React.ReactNode} AutomatticBylineLogo component.
+ */
+const AutomatticBylineLogo = ({ title = __('An Automattic Airline', 'jetpack-components'), height = 7, className, ...otherProps }) => {
+    return (_jsxs("svg", { role: "img", x: "0", y: "0", viewBox: "0 0 935 38.2", enableBackground: "new 0 0 935 38.2", "aria-labelledby": "jp-automattic-byline-logo-title", height: height, className: clsx('jp-automattic-byline-logo', className), ...otherProps, children: [_jsx("desc", { id: "jp-automattic-byline-logo-title", children: title }), _jsx("path", { d: "M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" }), _jsx("path", { d: "M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" }), _jsx("path", { d: "M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" })] }));
+};
+export default AutomatticBylineLogo;

package/build/components/automattic-byline-logo/types.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export interface AutomatticBylineLogoProps extends React.SVGProps<SVGSVGElement> {
+    /**
+     * Title for SVG.
+     */
+    title?: string;
+    /**
+     * Height for SVG.
+     */
+    height?: number;
+    /**
+     * Additional className for the a wrapper. `jp-automattic-byline-logo` always included
+     */
+    className?: string;
+}

package/build/components/automattic-byline-logo/types.js

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

package/build/components/automattic-for-agencies-logo/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Automattic for Agencies Logo component
+ *
+ * @param {object} props       - Component props
+ * @param {string} props.color - Color code for the logo text
+ * @return {React.ReactElement} Component template
+ */
+export default function AutomatticForAgenciesLogo({ color, }: {
+    color: string;
+}): React.ReactElement;

package/build/components/automattic-for-agencies-logo/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, SVG } from '@wordpress/components';
+/**
+ * Automattic for Agencies Logo component
+ *
+ * @param {object} props       - Component props
+ * @param {string} props.color - Color code for the logo text
+ * @return {React.ReactElement} Component template
+ */
+export default function AutomatticForAgenciesLogo({ color = '#FFFFFF', }) {
+    return (_jsx(SVG, { clipRule: "evenodd", fillRule: "evenodd", width: "251", height: "47", viewBox: "0 0 251 47", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx(Path, { d: "M20.256 17H17.04L14.928 13.04L5.544 13.04L3.504 17H0.336L8.976 1.016L11.472 1.016L20.256 17ZM13.752 10.856L10.152 4.136L6.672 10.856L13.752 10.856ZM42.7174 10.352C42.7174 14.312 40.1734 17.624 34.1494 17.624C28.4134 17.624 25.7494 14.504 25.7494 10.352L25.7494 1.016H28.7254L28.7254 10.4C28.7254 13.352 30.6694 15.104 34.3654 15.104C38.1574 15.104 39.7174 13.352 39.7174 10.4V1.016L42.7174 1.016V10.352ZM66.6443 3.512L59.6603 3.512V17H56.6603V3.512L49.6763 3.512V1.016L66.6443 1.016V3.512ZM91.1207 9.296C91.1207 13.544 87.4487 17.624 81.7607 17.624C76.0967 17.624 72.4247 13.544 72.4247 9.296V8.768C72.4247 4.448 76.0967 0.439999 81.7607 0.439999C87.4487 0.439999 91.1207 4.448 91.1207 8.768V9.296ZM88.0967 9.2V8.816C88.0967 5.72 85.8407 2.96 81.7607 2.96C77.6807 2.96 75.4487 5.72 75.4487 8.816V9.2C75.4487 12.296 77.6807 15.104 81.7607 15.104C85.8407 15.104 88.0967 12.296 88.0967 9.2ZM120.609 17H117.609V4.352L116.817 5.744L110.121 17H108.657L102.033 5.744L101.241 4.352V17H98.3128V1.016H102.465L108.777 11.984L109.521 13.328L110.265 11.984L116.505 1.016L120.609 1.016V17ZM146.748 17H143.532L141.42 13.04H132.036L129.996 17H126.828L135.468 1.016H137.964L146.748 17ZM140.244 10.856L136.644 4.136L133.164 10.856L140.244 10.856ZM166.919 3.512L159.935 3.512V17L156.935 17V3.512L149.951 3.512V1.016L166.919 1.016V3.512ZM190.136 3.512H183.152V17H180.152V3.512H173.168V1.016L190.136 1.016V3.512ZM200.346 17H197.346V1.016L200.346 1.016V17ZM225.532 3.632L223.66 5.528C222.22 4.208 220.108 2.96 217.252 2.96C212.98 2.96 210.58 5.888 210.58 8.936V9.248C210.58 12.272 213.004 15.104 217.468 15.104C220.132 15.104 222.34 13.832 223.732 12.536L225.532 14.432C223.78 16.16 220.804 17.624 217.276 17.624C211.228 17.624 207.556 13.688 207.556 9.368V8.84C207.556 4.52 211.564 0.439999 217.42 0.439999C220.804 0.439999 223.876 1.856 225.532 3.632ZM16.512 32.512H5.256L5.256 37.096H13.632V39.472H5.256L5.256 46H2.28L2.28 30.016H16.512V32.512ZM40.8426 38.296C40.8426 42.544 37.1706 46.624 31.4826 46.624C25.8186 46.624 22.1466 42.544 22.1466 38.296V37.768C22.1466 33.448 25.8186 29.44 31.4826 29.44C37.1706 29.44 40.8426 33.448 40.8426 37.768V38.296ZM37.8186 38.2V37.816C37.8186 34.72 35.5626 31.96 31.4826 31.96C27.4026 31.96 25.1706 34.72 25.1706 37.816V38.2C25.1706 41.296 27.4026 44.104 31.4826 44.104C35.5626 44.104 37.8186 41.296 37.8186 38.2ZM64.5227 46H61.8107C60.9947 46 60.6347 44.872 60.5387 43.432L60.4427 41.8C60.3467 40.216 59.6987 39.544 56.6987 39.544H51.0347V46H48.0347V30.016H56.7467C61.5467 30.016 63.7067 31.936 63.7067 34.408C63.7067 36.16 62.8187 37.816 59.6987 38.392C62.8187 38.632 63.4907 40.048 63.5147 41.92L63.5387 43.24C63.5627 44.344 63.7547 45.136 64.5227 45.928V46ZM60.6827 34.984V34.792C60.6827 33.64 59.7467 32.512 57.1787 32.512H51.0347V37.312H57.4427C59.6507 37.312 60.6827 36.256 60.6827 34.984ZM101.054 46H97.8384L95.7264 42.04L86.3424 42.04L84.3024 46H81.1344L89.7744 30.016H92.2704L101.054 46ZM94.5504 39.856L90.9504 33.136L87.4704 39.856H94.5504ZM123.597 46H121.677L121.221 43.84C119.685 45.616 117.501 46.624 114.789 46.624C109.125 46.624 105.453 42.736 105.453 38.296V38.008C105.453 33.472 109.461 29.44 115.317 29.44C118.917 29.44 121.845 30.928 123.429 32.632L121.557 34.528C120.117 33.208 117.885 31.96 115.293 31.96C110.829 31.96 108.477 34.816 108.477 37.936V38.2C108.477 41.32 110.997 44.104 115.077 44.104C118.173 44.104 120.381 42.208 120.381 40.288V40.12H115.461V37.744H123.597V46ZM145.697 46L131.177 46V30.016L145.697 30.016V32.512L134.177 32.512V36.616H143.033V39.04H134.177V43.504L145.697 43.504V46ZM170.003 46H167.411L157.019 35.296L156.011 34.168V46H153.011V30.016H155.891L165.971 40.696L167.003 41.848V30.016H170.003V46ZM195.19 32.632L193.318 34.528C191.878 33.208 189.766 31.96 186.91 31.96C182.638 31.96 180.238 34.888 180.238 37.936V38.248C180.238 41.272 182.662 44.104 187.126 44.104C189.79 44.104 191.998 42.832 193.39 41.536L195.19 43.432C193.438 45.16 190.462 46.624 186.934 46.624C180.886 46.624 177.214 42.688 177.214 38.368V37.84C177.214 33.52 181.222 29.44 187.078 29.44C190.462 29.44 193.534 30.856 195.19 32.632ZM205.164 46L202.164 46V30.016L205.164 30.016V46ZM227.855 46H213.335V30.016H227.855V32.512H216.335V36.616H225.191V39.04H216.335V43.504H227.855V46ZM251.009 41.512C251.009 44.632 247.601 46.624 242.849 46.624C239.609 46.624 236.609 45.736 234.137 44.56L235.241 42.184C237.761 43.432 240.425 44.176 242.993 44.176C246.449 44.176 247.985 43.048 247.985 41.824C247.985 38.008 234.593 40.552 234.593 34.696C234.593 31.72 237.809 29.44 242.873 29.44C246.017 29.44 248.945 30.544 250.745 31.72L249.113 33.736C247.625 32.776 245.177 31.888 242.777 31.888C239.657 31.888 237.593 32.944 237.593 34.312C237.593 37.792 251.009 35.464 251.009 41.512Z", fill: color }) }));
+}

package/build/components/automattic-icon-logo/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Automattic Icon Logo component
+ *
+ * @param {object} props            - Component props
+ * @param {string} props.innerColor - Color code for the line in the middle of the logo.
+ * @param {string} props.outerColor - Color code for the logo's outer
+ * @return {React.ReactElement} Component template
+ */
+export default function AutomatticIconLogo({ innerColor, outerColor, }: {
+    innerColor: string;
+    outerColor: string;
+}): React.ReactElement;

package/build/components/automattic-icon-logo/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Path, SVG } from '@wordpress/components';
+/**
+ * Automattic Icon Logo component
+ *
+ * @param {object} props            - Component props
+ * @param {string} props.innerColor - Color code for the line in the middle of the logo.
+ * @param {string} props.outerColor - Color code for the logo's outer
+ * @return {React.ReactElement} Component template
+ */
+export default function AutomatticIconLogo({ innerColor = '#00A3E0', outerColor = '#FFFFFF', }) {
+    return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 47 43", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z", fill: outerColor })] }));
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+type BadgeProps = {
+    children?: React.ReactNode;
+    className?: string;
+    variant?: 'success' | 'warning' | 'danger';
+    [key: string]: unknown;
+};
+/**
+ * Badge component
+ *
+ * @param {object}      props           - The component properties.
+ * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
+ * @param {JSX.Element} props.children  - Badge text or content.
+ * @param {string}      props.className - Additional class name to pass to the Badge component.
+ *
+ * @return {React.ReactElement} The `Badge` component.
+ */
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/build/components/badge/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './style.module.scss';
+/**
+ * Badge component
+ *
+ * @param {object}      props           - The component properties.
+ * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
+ * @param {JSX.Element} props.children  - Badge text or content.
+ * @param {string}      props.className - Additional class name to pass to the Badge component.
+ *
+ * @return {React.ReactElement} The `Badge` component.
+ */
+const Badge = ({ children, className, variant, ...props }) => {
+    const classes = clsx(styles.badge, {
+        [styles['is-success']]: variant === 'success',
+        [styles['is-warning']]: variant === 'warning',
+        [styles['is-danger']]: variant === 'danger',
+    }, className);
+    return (_jsx("span", { className: classes, ...props, children: children }));
+};
+export default Badge;

package/build/components/boost-score-bar/index.d.ts

@@ -0,0 +1,5 @@
+import type { BoostScoreBarProps } from './types.js';
+import type { FunctionComponent } from 'react';
+import './style.scss';
+export declare const BoostScoreBar: FunctionComponent<BoostScoreBarProps>;
+export default BoostScoreBar;

package/build/components/boost-score-bar/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import Gridicon from '../gridicon/index.js';
+import './style.scss';
+export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
+    if (!active) {
+        return null;
+    }
+    const prevScoreOffset = (prevScore / score) * 100;
+    const desktopIconLabel = __('Desktop score', 'jetpack-components');
+    const mobileIconLabel = __('Mobile score', 'jetpack-components');
+    const getIcon = () => {
+        if (scoreBarType === 'desktop') {
+            return _jsx(Gridicon, { icon: "computer", size: 24 });
+        }
+        return _jsx(Gridicon, { icon: "phone", size: 24 });
+    };
+    const getFillColor = () => {
+        // This shows the loading color unless a score already exists.
+        // In that case, shows the color based on the current score while refreshing.
+        if (isLoading && !score) {
+            return 'fill-loading';
+        }
+        if (score > 70) {
+            return 'fill-good';
+        }
+        if (score > 50) {
+            return 'fill-mediocre';
+        }
+        return 'fill-bad';
+    };
+    return (_jsxs("div", { className: clsx('jb-score-bar', `jb-score-bar--${scoreBarType}`), children: [_jsxs("div", { className: "jb-score-bar__label", children: [getIcon(), _jsx("div", { children: scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel })] }), _jsx("div", { className: "jb-score-bar__bounds", children: _jsxs("div", { className: clsx('jb-score-bar__filler', getFillColor()), style: { width: `${score}%` }, children: [isLoading ? (_jsx("div", { className: "jb-score-bar__loading", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 128 128", children: _jsxs("g", { children: [_jsx("path", { d: "M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64", calcMode: "discrete", dur: "1080ms", repeatCount: "indefinite" })] }) }) })) : (_jsx("div", { className: "jb-score-bar__score", children: score })), showPrevScores && !!prevScore && prevScore < score && (_jsxs("div", { className: "jb-score-bar__no_boost_score", style: { left: `min(${prevScoreOffset}%, calc( 100% - var(--clearance-space))` }, children: [prevScore, noBoostScoreTooltip && (_jsx("div", { role: "tooltip", className: "jb-score-bar__no_boost_score_tooltip", children: noBoostScoreTooltip }))] }))] }) })] }));
+};
+export default BoostScoreBar;

package/build/components/boost-score-bar/types.d.ts

@@ -0,0 +1,9 @@
+export interface BoostScoreBarProps {
+    score: number;
+    prevScore?: number;
+    isLoading: boolean;
+    showPrevScores: boolean;
+    active: boolean;
+    scoreBarType: 'mobile' | 'desktop';
+    noBoostScoreTooltip: string | null;
+}

package/build/components/boost-score-bar/types.js

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