@automattic/jetpack-components 0.68.2 → 0.69.0

package/build/components/icon-tooltip/index.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@wordpress/components';
+import clsx from 'clsx';
+import { useCallback, useState } from 'react';
+import Button from '../button/index.js';
+import Gridicon from '../gridicon/index.js';
+import './style.scss';
+const placementsToPositions = (placement) => {
+    const mapping = {
+        'top-end': 'top left',
+        top: 'top center',
+        'top-start': 'top right',
+        'bottom-end': 'bottom left',
+        bottom: 'bottom center',
+        'bottom-start': 'bottom right',
+    };
+    return mapping[placement];
+};
+/**
+ * Generate Icon Tooltip
+ *
+ * @param {IconTooltipProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-end', animate = true, iconCode = 'info-outline', iconSize = 18, offset = 10, title, children, popoverAnchorStyle = 'icon', forceShow = false, hoverShow = false, wide = false, inline = true, shift = false, }) => {
+    const POPOVER_HELPER_WIDTH = 124;
+    const [isVisible, setIsVisible] = useState(false);
+    const [hoverTimeout, setHoverTimeout] = useState(null);
+    const hideTooltip = useCallback(() => setIsVisible(false), [setIsVisible]);
+    const toggleTooltip = useCallback(e => {
+        e.preventDefault();
+        setIsVisible(!isVisible);
+    }, [isVisible, setIsVisible]);
+    const args = {
+        // To be compatible with deprecating prop `position`.
+        position: placementsToPositions(placement),
+        placement,
+        animate,
+        noArrow: false,
+        resize: false,
+        flip: false,
+        offset,
+        focusOnMount: 'container',
+        onClose: hideTooltip,
+        className: 'icon-tooltip-container',
+        inline,
+        shift,
+    };
+    const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
+    const wrapperClassNames = clsx('icon-tooltip-wrapper', className);
+    const iconShiftBySize = {
+        left: isAnchorWrapper ? 0 : -(POPOVER_HELPER_WIDTH / 2 - iconSize / 2) + 'px',
+    };
+    const isForcedToShow = isAnchorWrapper && forceShow;
+    const handleMouseEnter = useCallback(() => {
+        if (hoverShow) {
+            if (hoverTimeout) {
+                clearTimeout(hoverTimeout);
+                setHoverTimeout(null);
+            }
+            setIsVisible(true);
+        }
+    }, [hoverShow, hoverTimeout]);
+    const handleMouseLeave = useCallback(() => {
+        if (hoverShow) {
+            const id = setTimeout(() => {
+                setIsVisible(false);
+                setHoverTimeout(null);
+            }, 100);
+            setHoverTimeout(id);
+        }
+    }, [hoverShow]);
+    return (_jsxs("div", { className: wrapperClassNames, "data-testid": "icon-tooltip_wrapper", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!isAnchorWrapper && (_jsx(Button, { variant: "link", onMouseDown: toggleTooltip, children: _jsx(Gridicon, { className: iconClassName, icon: iconCode, size: iconSize }) })), _jsx("div", { className: clsx('icon-tooltip-helper', { 'is-wide': wide }), style: iconShiftBySize, children: (isForcedToShow || isVisible) && (_jsx(Popover, { ...args, children: _jsxs("div", { children: [title && _jsx("div", { className: "icon-tooltip-title", children: title }), _jsx("div", { className: "icon-tooltip-content", children: children })] }) })) })] }));
+};
+export default IconTooltip;

package/build/components/icon-tooltip/types.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" resolution-mode="require"/>
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
+export type IconTooltipProps = {
+    /**
+     * The wrapper class name of this IconTooltip component.
+     */
+    className?: string;
+    /**
+     * The class name applied to Gridicon.
+     */
+    iconClassName?: string;
+    /**
+     * The deprecated position of Popover.
+     */
+    position?: Position;
+    /**
+     * The placement of Popover.
+     */
+    placement?: Placement;
+    /**
+     * The animation for Popover appears.
+     */
+    animate?: boolean;
+    /**
+     * The icon code for Gridicon.
+     */
+    iconCode?: string;
+    /**
+     * The title of Popover.
+     */
+    title?: string;
+    /**
+     * The main body content of Popover.
+     */
+    children?: React.ReactNode;
+    /**
+     * The icon square width and height size (in px) also calculate the Popover shift.
+     */
+    iconSize?: number;
+    /**
+     * The distance (in px) between the anchor and the Popover.
+     */
+    offset?: number;
+    /**
+     * Set the Popover anchor for its alignment with placement.
+     */
+    popoverAnchorStyle?: 'icon' | 'wrapper';
+    /**
+     * Force the Popover to show without an event trigger.
+     */
+    forceShow?: boolean;
+    /**
+     * Enables the Popover to show on hover.
+     */
+    hoverShow?: boolean;
+    /**
+     * Uses a wider content area when enabled.
+     */
+    wide?: boolean;
+    /**
+     * Whether to render the popover inline or as a portal.
+     */
+    inline?: boolean;
+    /**
+     * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
+     */
+    shift?: boolean;
+};

package/build/components/icon-tooltip/types.js

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

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

@@ -0,0 +1,70 @@
+import { SocialLogo } from 'social-logos';
+import { BaseIconProps } from './types.js';
+import type React from 'react';
+export declare const AntiSpamIcon: React.FC<BaseIconProps>;
+export declare const BackupIcon: React.FC<BaseIconProps>;
+export declare const BoostIcon: React.FC<BaseIconProps>;
+export declare const CrmIcon: React.FC<BaseIconProps>;
+export declare const ExtrasIcon: React.FC<BaseIconProps>;
+export declare const ProtectIcon: React.FC<BaseIconProps>;
+export declare const ScanIcon: React.FC<BaseIconProps>;
+export declare const SearchIcon: React.FC<BaseIconProps>;
+export declare const SocialIcon: React.FC<BaseIconProps>;
+export declare const VideopressIcon: React.FC<BaseIconProps>;
+export declare const StarIcon: React.FC<BaseIconProps>;
+export declare const CheckmarkIcon: React.FC<BaseIconProps>;
+export declare const ClipboardIcon: React.FC<BaseIconProps>;
+export declare const JetpackIcon: React.FC<BaseIconProps>;
+export declare const ShareIcon: React.FC<BaseIconProps>;
+export declare const AiIcon: React.FC<BaseIconProps>;
+export declare const StatsIcon: React.FC<BaseIconProps>;
+declare const jetpackIcons: {
+    'anti-spam': React.FC<BaseIconProps>;
+    backup: React.FC<BaseIconProps>;
+    boost: React.FC<BaseIconProps>;
+    crm: React.FC<BaseIconProps>;
+    extras: React.FC<BaseIconProps>;
+    protect: React.FC<BaseIconProps>;
+    scan: React.FC<BaseIconProps>;
+    search: React.FC<BaseIconProps>;
+    social: React.FC<BaseIconProps>;
+    star: React.FC<BaseIconProps>;
+    videopress: React.FC<BaseIconProps>;
+    jetpack: React.FC<BaseIconProps>;
+    share: React.FC<BaseIconProps>;
+    ai: React.FC<BaseIconProps>;
+    stats: React.FC<BaseIconProps>;
+};
+declare const iconsMap: {
+    'anti-spam': React.FC<BaseIconProps>;
+    backup: React.FC<BaseIconProps>;
+    boost: React.FC<BaseIconProps>;
+    crm: React.FC<BaseIconProps>;
+    extras: React.FC<BaseIconProps>;
+    protect: React.FC<BaseIconProps>;
+    scan: React.FC<BaseIconProps>;
+    search: React.FC<BaseIconProps>;
+    social: React.FC<BaseIconProps>;
+    star: React.FC<BaseIconProps>;
+    videopress: React.FC<BaseIconProps>;
+    jetpack: React.FC<BaseIconProps>;
+    share: React.FC<BaseIconProps>;
+    ai: React.FC<BaseIconProps>;
+    stats: React.FC<BaseIconProps>;
+};
+export type JetpackIconSlug = keyof typeof jetpackIcons;
+export type IconsMap = typeof iconsMap;
+export type IconSlug = keyof IconsMap;
+/**
+ * Return icon component by slug.
+ *
+ * @param {string} slug - Icon slug.
+ * @return {React.ComponentType<BaseIconProps>}   Icon component.
+ */
+export declare function getIconBySlug<Slug extends IconSlug>(slug: Slug): IconsMap[Slug];
+export declare const SocialServiceIcon: React.FC<{
+    serviceName: React.ComponentProps<typeof SocialLogo>['icon'];
+    className?: string;
+    iconSize?: number;
+}>;
+export {};

package/build/components/icons/index.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Path, SVG, G, Polygon } from '@wordpress/components';
+import clsx from 'clsx';
+import { SocialLogo } from 'social-logos';
+import styles from './style.module.scss';
+/**
+ * Icon Wrapper component.
+ *
+ * @param {BaseIconProps} props - Component props.
+ * @return {React.ReactNode} Icon Wrapper component.
+ */
+const IconWrapper = ({ className, size = 24, viewBox = '0 0 24 24', opacity = 1, color = '#2C3338', children, }) => {
+    const iconProps = {
+        className: clsx(styles.iconWrapper, className),
+        width: size,
+        height: size,
+        viewBox,
+        opacity,
+        fill: undefined,
+    };
+    if (color) {
+        iconProps.fill = color;
+    }
+    return (_jsx(SVG, { ...iconProps, fillRule: "evenodd", clipRule: "evenodd", xmlns: "http://www.w3.org/2000/svg", children: _jsx(G, { opacity: opacity, children: children }) }));
+};
+export const AntiSpamIcon = ({ opacity = 1, size, color }) => (_jsxs(IconWrapper, { size: size, opacity: opacity, color: color, children: [_jsx(Path, { d: "M13.2,4.7l4.7,12.8c0.4,1.1,1,1.5,2.1,1.6c0.1,0,0.1,0,0.1,0l0.1,0.1l0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1\n\t\ts0,0.1-0.1,0.1c-0.1,0-0.1,0.1-0.1,0.1s-0.1,0-0.2,0h-5.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1-0.1-0.1-0.1l-0.1-0.1c0-0.1,0-0.1,0-0.1\n\t\tc0-0.1,0-0.1,0-0.2s0-0.1,0.1-0.1l0.1-0.1c0,0,0.1,0,0.2,0c0.5,0,1.1-0.2,1.1-0.8c0-0.3-0.1-0.5-0.2-0.8l-1.1-3.1\n\t\tc-0.1-0.2-0.1-0.2-0.2-0.2h-4.3c-0.7,0-1.5,0-1.9,0.9l-1.1,2.4C7.1,17.6,7,17.8,7,18.1c0,0.8,1,0.9,1.6,0.9c0.1,0,0.1,0,0.2,0\n\t\tL8.8,19l0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1s-0.1,0.1-0.1,0.1l-0.1,0.1c-0.1,0-0.1,0-0.2,0H4.1c-0.1,0-0.1,0-0.1,0\n\t\tc-0.1,0-0.1-0.1-0.1-0.1l-0.1-0.1c0-0.1,0-0.1,0-0.1c0-0.1,0-0.1,0-0.2s0-0.1,0.1-0.1L4,19c0,0,0.1,0,0.1,0C5.2,19,5.5,18.5,6,17.5\n\t\tl5.4-12.4c0.2-0.5,0.8-1,1.3-1C13,4.2,13.1,4.4,13.2,4.7z M9.1,13.1c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0.1,0.1,0.1,0.1h4.4\n\t\tc0.3,0,0.4-0.1,0.4-0.3c0-0.1,0-0.2-0.1-0.3l-1.2-3.5c-0.3-0.8-0.8-1.9-0.8-2.7c0-0.1,0-0.1-0.1-0.1c0,0-0.1,0-0.1,0.1\n\t\tc-0.1,0.6-0.4,1.2-0.7,1.7L9.1,13.1z" }), _jsx(Path, { d: "M13.2,4.7l4.7,12.8c0.4,1.1,1,1.5,2.1,1.6c0.1,0,0.1,0,0.1,0l0.1,0.1l0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1\n\t\t\ts0,0.1-0.1,0.1c-0.1,0-0.1,0.1-0.1,0.1s-0.1,0-0.2,0h-5.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1-0.1-0.1-0.1l-0.1-0.1c0-0.1,0-0.1,0-0.1\n\t\t\tc0-0.1,0-0.1,0-0.2s0-0.1,0.1-0.1l0.1-0.1c0,0,0.1,0,0.2,0c0.5,0,1.1-0.2,1.1-0.8c0-0.3-0.1-0.5-0.2-0.8l-1.1-3.1\n\t\t\tc-0.1-0.2-0.1-0.2-0.2-0.2h-4.3c-0.7,0-1.5,0-1.9,0.9l-1.1,2.4C7.1,17.6,7,17.8,7,18.1c0,0.8,1,0.9,1.6,0.9c0.1,0,0.1,0,0.2,0\n\t\t\tL8.8,19l0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1s-0.1,0.1-0.1,0.1l-0.1,0.1c-0.1,0-0.1,0-0.2,0H4.1c-0.1,0-0.1,0-0.1,0\n\t\t\tc-0.1,0-0.1-0.1-0.1-0.1l-0.1-0.1c0-0.1,0-0.1,0-0.1c0-0.1,0-0.1,0-0.2s0-0.1,0.1-0.1L4,19c0,0,0.1,0,0.1,0C5.2,19,5.5,18.5,6,17.5\n\t\t\tl5.4-12.4c0.2-0.5,0.8-1,1.3-1C13,4.2,13.1,4.4,13.2,4.7z M9.1,13.1c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0.1,0.1,0.1,0.1h4.4\n\t\t\tc0.3,0,0.4-0.1,0.4-0.3c0-0.1,0-0.2-0.1-0.3l-1.2-3.5c-0.3-0.8-0.8-1.9-0.8-2.7c0-0.1,0-0.1-0.1-0.1c0,0-0.1,0-0.1,0.1\n\t\t\tc-0.1,0.6-0.4,1.2-0.7,1.7L9.1,13.1z" }), _jsx(Path, { d: "M21.6,12.5c0,0.6-0.3,1-0.9,1c-0.6,0-0.8-0.3-0.8-0.8c0-0.6,0.4-1,0.9-1C21.3,11.7,21.6,12.1,21.6,12.5z" }), _jsx(Path, { d: "M4.1,12.5c0,0.6-0.3,1-0.9,1s-0.8-0.3-0.8-0.8c0-0.6,0.4-1,0.9-1S4.1,12.1,4.1,12.5z" })] }));
+export const BackupIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "M2.1,5.8c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.5,0.1-0.7c0.1-0.4,0.4-0.6,0.7-0.8l8.3-2.9c0.1-0.1,0.3-0.1,0.4-0.1l0.5,0.1\n\t\t\tl8.3,2.9c0.3,0.2,0.5,0.4,0.7,0.7c0.2,0.2,0.2,0.4,0.2,0.7c0,0.1,0,0.1,0,0.2v0.1c-0.1,0.5-0.2,0.9-0.3,1.4\n\t\t\tc-0.2,0.4-0.3,1.2-0.7,2.2c-0.3,1-0.7,2.1-1.1,3.1c-0.5,1-1,2.1-1.6,3.3s-1.4,2.3-2.2,3.5c-0.9,1.1-1.8,2.2-2.8,3.1\n\t\t\tc-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4c-1.2-1.1-2.4-2.4-3.5-4c-1-1.6-1.9-3-2.5-4.3c-0.6-1.3-1.1-2.7-1.6-4\n\t\t\tC2.8,8.7,2.5,7.6,2.3,7C2.3,6.5,2.1,6.1,2.1,5.8z M2.9,5.9c0,0.2,0.1,0.4,0.1,0.8C3.1,7,3.2,7.5,3.5,8.2C3.7,9,3.9,9.7,4.2,10.6\n\t\t\tc0.3,0.7,0.7,1.7,1.1,2.7c0.4,1,1,2,1.5,2.9c0.5,1,1.2,1.9,1.9,2.9c0.8,1,1.6,1.9,2.4,2.6c0.2,0.2,0.4,0.2,0.5,0.2\n\t\t\tc0.2,0,0.4-0.1,0.5-0.2c1.2-1,2.2-2.3,3.2-3.8c1-1.5,1.8-2.8,2.3-4c0.6-1.3,1.1-2.5,1.5-3.9c0.4-1.3,0.7-2.2,0.9-2.8\n\t\t\tc0.1-0.5,0.2-1,0.3-1.3c0-0.1,0-0.1,0-0.1c0-0.2,0-0.3-0.1-0.4C20.3,5.2,20.2,5.1,20,5L12,2.1c0,0-0.1,0-0.2,0s-0.1,0-0.1,0h-0.2\n\t\t\tl-8,2.8C3.2,5,3.1,5.2,3,5.3C2.9,5.5,2.9,5.6,2.9,5.8C2.9,5.8,2.9,5.8,2.9,5.9z M5.9,6.7h3l2.8,7l2.8-7h3c-0.1,0.1-0.2,0.5-0.3,0.8\n\t\t\tC17,7.8,17,8.2,16.8,8.4c-0.1,0.3-0.2,0.5-0.4,0.8c0,0.1-0.1,0.1-0.1,0.1s-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.1,0\n\t\t\tc-0.1,0-0.2,0.1-0.2,0.2c0,0-0.1,0.1-0.1,0.1s-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.2c0,0.1-0.1,0.1-0.1,0.1l-0.4,1.1\n\t\t\tc-1.3,3.3-2.1,5.2-2.3,5.8h-2.2l-1-2.4c-0.1-0.3-0.3-0.8-0.5-1.3c-0.1-0.3-0.3-0.8-0.5-1.3L8,10.8c-0.1-0.1-0.1-0.2-0.1-0.4\n\t\t\tC7.8,10.2,7.7,10,7.7,9.8C7.6,9.7,7.5,9.5,7.4,9.4C7.3,9.3,7.3,9.3,7.3,9.3c-0.1,0-0.2,0-0.2,0s-0.1,0-0.1,0\n\t\t\tC6.6,8.5,6.3,7.6,5.9,6.7z" }) }));
+export const BoostIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M4.19505 16.2545C4.47368 16.561 4.94802 16.5836 5.25451 16.3049L10.2595 11.7549L14.2842 15.2765L19 10.5607V13.75H20.5V9.5V8.75239V8.7476V8H19.7529H19.7471H19H14.75V9.5H17.9393L14.2158 13.2235L10.2405 9.74507L4.2455 15.195C3.93901 15.4737 3.91642 15.948 4.19505 16.2545Z" }) }));
+export const CrmIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "M15.5 9.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm-2.25 6v-2a2.75 2.75 0 0 0-2.75-2.75h-4A2.75 2.75 0 0 0 3.75 15v2h1.5v-2c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v2h1.5Zm7-2v2h-1.5v-2c0-.69-.56-1.25-1.25-1.25H15v-1.5h2.5A2.75 2.75 0 0 1 20.25 15ZM9.5 8.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1.5 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }) }));
+export const ExtrasIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "M18.5 5.5V8H20V5.5h2.5V4H20V1.5h-1.5V4H16v1.5h2.5ZM12 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6h-1.5v6a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h6V4Z" }) }));
+export const ProtectIcon = ({ opacity = 1, size, className, color, }) => (_jsxs(IconWrapper, { className: className, size: size, opacity: opacity, color: color, children: [_jsx(Path, { d: "M12 3.17627L18.75 6.24445V10.8183C18.75 14.7173 16.2458 18.4089 12.7147 19.5735C12.2507 19.7265 11.7493 19.7265 11.2853 19.5735C7.75416 18.4089 5.25 14.7173 5.25 10.8183V6.24445L12 3.17627ZM6.75 7.21032V10.8183C6.75 14.1312 8.89514 17.2057 11.7551 18.149C11.914 18.2014 12.086 18.2014 12.2449 18.149C15.1049 17.2057 17.25 14.1312 17.25 10.8183V7.21032L12 4.82396L6.75 7.21032Z" }), _jsx(Path, { d: "M15.5291 10.0315L11.1818 14.358L8.47095 11.66L9.52907 10.5968L11.1818 12.2417L14.4709 8.96826L15.5291 10.0315Z" })] }));
+export const ScanIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "m12 3.176 6.75 3.068v4.574c0 3.9-2.504 7.59-6.035 8.755a2.283 2.283 0 0 1-1.43 0c-3.53-1.164-6.035-4.856-6.035-8.755V6.244L12 3.176ZM6.75 7.21v3.608c0 3.313 2.145 6.388 5.005 7.33.159.053.331.053.49 0 2.86-.942 5.005-4.017 5.005-7.33V7.21L12 4.824 6.75 7.21Z" }) }));
+export const SearchIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "M17.5 11.5a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm1.5 0a5.5 5.5 0 0 1-9.142 4.121l-3.364 2.943-.988-1.128 3.373-2.952A5.5 5.5 0 1 1 19 11.5Z" }) }));
+export const SocialIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { d: "M15.5 3.97809V18.0219L7.5 15.5977V20H6V15.1431L3.27498 14.3173C2.22086 13.9979 1.5 13.0262 1.5 11.9248V10.0752C1.5 8.97375 2.22087 8.00207 3.27498 7.68264L15.5 3.97809ZM14 16L7.5 14.0303L7.5 7.96969L14 5.99999V16ZM6 8.42423L6 13.5757L3.70999 12.8818C3.28835 12.754 3 12.3654 3 11.9248V10.0752C3 9.63462 3.28835 9.24595 3.70999 9.11818L6 8.42423ZM17.5 11.75H21.5V10.25H17.5V11.75ZM21.5 16L17.5 15V13.5L21.5 14.5V16ZM17.5 8.5L21.5 7.5V6L17.5 7V8.5Z" }) }));
+export const VideopressIcon = ({ opacity = 1, size, color }) => (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M4.3,6.2c0.8,0,1.6,0.6,1.8,1.4l2.3,7.9c0,0,0,0,0,0l2.7-9.3h1.5h4.2c2.9,0,4.9,1.9,4.9,4.7c0,2.9-2,4.7-5,4.7\n\t\t\th-2h-2.5l-0.5,1.5c-0.4,1.4-1.7,2.3-3.2,2.3c-1.4,0-2.7-0.9-3.2-2.3L2.5,8.7C2.1,7.4,3,6.2,4.3,6.2z M13,12.8h2.9c1.3,0,2-0.7,2-1.9\n\t\t\tc0-1.2-0.8-1.8-2-1.8h-1.7L13,12.8z" }) }));
+export const StarIcon = ({ size, className = styles['star-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304" }) }));
+export const CheckmarkIcon = ({ size, className = styles['checkmark-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M11 17.768l-4.884-4.884 1.768-1.768L11 14.232l8.658-8.658C17.823 3.39 15.075 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-1.528-.353-2.97-.966-4.266L11 17.768z" }) }));
+export const ClipboardIcon = ({ size, className = styles['clipboard-icon'], color, }) => (_jsx(IconWrapper, { className: className, size: size, color: color, children: _jsx(Path, { d: "M5.625 5.5H15.375C15.444 5.5 15.5 5.55596 15.5 5.625V15.375C15.5 15.444 15.444 15.5 15.375 15.5H5.625C5.55596 15.5 5.5 15.444 5.5 15.375V5.625C5.5 5.55596 5.55596 5.5 5.625 5.5ZM4 5.625C4 4.72754 4.72754 4 5.625 4H15.375C16.2725 4 17 4.72754 17 5.625V10V15.375C17 16.2725 16.2725 17 15.375 17C15.375 17 6.52246 17 5.625 17C4.72754 17 4 16.2725 4 15.375V5.625ZM18.5 17.2812V8.28125H20V17.2812C20 18.7995 18.7704 20 17.2511 20H6.25V18.5H17.2511C17.9409 18.5 18.5 17.9721 18.5 17.2812Z" }) }));
+export const JetpackIcon = ({ size, className = styles.jetpack, color, }) => {
+    return (_jsxs(IconWrapper, { className: className, size: size, color: color, viewBox: "0 0 32 32", children: [_jsx(Path, { className: "jetpack-logo__icon-circle", d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z" }), _jsx(Polygon, { fill: "#fff", points: "15,19 7,19 15,3" }), _jsx(Polygon, { fill: "#fff", points: "17,29 17,13 25,13" })] }));
+};
+export const ShareIcon = ({ size = 16, className, color }) => {
+    return (_jsx(IconWrapper, { className: className, size: size, color: color, viewBox: "0 0 16 16", children: _jsx(Path, { fill: "#161722", fillRule: "evenodd", d: "M8.3 4.66C3.85 5.308.727 9.75.034 13.69l-.02.117c-.137.842.809 1.232 1.446.68 2.013-1.745 3.648-2.475 5.318-2.719a10.482 10.482 0 011.524-.103v2.792c0 .694.82 1.041 1.3.55l6.176-6.307a.79.79 0 00.012-1.088L9.614 1.004C9.14.496 8.301.84 8.301 1.542v3.117zm1.525-1.175v1.85a.773.773 0 01-.654.77l-.655.096c-2.133.311-3.987 1.732-5.295 3.672-.472.7-.854 1.44-1.143 2.18a12.32 12.32 0 011.675-.972c1.58-.75 3.048-.972 4.548-.972h.762a.77.77 0 01.762.779v1.69l4.347-4.44-4.347-4.653z", clipRule: "evenodd" }) }));
+};
+export const AiIcon = ({ size = 24, color = '#069e08', // JP green
+ }) => {
+    return (_jsxs(IconWrapper, { color: color, size: size, viewBox: '0 0 32 32', children: [_jsx(Path, { className: "spark-first", d: "M9.33301 5.33325L10.4644 8.20188L13.333 9.33325L10.4644 10.4646L9.33301 13.3333L8.20164 10.4646L5.33301 9.33325L8.20164 8.20188L9.33301 5.33325Z" }), _jsx(Path, { className: "spark-second", d: "M21.3333 5.33333L22.8418 9.15817L26.6667 10.6667L22.8418 12.1752L21.3333 16L19.8248 12.1752L16 10.6667L19.8248 9.15817L21.3333 5.33333Z" }), _jsx(Path, { className: "spark-third", d: "M14.6667 13.3333L16.5523 18.1144L21.3333 20L16.5523 21.8856L14.6667 26.6667L12.781 21.8856L8 20L12.781 18.1144L14.6667 13.3333Z" })] }));
+};
+export const StatsIcon = ({ opacity = 1, size, color }) => {
+    return (_jsx(IconWrapper, { size: size, opacity: opacity, color: color, children: _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M11.25 5H12.75V20H11.25V5ZM6 10H7.5V20H6V10ZM18 14H16.5V20H18V14Z" }) }));
+};
+const jetpackIcons = {
+    'anti-spam': AntiSpamIcon,
+    backup: BackupIcon,
+    boost: BoostIcon,
+    crm: CrmIcon,
+    extras: ExtrasIcon,
+    protect: ProtectIcon,
+    scan: ScanIcon,
+    search: SearchIcon,
+    social: SocialIcon,
+    star: StarIcon,
+    videopress: VideopressIcon,
+    jetpack: JetpackIcon,
+    share: ShareIcon,
+    ai: AiIcon,
+    stats: StatsIcon,
+};
+const iconsMap = {
+    ...jetpackIcons,
+};
+/**
+ * Return icon component by slug.
+ *
+ * @param {string} slug - Icon slug.
+ * @return {React.ComponentType<BaseIconProps>}   Icon component.
+ */
+export function getIconBySlug(slug) {
+    if (!iconsMap[slug]) {
+        return null;
+    }
+    return iconsMap[slug];
+}
+export const SocialServiceIcon = ({ serviceName, className, iconSize }) => {
+    return (_jsx(SocialLogo, { className: clsx(styles.socialIcon, styles[serviceName], className), icon: serviceName, size: iconSize || 24 }));
+};

package/build/components/icons/types.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+export type BaseIconProps = {
+    /**
+     * Icon size.
+     */
+    size?: number;
+    /**
+     * Opacity for SVG shapes
+     */
+    opacity?: number;
+    /**
+     * Icon viewBox.
+     */
+    viewBox?: string;
+    /**
+     * Icon component children.
+     */
+    children?: React.ReactNode;
+    /**
+     * Icon class name. Optional.
+     */
+    className?: string;
+    /**
+     * RGB Icon color. Optional.
+     */
+    color?: string;
+};

package/build/components/icons/types.js

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

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.scss';
+/**
+ * Indeterminate Progress Bar component
+ *
+ * @param {IndeterminateProgressBarProps} props - Component props.
+ * @return {React.ReactNode} - IndeterminateProgressBar react component.
+ */
+const IndeterminateProgressBar = ({ className }) => {
+    return (_jsx("div", { className: clsx(className, styles['indeterminate-progress-bar']), "aria-label": __('Indeterminate Progress Bar', 'jetpack-components') }));
+};
+export default IndeterminateProgressBar;

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

@@ -0,0 +1,6 @@
+export type IndeterminateProgressBarProps = {
+    /**
+     * Optional classname to apply to the root element.
+     */
+    className?: string;
+};

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

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

package/build/components/jetpack-footer/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './style.scss';
+import type { JetpackFooterProps } from './types.js';
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {React.ReactNode} JetpackFooter component.
+ */
+declare const JetpackFooter: React.FC<JetpackFooterProps>;
+export default JetpackFooter;

package/build/components/jetpack-footer/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { __, _x } from '@wordpress/i18n';
+import { Icon, external } from '@wordpress/icons';
+import clsx from 'clsx';
+import { getRedirectUrl } from '../../index.js';
+import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
+import './style.scss';
+import JetpackLogo from '../jetpack-logo/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+const JetpackIcon = () => (_jsx(JetpackLogo, { logoColor: "#000", showText: false, height: 16, "aria-hidden": "true" }));
+const ExternalIcon = () => (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: external, size: 16 }), _jsx("span", { className: "jp-dashboard-footer__accessible-external-link", children: 
+            /* translators: accessibility text */
+            __('(opens in a new tab)', 'jetpack-components') })] }));
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {React.ReactNode} JetpackFooter component.
+ */
+const JetpackFooter = ({ moduleName = __('Jetpack', 'jetpack-components'), className, moduleNameHref = 'https://jetpack.com', menu, useInternalLinks, onAboutClick, onPrivacyClick, onTermsClick, ...otherProps }) => {
+    const [isSm] = useBreakpointMatch('sm', '<=');
+    const [isMd] = useBreakpointMatch('md', '<=');
+    const [isLg] = useBreakpointMatch('lg', '>');
+    const siteAdminUrl = getSiteAdminUrl();
+    let items = [
+        {
+            label: _x('About', 'Link to learn more about Jetpack.', 'jetpack-components'),
+            title: __('About Jetpack', 'jetpack-components'),
+            href: useInternalLinks
+                ? new URL('admin.php?page=jetpack_about', siteAdminUrl).href
+                : getRedirectUrl('jetpack-about'),
+            target: useInternalLinks ? '_self' : '_blank',
+            onClick: onAboutClick,
+        },
+        {
+            label: _x('Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components'),
+            title: __("Automattic's Privacy Policy", 'jetpack-components'),
+            href: useInternalLinks
+                ? new URL('admin.php?page=jetpack#/privacy', siteAdminUrl).href
+                : getRedirectUrl('a8c-privacy'),
+            target: useInternalLinks ? '_self' : '_blank',
+            onClick: onPrivacyClick,
+        },
+        {
+            label: _x('Terms', 'Shorthand for Terms of Service.', 'jetpack-components'),
+            title: __('WordPress.com Terms of Service', 'jetpack-components'),
+            href: getRedirectUrl('wpcom-tos'),
+            target: '_blank',
+            onClick: onTermsClick,
+        },
+    ];
+    if (menu) {
+        items = [...items, ...menu];
+    }
+    const jetpackItemContent = (_jsxs(_Fragment, { children: [_jsx(JetpackIcon, {}), moduleName] }));
+    return (_jsx("footer", { className: clsx('jp-dashboard-footer', {
+            'is-sm': isSm,
+            'is-md': isMd,
+            'is-lg': isLg,
+        }, className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", ...otherProps, children: _jsxs("ul", { children: [_jsx("li", { className: "jp-dashboard-footer__jp-item", children: moduleNameHref ? (_jsx("a", { href: moduleNameHref, children: jetpackItemContent })) : (jetpackItemContent) }), items.map(item => {
+                    const isButton = item.role === 'button';
+                    const isExternalLink = !isButton && item.target === '_blank';
+                    return (_jsx("li", { children: _jsxs("a", { href: item.href, title: item.title, target: item.target, onClick: item.onClick, onKeyDown: item.onKeyDown, className: clsx('jp-dashboard-footer__menu-item', {
+                                'is-external': isExternalLink,
+                            }), role: item.role, rel: isExternalLink ? 'noopener noreferrer' : undefined, tabIndex: isButton ? 0 : undefined, children: [item.label, isExternalLink && _jsx(ExternalIcon, {})] }) }, item.label));
+                }), _jsx("li", { className: "jp-dashboard-footer__a8c-item", children: _jsx("a", { href: useInternalLinks
+                            ? new URL('admin.php?page=jetpack_about', siteAdminUrl).href
+                            : getRedirectUrl('a8c-about'), "aria-label": __('An Automattic Airline', 'jetpack-components'), children: _jsx(AutomatticBylineLogo, { "aria-hidden": "true" }) }) })] }) }));
+};
+export default JetpackFooter;

package/build/components/jetpack-footer/types.d.ts

@@ -0,0 +1,47 @@
+export type JetpackFooterMenuItem = {
+    href: string;
+    label: string;
+    onClick?: () => void;
+    onKeyDown?: () => void;
+    target?: string;
+    title?: string;
+    role?: string;
+};
+export type JetpackFooterProps = {
+    /**
+     * Name of the module, e.g. 'Jetpack Search'.
+     */
+    moduleName?: string;
+    /**
+     * additional className of the wrapper, `jp-dashboard-footer` always included.
+     */
+    className?: string;
+    /**
+     * Link that the Module name will link to (optional).
+     */
+    moduleNameHref?: string;
+    /**
+     * Navigation menu to display in the footer.
+     */
+    menu?: JetpackFooterMenuItem[];
+    /**
+     * Whether to enable Jetpack admin links.
+     */
+    useInternalLinks?: boolean;
+    /**
+     * URL of the site WP Admin.
+     */
+    siteAdminUrl?: string;
+    /**
+     * Function called when the About link is clicked.
+     */
+    onAboutClick?: () => void;
+    /**
+     * Function called when the Privacy link is clicked.
+     */
+    onPrivacyClick?: () => void;
+    /**
+     * Function called when the Terms link is clicked.
+     */
+    onTermsClick?: () => void;
+};

package/build/components/jetpack-footer/types.js

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

package/build/components/jetpack-logo/index.d.ts

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

package/build/components/jetpack-logo/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+const JetpackLogo = ({ logoColor = '#069e08', showText = true, className, height = 32, ...otherProps }) => {
+    const viewBox = showText ? '0 0 118 32' : '0 0 32 32';
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: viewBox, className: clsx('jetpack-logo', className), "aria-labelledby": "jetpack-logo-title", height: height, ...otherProps, 
+        // role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
+        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: __('Jetpack Logo', 'jetpack-components') }), _jsx("path", { fill: logoColor, d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" }), _jsx("path", { d: "M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" }), _jsx("path", { d: "M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" }), _jsx("path", { d: "M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" }), _jsx("path", { d: "M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" }), _jsx("path", { d: "M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" }), _jsx("path", { d: "M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" })] }))] }));
+};
+export default JetpackLogo;

package/build/components/jetpack-logo/types.d.ts

@@ -0,0 +1,7 @@
+export type JetpackLogoProps = {
+    className?: string;
+    width?: number;
+    height?: number;
+    showText?: boolean;
+    logoColor?: string;
+};

package/build/components/jetpack-logo/types.js

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

package/build/components/jetpack-protect-logo/index.d.ts

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

package/build/components/jetpack-protect-logo/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+const JetpackProtectLogo = ({ logoColor = '#069e08', showText = true, className, height = 42, ...otherProps }) => {
+    const viewBox = showText ? '0 0 245 41' : '0 0 41 41';
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: viewBox, className: clsx('jetpack-logo', className), "aria-labelledby": "jetpack-logo-title", height: height, ...otherProps, 
+        // role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
+        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: __('Jetpack Protect Logo', 'jetpack-components') }), _jsx("path", { d: "M20.1063 40.2111C31.2106 40.2111 40.2126 31.2091 40.2126 20.1048C40.2126 9.00048 31.2106 0 20.1063 0C9.00197 0 0 9.00197 0 20.1063C0 31.2106 9.00197 40.2111 20.1063 40.2111Z", fill: logoColor }), _jsx("path", { d: "M21.104 16.7295V36.2209L31.1571 16.7295H21.104Z", fill: "white" }), _jsx("path", { d: "M19.0701 23.4444V3.99023L9.05566 23.4444H19.0701Z", fill: "white" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M159.347 27.3605H156.978V7.9082H162.371C163.176 7.9082 163.917 7.95666 164.596 8.05359C165.284 8.15051 165.914 8.30074 166.486 8.50428C167.649 8.92104 168.531 9.54619 169.132 10.3797C169.733 11.2036 170.033 12.2213 170.033 13.4328C170.033 14.4214 169.834 15.2937 169.437 16.0497C169.049 16.796 168.482 17.4211 167.736 17.9251C166.99 18.4291 166.079 18.812 165.003 19.0737C163.937 19.3257 162.725 19.4517 161.368 19.4517C160.719 19.4517 160.045 19.4226 159.347 19.3644V27.3605ZM159.347 17.1982C159.667 17.237 160.002 17.2661 160.35 17.2854C160.699 17.3048 161.029 17.3145 161.339 17.3145C162.454 17.3145 163.403 17.2273 164.189 17.0528C164.974 16.8784 165.613 16.6264 166.108 16.2968C166.602 15.9576 166.961 15.5505 167.183 15.0756C167.406 14.591 167.518 14.0434 167.518 13.4328C167.518 12.6768 167.334 12.0565 166.965 11.5719C166.607 11.0873 166.093 10.719 165.424 10.467C165.008 10.3119 164.528 10.2053 163.985 10.1471C163.442 10.0793 162.812 10.0453 162.095 10.0453H159.347V17.1982Z" }), _jsx("path", { d: "M181.093 15.3809H180.919C180.386 15.3809 179.862 15.4294 179.349 15.5263C178.835 15.6232 178.35 15.7735 177.895 15.977C177.449 16.1708 177.042 16.4131 176.674 16.7039C176.315 16.9947 176.014 17.3388 175.772 17.7361V27.3605H173.519V13.5491H175.263L175.699 15.7444H175.743C175.966 15.3858 176.237 15.0514 176.557 14.7412C176.887 14.4311 177.255 14.1597 177.662 13.9271C178.069 13.6945 178.515 13.5152 179 13.3892C179.484 13.2535 179.993 13.1856 180.526 13.1856C180.623 13.1856 180.72 13.1905 180.817 13.2002C180.924 13.2002 181.016 13.205 181.093 13.2147V15.3809Z" }), _jsx("path", { d: "M193.302 20.4694C193.302 19.6164 193.195 18.8604 192.982 18.2014C192.779 17.5326 192.488 16.9705 192.11 16.5149C191.741 16.0497 191.3 15.7008 190.787 15.4682C190.273 15.2258 189.711 15.1047 189.1 15.1047C188.49 15.1047 187.928 15.2258 187.414 15.4682C186.9 15.7008 186.454 16.0497 186.076 16.5149C185.708 16.9705 185.417 17.5326 185.204 18.2014C185.001 18.8604 184.899 19.6164 184.899 20.4694C184.899 21.3126 185.001 22.0686 185.204 22.7373C185.417 23.3964 185.713 23.9537 186.091 24.4092C186.469 24.8648 186.915 25.2137 187.428 25.456C187.942 25.6886 188.504 25.8049 189.115 25.8049C189.725 25.8049 190.283 25.6886 190.787 25.456C191.3 25.2137 191.741 24.8648 192.11 24.4092C192.488 23.9537 192.779 23.3964 192.982 22.7373C193.195 22.0686 193.302 21.3126 193.302 20.4694ZM195.657 20.4694C195.657 21.5549 195.502 22.5435 195.192 23.4352C194.882 24.3269 194.441 25.0926 193.869 25.7322C193.307 26.3622 192.623 26.8517 191.819 27.2006C191.015 27.5495 190.113 27.724 189.115 27.724C188.088 27.724 187.167 27.5495 186.353 27.2006C185.548 26.8517 184.86 26.3622 184.288 25.7322C183.726 25.0926 183.295 24.3269 182.994 23.4352C182.694 22.5435 182.544 21.5549 182.544 20.4694C182.544 19.3741 182.699 18.3807 183.009 17.489C183.319 16.5973 183.755 15.8316 184.317 15.1919C184.889 14.5522 185.577 14.0579 186.382 13.709C187.196 13.3601 188.102 13.1856 189.1 13.1856C190.118 13.1856 191.034 13.3601 191.848 13.709C192.662 14.0579 193.35 14.5522 193.913 15.1919C194.475 15.8316 194.906 16.5973 195.206 17.489C195.507 18.3807 195.657 19.3741 195.657 20.4694Z" }), _jsx("path", { d: "M206.354 27.3896C206.16 27.4672 205.864 27.5398 205.467 27.6077C205.07 27.6755 204.595 27.7143 204.042 27.724C203.315 27.724 202.685 27.6319 202.152 27.4478C201.619 27.2733 201.173 27.0213 200.815 26.6918C200.466 26.3525 200.204 25.9455 200.03 25.4705C199.855 24.9956 199.768 24.4674 199.768 23.8859V15.4827H197.107V13.5491H199.768V9.76911H202.021V13.5491H206.15V15.4827H202.021V23.5369C202.021 23.8568 202.065 24.1524 202.152 24.4238C202.249 24.6952 202.395 24.9326 202.588 25.1362C202.792 25.33 203.049 25.4851 203.359 25.6014C203.669 25.708 204.042 25.7613 204.478 25.7613C204.779 25.7613 205.094 25.7371 205.423 25.6886C205.763 25.6402 206.073 25.5772 206.354 25.4996V27.3896Z" }), _jsx("path", { d: "M214.681 15.1192C214.167 15.1192 213.687 15.221 213.242 15.4245C212.805 15.6281 212.423 15.9043 212.093 16.2532C211.764 16.6021 211.497 17.0141 211.293 17.489C211.09 17.9542 210.964 18.4534 210.915 18.9864H217.894C217.894 18.4437 217.821 17.9397 217.676 17.4744C217.54 16.9995 217.337 16.5876 217.065 16.2387C216.794 15.8898 216.459 15.6184 216.062 15.4245C215.665 15.221 215.204 15.1192 214.681 15.1192ZM215.917 25.7613C216.663 25.7613 217.341 25.7032 217.952 25.5869C218.572 25.4609 219.188 25.2864 219.798 25.0635V26.9389C219.304 27.1812 218.693 27.3702 217.967 27.5059C217.24 27.6513 216.459 27.724 215.626 27.724C214.637 27.724 213.707 27.598 212.835 27.346C211.972 27.094 211.216 26.6869 210.567 26.1248C209.917 25.5626 209.403 24.8309 209.025 23.9295C208.657 23.0184 208.473 21.9232 208.473 20.6438C208.473 19.3838 208.647 18.2934 208.996 17.3727C209.345 16.4422 209.811 15.6668 210.392 15.0465C210.974 14.4262 211.642 13.961 212.398 13.6509C213.154 13.3407 213.944 13.1856 214.768 13.1856C215.544 13.1856 216.266 13.3165 216.934 13.5782C217.613 13.8302 218.199 14.2324 218.693 14.7849C219.188 15.3373 219.575 16.0497 219.857 16.922C220.147 17.7943 220.293 18.8411 220.293 20.0623C220.293 20.1786 220.293 20.2804 220.293 20.3676C220.293 20.4451 220.288 20.6293 220.278 20.92H210.799C210.799 21.802 210.93 22.5532 211.192 23.1735C211.463 23.7841 211.827 24.2832 212.282 24.6709C212.747 25.0489 213.29 25.3252 213.91 25.4996C214.531 25.6741 215.199 25.7613 215.917 25.7613Z" }), _jsx("path", { d: "M229.885 13.1856C230.553 13.1856 231.193 13.2583 231.804 13.4037C232.414 13.5394 232.938 13.7332 233.374 13.9852V15.8607C232.763 15.6281 232.201 15.4536 231.687 15.3373C231.174 15.221 230.65 15.1628 230.117 15.1628C229.555 15.1628 228.998 15.2549 228.445 15.4391C227.893 15.6232 227.398 15.9285 226.962 16.355C226.526 16.7718 226.172 17.3291 225.901 18.0269C225.639 18.7151 225.508 19.5728 225.508 20.6002C225.508 21.3465 225.605 22.0346 225.799 22.6646C226.003 23.2946 226.298 23.8423 226.686 24.3075C227.083 24.763 227.578 25.1216 228.169 25.3833C228.76 25.6353 229.444 25.7613 230.219 25.7613C230.781 25.7613 231.348 25.7032 231.92 25.5869C232.492 25.4609 233.049 25.2864 233.592 25.0635V26.9389C233.427 27.0358 233.209 27.1328 232.938 27.2297C232.676 27.3266 232.385 27.409 232.065 27.4768C231.745 27.5544 231.406 27.6125 231.048 27.6513C230.689 27.6998 230.33 27.724 229.972 27.724C229.041 27.724 228.159 27.5835 227.326 27.3024C226.502 27.0213 225.78 26.59 225.16 26.0085C224.539 25.4269 224.05 24.6903 223.691 23.7986C223.333 22.907 223.153 21.8505 223.153 20.6293C223.153 19.7182 223.245 18.8992 223.429 18.1723C223.623 17.4454 223.885 16.8057 224.215 16.2532C224.544 15.7008 224.927 15.2307 225.363 14.843C225.809 14.4553 226.279 14.1403 226.773 13.898C227.277 13.646 227.796 13.4667 228.329 13.3601C228.862 13.2438 229.381 13.1856 229.885 13.1856Z" }), _jsx("path", { d: "M244.143 27.3896C243.949 27.4672 243.654 27.5398 243.256 27.6077C242.859 27.6755 242.384 27.7143 241.832 27.724C241.105 27.724 240.475 27.6319 239.942 27.4478C239.409 27.2733 238.963 27.0213 238.604 26.6918C238.255 26.3525 237.993 25.9455 237.819 25.4705C237.645 24.9956 237.557 24.4674 237.557 23.8859V15.4827H234.897V13.5491H237.557V9.76911H239.811V13.5491H243.94V15.4827H239.811V23.5369C239.811 23.8568 239.854 24.1524 239.942 24.4238C240.039 24.6952 240.184 24.9326 240.378 25.1362C240.581 25.33 240.838 25.4851 241.148 25.6014C241.458 25.708 241.832 25.7613 242.268 25.7613C242.568 25.7613 242.883 25.7371 243.213 25.6886C243.552 25.6402 243.862 25.5772 244.143 25.4996V27.3896Z" }), _jsx("path", { d: "M51.9141 33.3819C51.3379 32.499 50.8019 31.6176 50.2644 30.7733C53.1038 29.0462 54.0626 27.666 54.0626 25.0559V9.97619H50.7245V7.09961H57.8236V24.2891C57.8236 28.6635 56.558 31.1188 51.9141 33.3819Z" }), _jsx("path", { d: "M81.6522 23.0994C81.6522 24.557 82.6885 24.7104 83.3793 24.7104C84.0702 24.7104 85.0677 24.4796 85.8345 24.2503V26.9363C84.7595 27.2817 83.6473 27.5497 82.1122 27.5497C80.2705 27.5497 78.122 26.8589 78.122 23.6354V15.7307H76.1655V13.006H78.122V8.97852H81.6522V13.0075H86.1025V15.7322H81.6522V23.0994Z" }), _jsx("path", { d: "M89.0193 34.7251V12.9691H92.3961V14.2734C93.7391 13.2371 95.2355 12.585 97.0773 12.585C100.262 12.585 102.795 14.8109 102.795 19.6067C102.795 24.3652 100.033 27.5113 95.4663 27.5113C94.3541 27.5113 93.4711 27.358 92.5495 27.1659V34.6864H89.0193V34.7251ZM96.1557 15.5017C95.1194 15.5017 93.8151 16.0005 92.5867 17.0755V24.4814C93.3535 24.6347 94.1605 24.7494 95.234 24.7494C97.7279 24.7494 99.1484 23.1756 99.1484 19.8762C99.1484 16.8447 98.1121 15.5017 96.1557 15.5017Z" }), _jsx("path", { d: "M116.683 27.2051H113.384V25.6313H113.306C112.155 26.5142 110.735 27.4731 108.625 27.4731C106.783 27.4731 104.788 26.1301 104.788 23.4054C104.788 19.7605 107.896 19.0696 110.083 18.7629L113.19 18.3416V17.9202C113.19 16.001 112.423 15.3876 110.619 15.3876C109.736 15.3876 107.665 15.6556 105.976 16.3464L105.67 13.5071C107.205 12.9696 109.315 12.5869 111.08 12.5869C114.533 12.5869 116.759 13.9686 116.759 18.0736V27.2051H116.683ZM113.153 20.5675L110.236 21.0276C109.353 21.1422 108.433 21.6797 108.433 22.984C108.433 24.1349 109.085 24.7871 110.044 24.7871C111.08 24.7871 112.193 24.1736 113.152 23.4828V20.5675H113.153Z" }), _jsx("path", { d: "M131.264 26.745C129.806 27.2438 128.502 27.5505 126.851 27.5505C121.556 27.5505 119.445 24.5191 119.445 20.1074C119.445 15.465 122.362 12.5869 127.08 12.5869C128.845 12.5869 129.92 12.8936 131.109 13.2778V16.2705C130.073 15.8863 128.577 15.465 127.119 15.465C124.97 15.465 123.129 16.6159 123.129 19.9153C123.129 23.5602 124.97 24.6739 127.311 24.6739C128.423 24.6739 129.652 24.4431 131.301 23.791V26.745H131.264Z" }), _jsx("path", { d: "M137.941 19.1093C138.247 18.7639 138.478 18.4185 142.928 13.0077H147.532L141.776 19.7615L148.068 27.2432H143.464L137.978 20.4895V27.2432H134.449V7.09973H137.979V19.1093H137.941Z" }), _jsx("path", { d: "M73.5167 26.7445C71.6749 27.3207 70.1011 27.55 68.2593 27.55C63.7316 27.55 60.9309 25.2869 60.9309 19.9908C60.9309 16.1152 63.3102 12.585 67.8752 12.585C72.403 12.585 73.9768 15.731 73.9768 18.7238C73.9768 19.7213 73.8993 20.2588 73.8621 20.8335H64.7306C64.808 23.9409 66.5724 24.6705 69.2197 24.6705C70.6773 24.6705 71.9816 24.325 73.4795 23.7875V26.7416H73.5167V26.7445ZM70.2947 18.4945C70.2947 16.7673 69.7185 15.271 67.8395 15.271C66.0751 15.271 65.0001 16.5365 64.7693 18.4945H70.2947Z" })] }))] }));
+};
+export default JetpackProtectLogo;

package/build/components/jetpack-protect-logo/types.d.ts

@@ -0,0 +1,7 @@
+export type JetpackProtectLogoProps = {
+    className?: string;
+    width?: number;
+    height?: number;
+    showText?: boolean;
+    logoColor?: string;
+};

package/build/components/jetpack-protect-logo/types.js

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

package/build/components/jetpack-search-logo/index.d.ts

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