@automattic/onboarding 1.0.0 → 1.0.1

package/dist/cjs/setup-tailored-site-after-creation.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupSiteAfterCreation = exports.base64ImageToBlob = void 0;
+exports.base64ImageToBlob = void 0;
+exports.setupSiteAfterCreation = setupSiteAfterCreation;
 const tslib_1 = require("tslib");
 const calypso_analytics_1 = require("@automattic/calypso-analytics");
 const data_stores_1 = require("@automattic/data-stores");
 const data_1 = require("@wordpress/data");
-const wpcom_proxy_request_1 = tslib_1.__importDefault(require("wpcom-proxy-request"));
 const utils_1 = require("./utils");
+const wpcom_request_1 = tslib_1.__importDefault(require("./wpcom-request"));
 const ONBOARD_STORE = data_stores_1.Onboard.register();
+// TODO: This store registration should live somewhere else or just be called more centrally.
 // `client_id` and `client_secret` are only needed when signing up users.
-const SITE_STORE = data_stores_1.Site.register({ client_id: '', client_secret: '' });
+data_stores_1.Site.register({ client_id: '', client_secret: '' });
 const base64ImageToBlob = (base64String) => {
     // extract content type and base64 payload from original string
     const pos = base64String.indexOf(';base64,');
@@ -31,7 +33,6 @@ exports.base64ImageToBlob = base64ImageToBlob;
 function setupSiteAfterCreation({ siteId, flowName }) {
     // const { resetOnboardStore } = dispatch( ONBOARD_STORE );
     const goals = (0, data_1.select)(ONBOARD_STORE).getGoals();
-    const selectedDesign = (0, data_1.select)(ONBOARD_STORE).getSelectedDesign();
     const siteTitle = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteTitle();
     const siteDescription = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteDescription();
     const siteLogo = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteLogo();
@@ -42,28 +43,8 @@ function setupSiteAfterCreation({ siteId, flowName }) {
             blogdescription: siteDescription,
         };
         const promises = [];
-        if ((0, utils_1.isNewsletterOrLinkInBioFlow)(flowName) || (0, utils_1.isFreeFlow)(flowName)) {
-            // link-in-bio and link-in-bio-tld are considered the same intent.
-            if ((0, utils_1.isLinkInBioFlow)(flowName) || (0, utils_1.isFreeFlow)(flowName)) {
-                settings.site_intent = (0, utils_1.isLinkInBioFlow)(flowName) ? utils_1.LINK_IN_BIO_FLOW : utils_1.FREE_FLOW;
-                if (selectedDesign && selectedDesign.is_virtual) {
-                    const { assembleSite } = (0, data_1.dispatch)(SITE_STORE);
-                    promises.push((0, wpcom_proxy_request_1.default)({
-                        path: `/sites/${encodeURIComponent(siteId)}/themes?status=active`,
-                        apiNamespace: 'wp/v2',
-                    }).then((activeThemes) => {
-                        assembleSite(String(siteId), activeThemes[0].stylesheet, {
-                            homeHtml: selectedDesign.recipe?.pattern_html,
-                            headerHtml: selectedDesign.recipe?.header_html,
-                            footerHtml: selectedDesign.recipe?.footer_html,
-                            siteSetupOption: 'assembler-virtual-theme',
-                        });
-                    }));
-                }
-            }
-            else {
-                settings.site_intent = flowName;
-            }
+        if ((0, utils_1.isNewsletterFlow)(flowName)) {
+            settings.site_intent = flowName;
             settings.launchpad_screen = 'full';
         }
         // Newsletter flow sets "paid-newsletter" goal as an indication to setup paid newsletter later on
@@ -77,11 +58,10 @@ function setupSiteAfterCreation({ siteId, flowName }) {
                 new File([(0, exports.base64ImageToBlob)(siteLogo)], 'site-logo.png'),
             ]);
         }
-        promises.push((0, wpcom_proxy_request_1.default)({
+        promises.push((0, wpcom_request_1.default)({
             path: `/sites/${siteId}/onboarding-customization`,
-            method: 'POST',
             apiNamespace: 'wpcom/v2',
-            apiVersion: '2',
+            method: 'POST',
             formData,
         }).then(() => {
             (0, calypso_analytics_1.recordTracksEvent)('calypso_signup_site_options_submit', {
@@ -95,15 +75,7 @@ function setupSiteAfterCreation({ siteId, flowName }) {
              */
             // resetOnboardStore();
         }));
-        if ((0, utils_1.isFreeFlow)(flowName)) {
-            if (siteTitle || siteDescription || siteLogo) {
-                promises.push((0, data_stores_1.updateLaunchpadSettings)(siteId, {
-                    checklist_statuses: { setup_free: true },
-                }));
-            }
-        }
         return Promise.all(promises);
     }
 }
-exports.setupSiteAfterCreation = setupSiteAfterCreation;
 //# sourceMappingURL=setup-tailored-site-after-creation.js.map

package/dist/cjs/setup-tailored-site-after-creation.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup-tailored-site-after-creation.js","sourceRoot":"","sources":["../../src/setup-tailored-site-after-creation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"setup-tailored-site-after-creation.js","sourceRoot":"","sources":["../../src/setup-tailored-site-after-creation.ts"],"names":[],"mappings":"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"}

package/dist/cjs/step-container/index.js

@@ -6,11 +6,9 @@ const components_1 = require("@automattic/components");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const i18n_calypso_1 = require("i18n-calypso");
 const action_buttons_1 = tslib_1.__importDefault(require("../action-buttons"));
-const sensei_logo_1 = tslib_1.__importDefault(require("../sensei-logo"));
 const step_navigation_link_1 = tslib_1.__importDefault(require("../step-navigation-link"));
-const videopress_logo_1 = tslib_1.__importDefault(require("../videopress-logo"));
 require("./style.scss");
-const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, shouldStickyNavButtons, hasStickyNavButtonsPadding, hideBack, backLabelText, hideSkip, skipLabelText, skipButtonAlign = 'top', skipHeadingText, hideNext = true, nextLabelText, formattedHeader, headerImageUrl, headerButton, hideFormattedHeader, className, isHorizontalLayout, isFullLayout, isWideLayout, isExtraWideLayout, isExternalBackUrl, isLargeSkipLayout, customizedActionButtons, goBack, goNext, flowName, intent, stepSectionName, recordTracksEvent, showHeaderJetpackPowered, showHeaderWooCommercePowered, showJetpackPowered, showSenseiPowered, showVideoPressPowered, showFooterWooCommercePowered, }) => {
+const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, hasStickyNavButtonsPadding, hideBack, backLabelText, hideSkip, skipLabelText, skipButtonAlign = 'top', skipHeadingText, hideNext = true, nextLabelText, notice, formattedHeader, headerImageUrl, headerButton, hideFormattedHeader, className, isHorizontalLayout, isFullLayout, isWideLayout, isExtraWideLayout, isExternalBackUrl, isLargeSkipLayout, customizedActionButtons, backUrl, goBack, onSkip, goNext, flowName, intent, stepSectionName, recordTracksEvent, showHeaderJetpackPowered, showJetpackPowered, showFooterWooCommercePowered, }) => {
     const translate = (0, i18n_calypso_1.useTranslate)();
     const recordClick = (direction, stepSectionName) => {
         const tracksProps = {
@@ -26,22 +24,23 @@ const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, shouldStic
             recordTracksEvent('calypso_signup_skip_step', tracksProps);
         }
     };
-    function BackButton() {
+    function renderBackButton() {
         // Hide back button if goBack is falsy, it won't do anything in that case.
-        if (shouldHideNavButtons || !goBack) {
+        if (shouldHideNavButtons || (!goBack && !backUrl)) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "back", handleClick: goBack, label: backLabelText, hasBackIcon: true, rel: isExternalBackUrl ? 'external' : '', recordClick: () => recordClick('back', stepSectionName) }));
+        return ((0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "back", handleClick: goBack, backUrl: backUrl, label: backLabelText, hasBackIcon: true, rel: isExternalBackUrl ? 'external' : '', recordClick: () => recordClick('back', stepSectionName) }));
     }
-    function SkipButton() {
-        if (shouldHideNavButtons || !goNext) {
+    function renderSkipButton() {
+        const skipAction = onSkip ?? goNext;
+        if (shouldHideNavButtons || !skipAction) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__skip-wrapper", children: [skipHeadingText && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__skip-heading", children: skipHeadingText })), (0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "forward", handleClick: goNext, label: skipLabelText, cssClass: (0, clsx_1.default)('step-container__navigation-link', 'has-underline', {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__skip-wrapper", children: [skipHeadingText && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__skip-heading", children: skipHeadingText })), (0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "forward", handleClick: skipAction, label: skipLabelText, cssClass: (0, clsx_1.default)('step-container__navigation-link', 'has-underline', {
                         'has-skip-heading': skipHeadingText,
                     }), borderless: true, recordClick: () => recordClick('forward') })] }));
     }
-    function NextButton() {
+    function renderNextButton() {
         if (shouldHideNavButtons || !goNext) {
             return null;
         }
@@ -57,9 +56,8 @@ const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, shouldStic
     });
     return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsxs)(action_buttons_1.default, { className: (0, clsx_1.default)('step-container__navigation', {
                     'should-hide-nav-buttons': shouldHideNavButtons,
-                    'should-sticky-nav-buttons': shouldStickyNavButtons,
                     'has-sticky-nav-buttons-padding': hasStickyNavButtonsPadding,
-                }), children: [shouldStickyNavButtons && ((0, jsx_runtime_1.jsx)(components_1.WordPressLogo, { className: "step-container__navigation-logo", size: 24 })), !hideBack && (0, jsx_runtime_1.jsx)(BackButton, {}), !hideSkip && skipButtonAlign === 'top' && (0, jsx_runtime_1.jsx)(SkipButton, {}), !hideNext && (0, jsx_runtime_1.jsx)(NextButton, {}), customizedActionButtons] }), !hideFormattedHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header", children: [formattedHeader, headerImageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__header-image", children: (0, jsx_runtime_1.jsx)("img", { src: headerImageUrl, alt: "" }) })), headerButton && (0, jsx_runtime_1.jsx)("div", { className: "step-container__header-button", children: headerButton }), showHeaderJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header-jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] })), showHeaderWooCommercePowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header-woocommerce-powered", children: [(0, jsx_runtime_1.jsx)(components_1.WooCommerceWooLogo, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('WooCommerce powered') })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "step-container__content", children: stepContent }), !hideSkip && skipButtonAlign === 'bottom' && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__buttons", children: [isLargeSkipLayout && (0, jsx_runtime_1.jsx)("hr", { className: "step-container__skip-hr" }), (0, jsx_runtime_1.jsx)(SkipButton, {})] })), showJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] })), showFooterWooCommercePowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__woocommerce-powered", children: [(0, jsx_runtime_1.jsx)(components_1.WooCommerceWooLogo, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('WooCommerce powered') })] })), showSenseiPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__sensei-powered", children: [(0, jsx_runtime_1.jsx)(sensei_logo_1.default, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Powered by Sensei') })] })), showVideoPressPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__videopress-powered", children: [(0, jsx_runtime_1.jsx)(videopress_logo_1.default, { size: 24 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Powered by VideoPress') })] }))] }));
+                }), children: [!hideBack && renderBackButton(), !hideSkip && skipButtonAlign === 'top' && renderSkipButton(), !hideNext && renderNextButton(), customizedActionButtons] }), !hideFormattedHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header", children: [notice, formattedHeader, headerImageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__header-image", children: (0, jsx_runtime_1.jsx)("img", { src: headerImageUrl, alt: "" }) })), headerButton && (0, jsx_runtime_1.jsx)("div", { className: "step-container__header-button", children: headerButton }), showHeaderJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header-jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "step-container__content", children: stepContent }), !hideSkip && skipButtonAlign === 'bottom' && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__buttons", children: [isLargeSkipLayout && (0, jsx_runtime_1.jsx)("hr", { className: "step-container__skip-hr" }), renderSkipButton()] })), showJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] })), showFooterWooCommercePowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__woocommerce-powered", children: [(0, jsx_runtime_1.jsx)(components_1.WooCommerceWooLogo, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('WooCommerce powered') })] }))] }));
 };
 exports.default = StepContainer;
 //# sourceMappingURL=index.js.map

package/dist/cjs/step-container/index.js.map

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

package/dist/cjs/step-container/style.scss

@@ -1,6 +1,6 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
-@import "../../styles/mixins.scss";
+@import "../../styles/mixins";
 
 /**
  *	General
@@ -41,6 +41,12 @@
 				padding-inline-end: 20px;
 			}
 		}
+
+		@include break-xlarge {
+			.step-container__header .formatted-header {
+				margin-top: 0;
+			}
+		}
 	}
 
 	.step-container__buttons {
@@ -71,44 +77,34 @@
 	 *	Header
 	 */
 	.step-container__header {
-		margin-bottom: 32px;
-		margin-top: 0;
+		margin-top: 32px;
+		margin-bottom: 48px;
 		display: block;
 		justify-content: space-between;
 		align-items: center;
 
 		.formatted-header {
 			margin: 0;
-			flex-grow: 1;
+
+			@include break-xlarge {
+				margin-top: 88px; // 56px + 32px
+			}
 
 			.formatted-header__title {
-				@include onboarding-font-recoleta;
-				color: var(--studio-gray-100);
-				letter-spacing: 0.2px;
-				font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
-				font-weight: 400;
-				padding: 0;
 				margin: 0;
 
+				@include onboarding-font-recoleta;
+				color: var(--color-neutral-100);
+				font-size: 2rem;
+
 				@include break-xlarge {
 					font-size: 2.75rem;
 				}
 			}
 
 			.formatted-header__subtitle {
-				padding: 0;
-				text-align: start;
-				color: var(--studio-gray-60);
-				font-size: 1rem;
-				margin-top: 16px;
-				line-height: 24px;
-
-				&.is-center-align {
-					text-align: center;
-				}
-
-				@include break-small {
-					margin-top: 8px;
+				@include break-xlarge {
+					font-size: 1rem;
 				}
 			}
 		}
@@ -133,11 +129,6 @@
 				}
 			}
 		}
-
-		@include break-small {
-			flex-wrap: wrap;
-			margin-top: 24px;
-		}
 	}
 
 	/**
@@ -150,21 +141,28 @@
 		}
 	}
 	.step-container__navigation.action-buttons {
-		background-color: $white;
 		height: 60px;
 		align-items: center;
 		justify-content: space-between;
 		display: flex;
 		font-size: 0.875rem;
-		position: fixed;
-		z-index: 30;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
 		bottom: 0;
-		padding: 0 20px;
 		margin: 0;
 		border-top: none;
-		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		position: absolute;
+		top: 8px;
+		inset-inline-start: 72px;
+		inset-inline-end: 24px;
+		// Align with wordpress logo in signup-header
+		padding: 1px 0 0;
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+
+		&.has-sticky-nav-buttons-padding {
+			padding-bottom: 48px;
+		}
 
 		&:empty {
 			display: none;
@@ -215,31 +213,6 @@
 				display: block;
 			}
 		}
-
-		@include break-small {
-			position: absolute;
-			top: 8px;
-			inset-inline-start: 72px;
-			inset-inline-end: 24px;
-			// Align with wordpress logo in signup-header
-			padding: 1px 0 0;
-			background-color: transparent;
-			border: none;
-			box-shadow: none;
-
-			&.should-sticky-nav-buttons {
-				position: fixed;
-				inset-inline-start: 0;
-				inset-inline-end: 0;
-				padding-inline-start: 24px;
-				padding-inline-end: 24px;
-				background-color: $white;
-			}
-
-			&.has-sticky-nav-buttons-padding {
-				padding-bottom: 48px;
-			}
-		}
 	}
 
 	/**
@@ -248,22 +221,15 @@
 	.step-container__content {
 		margin-top: 0;
 		display: block;
-		min-height: 65vh;
-
-		@supports ( min-height: 65svh ) {
-			min-height: calc(65svh - 50px);
-		}
 	}
 
 	/**
-	 * Jetpack, Sensei and VideoPress Powered
+	 * Jetpack and WooCommerce Powered
 	 */
 	.step-container__jetpack-powered,
 	.step-container__header-jetpack-powered,
 	.step-container__woocommerce-powered,
-	.step-container__header-woocommerce-powered,
-	.step-container__sensei-powered,
-	.step-container__videopress-powered {
+	.step-container__header-woocommerce-powered {
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -293,12 +259,4 @@
 			visibility: visible;
 		}
 	}
-
-	.step-container__sensei-powered {
-		padding-bottom: 24px;
-
-		svg {
-			margin-inline-end: 8px;
-		}
-	}
 }

package/dist/cjs/step-container-v2/components/ContentRow/ContentRow.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentRow = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const ContentRow = ({ children, columns = 12, className, stretched, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('step-container-v2__content-row', className, {
+            stretched,
+        }), style: { '--columns': columns }, children: children }));
+};
+exports.ContentRow = ContentRow;
+//# sourceMappingURL=ContentRow.js.map

package/dist/cjs/step-container-v2/components/ContentRow/ContentRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentRow.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/ContentRow/ContentRow.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AAGxB,wBAAsB;AAEf,MAAM,UAAU,GAAG,CAAE,EAC3B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,SAAS,GAMT,EAAG,EAAE;IACL,OAAO,CACN,gCACC,SAAS,EAAG,IAAA,cAAI,EAAE,gCAAgC,EAAE,SAAS,EAAE;YAC9D,SAAS;SACT,CAAE,EACH,KAAK,EAAG,EAAE,WAAW,EAAE,OAAO,EAAmB,YAE/C,QAAQ,GACL,CACN,CAAC;AACH,CAAC,CAAC;AArBW,QAAA,UAAU,cAqBrB"}

package/dist/cjs/step-container-v2/components/ContentRow/style.scss

@@ -0,0 +1,26 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__content-row {
+	width: 100%;
+	max-width: 100%;
+
+	@include break-small {
+		--total-column-width: calc(
+			var( --columns ) * var( --step-container-v2-content-column-width )
+		);
+		--total-gap-width: calc(
+			( var( --columns ) - 1 ) * var( --step-container-v2-content-column-gap )
+		);
+
+		--step-container-v2-content-row-max-width: calc(
+			var( --total-gap-width ) + var( --total-column-width )
+		);
+
+		max-width: var( --step-container-v2-content-row-max-width );
+	}
+
+	&.stretched {
+		align-self: stretch;
+	}
+}

package/dist/cjs/step-container-v2/components/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const ContentWrapper = ({ children, centerAligned, axisDirection = 'vertical', noTopPadding = false, noBottomPadding = false, noInlinePadding = false, isFullWidth = false, noGap = false, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('step-container-v2__content-wrapper', `axis-${axisDirection}`, {
+            'center-aligned': centerAligned,
+            'no-top-padding': noTopPadding,
+            'no-bottom-padding': noBottomPadding,
+            'no-inline-padding': noInlinePadding,
+            'is-full-width': isFullWidth,
+            'no-gap': noGap,
+        }), children: children }));
+};
+exports.ContentWrapper = ContentWrapper;
+//# sourceMappingURL=ContentWrapper.js.map

package/dist/cjs/step-container-v2/components/ContentWrapper/ContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWrapper.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/ContentWrapper/ContentWrapper.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AAGxB,wBAAsB;AAaf,MAAM,cAAc,GAAG,CAAE,EAC/B,QAAQ,EACR,aAAa,EACb,aAAa,GAAG,UAAU,EAC1B,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,KAAK,EACvB,eAAe,GAAG,KAAK,EACvB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,GACQ,EAAG,EAAE;IAC1B,OAAO,CACN,gCACC,SAAS,EAAG,IAAA,cAAI,EAAE,oCAAoC,EAAE,QAAS,aAAc,EAAE,EAAE;YAClF,gBAAgB,EAAE,aAAa;YAC/B,gBAAgB,EAAE,YAAY;YAC9B,mBAAmB,EAAE,eAAe;YACpC,mBAAmB,EAAE,eAAe;YACpC,eAAe,EAAE,WAAW;YAC5B,QAAQ,EAAE,KAAK;SACf,CAAE,YAED,QAAQ,GACL,CACN,CAAC;AACH,CAAC,CAAC;AAxBW,QAAA,cAAc,kBAwBzB"}

package/dist/cjs/step-container-v2/components/ContentWrapper/style.scss

@@ -0,0 +1,70 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__content-wrapper {
+	display: flex;
+	align-items: center;
+	gap: 3rem;
+	width: 100%;
+	box-sizing: border-box;
+	flex: 1;
+
+	&.axis-vertical {
+		flex-direction: column;
+	}
+
+	&.axis-horizontal {
+		flex-direction: row;
+	}
+
+	padding: var( --step-container-v2-content-block-padding )
+		var( --step-container-v2-content-inline-padding );
+
+	&.no-top-padding {
+		padding-top: 0;
+	}
+
+	&.no-bottom-padding {
+		padding-bottom: 0;
+	}
+
+	&.no-inline-padding {
+		padding: 0;
+	}
+
+	&.no-gap {
+		gap: 0;
+	}
+
+	--step-container-v2-content-max-width: 1344px;
+
+	max-width: calc(
+		var( --step-container-v2-content-max-width ) + 2 *
+			var( --step-container-v2-content-inline-padding )
+	);
+
+	--step-container-v2-content-column-gap: 24px;
+
+	--step-container-v2-content-max-width-minus-column-gaps: calc(
+		var( --step-container-v2-content-max-width ) - 11 *
+			var( --step-container-v2-content-column-gap )
+	);
+
+	--step-container-v2-content-column-width: calc(
+		var( --step-container-v2-content-max-width-minus-column-gaps ) / 12
+	);
+
+	&.center-aligned {
+		@include break-small {
+			justify-content: center;
+			padding-bottom: calc(
+				var( --step-container-v2-content-block-padding ) + var( --step-container-v2-top-bar-height )
+			);
+		}
+	}
+
+	&.is-full-width {
+		--step-container-v2-content-max-width: 100%;
+		max-width: 100%;
+	}
+}

package/dist/cjs/step-container-v2/components/Heading/Heading.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const Heading = ({ text, subText, align, size }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('step-container-v2__heading', {
+            left: align === 'left',
+            center: align === 'center',
+        }), children: [(0, jsx_runtime_1.jsx)("h1", { className: (0, clsx_1.default)('wp-brand-font', {
+                    small: size === 'small',
+                }), children: text }), subText && (0, jsx_runtime_1.jsx)("p", { children: subText })] }));
+};
+exports.Heading = Heading;
+//# sourceMappingURL=Heading.js.map

package/dist/cjs/step-container-v2/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/Heading/Heading.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AAGxB,wBAAsB;AASf,MAAM,OAAO,GAAG,CAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAgB,EAAG,EAAE;IACzE,OAAO,CACN,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,4BAA4B,EAAE;YAC/C,IAAI,EAAE,KAAK,KAAK,MAAM;YACtB,MAAM,EAAE,KAAK,KAAK,QAAQ;SAC1B,CAAE,aAEH,+BACC,SAAS,EAAG,IAAA,cAAI,EAAE,eAAe,EAAE;oBAClC,KAAK,EAAE,IAAI,KAAK,OAAO;iBACvB,CAAE,YAED,IAAI,GACF,EACH,OAAO,IAAI,wCAAK,OAAO,GAAM,IAC1B,CACN,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,OAAO,WAkBlB"}

package/dist/cjs/step-container-v2/components/Heading/style.scss

@@ -0,0 +1,47 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+@import "@automattic/typography/styles/fonts";
+
+.step-container-v2__heading {
+	width: 100%;
+	text-wrap: balance;
+
+	@include break-small {
+		text-align: center;
+	}
+
+	h1 {
+		margin-block: 0;
+		color: var( --color-neutral-100 );
+		font-size: 2rem;
+		line-height: 1.25;
+		text-wrap: balance;
+
+		&:not( .small ) {
+			@include break-large {
+				font-size: 2.75rem;
+				line-height: 1.15;
+			}
+		}
+	}
+
+	p {
+		margin-block: 0.5rem 0;
+		color: var( --color-text );
+		font-size: 0.875rem;
+		line-height: 1.5;
+		text-wrap: balance;
+
+		@include break-large {
+			font-size: 1rem;
+		}
+	}
+
+	&.left {
+		text-align: left !important;
+	}
+
+	&.center {
+		text-align: center !important;
+	}
+}

package/dist/cjs/step-container-v2/components/StepContainerV2/StepContainerV2.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepContainerV2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const compose_1 = require("@wordpress/compose");
+const react_1 = require("react");
+const context_1 = require("./context");
+require("./style.scss");
+const StepContainerV2 = ({ children, initialTopBarHeight, }) => {
+    const isSmallViewport = (0, compose_1.useViewportMatch)('small', '>=');
+    const isLargeViewport = (0, compose_1.useViewportMatch)('large', '>=');
+    const [topBarHeight, setTopBarHeight] = (0, react_1.useState)(initialTopBarHeight ?? '0px');
+    const [stickyBottomBarHeight, setStickyBottomBarHeight] = (0, react_1.useState)(0);
+    const stepContainerContextValue = (0, react_1.useMemo)(() => ({
+        isSmallViewport,
+        isLargeViewport,
+        topBarHeight,
+        setTopBarHeight,
+        stickyBottomBarHeight,
+        setStickyBottomBarHeight,
+    }), [
+        isSmallViewport,
+        isLargeViewport,
+        topBarHeight,
+        setTopBarHeight,
+        stickyBottomBarHeight,
+        setStickyBottomBarHeight,
+    ]);
+    const content = typeof children === 'function' ? children(stepContainerContextValue) : children;
+    return ((0, jsx_runtime_1.jsx)(context_1.StepContainerV2Context.Provider, { value: stepContainerContextValue, children: (0, jsx_runtime_1.jsx)("div", { className: "step-container-v2", style: {
+                '--step-container-v2-top-bar-height': topBarHeight,
+                '--step-container-v2-sticky-bottom-bar-height': `${stickyBottomBarHeight}px`,
+            }, children: content }) }));
+};
+exports.StepContainerV2 = StepContainerV2;
+//# sourceMappingURL=StepContainerV2.js.map

package/dist/cjs/step-container-v2/components/StepContainerV2/StepContainerV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepContainerV2.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/StepContainerV2/StepContainerV2.tsx"],"names":[],"mappings":";;;;AAAA,gDAAsD;AACtD,iCAA0C;AAC1C,uCAAgE;AAChE,wBAAsB;AAEf,MAAM,eAAe,GAAG,CAAE,EAChC,QAAQ,EACR,mBAAmB,GAInB,EAAG,EAAE;IACL,MAAM,eAAe,GAAG,IAAA,0BAAgB,EAAE,OAAO,EAAE,IAAI,CAAE,CAAC;IAC1D,MAAM,eAAe,GAAG,IAAA,0BAAgB,EAAE,OAAO,EAAE,IAAI,CAAE,CAAC;IAE1D,MAAM,CAAE,YAAY,EAAE,eAAe,CAAE,GAAG,IAAA,gBAAQ,EAAE,mBAAmB,IAAI,KAAK,CAAE,CAAC;IACnF,MAAM,CAAE,qBAAqB,EAAE,wBAAwB,CAAE,GAAG,IAAA,gBAAQ,EAAE,CAAC,CAAE,CAAC;IAE1E,MAAM,yBAAyB,GAAG,IAAA,eAAO,EACxC,GAAG,EAAE,CAAC,CAAE;QACP,eAAe;QACf,eAAe;QACf,YAAY;QACZ,eAAe;QACf,qBAAqB;QACrB,wBAAwB;KACxB,CAAE,EACH;QACC,eAAe;QACf,eAAe;QACf,YAAY;QACZ,eAAe;QACf,qBAAqB;QACrB,wBAAwB;KACxB,CACD,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAE,yBAAyB,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAElG,OAAO,CACN,uBAAC,gCAAsB,CAAC,QAAQ,IAAC,KAAK,EAAG,yBAAyB,YACjE,gCACC,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EACJ;gBACC,oCAAoC,EAAE,YAAY;gBAClD,8CAA8C,EAAE,GAAI,qBAAsB,IAAI;aACvD,YAGvB,OAAO,GACJ,GAC2B,CAClC,CAAC;AACH,CAAC,CAAC;AAjDW,QAAA,eAAe,mBAiD1B"}

package/dist/cjs/step-container-v2/components/StepContainerV2/context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepContainerV2Context = void 0;
+const react_1 = require("react");
+exports.StepContainerV2Context = (0, react_1.createContext)({
+    isSmallViewport: false,
+    isLargeViewport: false,
+    topBarHeight: '0px',
+    setTopBarHeight: () => { },
+    stickyBottomBarHeight: 0,
+    setStickyBottomBarHeight: () => { },
+});
+//# sourceMappingURL=context.js.map