@automattic/onboarding 1.0.0

package/dist/esm/hooray/style.scss

@@ -0,0 +1,66 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.onboarding-hooray {
+	text-align: center;
+
+	svg {
+		max-width: 350px;
+		margin-bottom: -20px;
+	}
+
+	.onboarding-title {
+		font-size: 3rem;
+		color: var(--studio-gray-100);
+		margin-bottom: 0.75rem;
+
+		@media (max-width: 1080px) {
+			line-height: 1;
+		}
+	}
+
+	.onboarding-subtitle {
+		color: var(--studio-gray-50);
+		margin-bottom: 1.5em;
+	}
+
+	.components-button.action-buttons__next {
+		min-width: 100px;
+		padding: 10px 24px !important;
+		margin: 0 0.75em 0.75em 0.75em;
+		border-radius: 4px;
+	}
+}
+
+.onboarding-hooray__animate {
+	.onboarding-title {
+		animation: hooray-fade 0.9s ease-in-out, hooray-jump 0.8s cubic-bezier(0.21, 0.19, 0.24, 0.99);
+	}
+
+	.onboarding-subtitle,
+	.components-button.action-buttons__next.is-primary {
+		opacity: 0;
+		animation: hooray-fade 0.9s ease-in-out 0.8s forwards, hooray-jump 0.8s cubic-bezier(0.21, 0.19, 0.24, 0.99) 0.8s forwards;
+	}
+}
+
+
+@keyframes hooray-fade {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes hooray-jump {
+	from {
+		transform: translateY(20px);
+	}
+
+	to {
+		transform: none;
+	}
+}

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+export { Title, SubTitle } from './titles';
+export { useFlowProgress } from './flow-progress/use-flow-progress';
+export { default as ActionButtons, BackButton, NextButton, SkipButton, ArrowButton, } from './action-buttons';
+export { createSiteWithCart, addPlanToCart, addProductsToCart, replaceProductsInCart, setThemeOnSite, } from './cart';
+export { setupSiteAfterCreation, base64ImageToBlob } from './setup-tailored-site-after-creation';
+export { uploadAndSetSiteLogo } from './upload-and-set-site-logo';
+export { default as FeatureIcon } from './feature-icon';
+export { default as Progress } from './progress';
+export { default as Hooray } from './hooray';
+export { default as Confetti } from './confetti';
+export { default as IntentScreen } from './intent-screen';
+export { default as SelectItems } from './select-items';
+export { default as SelectItemsAlt } from './select-items-alt';
+export { default as StepContainer } from './step-container';
+export { default as StepNavigationLink } from './step-navigation-link';
+export { default as MShotsImage } from './mshots-image';
+export * from './navigator';
+export { default as Notice } from './notice';
+export { default as SelectCardCheckbox } from './select-card-checkbox';
+export * from './utils';
+export * from './select-card-radio';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EACN,OAAO,IAAI,aAAa,EACxB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,GACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACN,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,GACd,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACjG,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACvE,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/esm/intent-screen/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SelectItems from '../select-items';
+import SelectItemsAlt from '../select-items-alt';
+const IntentScreen = ({ intents, intentsAlt, onSelect, preventWidows, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(SelectItems, { items: intents, onSelect: onSelect, preventWidows: preventWidows }), _jsx(SelectItemsAlt, { items: intentsAlt, onSelect: onSelect })] }));
+};
+export default IntentScreen;
+//# sourceMappingURL=index.js.map

package/dist/esm/intent-screen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/intent-screen/index.tsx"],"names":[],"mappings":";AACA,OAAO,WAA2B,MAAM,iBAAiB,CAAC;AAC1D,OAAO,cAAiC,MAAM,qBAAqB,CAAC;AASpE,MAAM,YAAY,GAAG,CAAsB,EAC1C,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,GACD,EAAG,EAAE;IACjB,OAAO,CACN,8BACC,KAAC,WAAW,IAAC,KAAK,EAAG,OAAO,EAAG,QAAQ,EAAG,QAAQ,EAAG,aAAa,EAAG,aAAa,GAAK,EACvF,KAAC,cAAc,IAAC,KAAK,EAAG,UAAU,EAAG,QAAQ,EAAG,QAAQ,GAAK,IAC3D,CACH,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/mshots-image/index.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addQueryArgs } from '@wordpress/url';
+import clsx from 'clsx';
+import debugFactory from 'debug';
+import { useState, useEffect, useRef } from 'react';
+import './style.scss';
+const debug = debugFactory('design-picker:mshots-image');
+export function mshotsUrl(targetUrl, options, count = 0) {
+    const mshotsUrl = 'https://s0.wp.com/mshots/v1/';
+    const mshotsRequest = addQueryArgs(mshotsUrl + encodeURIComponent(targetUrl), {
+        ...options,
+        count,
+    });
+    return mshotsRequest;
+}
+const MAXTRIES = 10;
+// This custom react hook returns null while the image is loading and the page
+// (not image) URL once loading is complete.
+//
+// It also triggers a re-render (via setState()) when the value changes, so just
+// check that the requested URL matches the returned URL.
+//
+// Note the loading may occur immediately if the image is already available, or
+// may take several seconds if mshots has to generate and cache new images.
+//
+// The calling code doesn't need to worry about the details except that you'll
+// want some sort of loading display.
+//
+// Inspired by https://stackoverflow.com/a/60458593
+const useMshotsImg = (src, options, imgRef) => {
+    const [loadedImg, setLoadedImg] = useState(null);
+    const [count, setCount] = useState(0);
+    const previousSrc = useRef(src);
+    const timeoutIdRef = useRef();
+    const previousImg = useRef(null);
+    const previousOptions = useRef();
+    // Oddly, we need to assign to current here after ref creation in order to
+    // pass the equivalence check and avoid a spurious reset
+    previousOptions.current = options;
+    // Note: Mshots doesn't care about the "count" param, but it is important
+    // to browser caching. Getting this wrong looks like the url resolving
+    // before the image is ready.
+    useEffect(() => {
+        // If there's been a "props" change we need to reset everything:
+        if (options !== previousOptions.current ||
+            (src !== previousSrc.current && imgRef.current)) {
+            // Make sure an old image can't trigger a spurious state update
+            debug('resetting mShotsUrl request');
+            if (src !== previousSrc.current) {
+                debug('src changed\nfrom', previousSrc.current, '\nto', src);
+            }
+            if (options !== previousOptions.current) {
+                debug('options changed\nfrom', previousOptions.current, '\nto', options);
+            }
+            if (previousImg.current && previousImg.current.onload) {
+                previousImg.current.onload = null;
+                if (timeoutIdRef.current) {
+                    clearTimeout(timeoutIdRef.current);
+                    timeoutIdRef.current = undefined;
+                }
+            }
+            setCount(0);
+            if (previousImg.current !== imgRef.current) {
+                previousImg.current = imgRef.current;
+            }
+            previousOptions.current = options;
+            previousSrc.current = src;
+        }
+        const srcUrl = mshotsUrl(src, options, count);
+        if (imgRef.current) {
+            imgRef.current.onload = () => {
+                // Detect default image (Don't request a 400x300 image).
+                //
+                // If this turns out to be a problem, it might help to know that the
+                // http request status for the default is a 307. Unfortunately we
+                // don't get the request through an img element so we'd need to
+                // take a completely different approach using ajax.
+                if (imgRef.current?.naturalWidth !== 400 || imgRef.current?.naturalHeight !== 300) {
+                    setLoadedImg(src);
+                }
+                else if (count < MAXTRIES) {
+                    // Only refresh 10 times
+                    // Triggers a target.src change with increasing timeouts
+                    timeoutIdRef.current = window.setTimeout(() => setCount((count) => count + 1), count * 500);
+                }
+            };
+            imgRef.current.src = srcUrl;
+        }
+        return () => {
+            if (imgRef.current && imgRef.current.onload) {
+                imgRef.current.onload = null;
+            }
+            if (previousImg.current && previousImg.current.onload) {
+                previousImg.current.onload = null;
+            }
+            clearTimeout(timeoutIdRef.current);
+        };
+    }, [src, count, options, imgRef]);
+    return loadedImg;
+};
+// Temporary for A/B test.
+const useMshotsImgTreatment = (src, options) => {
+    const [loadedImg, setLoadedImg] = useState();
+    const [count, setCount] = useState(0);
+    const previousSrc = useRef(src);
+    const imgRef = useRef();
+    const timeoutIdRef = useRef();
+    const previousImg = useRef();
+    const previousOptions = useRef();
+    // Oddly, we need to assign to current here after ref creation in order to
+    // pass the equivalence check and avoid a spurious reset
+    previousOptions.current = options;
+    // Note: Mshots doesn't care about the "count" param, but it is important
+    // to browser caching. Getting this wrong looks like the url resolving
+    // before the image is ready.
+    useEffect(() => {
+        // If there's been a "props" change we need to reset everything:
+        if (options !== previousOptions.current ||
+            (src !== previousSrc.current && imgRef.current)) {
+            // Make sure an old image can't trigger a spurious state update
+            debug('resetting mShotsUrl request');
+            if (src !== previousSrc.current) {
+                debug('src changed\nfrom', previousSrc.current, '\nto', src);
+            }
+            if (options !== previousOptions.current) {
+                debug('options changed\nfrom', previousOptions.current, '\nto', options);
+            }
+            if (previousImg.current && previousImg.current.onload) {
+                previousImg.current.onload = null;
+                if (timeoutIdRef.current) {
+                    clearTimeout(timeoutIdRef.current);
+                    timeoutIdRef.current = undefined;
+                }
+            }
+            setLoadedImg(undefined);
+            setCount(0);
+            previousImg.current = imgRef.current;
+            previousOptions.current = options;
+            previousSrc.current = src;
+        }
+        const srcUrl = mshotsUrl(src, options, count);
+        const newImage = new Image();
+        newImage.onload = () => {
+            // Detect default image (Don't request a 400x300 image).
+            //
+            // If this turns out to be a problem, it might help to know that the
+            // http request status for the default is a 307. Unfortunately we
+            // don't get the request through an img element so we'd need to
+            // take a completely different approach using ajax.
+            if (newImage.naturalWidth !== 400 || newImage.naturalHeight !== 300) {
+                // Note we're using the naked object here, not the ref, because
+                // this is the callback on the image itself. We'd never want
+                // the image to finish loading and set some other image.
+                setLoadedImg(newImage);
+            }
+            else if (count < MAXTRIES) {
+                // Only refresh 10 times
+                // Triggers a target.src change with increasing timeouts
+                timeoutIdRef.current = window.setTimeout(() => setCount((count) => count + 1), count * 500);
+            }
+        };
+        newImage.src = srcUrl;
+        imgRef.current = newImage;
+        return () => {
+            if (imgRef.current && imgRef.current.onload) {
+                imgRef.current.onload = null;
+            }
+            clearTimeout(timeoutIdRef.current);
+        };
+    }, [src, count, options]);
+    return loadedImg;
+};
+const MShotsImageControl = ({ url, 'aria-labelledby': labelledby, alt, options, scrollable = false, }) => {
+    const imgRef = useRef(null);
+    const currentlyLoadedUrl = useMshotsImg(url, options, imgRef);
+    const src = imgRef.current?.src || '';
+    const visible = src && url === currentlyLoadedUrl;
+    const backgroundImage = src && `url( ${src} )`;
+    const animationScrollSpeedInPixelsPerSecond = 400;
+    const animationDuration = (imgRef.current?.naturalHeight || 600) / animationScrollSpeedInPixelsPerSecond;
+    const scrollableStyles = {
+        backgroundImage,
+        transition: `background-position ${animationDuration}s`,
+    };
+    const style = {
+        ...(scrollable ? scrollableStyles : {}),
+    };
+    const className = clsx('mshots-image__container', scrollable && 'hover-scroll', visible ? 'mshots-image-visible' : 'mshots-image__loader');
+    if (options?.oldHighResImageLoading) {
+        return scrollable ? (_jsx("div", { className: className, style: style, "aria-labelledby": labelledby, children: _jsx("img", { ref: imgRef, className: "mshots-dummy-image", "aria-hidden": "true", alt: "" }) })) : (_jsx("img", { ref: imgRef, className, style, src, alt, "aria-labelledby": labelledby, alt: alt }));
+    } // else, prettier doesn't like having an else after a return
+    return scrollable ? (_jsx("div", { className: className, style: style, "aria-labelledby": labelledby, children: _jsx("img", { ref: imgRef, loading: "lazy", className: "mshots-dummy-image", "aria-hidden": "true", alt: "" }) })) : (_jsx("img", { loading: "lazy", ref: imgRef, className, style, src, alt, "aria-labelledby": labelledby, alt: alt }));
+};
+// Temporary for A/B test.
+const MShotsImageTreatment = ({ url, 'aria-labelledby': labelledby, alt, options, scrollable = false, }) => {
+    const maybeImage = useMshotsImgTreatment(url, options);
+    const src = maybeImage?.src || '';
+    const visible = !!src;
+    const backgroundImage = maybeImage?.src && `url( ${maybeImage?.src} )`;
+    const animationScrollSpeedInPixelsPerSecond = 400;
+    const animationDuration = (maybeImage?.naturalHeight || 600) / animationScrollSpeedInPixelsPerSecond;
+    const scrollableStyles = {
+        backgroundImage,
+        transition: `background-position ${animationDuration}s`,
+    };
+    const style = {
+        ...(scrollable ? scrollableStyles : {}),
+    };
+    const className = clsx('mshots-image__container', scrollable && 'hover-scroll', visible ? 'mshots-image-visible' : 'mshots-image__loader');
+    // The "! visible" here is only to dodge a particularly specific css
+    // rule effecting the placeholder while loading static images:
+    // '.design-picker .design-picker__image-frame img { ..., height: auto }'
+    return scrollable || !visible ? (_jsx("div", { className: className, style: style, "aria-labelledby": labelledby })) : (_jsx("img", { className, style, src, alt, "aria-labelledby": labelledby, alt: alt }));
+};
+// For hover-scroll, we use a div with a background image (rather than an img element)
+// in order to use transitions between `top` and `bottom` on the
+// `background-position` property.
+// The "normal" top & bottom properties are problematic individually because we
+// don't know how big the images will be, and using both gets the
+// right positions but with no transition (as they're different properties).
+const MShotsImage = ({ url, 'aria-labelledby': labelledby, alt, options, scrollable = false, }) => {
+    // Return MShotsImageControl or MShotsImageTreatment depending on options.oldHighResImageLoading
+    if (options?.oldHighResImageLoading) {
+        return (_jsx(MShotsImageTreatment, { url: url, "aria-labelledby": labelledby, alt: alt, options: options, scrollable: scrollable }));
+    }
+    return (_jsx(MShotsImageControl, { url: url, "aria-labelledby": labelledby, alt: alt, options: options, scrollable: scrollable }));
+};
+export default MShotsImage;
+//# sourceMappingURL=index.js.map

package/dist/esm/mshots-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/mshots-image/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/mshots-image/style.scss

@@ -0,0 +1,43 @@
+@import "../../styles/mixins";
+
+.mshots-image__loader {
+	@include onboarding-placeholder();
+}
+
+.mshots-image__container {
+	height: 100%;
+}
+
+.hover-scroll {
+	background-size: 100%;
+	background-position: top;
+	background-repeat: no-repeat;
+	margin-left: auto;
+	margin-right: auto;
+
+	&:hover {
+		background-position: bottom;
+	}
+}
+
+.mshots-image-visible {
+	animation: fadein 300ms;
+}
+
+// Increase specificity by repeating class name.
+.mshots-dummy-image.mshots-dummy-image {
+	position: absolute;
+	display: block;
+	visibility: hidden;
+	height: 0;
+	width: 0;
+}
+
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

package/dist/esm/navigator/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useNavigatorListener } from './use-navigator-listener';
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/navigator/hooks/use-navigator-listener.js

@@ -0,0 +1,14 @@
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { useEffect, useRef } from 'react';
+const useNavigatorListener = (onNavigatorPathChange) => {
+    const { location } = useNavigator();
+    const previousPathRef = useRef('');
+    useEffect(() => {
+        if (location.path && location.path !== previousPathRef.current) {
+            onNavigatorPathChange?.(location.path);
+            previousPathRef.current = location.path;
+        }
+    }, [location.path, onNavigatorPathChange]);
+};
+export default useNavigatorListener;
+//# sourceMappingURL=use-navigator-listener.js.map

package/dist/esm/navigator/hooks/use-navigator-listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigator-listener.js","sourceRoot":"","sources":["../../../../src/navigator/hooks/use-navigator-listener.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,oBAAoB,GAAG,CAAE,qBAA6C,EAAG,EAAE;IAChF,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,CAAC;IACpC,MAAM,eAAe,GAAG,MAAM,CAAE,EAAE,CAAE,CAAC;IAErC,SAAS,CAAE,GAAG,EAAE;QACf,IAAK,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,KAAK,eAAe,CAAC,OAAO,EAAG,CAAC;YAClE,qBAAqB,EAAE,CAAE,QAAQ,CAAC,IAAI,CAAE,CAAC;YACzC,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC;QACzC,CAAC;IACF,CAAC,EAAE,CAAE,QAAQ,CAAC,IAAI,EAAE,qBAAqB,CAAE,CAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/esm/navigator/index.js

@@ -0,0 +1,8 @@
+export * from './hooks';
+export { NavigatorButtonAsItem, NavigatorItem } from './navigator-buttons';
+export { default as NavigatorHeader } from './navigator-header';
+export { default as NavigatorItemGroup } from './navigator-item-group';
+export { default as NavigatorListener } from './navigator-listener';
+export { default as NavigatorScreen } from './navigator-screen';
+export * from './navigator-screens';
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigator/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,cAAc,qBAAqB,CAAC"}

package/dist/esm/navigator/navigator-buttons/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __experimentalNavigatorButton as NavigatorButton, __experimentalHStack as HStack, __experimentalItem as Item, FlexItem, } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+import { Icon, chevronLeft, chevronRight, check } from '@wordpress/icons';
+import clsx from 'clsx';
+import './style.scss';
+export function NavigatorItem({ icon, checked, active, children, ...props }) {
+    const content = icon ? (_jsxs(HStack, { justify: "flex-start", children: [_jsx(Icon, { className: "navigator-item__icon", icon: checked ? check : icon, size: 24 }), _jsx(FlexItem, { className: "navigator-item__text", display: "flex", isBlock: true, children: children })] })) : (_jsx(FlexItem, { display: "flex", isBlock: true, children: children }));
+    const forwardIcon = isRTL() ? chevronLeft : chevronRight;
+    return (_jsx(Item, { ...props, className: clsx('navigator-item', {
+            'navigator-item--active': active,
+        }), children: _jsxs(HStack, { justify: "space-between", children: [content, _jsx(Icon, { icon: forwardIcon, size: 24 })] }) }));
+}
+export const NavigatorButtonAsItem = ({ ...props }) => {
+    return _jsx(NavigatorButton, { as: NavigatorItem, ...props });
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/navigator-buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-buttons/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,6BAA6B,IAAI,eAAe,EAChD,oBAAoB,IAAI,MAAM,EAC9B,kBAAkB,IAAI,IAAI,EAC1B,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,CAAC;AAetB,MAAM,UAAU,aAAa,CAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CACtB,MAAC,MAAM,IAAC,OAAO,EAAC,YAAY,aAC3B,KAAC,IAAI,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAG,IAAI,EAAG,EAAE,GAAK,EACrF,KAAC,QAAQ,IAAC,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,kBAC9D,QAAQ,GACA,IACH,CACT,CAAC,CAAC,CAAC,CACH,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,kBAC7B,QAAQ,GACA,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;IAEzD,OAAO,CACN,KAAC,IAAI,OACC,KAAK,EACV,SAAS,EAAG,IAAI,CAAE,gBAAgB,EAAE;YACnC,wBAAwB,EAAE,MAAM;SAChC,CAAE,YAEH,MAAC,MAAM,IAAC,OAAO,EAAC,eAAe,aAC5B,OAAO,EACT,KAAC,IAAI,IAAC,IAAI,EAAG,WAAW,EAAG,IAAI,EAAG,EAAE,GAAK,IACjC,GACH,CACP,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAE,EAAE,GAAG,KAAK,EAA8B,EAAG,EAAE;IACnF,OAAO,KAAC,eAAe,IAAC,EAAE,EAAG,aAAa,KAAQ,KAAK,GAAK,CAAC;AAC9D,CAAC,CAAC"}

package/dist/esm/navigator/navigator-buttons/style.scss

@@ -0,0 +1,47 @@
+@import "@automattic/typography/styles/fonts";
+
+.components-item.navigator-item {
+	height: 44px;
+	line-height: 44px;
+	padding: 0 5px 0 8px;
+	margin: 0 -5px 0 -8px;
+	font-size: $font-body-small;
+	font-weight: 400;
+	letter-spacing: -0.15px;
+	color: var(--studio-gray-100);
+	border: none;
+	background: transparent;
+	cursor: pointer;
+
+	svg {
+		flex-shrink: 0;
+		fill: currentColor;
+	}
+
+	&:hover,
+	&:focus-visible {
+		color: var(--studio-blue-50);
+	}
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&:focus-visible {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-primary-light);
+	}
+
+	&:active {
+		background-color: var(--studio-blue-0);
+	}
+
+	.navigator-item__text {
+		padding-left: 1px;
+	}
+
+	&--active {
+		background-color: var(--studio-blue-0);
+		color: var(--studio-blue-50);
+	}
+}

package/dist/esm/navigator/navigator-header/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Gridicon } from '@automattic/components';
+import { __experimentalHStack as HStack, __experimentalNavigatorBackButton as NavigatorBackButton, } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import './style.scss';
+const NavigatorHeader = ({ title, description, hideBack, onBack }) => {
+    const translate = useTranslate();
+    return (_jsxs("div", { className: "navigator-header", children: [_jsxs(HStack, { className: "navigator-header__heading", spacing: 2, justify: "flex-start", children: [!hideBack && (_jsx(NavigatorBackButton, { as: Button, title: translate('Back'), borderless: true, "aria-label": translate('Navigate to the previous view'), onClick: onBack, children: _jsx(Gridicon, { icon: "chevron-left", size: 16 }) })), _jsx("h2", { children: title })] }), description && _jsx("p", { className: "navigator-header__description", children: description })] }));
+};
+export default NavigatorHeader;
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/navigator-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-header/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EACN,oBAAoB,IAAI,MAAM,EAC9B,iCAAiC,IAAI,mBAAmB,GACxD,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAmB,MAAM,cAAc,CAAC;AAC7D,OAAO,cAAc,CAAC;AAStB,MAAM,eAAe,GAAG,CAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAS,EAAG,EAAE;IAC7E,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACN,eAAK,SAAS,EAAC,kBAAkB,aAChC,MAAC,MAAM,IAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAG,CAAC,EAAG,OAAO,EAAC,YAAY,aAC7E,CAAE,QAAQ,IAAI,CACf,KAAC,mBAAmB,IACnB,EAAE,EAAG,MAAM,EACX,KAAK,EAAG,SAAS,CAAE,MAAM,CAAE,EAC3B,UAAU,sBACG,SAAS,CAAE,+BAA+B,CAAE,EACzD,OAAO,EAAG,MAAM,YAEhB,KAAC,QAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAG,EAAE,GAAK,GACvB,CACtB,EACD,uBAAM,KAAK,GAAO,IACV,EACP,WAAW,IAAI,YAAG,SAAS,EAAC,+BAA+B,YAAG,WAAW,GAAM,IAC5E,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/navigator/navigator-header/style.scss

@@ -0,0 +1,45 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@automattic/typography/styles/fonts";
+
+.navigator-header {
+	display: none;
+	margin-bottom: 30px;
+
+	@include break-large {
+		display: block;
+	}
+}
+
+.navigator-header__heading {
+	margin-bottom: 8px;
+	color: var(--color-neutral-100);
+	text-wrap: pretty;
+
+	h2 {
+		font-family: Recoleta, sans-serif;
+		font-style: normal;
+		font-weight: 400;
+		font-size: $font-title-large;
+		line-height: 40px;
+		letter-spacing: -0.32px;
+	}
+
+	.button.is-borderless .gridicon {
+		top: 4px;
+	}
+
+	.premium-badge {
+		margin-inline-start: 2px;
+	}
+}
+
+.navigator-header__description {
+	font-size: $font-body-small;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.15px;
+	color: var(--color-neutral-60);
+	margin: 0;
+	text-wrap: pretty;
+}

package/dist/esm/navigator/navigator-item-group/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __experimentalVStack as VStack, __experimentalItemGroup as ItemGroup, } from '@wordpress/components';
+import './style.scss';
+const NavigatorItemGroup = ({ children, title }) => {
+    return (_jsx("section", { className: "navigator-item-group", children: _jsxs(VStack, { direction: "column", justify: "flex-start", alignment: "stretch", children: [title && _jsx("h3", { className: "navigator-item-group__title", children: title }), _jsx(ItemGroup, { children: children })] }) }));
+};
+export default NavigatorItemGroup;
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/navigator-item-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-item-group/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,oBAAoB,IAAI,MAAM,EAC9B,uBAAuB,IAAI,SAAS,GACpC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,cAAc,CAAC;AAOtB,MAAM,kBAAkB,GAAG,CAAE,EAAE,QAAQ,EAAE,KAAK,EAAS,EAAG,EAAE;IAC3D,OAAO,CACN,kBAAS,SAAS,EAAC,sBAAsB,YACxC,MAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,SAAS,aAChE,KAAK,IAAI,aAAI,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAO,EACrE,KAAC,SAAS,cAAG,QAAQ,GAAc,IAC3B,GACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/navigator/navigator-item-group/style.scss

@@ -0,0 +1,28 @@
+@import "@automattic/typography/styles/fonts";
+
+.navigator-item-group {
+	flex-shrink: 0;
+
+	.components-item-group > div[role="listitem"] {
+		display: flex;
+	}
+
+	.navigator-item {
+		flex-grow: 1;
+	}
+
+	&:nth-child(1 of &):nth-last-child(1 of &) {
+		.navigator-item-group__title {
+			display: none;
+		}
+	}
+}
+
+.navigator-item-group__title {
+	color: var(--color-neutral-100);
+	font-size: $font-body-small;
+	font-weight: 500;
+	letter-spacing: -0.15px;
+	line-height: 1.4;
+	margin-bottom: 8px;
+}

package/dist/esm/navigator/navigator-listener/index.js

@@ -0,0 +1,7 @@
+import { useNavigatorListener } from '../hooks';
+const NavigatorListener = ({ onNavigatorPathChange }) => {
+    useNavigatorListener(onNavigatorPathChange);
+    return null;
+};
+export default NavigatorListener;
+//# sourceMappingURL=index.js.map

package/dist/esm/navigator/navigator-listener/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-listener/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,UAAU,CAAC;AAMvE,MAAM,iBAAiB,GAAG,CAAE,EAAE,qBAAqB,EAAS,EAAG,EAAE;IAChE,oBAAoB,CAAE,qBAAqB,CAAE,CAAC;IAC9C,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/navigator/navigator-screen/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { __experimentalNavigatorScreen as BaseNavigatorScreen, __experimentalUseNavigator as useNavigator, } from '@wordpress/components';
+/**
+ * A wrapper of the NavigatorScreen to support matching the path partially.
+ */
+const NavigatorScreen = ({ partialMatch, ...props }) => {
+    const { location } = useNavigator();
+    if (partialMatch && location.path?.startsWith(props.path)) {
+        return props.children;
+    }
+    return _jsx(BaseNavigatorScreen, { ...props });
+};
+export default NavigatorScreen;
+//# sourceMappingURL=index.js.map