@automattic/onboarding 1.0.0

package/dist/cjs/flow-progress/use-flow-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-flow-progress.js","sourceRoot":"","sources":["../../../src/flow-progress/use-flow-progress.ts"],"names":[],"mappings":";;;AAAA,0CAQwB;AASxB,MAAM,KAAK,GAAmD;IAC7D,UAAU,EAAE;QACX,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,CAAC;QAClB,eAAe,EAAE,CAAC;QAClB,OAAO,EAAE,CAAC;QACV,kBAAkB,EAAE,CAAC;QACrB,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,CAAC;KACZ;IACD,CAAE,wBAAgB,CAAE,EAAE;QACrB,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC;QACX,cAAc,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,CAAC;KACZ;IACD,CAAE,4BAAoB,CAAE,EAAE;QACzB,OAAO,EAAE,CAAC;QACV,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC;QACX,cAAc,EAAE,CAAC;QACjB,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,CAAC;KACZ;IACD,CAAE,iBAAS,CAAE,EAAE;QACd,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,CAAC;QACZ,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,CAAC;KACZ;IACD,UAAU,EAAE;QACX,KAAK,EAAE,CAAC;QACR,eAAe,EAAE,CAAC;QAClB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;KACZ;IACD,CAAE,0BAAkB,CAAE,EAAE;QACvB,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,CAAC;KACb;IACD,CAAE,mCAA2B,CAAE,EAAE;QAChC,UAAU,EAAE,CAAC;KACb;IACD,MAAM,EAAE;QACP,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,CAAC;KACf;IACD,CAAE,sBAAc,CAAE,EAAE;QACnB,KAAK,EAAE,CAAC;QACR,aAAa,EAAE,CAAC;QAChB,cAAc,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;QAChB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KACf;IACD,CAAE,sBAAc,CAAE,EAAE;QACnB,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,CAAC;QACb,gBAAgB,EAAE,CAAC;QACnB,iBAAiB,EAAE,CAAC;KACpB;CACD,CAAC;AAEK,MAAM,eAAe,GAAG,CAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,KAAmB,EAAE,EAAG,EAAE;IAC3F,IAAK,CAAE,QAAQ,IAAI,CAAE,QAAQ,EAAG,CAAC;QAChC,OAAO;IACR,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAE,WAAW,IAAI,QAAQ,CAAE,CAAC;IAE9C,OAAO,CACN,IAAI,IAAI;QACP,QAAQ,EAAE,IAAI,CAAE,QAAQ,CAAE;QAC1B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAE,GAAG,MAAM,CAAC,MAAM,CAAE,IAAI,CAAE,CAAE;KAC3C,CACD,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,eAAe,mBAa1B"}

package/dist/cjs/hooray/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const confetti_1 = tslib_1.__importDefault(require("../confetti"));
+require("./style.scss");
+const Hooray = ({ className, animate = false, children, ...additionalProps }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(`onboarding-hooray`, { 'onboarding-hooray__animate': animate }, className), ...additionalProps, children: [(0, jsx_runtime_1.jsx)(confetti_1.default, {}), children] }));
+};
+exports.default = Hooray;
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooray/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooray/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwB;AAExB,mEAAmC;AAEnC,wBAAsB;AAQtB,MAAM,MAAM,GAAqC,CAAE,EAClD,SAAS,EACT,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,eAAe,EAClB,EAAG,EAAE;IACL,OAAO,CACN,iCACC,SAAS,EAAG,IAAA,cAAI,EACf,mBAAmB,EACnB,EAAE,4BAA4B,EAAE,OAAO,EAAE,EACzC,SAAS,CACT,KACI,eAAe,aAEpB,uBAAC,kBAAQ,KAAG,EACV,QAAQ,IACL,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/cjs/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/cjs/index.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectCardCheckbox = exports.Notice = exports.MShotsImage = exports.StepNavigationLink = exports.StepContainer = exports.SelectItemsAlt = exports.SelectItems = exports.IntentScreen = exports.Confetti = exports.Hooray = exports.Progress = exports.FeatureIcon = exports.uploadAndSetSiteLogo = exports.base64ImageToBlob = exports.setupSiteAfterCreation = exports.setThemeOnSite = exports.replaceProductsInCart = exports.addProductsToCart = exports.addPlanToCart = exports.createSiteWithCart = exports.ArrowButton = exports.SkipButton = exports.NextButton = exports.BackButton = exports.ActionButtons = exports.useFlowProgress = exports.SubTitle = exports.Title = void 0;
+const tslib_1 = require("tslib");
+var titles_1 = require("./titles");
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return titles_1.Title; } });
+Object.defineProperty(exports, "SubTitle", { enumerable: true, get: function () { return titles_1.SubTitle; } });
+var use_flow_progress_1 = require("./flow-progress/use-flow-progress");
+Object.defineProperty(exports, "useFlowProgress", { enumerable: true, get: function () { return use_flow_progress_1.useFlowProgress; } });
+var action_buttons_1 = require("./action-buttons");
+Object.defineProperty(exports, "ActionButtons", { enumerable: true, get: function () { return tslib_1.__importDefault(action_buttons_1).default; } });
+Object.defineProperty(exports, "BackButton", { enumerable: true, get: function () { return action_buttons_1.BackButton; } });
+Object.defineProperty(exports, "NextButton", { enumerable: true, get: function () { return action_buttons_1.NextButton; } });
+Object.defineProperty(exports, "SkipButton", { enumerable: true, get: function () { return action_buttons_1.SkipButton; } });
+Object.defineProperty(exports, "ArrowButton", { enumerable: true, get: function () { return action_buttons_1.ArrowButton; } });
+var cart_1 = require("./cart");
+Object.defineProperty(exports, "createSiteWithCart", { enumerable: true, get: function () { return cart_1.createSiteWithCart; } });
+Object.defineProperty(exports, "addPlanToCart", { enumerable: true, get: function () { return cart_1.addPlanToCart; } });
+Object.defineProperty(exports, "addProductsToCart", { enumerable: true, get: function () { return cart_1.addProductsToCart; } });
+Object.defineProperty(exports, "replaceProductsInCart", { enumerable: true, get: function () { return cart_1.replaceProductsInCart; } });
+Object.defineProperty(exports, "setThemeOnSite", { enumerable: true, get: function () { return cart_1.setThemeOnSite; } });
+var setup_tailored_site_after_creation_1 = require("./setup-tailored-site-after-creation");
+Object.defineProperty(exports, "setupSiteAfterCreation", { enumerable: true, get: function () { return setup_tailored_site_after_creation_1.setupSiteAfterCreation; } });
+Object.defineProperty(exports, "base64ImageToBlob", { enumerable: true, get: function () { return setup_tailored_site_after_creation_1.base64ImageToBlob; } });
+var upload_and_set_site_logo_1 = require("./upload-and-set-site-logo");
+Object.defineProperty(exports, "uploadAndSetSiteLogo", { enumerable: true, get: function () { return upload_and_set_site_logo_1.uploadAndSetSiteLogo; } });
+var feature_icon_1 = require("./feature-icon");
+Object.defineProperty(exports, "FeatureIcon", { enumerable: true, get: function () { return tslib_1.__importDefault(feature_icon_1).default; } });
+var progress_1 = require("./progress");
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return tslib_1.__importDefault(progress_1).default; } });
+var hooray_1 = require("./hooray");
+Object.defineProperty(exports, "Hooray", { enumerable: true, get: function () { return tslib_1.__importDefault(hooray_1).default; } });
+var confetti_1 = require("./confetti");
+Object.defineProperty(exports, "Confetti", { enumerable: true, get: function () { return tslib_1.__importDefault(confetti_1).default; } });
+var intent_screen_1 = require("./intent-screen");
+Object.defineProperty(exports, "IntentScreen", { enumerable: true, get: function () { return tslib_1.__importDefault(intent_screen_1).default; } });
+var select_items_1 = require("./select-items");
+Object.defineProperty(exports, "SelectItems", { enumerable: true, get: function () { return tslib_1.__importDefault(select_items_1).default; } });
+var select_items_alt_1 = require("./select-items-alt");
+Object.defineProperty(exports, "SelectItemsAlt", { enumerable: true, get: function () { return tslib_1.__importDefault(select_items_alt_1).default; } });
+var step_container_1 = require("./step-container");
+Object.defineProperty(exports, "StepContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(step_container_1).default; } });
+var step_navigation_link_1 = require("./step-navigation-link");
+Object.defineProperty(exports, "StepNavigationLink", { enumerable: true, get: function () { return tslib_1.__importDefault(step_navigation_link_1).default; } });
+var mshots_image_1 = require("./mshots-image");
+Object.defineProperty(exports, "MShotsImage", { enumerable: true, get: function () { return tslib_1.__importDefault(mshots_image_1).default; } });
+tslib_1.__exportStar(require("./navigator"), exports);
+var notice_1 = require("./notice");
+Object.defineProperty(exports, "Notice", { enumerable: true, get: function () { return tslib_1.__importDefault(notice_1).default; } });
+var select_card_checkbox_1 = require("./select-card-checkbox");
+Object.defineProperty(exports, "SelectCardCheckbox", { enumerable: true, get: function () { return tslib_1.__importDefault(select_card_checkbox_1).default; } });
+tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./select-card-radio"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,mCAA2C;AAAlC,+FAAA,KAAK,OAAA;AAAE,kGAAA,QAAQ,OAAA;AACxB,uEAAoE;AAA3D,oHAAA,eAAe,OAAA;AACxB,mDAM0B;AALzB,wIAAA,OAAO,OAAiB;AACxB,4GAAA,UAAU,OAAA;AACV,4GAAA,UAAU,OAAA;AACV,4GAAA,UAAU,OAAA;AACV,6GAAA,WAAW,OAAA;AAEZ,+BAMgB;AALf,0GAAA,kBAAkB,OAAA;AAClB,qGAAA,aAAa,OAAA;AACb,yGAAA,iBAAiB,OAAA;AACjB,6GAAA,qBAAqB,OAAA;AACrB,sGAAA,cAAc,OAAA;AAEf,2FAAiG;AAAxF,4IAAA,sBAAsB,OAAA;AAAE,uIAAA,iBAAiB,OAAA;AAClD,uEAAkE;AAAzD,gIAAA,oBAAoB,OAAA;AAC7B,+CAAwD;AAA/C,oIAAA,OAAO,OAAe;AAC/B,uCAAiD;AAAxC,6HAAA,OAAO,OAAY;AAC5B,mCAA6C;AAApC,yHAAA,OAAO,OAAU;AAC1B,uCAAiD;AAAxC,6HAAA,OAAO,OAAY;AAC5B,iDAA0D;AAAjD,sIAAA,OAAO,OAAgB;AAChC,+CAAwD;AAA/C,oIAAA,OAAO,OAAe;AAC/B,uDAA+D;AAAtD,2IAAA,OAAO,OAAkB;AAClC,mDAA4D;AAAnD,wIAAA,OAAO,OAAiB;AACjC,+DAAuE;AAA9D,mJAAA,OAAO,OAAsB;AACtC,+CAAwD;AAA/C,oIAAA,OAAO,OAAe;AAC/B,sDAA4B;AAC5B,mCAA6C;AAApC,yHAAA,OAAO,OAAU;AAC1B,+DAAuE;AAA9D,mJAAA,OAAO,OAAsB;AACtC,kDAAwB;AACxB,8DAAoC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const select_items_1 = tslib_1.__importDefault(require("../select-items"));
+const select_items_alt_1 = tslib_1.__importDefault(require("../select-items-alt"));
+const IntentScreen = ({ intents, intentsAlt, onSelect, preventWidows, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(select_items_1.default, { items: intents, onSelect: onSelect, preventWidows: preventWidows }), (0, jsx_runtime_1.jsx)(select_items_alt_1.default, { items: intentsAlt, onSelect: onSelect })] }));
+};
+exports.default = IntentScreen;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/intent-screen/index.tsx"],"names":[],"mappings":";;;;AACA,2EAA0D;AAC1D,mFAAoE;AASpE,MAAM,YAAY,GAAG,CAAsB,EAC1C,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,GACD,EAAG,EAAE;IACjB,OAAO,CACN,6DACC,uBAAC,sBAAW,IAAC,KAAK,EAAG,OAAO,EAAG,QAAQ,EAAG,QAAQ,EAAG,aAAa,EAAG,aAAa,GAAK,EACvF,uBAAC,0BAAc,IAAC,KAAK,EAAG,UAAU,EAAG,QAAQ,EAAG,QAAQ,GAAK,IAC3D,CACH,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

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

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mshotsUrl = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const url_1 = require("@wordpress/url");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const debug_1 = tslib_1.__importDefault(require("debug"));
+const react_1 = require("react");
+require("./style.scss");
+const debug = (0, debug_1.default)('design-picker:mshots-image');
+function mshotsUrl(targetUrl, options, count = 0) {
+    const mshotsUrl = 'https://s0.wp.com/mshots/v1/';
+    const mshotsRequest = (0, url_1.addQueryArgs)(mshotsUrl + encodeURIComponent(targetUrl), {
+        ...options,
+        count,
+    });
+    return mshotsRequest;
+}
+exports.mshotsUrl = mshotsUrl;
+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] = (0, react_1.useState)(null);
+    const [count, setCount] = (0, react_1.useState)(0);
+    const previousSrc = (0, react_1.useRef)(src);
+    const timeoutIdRef = (0, react_1.useRef)();
+    const previousImg = (0, react_1.useRef)(null);
+    const previousOptions = (0, react_1.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.
+    (0, react_1.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] = (0, react_1.useState)();
+    const [count, setCount] = (0, react_1.useState)(0);
+    const previousSrc = (0, react_1.useRef)(src);
+    const imgRef = (0, react_1.useRef)();
+    const timeoutIdRef = (0, react_1.useRef)();
+    const previousImg = (0, react_1.useRef)();
+    const previousOptions = (0, react_1.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.
+    (0, react_1.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 = (0, react_1.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 = (0, clsx_1.default)('mshots-image__container', scrollable && 'hover-scroll', visible ? 'mshots-image-visible' : 'mshots-image__loader');
+    if (options?.oldHighResImageLoading) {
+        return scrollable ? ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-labelledby": labelledby, children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: "mshots-dummy-image", "aria-hidden": "true", alt: "" }) })) : ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-labelledby": labelledby, children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, loading: "lazy", className: "mshots-dummy-image", "aria-hidden": "true", alt: "" }) })) : ((0, jsx_runtime_1.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 = (0, clsx_1.default)('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 ? ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-labelledby": labelledby })) : ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(MShotsImageTreatment, { url: url, "aria-labelledby": labelledby, alt: alt, options: options, scrollable: scrollable }));
+    }
+    return ((0, jsx_runtime_1.jsx)(MShotsImageControl, { url: url, "aria-labelledby": labelledby, alt: alt, options: options, scrollable: scrollable }));
+};
+exports.default = MShotsImage;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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/cjs/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/cjs/navigator/hooks/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigatorListener = void 0;
+var use_navigator_listener_1 = require("./use-navigator-listener");
+Object.defineProperty(exports, "useNavigatorListener", { enumerable: true, get: function () { return __importDefault(use_navigator_listener_1).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/hooks/index.tsx"],"names":[],"mappings":";;;AAAA,mEAA2E;AAAlE,+IAAA,OAAO,OAAwB"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const components_1 = require("@wordpress/components");
+const react_1 = require("react");
+const useNavigatorListener = (onNavigatorPathChange) => {
+    const { location } = (0, components_1.__experimentalUseNavigator)();
+    const previousPathRef = (0, react_1.useRef)('');
+    (0, react_1.useEffect)(() => {
+        if (location.path && location.path !== previousPathRef.current) {
+            onNavigatorPathChange?.(location.path);
+            previousPathRef.current = location.path;
+        }
+    }, [location.path, onNavigatorPathChange]);
+};
+exports.default = useNavigatorListener;
+//# sourceMappingURL=use-navigator-listener.js.map

package/dist/cjs/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,sDAAmF;AACnF,iCAA0C;AAI1C,MAAM,oBAAoB,GAAG,CAAE,qBAA6C,EAAG,EAAE;IAChF,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,uCAAY,GAAE,CAAC;IACpC,MAAM,eAAe,GAAG,IAAA,cAAM,EAAE,EAAE,CAAE,CAAC;IAErC,IAAA,iBAAS,EAAE,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,kBAAe,oBAAoB,CAAC"}

package/dist/cjs/navigator/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigatorScreen = exports.NavigatorListener = exports.NavigatorItemGroup = exports.NavigatorHeader = exports.NavigatorItem = exports.NavigatorButtonAsItem = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./hooks"), exports);
+var navigator_buttons_1 = require("./navigator-buttons");
+Object.defineProperty(exports, "NavigatorButtonAsItem", { enumerable: true, get: function () { return navigator_buttons_1.NavigatorButtonAsItem; } });
+Object.defineProperty(exports, "NavigatorItem", { enumerable: true, get: function () { return navigator_buttons_1.NavigatorItem; } });
+var navigator_header_1 = require("./navigator-header");
+Object.defineProperty(exports, "NavigatorHeader", { enumerable: true, get: function () { return tslib_1.__importDefault(navigator_header_1).default; } });
+var navigator_item_group_1 = require("./navigator-item-group");
+Object.defineProperty(exports, "NavigatorItemGroup", { enumerable: true, get: function () { return tslib_1.__importDefault(navigator_item_group_1).default; } });
+var navigator_listener_1 = require("./navigator-listener");
+Object.defineProperty(exports, "NavigatorListener", { enumerable: true, get: function () { return tslib_1.__importDefault(navigator_listener_1).default; } });
+var navigator_screen_1 = require("./navigator-screen");
+Object.defineProperty(exports, "NavigatorScreen", { enumerable: true, get: function () { return tslib_1.__importDefault(navigator_screen_1).default; } });
+tslib_1.__exportStar(require("./navigator-screens"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigator/index.ts"],"names":[],"mappings":";;;;AAAA,kDAAwB;AACxB,yDAA2E;AAAlE,0HAAA,qBAAqB,OAAA;AAAE,kHAAA,aAAa,OAAA;AAC7C,uDAAgE;AAAvD,4IAAA,OAAO,OAAmB;AACnC,+DAAuE;AAA9D,mJAAA,OAAO,OAAsB;AACtC,2DAAoE;AAA3D,gJAAA,OAAO,OAAqB;AACrC,uDAAgE;AAAvD,4IAAA,OAAO,OAAmB;AACnC,8DAAoC"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigatorButtonAsItem = exports.NavigatorItem = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const i18n_1 = require("@wordpress/i18n");
+const icons_1 = require("@wordpress/icons");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+function NavigatorItem({ icon, checked, active, children, ...props }) {
+    const content = icon ? ((0, jsx_runtime_1.jsxs)(components_1.__experimentalHStack, { justify: "flex-start", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { className: "navigator-item__icon", icon: checked ? icons_1.check : icon, size: 24 }), (0, jsx_runtime_1.jsx)(components_1.FlexItem, { className: "navigator-item__text", display: "flex", isBlock: true, children: children })] })) : ((0, jsx_runtime_1.jsx)(components_1.FlexItem, { display: "flex", isBlock: true, children: children }));
+    const forwardIcon = (0, i18n_1.isRTL)() ? icons_1.chevronLeft : icons_1.chevronRight;
+    return ((0, jsx_runtime_1.jsx)(components_1.__experimentalItem, { ...props, className: (0, clsx_1.default)('navigator-item', {
+            'navigator-item--active': active,
+        }), children: (0, jsx_runtime_1.jsxs)(components_1.__experimentalHStack, { justify: "space-between", children: [content, (0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: forwardIcon, size: 24 })] }) }));
+}
+exports.NavigatorItem = NavigatorItem;
+const NavigatorButtonAsItem = ({ ...props }) => {
+    return (0, jsx_runtime_1.jsx)(components_1.__experimentalNavigatorButton, { as: NavigatorItem, ...props });
+};
+exports.NavigatorButtonAsItem = NavigatorButtonAsItem;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,sDAK+B;AAC/B,0CAAwC;AACxC,4CAA0E;AAC1E,wDAAwB;AACxB,wBAAsB;AAetB,SAAgB,aAAa,CAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CACtB,wBAAC,iCAAM,IAAC,OAAO,EAAC,YAAY,aAC3B,uBAAC,YAAI,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAG,OAAO,CAAC,CAAC,CAAC,aAAK,CAAC,CAAC,CAAC,IAAI,EAAG,IAAI,EAAG,EAAE,GAAK,EACrF,uBAAC,qBAAQ,IAAC,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,kBAC9D,QAAQ,GACA,IACH,CACT,CAAC,CAAC,CAAC,CACH,uBAAC,qBAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,kBAC7B,QAAQ,GACA,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,YAAK,GAAE,CAAC,CAAC,CAAC,mBAAW,CAAC,CAAC,CAAC,oBAAY,CAAC;IAEzD,OAAO,CACN,uBAAC,+BAAI,OACC,KAAK,EACV,SAAS,EAAG,IAAA,cAAI,EAAE,gBAAgB,EAAE;YACnC,wBAAwB,EAAE,MAAM;SAChC,CAAE,YAEH,wBAAC,iCAAM,IAAC,OAAO,EAAC,eAAe,aAC5B,OAAO,EACT,uBAAC,YAAI,IAAC,IAAI,EAAG,WAAW,EAAG,IAAI,EAAG,EAAE,GAAK,IACjC,GACH,CACP,CAAC;AACH,CAAC;AA7BD,sCA6BC;AAEM,MAAM,qBAAqB,GAAG,CAAE,EAAE,GAAG,KAAK,EAA8B,EAAG,EAAE;IACnF,OAAO,uBAAC,0CAAe,IAAC,EAAE,EAAG,aAAa,KAAQ,KAAK,GAAK,CAAC;AAC9D,CAAC,CAAC;AAFW,QAAA,qBAAqB,yBAEhC"}

package/dist/cjs/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/cjs/navigator/navigator-header/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const components_2 = require("@wordpress/components");
+const i18n_calypso_1 = require("i18n-calypso");
+require("./style.scss");
+const NavigatorHeader = ({ title, description, hideBack, onBack }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "navigator-header", children: [(0, jsx_runtime_1.jsxs)(components_2.__experimentalHStack, { className: "navigator-header__heading", spacing: 2, justify: "flex-start", children: [!hideBack && ((0, jsx_runtime_1.jsx)(components_2.__experimentalNavigatorBackButton, { as: components_1.Button, title: translate('Back'), borderless: true, "aria-label": translate('Navigate to the previous view'), onClick: onBack, children: (0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "chevron-left", size: 16 }) })), (0, jsx_runtime_1.jsx)("h2", { children: title })] }), description && (0, jsx_runtime_1.jsx)("p", { className: "navigator-header__description", children: description })] }));
+};
+exports.default = NavigatorHeader;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,uDAA0D;AAC1D,sDAG+B;AAC/B,+CAA6D;AAC7D,wBAAsB;AAStB,MAAM,eAAe,GAAG,CAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAS,EAAG,EAAE;IAC7E,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,OAAO,CACN,iCAAK,SAAS,EAAC,kBAAkB,aAChC,wBAAC,iCAAM,IAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAG,CAAC,EAAG,OAAO,EAAC,YAAY,aAC7E,CAAE,QAAQ,IAAI,CACf,uBAAC,8CAAmB,IACnB,EAAE,EAAG,mBAAM,EACX,KAAK,EAAG,SAAS,CAAE,MAAM,CAAE,EAC3B,UAAU,sBACG,SAAS,CAAE,+BAA+B,CAAE,EACzD,OAAO,EAAG,MAAM,YAEhB,uBAAC,qBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAG,EAAE,GAAK,GACvB,CACtB,EACD,yCAAM,KAAK,GAAO,IACV,EACP,WAAW,IAAI,8BAAG,SAAS,EAAC,+BAA+B,YAAG,WAAW,GAAM,IAC5E,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}