@automattic/jetpack-components 0.68.1 → 0.69.0

package/build/components/diff-viewer/parse-filename.js

@@ -0,0 +1,61 @@
+const decompose = (path) => {
+    const lastSlash = path.lastIndexOf('/');
+    return lastSlash > -1
+        ? { prefix: path.slice(0, lastSlash), path: path.slice(lastSlash) }
+        : { prefix: '', path };
+};
+/**
+ * Parse the filename from a diff
+ *
+ * Uses a heuristic to return proper file name indicators
+ *
+ * It searches for the longest shared prefix and returns
+ * whatever remains after that. If the paths are identical
+ * it only returns a single filename as we have detected
+ * that the diff compares changes to only one file.
+ *
+ * An exception is made for `a/` and `b/` prefixes often
+ * added by `git` and other utilities to separate the left
+ * from the right when looking at the contents of a single
+ * file over time.
+ *
+ * @param {string} prev - filename of left contents
+ * @param {string} next - filename of right contents
+ *
+ * @return {object} - parsed filename
+ */
+export default function (prev, next) {
+    // Remove 'a/' and 'b/' prefixes if present
+    const isLikelyPrefixed = prev.startsWith('a/') && next.startsWith('b/');
+    prev = isLikelyPrefixed ? prev.slice(2) : prev;
+    next = isLikelyPrefixed ? next.slice(2) : next;
+    if (prev === next) {
+        // Paths are identical
+        const { prefix, path } = decompose(prev);
+        return { prev: { prefix, path }, next: { prefix, path } };
+    }
+    // Find longest shared base path ending with a slash
+    const length = Math.max(prev.length, next.length);
+    for (let i = 0, slash = 0; i < length; i++) {
+        if (prev[i] === '/' && next[i] === '/') {
+            slash = i;
+        }
+        if (prev[i] !== next[i]) {
+            return {
+                prev: {
+                    prefix: prev.slice(0, slash),
+                    path: prev.slice(slash),
+                },
+                next: {
+                    prefix: next.slice(0, slash),
+                    path: next.slice(slash),
+                },
+            };
+        }
+    }
+    // No shared base path
+    return {
+        prev: decompose(prev),
+        next: decompose(next),
+    };
+}

package/build/components/diff-viewer/parse-patch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Parse Patch
+ *
+ * Adapted from https://github.com/kpdecker/jsdiff/blob/master/src/patch/parse.js
+ *
+ * @param {string} uniDiff - diff string
+ * @return {Array} - array of parsed files
+ */
+export default function parsePatch(uniDiff: string): any[];

package/build/components/diff-viewer/parse-patch.js

@@ -0,0 +1,148 @@
+/**
+ * Parse Patch
+ *
+ * Adapted from https://github.com/kpdecker/jsdiff/blob/master/src/patch/parse.js
+ *
+ * @param {string} uniDiff - diff string
+ * @return {Array} - array of parsed files
+ */
+export default function parsePatch(uniDiff) {
+    const diffstr = uniDiff.split(/\n/);
+    const list = [];
+    let i = 0;
+    /**
+     * Parse Index
+     */
+    function parseIndex() {
+        const index = {};
+        list.push(index);
+        // Parse diff metadata
+        while (i < diffstr.length) {
+            const line = diffstr[i];
+            // File header found, end parsing diff metadata
+            if (/^(---|\+\+\+|@@)\s/.test(line)) {
+                break;
+            }
+            // Diff index
+            const header = /^(?:Index:|diff(?: -r \w+)+)\s+(.+?)\s*$/.exec(line);
+            if (header) {
+                index.index = header[1];
+            }
+            i++;
+        }
+        // Parse file headers if they are defined. Unified diff requires them, but
+        // there's no technical issues to have an isolated hunk without file header
+        parseFileHeader(index);
+        parseFileHeader(index);
+        // Parse hunks
+        index.hunks = [];
+        while (i < diffstr.length) {
+            const _line = diffstr[i];
+            if (/^(Index:\s|diff\s|---\s|\+\+\+\s|===================================================================)/.test(_line)) {
+                break;
+            }
+            else if (/^@@/.test(_line)) {
+                index.hunks.push(parseHunk());
+            }
+            else if (_line) {
+                throw new Error('Unknown line ' + (i + 1) + ' ' + JSON.stringify(_line));
+            }
+            else {
+                i++;
+            }
+        }
+    }
+    /**
+     * Parse File Header
+     *
+     * Parses the --- and +++ headers, if none are found, no lines
+     * are consumed.
+     *
+     * @param {Array}    index       - array of parsed files
+     * @param {unknown}  index.index - index
+     * @param {object[]} index.hunks - hunks
+     */
+    function parseFileHeader(index) {
+        const fileHeader = /^(---|\+\+\+)\s+(.*)\r?$/.exec(diffstr[i]);
+        if (fileHeader) {
+            const keyPrefix = fileHeader[1] === '---' ? 'old' : 'new';
+            const data = fileHeader[2].split('\t', 2);
+            let fileName = data[0].replace(/\\\\/g, '\\');
+            if (/^".*"$/.test(fileName)) {
+                fileName = fileName.substr(1, fileName.length - 2);
+            }
+            index[keyPrefix + 'FileName'] = fileName;
+            index[keyPrefix + 'Header'] = (data[1] || '').trim();
+            i++;
+        }
+    }
+    /**
+     * Parse Hunk
+     * This assumes that we are at the start of a hunk.
+     *
+     * @return {object} - The parsed hunk.
+     */
+    function parseHunk() {
+        const chunkHeaderIndex = i, chunkHeaderLine = diffstr[i++], chunkHeader = chunkHeaderLine.split(/@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/);
+        const hunk = {
+            oldStart: +chunkHeader[1],
+            oldLines: typeof chunkHeader[2] === 'undefined' ? 1 : +chunkHeader[2],
+            newStart: +chunkHeader[3],
+            newLines: typeof chunkHeader[4] === 'undefined' ? 1 : +chunkHeader[4],
+            lines: [],
+        };
+        // Unified Diff Format quirk: If the chunk size is 0,
+        // the first number is one lower than one would expect.
+        // https://www.artima.com/weblogs/viewpost.jsp?thread=164293
+        if (hunk.oldLines === 0) {
+            hunk.oldStart += 1;
+        }
+        if (hunk.newLines === 0) {
+            hunk.newStart += 1;
+        }
+        let addCount = 0, removeCount = 0, _diffstr$i;
+        for (; i < diffstr.length &&
+            (removeCount < hunk.oldLines ||
+                addCount < hunk.newLines ||
+                ((_diffstr$i = diffstr[i]) !== null &&
+                    _diffstr$i !== void 0 &&
+                    _diffstr$i.startsWith('\\'))); i++) {
+            const operation = diffstr[i].length === 0 && i !== diffstr.length - 1 ? ' ' : diffstr[i][0];
+            if (operation === '+' || operation === '-' || operation === ' ' || operation === '\\') {
+                hunk.lines.push(diffstr[i]);
+                if (operation === '+') {
+                    addCount++;
+                }
+                else if (operation === '-') {
+                    removeCount++;
+                }
+                else if (operation === ' ') {
+                    addCount++;
+                    removeCount++;
+                }
+            }
+            else {
+                throw new Error(`Hunk at line ${chunkHeaderIndex + 1} contained invalid line ${diffstr[i]}`);
+            }
+        }
+        // Handle the empty block count case
+        if (!addCount && hunk.newLines === 1) {
+            hunk.newLines = 0;
+        }
+        if (!removeCount && hunk.oldLines === 1) {
+            hunk.oldLines = 0;
+        }
+        // Perform sanity checking
+        if (addCount !== hunk.newLines) {
+            throw new Error('Added line count did not match for hunk at line ' + (chunkHeaderIndex + 1));
+        }
+        if (removeCount !== hunk.oldLines) {
+            throw new Error('Removed line count did not match for hunk at line ' + (chunkHeaderIndex + 1));
+        }
+        return hunk;
+    }
+    while (i < diffstr.length) {
+        parseIndex();
+    }
+    return list;
+}

package/build/components/donut-meter/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import './style.scss';
+export type DonutMeterProps = {
+    /**
+     * Total number of items for the donut meter.
+     */
+    totalCount: number;
+    /**
+     * Count for the given item
+     */
+    segmentCount: number;
+    /**
+     * Dictates the segment color of the donut meter. Defaults to 'success' and overrides useAdaptiveColors.
+     * Possible values:
+     * - 'warning': yellow donut
+     * - 'error': red donut
+     * - 'success': green donut
+     */
+    type?: string;
+    /**
+     * thickness for the chart border
+     * If not provided, defaults to 3.5
+     */
+    thickness?: string;
+    /**
+     * width for the full chart size
+     * If not provided, defaults to 64px
+     */
+    donutWidth?: string;
+    /**
+     * Localized title for meter.
+     * Not visible. Used for a11y support.
+     * If not provided, defaults to an empty string.
+     */
+    title?: string;
+    /**
+     * Localized description for meter.
+     * Not visible. Used for a11y support.
+     * If not provided, defaults to an empty string.
+     */
+    description?: string;
+    /**
+     * Changes colors according to the fullness of the meter.
+     */
+    useAdaptiveColors?: boolean;
+    /**
+     * Class name to append to the topmost container.
+     */
+    className?: string;
+};
+/**
+ * Generate record meter donut bar
+ *
+ * @param {DonutMeterProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+declare const DonutMeter: React.FC<DonutMeterProps>;
+export default DonutMeter;

package/build/components/donut-meter/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style.scss';
+const getAdaptiveType = (percentage) => {
+    if (percentage < 70) {
+        return 'success';
+    }
+    if (percentage < 100) {
+        return 'warning';
+    }
+    return 'danger';
+};
+/**
+ * Generate record meter donut bar
+ *
+ * @param {DonutMeterProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+const DonutMeter = ({ className = '', description = '', donutWidth = '64px', segmentCount, thickness = '3.5', title = '', totalCount, type, useAdaptiveColors, }) => {
+    const validDivisor = totalCount === 0 ? 1 : totalCount;
+    const percentage = (segmentCount / validDivisor) * 100;
+    // If we don't have a title or description, hide the meter from screen readers.
+    const isHidden = typeof title === 'string' &&
+        title.length === 0 &&
+        typeof description === 'string' &&
+        description.length === 0
+        ? 'true'
+        : 'false';
+    const finalClassName = `donut-meter ${className ? className + ' ' : ''}${type ? 'is-' + type + ' ' : ''} ${!type && useAdaptiveColors ? 'is-' + getAdaptiveType(percentage) + ' ' : ''}`.trim();
+    return (_jsx("div", { className: finalClassName, "aria-hidden": isHidden, "data-testid": "donut-meter", children: _jsxs("svg", { width: donutWidth, height: donutWidth, viewBox: "0 0 40 40", className: "donut-meter_svg", role: "img", children: [_jsx("title", { id: "donut-meter-title", children: title }), _jsx("desc", { id: "donut-meter-description", children: description }), _jsx("circle", { className: "donut-meter-hole", cx: "20" // center x value of circle
+                    , cy: "20" // center y value of circle
+                    , r: "15.91549430918954" // radius based on the circumference r = 100/(2π)
+                    , fill: "transparent" }), _jsx("circle", { className: "donut-meter-ring", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", strokeWidth: thickness, stroke: "#ebebeb" }), _jsx("circle", { className: "donut-meter-segment", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", "transform-origin": "center" // eslint-disable-line react/no-unknown-property -- @todo Switch to transformOrigin when we use React 19.
+                    , strokeWidth: thickness, strokeDasharray: `${percentage} ${100 - percentage}`, strokeDashoffset: "-25" // this ensures the segment begins at the bottom of the donut instead of the top
+                 })] }) }));
+};
+export default DonutMeter;

package/build/components/global-notices/global-notices.d.ts

@@ -0,0 +1,11 @@
+export type GlobalNoticesProps = {
+    maxVisibleNotices?: number;
+};
+/**
+ * Renders the global notices.
+ *
+ * @param {GlobalNoticesProps} props - Component props.
+ *
+ * @return {import('react').ReactNode} The rendered notices list.
+ */
+export declare function GlobalNotices({ maxVisibleNotices }: GlobalNoticesProps): import("react/jsx-runtime").JSX.Element;

package/build/components/global-notices/global-notices.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SnackbarList } from '@wordpress/components';
+import styles from './styles.module.scss';
+import { useGlobalNotices } from './use-global-notices.js';
+/**
+ * Renders the global notices.
+ *
+ * @param {GlobalNoticesProps} props - Component props.
+ *
+ * @return {import('react').ReactNode} The rendered notices list.
+ */
+export function GlobalNotices({ maxVisibleNotices = 3 }) {
+    const { getNotices, removeNotice } = useGlobalNotices();
+    const snackbarNotices = getNotices()
+        .filter(({ type }) => type === 'snackbar')
+        // Slices from the tail end of the list.
+        .slice(-maxVisibleNotices);
+    return (_jsx(SnackbarList, { notices: snackbarNotices, className: styles['global-notices'], onRemove: removeNotice }));
+}

package/build/components/global-notices/index.d.ts

@@ -0,0 +1,3 @@
+export * from './global-notices.js';
+export * from './use-global-notices.js';
+export { store as globalNoticesStore } from '@wordpress/notices';

package/build/components/global-notices/index.js

@@ -0,0 +1,3 @@
+export * from './global-notices.js';
+export * from './use-global-notices.js';
+export { store as globalNoticesStore } from '@wordpress/notices';

package/build/components/global-notices/use-global-notices.d.ts

@@ -0,0 +1,10 @@
+import { store as noticesStore } from '@wordpress/notices';
+type NoticesStore = ReturnType<(typeof noticesStore)['instantiate']>;
+export type TGlobalNotices = ReturnType<NoticesStore['getActions']> & ReturnType<NoticesStore['getSelectors']>;
+/**
+ * The global notices hook.
+ *
+ * @return {TGlobalNotices} The global notices selectors and actions.
+ */
+export declare function useGlobalNotices(): TGlobalNotices;
+export {};

package/build/components/global-notices/use-global-notices.js

@@ -0,0 +1,30 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+/**
+ * The global notices hook.
+ *
+ * @return {TGlobalNotices} The global notices selectors and actions.
+ */
+export function useGlobalNotices() {
+    const actionCreators = useDispatch(noticesStore);
+    const notices = useSelect(select => select(noticesStore).getNotices(), []);
+    return {
+        ...actionCreators,
+        createNotice(status, content, options) {
+            return actionCreators.createNotice(status, content, { type: 'snackbar', ...options });
+        },
+        createErrorNotice(content, options) {
+            return actionCreators.createErrorNotice(content, { type: 'snackbar', ...options });
+        },
+        createInfoNotice(content, options) {
+            return actionCreators.createInfoNotice(content, { type: 'snackbar', ...options });
+        },
+        createSuccessNotice(content, options) {
+            return actionCreators.createSuccessNotice(content, { type: 'snackbar', ...options });
+        },
+        createWarningNotice(content, options) {
+            return actionCreators.createWarningNotice(content, { type: 'snackbar', ...options });
+        },
+        getNotices: () => notices,
+    };
+}

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

@@ -0,0 +1,14 @@
+import { Component } from 'react';
+import './style.scss';
+import { GridiconProps } from './types.js';
+declare class Gridicon extends Component<GridiconProps> {
+    static defaultProps: {
+        'aria-hidden': string;
+        focusable: string;
+    };
+    needsOffset(icon: any, size: any): boolean;
+    getSVGDescription(icon: any): string;
+    renderIcon(icon: any): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Gridicon;

package/build/components/gridicon/index.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* !!!
+This is a fork of the Jetpack Gridicon code:
+ https://github.com/Automattic/jetpack/blob/f8078c2cd12ac508334da2fb08e37a92cf283c14/_inc/client/components/gridicon/index.jsx
+
+It has been modified to work with Preact, and only includes the icons that we need.
+!!! */
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { Component } from 'react';
+import './style.scss';
+class Gridicon extends Component {
+    static defaultProps = {
+        'aria-hidden': 'false',
+        focusable: 'true',
+    };
+    needsOffset(icon, size) {
+        const iconNeedsOffset = [
+            'gridicons-arrow-left',
+            'gridicons-arrow-right',
+            'gridicons-calendar',
+            'gridicons-cart',
+            'gridicons-folder',
+            'gridicons-help-outline',
+            'gridicons-info',
+            'gridicons-info-outline',
+            'gridicons-posts',
+            'gridicons-star-outline',
+            'gridicons-star',
+        ];
+        if (iconNeedsOffset.indexOf(icon) >= 0) {
+            return size % 18 === 0;
+        }
+        return false;
+    }
+    getSVGDescription(icon) {
+        // Enable overriding desc with falsy/truthy values.
+        if ('description' in this.props) {
+            return this.props.description;
+        }
+        switch (icon) {
+            default:
+                return '';
+            case 'gridicons-audio':
+                return __('Has audio.', 'jetpack-components');
+            case 'gridicons-arrow-left':
+                return __('Arrow left', 'jetpack-components');
+            case 'gridicons-arrow-right':
+                return __('Arrow right', 'jetpack-components');
+            case 'gridicons-calendar':
+                return __('Is an event.', 'jetpack-components');
+            case 'gridicons-cart':
+                return __('Is a product.', 'jetpack-components');
+            case 'chevron-down':
+                return __('Show filters', 'jetpack-components');
+            case 'gridicons-comment':
+                return __('Matching comment.', 'jetpack-components');
+            case 'gridicons-cross':
+                return __('Close.', 'jetpack-components');
+            case 'gridicons-filter':
+                return __('Toggle search filters.', 'jetpack-components');
+            case 'gridicons-folder':
+                return __('Category', 'jetpack-components');
+            case 'gridicons-help-outline':
+                return __('Help', 'jetpack-components');
+            case 'gridicons-info':
+            case 'gridicons-info-outline':
+                return __('Information.', 'jetpack-components');
+            case 'gridicons-image-multiple':
+                return __('Has multiple images.', 'jetpack-components');
+            case 'gridicons-image':
+                return __('Has an image.', 'jetpack-components');
+            case 'gridicons-page':
+                return __('Page', 'jetpack-components');
+            case 'gridicons-post':
+                return __('Post', 'jetpack-components');
+            case 'gridicons-jetpack-search':
+            case 'gridicons-search':
+                return __('Magnifying Glass', 'jetpack-components');
+            case 'gridicons-tag':
+                return __('Tag', 'jetpack-components');
+            case 'gridicons-video':
+                return __('Has a video.', 'jetpack-components');
+        }
+    }
+    renderIcon(icon) {
+        switch (icon) {
+            default:
+                return null;
+            case 'gridicons-audio':
+                return (_jsx("g", { children: _jsx("path", { d: "M8 4v10.184C7.686 14.072 7.353 14 7 14c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V7h7v4.184c-.314-.112-.647-.184-1-.184-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V4H8z" }) }));
+            case 'gridicons-arrow-left':
+                return (_jsx("g", { children: _jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }));
+            case 'gridicons-arrow-right':
+                return (_jsx("g", { children: _jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" }) }));
+            case 'gridicons-block':
+                return (_jsx("g", { children: _jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM4 12c0-4.418 3.582-8 8-8 1.848 0 3.545.633 4.9 1.686L5.686 16.9C4.633 15.545 4 13.848 4 12zm8 8c-1.848 0-3.546-.633-4.9-1.686L18.314 7.1C19.367 8.455 20 10.152 20 12c0 4.418-3.582 8-8 8z" }) }));
+            case 'gridicons-calendar':
+                return (_jsx("g", { children: _jsx("path", { d: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.105 0-2 .896-2 2v13c0 1.104.895 2 2 2h14c1.104 0 2-.896 2-2V6c0-1.104-.896-2-2-2zm0 15H5V8h14v11z" }) }));
+            case 'gridicons-cart':
+                return (_jsx("g", { children: _jsx("path", { d: "M9 20c0 1.1-.9 2-2 2s-1.99-.9-1.99-2S5.9 18 7 18s2 .9 2 2zm8-2c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm.396-5c.937 0 1.75-.65 1.952-1.566L21 5H7V4c0-1.105-.895-2-2-2H3v2h2v11c0 1.105.895 2 2 2h12c0-1.105-.895-2-2-2H7v-2h10.396z" }) }));
+            case 'gridicons-checkmark':
+                return (_jsx("g", { 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" }) }));
+            case 'gridicons-chevron-left':
+                return (_jsx("g", { children: _jsx("path", { d: "M16.443 7.41L15.0399 6L9.06934 12L15.0399 18L16.443 16.59L11.8855 12L16.443 7.41Z" }) }));
+            case 'gridicons-chevron-right':
+                return (_jsx("g", { children: _jsx("path", { d: "M10.2366 6L8.8335 7.41L13.391 12L8.8335 16.59L10.2366 18L16.2072 12L10.2366 6Z" }) }));
+            case 'gridicons-chevron-down':
+                return (_jsx("g", { children: _jsx("path", { d: "M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586" }) }));
+            case 'gridicons-comment':
+                return (_jsx("g", { children: _jsx("path", { d: "M3 6v9c0 1.105.895 2 2 2h9v5l5.325-3.804c1.05-.75 1.675-1.963 1.675-3.254V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2z" }) }));
+            case 'gridicons-computer':
+                return (_jsx("g", { children: _jsx("path", { d: "M20 2H4c-1.104 0-2 .896-2 2v12c0 1.104.896 2 2 2h6v2H7v2h10v-2h-3v-2h6c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm0 14H4V4h16v12z" }) }));
+            case 'gridicons-cross':
+                return (_jsx("g", { children: _jsx("path", { d: "M18.36 19.78L12 13.41l-6.36 6.37-1.42-1.42L10.59 12 4.22 5.64l1.42-1.42L12 10.59l6.36-6.36 1.41 1.41L13.41 12l6.36 6.36z" }) }));
+            case 'gridicons-filter':
+                return (_jsx("g", { children: _jsx("path", { d: "M10 19h4v-2h-4v2zm-4-6h12v-2H6v2zM3 5v2h18V5H3z" }) }));
+            case 'gridicons-folder':
+                return (_jsx("g", { children: _jsx("path", { d: "M18 19H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2h7c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2z" }) }));
+            case 'gridicons-help-outline':
+                return (_jsx("g", { children: _jsx("path", { d: "M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-1.962-2v-.528c0-.4.082-.74.246-1.017.163-.276.454-.546.87-.808.333-.21.572-.397.717-.565.146-.168.22-.36.22-.577 0-.172-.078-.308-.234-.41-.156-.1-.358-.15-.608-.15-.62 0-1.34.22-2.168.658l-.854-1.67c1.02-.58 2.084-.872 3.194-.872.913 0 1.63.202 2.15.603.52.4.78.948.78 1.64 0 .495-.116.924-.347 1.287-.23.362-.6.705-1.11 1.03-.43.278-.7.48-.807.61-.108.13-.163.282-.163.458V13h-1.885z" }) }));
+            case 'gridicons-image':
+                return (_jsx("g", { children: _jsx("path", { d: "M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z" }) }));
+            case 'gridicons-image-multiple':
+                return (_jsx("g", { children: _jsx("path", { d: "M15 7.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5S17.328 9 16.5 9 15 8.328 15 7.5zM4 20h14c0 1.105-.895 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.105.895-2 2-2v14zM22 4v12c0 1.105-.895 2-2 2H8c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zM8 4v6.333L11 7l4.855 5.395.656-.73c.796-.886 2.183-.886 2.977 0l.513.57V4H8z" }) }));
+            case 'gridicons-info':
+                return (_jsx("g", { children: _jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            case 'gridicons-info-outline':
+                return (_jsx("g", { children: _jsx("path", { d: "M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" }) }));
+            case 'gridicons-jetpack-search':
+                return (_jsx("g", { children: _jsx("path", { d: "M0 9.257C0 4.15 4.151 0 9.257 0c5.105 0 9.256 4.151 9.256 9.257a9.218 9.218 0 01-2.251 6.045l.034.033h1.053L24 22.01l-1.986 1.989-6.664-6.662v-1.055l-.033-.033a9.218 9.218 0 01-6.06 2.264C4.15 18.513 0 14.362 0 9.257zm4.169 1.537h4.61V1.82l-4.61 8.973zm5.547-3.092v8.974l4.61-8.974h-4.61z" }) }));
+            case 'gridicons-phone':
+                return (_jsx("g", { children: _jsx("path", { d: "M16 2H8c-1.104 0-2 .896-2 2v16c0 1.104.896 2 2 2h8c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm-3 19h-2v-1h2v1zm3-2H8V5h8v14z" }) }));
+            case 'gridicons-pages':
+                return (_jsx("g", { children: _jsx("path", { d: "M16 8H8V6h8v2zm0 2H8v2h8v-2zm4-6v12l-6 6H6c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zm-2 10V4H6v16h6v-4c0-1.105.895-2 2-2h4z" }) }));
+            case 'gridicons-posts':
+                return (_jsx("g", { children: _jsx("path", { d: "M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z" }) }));
+            case 'gridicons-search':
+                return (_jsx("g", { children: _jsx("path", { d: "M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z" }) }));
+            case 'gridicons-star-outline':
+                return (_jsx("g", { children: _jsx("path", { d: "M12 6.308l1.176 3.167.347.936.997.042 3.374.14-2.647 2.09-.784.62.27.963.91 3.25-2.813-1.872-.83-.553-.83.552-2.814 1.87.91-3.248.27-.962-.783-.62-2.648-2.092 3.374-.14.996-.04.347-.936L12 6.308M12 2L9.418 8.953 2 9.257l5.822 4.602L5.82 21 12 16.89 18.18 21l-2.002-7.14L22 9.256l-7.418-.305L12 2z" }) }));
+            case 'gridicons-star':
+                return (_jsx("g", { 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" }) }));
+            case 'gridicons-tag':
+                return (_jsx("g", { children: _jsx("path", { d: "M20 2.007h-7.087c-.53 0-1.04.21-1.414.586L2.592 11.5c-.78.78-.78 2.046 0 2.827l7.086 7.086c.78.78 2.046.78 2.827 0l8.906-8.906c.376-.374.587-.883.587-1.413V4.007c0-1.105-.895-2-2-2zM17.007 9c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z" }) }));
+            case 'gridicons-video':
+                return (_jsx("g", { children: _jsx("path", { d: "M20 4v2h-2V4H6v2H4V4c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2v-2h2v2h12v-2h2v2c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zM6 16H4v-3h2v3zm0-5H4V8h2v3zm4 4V9l4.5 3-4.5 3zm10 1h-2v-3h2v3zm0-5h-2V8h2v3z" }) }));
+            case 'gridicons-lock':
+                return (_jsxs(_Fragment, { children: [_jsx("g", { id: "lock", children: _jsx("path", { d: "M18,8h-1V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H6c-1.105,0-2,0.895-2,2v10c0,1.105,0.895,2,2,2h12c1.105,0,2-0.895,2-2V10\n\t\t\t\t\t\t\t\t\tC20,8.895,19.105,8,18,8z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M13,15.723V18h-2v-2.277c-0.595-0.346-1-0.984-1-1.723\n\t\t\t\t\t\t\t\t\tc0-1.105,0.895-2,2-2s2,0.895,2,2C14,14.738,13.595,15.376,13,15.723z" }) }), _jsx("g", { id: "Layer_1" })] }));
+            case 'gridicons-external':
+                return (_jsx("g", { children: _jsx("path", { d: "M19 13v6c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V7c0-1.105.895-2 2-2h6v2H5v12h12v-6h2zM13 3v2h4.586l-7.793 7.793 1.414 1.414L19 6.414V11h2V3h-8z" }) }));
+        }
+    }
+    render() {
+        const { size = 24, className = '' } = this.props;
+        const height = this.props.height || size;
+        const width = this.props.width || size;
+        const style = this.props.style || { height, width };
+        const icon = 'gridicons-' + this.props.icon;
+        const iconClass = clsx('gridicon', icon, className, {
+            'needs-offset': this.needsOffset(icon, size),
+        });
+        const description = this.getSVGDescription(icon);
+        return (_jsxs("svg", { className: iconClass, focusable: this.props.focusable, height: height, onClick: this.props.onClick, style: style, viewBox: "0 0 24 24", width: width, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.props['aria-hidden'], children: [description ? _jsx("desc", { children: description }) : null, this.renderIcon(icon)] }));
+    }
+}
+export default Gridicon;

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

@@ -0,0 +1,39 @@
+import type { CSSProperties } from 'react';
+export type GridiconProps = {
+    /**
+     * Icon name
+     */
+    icon: string;
+    /**
+     * HTML class name
+     */
+    className?: string;
+    /**
+     * Description for SVG for screen readers
+     */
+    description?: string;
+    /**
+     * Whether SVG is focussable
+     */
+    focusable?: boolean;
+    /**
+     * SVG height
+     */
+    height?: number;
+    /**
+     * Click handler
+     */
+    onClick?: VoidFunction;
+    /**
+     * SVG width and height
+     */
+    size?: number;
+    /**
+     * SVG style
+     */
+    style?: CSSProperties;
+    /**
+     * SVG width
+     */
+    width?: number;
+};

package/build/components/gridicon/types.js

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconTooltipProps } from './types.js';
+import './style.scss';
+/**
+ * Generate Icon Tooltip
+ *
+ * @param {IconTooltipProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+declare const IconTooltip: React.FC<IconTooltipProps>;
+export default IconTooltip;