@automattic/onboarding 1.0.0 → 1.0.1

package/dist/esm/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/esm/step-container-v2/components/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import './style.scss';
+export const ContentWrapper = ({ children, centerAligned, axisDirection = 'vertical', noTopPadding = false, noBottomPadding = false, noInlinePadding = false, isFullWidth = false, noGap = false, }) => {
+    return (_jsx("div", { className: clsx('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 }));
+};
+//# sourceMappingURL=ContentWrapper.js.map

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,cAAc,CAAC;AAatB,MAAM,CAAC,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,cACC,SAAS,EAAG,IAAI,CAAE,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"}

package/dist/esm/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/esm/step-container-v2/components/Heading/Heading.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import './style.scss';
+export const Heading = ({ text, subText, align, size }) => {
+    return (_jsxs("div", { className: clsx('step-container-v2__heading', {
+            left: align === 'left',
+            center: align === 'center',
+        }), children: [_jsx("h1", { className: clsx('wp-brand-font', {
+                    small: size === 'small',
+                }), children: text }), subText && _jsx("p", { children: subText })] }));
+};
+//# sourceMappingURL=Heading.js.map

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,cAAc,CAAC;AAStB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAgB,EAAG,EAAE;IACzE,OAAO,CACN,eACC,SAAS,EAAG,IAAI,CAAE,4BAA4B,EAAE;YAC/C,IAAI,EAAE,KAAK,KAAK,MAAM;YACtB,MAAM,EAAE,KAAK,KAAK,QAAQ;SAC1B,CAAE,aAEH,aACC,SAAS,EAAG,IAAI,CAAE,eAAe,EAAE;oBAClC,KAAK,EAAE,IAAI,KAAK,OAAO;iBACvB,CAAE,YAED,IAAI,GACF,EACH,OAAO,IAAI,sBAAK,OAAO,GAAM,IAC1B,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/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/esm/step-container-v2/components/StepContainerV2/StepContainerV2.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useViewportMatch } from '@wordpress/compose';
+import { useMemo, useState } from 'react';
+import { StepContainerV2Context } from './context';
+import './style.scss';
+export const StepContainerV2 = ({ children, initialTopBarHeight, }) => {
+    const isSmallViewport = useViewportMatch('small', '>=');
+    const isLargeViewport = useViewportMatch('large', '>=');
+    const [topBarHeight, setTopBarHeight] = useState(initialTopBarHeight ?? '0px');
+    const [stickyBottomBarHeight, setStickyBottomBarHeight] = useState(0);
+    const stepContainerContextValue = useMemo(() => ({
+        isSmallViewport,
+        isLargeViewport,
+        topBarHeight,
+        setTopBarHeight,
+        stickyBottomBarHeight,
+        setStickyBottomBarHeight,
+    }), [
+        isSmallViewport,
+        isLargeViewport,
+        topBarHeight,
+        setTopBarHeight,
+        stickyBottomBarHeight,
+        setStickyBottomBarHeight,
+    ]);
+    const content = typeof children === 'function' ? children(stepContainerContextValue) : children;
+    return (_jsx(StepContainerV2Context.Provider, { value: stepContainerContextValue, children: _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 }) }));
+};
+//# sourceMappingURL=StepContainerV2.js.map

package/dist/esm/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,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAe,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAE,EAChC,QAAQ,EACR,mBAAmB,GAInB,EAAG,EAAE;IACL,MAAM,eAAe,GAAG,gBAAgB,CAAE,OAAO,EAAE,IAAI,CAAE,CAAC;IAC1D,MAAM,eAAe,GAAG,gBAAgB,CAAE,OAAO,EAAE,IAAI,CAAE,CAAC;IAE1D,MAAM,CAAE,YAAY,EAAE,eAAe,CAAE,GAAG,QAAQ,CAAE,mBAAmB,IAAI,KAAK,CAAE,CAAC;IACnF,MAAM,CAAE,qBAAqB,EAAE,wBAAwB,CAAE,GAAG,QAAQ,CAAE,CAAC,CAAE,CAAC;IAE1E,MAAM,yBAAyB,GAAG,OAAO,CACxC,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,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAG,yBAAyB,YACjE,cACC,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"}

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

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export const StepContainerV2Context = createContext({
+    isSmallViewport: false,
+    isLargeViewport: false,
+    topBarHeight: '0px',
+    setTopBarHeight: () => { },
+    stickyBottomBarHeight: 0,
+    setStickyBottomBarHeight: () => { },
+});
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/StepContainerV2/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAiBjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAwC;IAC1F,eAAe,EAAE,KAAK;IACtB,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IACzB,qBAAqB,EAAE,CAAC;IACxB,wBAAwB,EAAE,GAAG,EAAE,GAAE,CAAC;CAClC,CAAE,CAAC"}

package/dist/esm/step-container-v2/components/StepContainerV2/style.scss

@@ -0,0 +1,21 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2 {
+	--step-container-v2-content-block-padding: 2rem;
+	--step-container-v2-content-inline-padding: 1rem;
+
+	--step-container-v2-top-bar-padding: 1rem;
+	--step-container-v2-top-bar-content-height: 24px;
+
+	@include break-small {
+		--step-container-v2-content-inline-padding: 3rem;
+	}
+
+	width: 100%;
+	min-height: 100vh;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}

package/dist/esm/step-container-v2/components/StepCounter/StepCounter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sprintf } from '@wordpress/i18n';
+import { useI18n } from '@wordpress/react-i18n';
+import './style.scss';
+export const StepCounter = ({ current, total }) => {
+    const { __ } = useI18n();
+    return (_jsx("span", { className: "step-container-v2__step-counter", "aria-label": sprintf(
+        /* translators: 1: current step number, 2: total number of steps. */
+        __('Step %1$d of %2$d', __i18n_text_domain__), current, total), children: sprintf(
+        /* translators: 1: current step number, 2: total number of steps. */
+        __('%1$d of %2$d', __i18n_text_domain__), current, total) }));
+};
+//# sourceMappingURL=StepCounter.js.map

package/dist/esm/step-container-v2/components/StepCounter/StepCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepCounter.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/StepCounter/StepCounter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,cAAc,CAAC;AAOtB,MAAM,CAAC,MAAM,WAAW,GAAG,CAAE,EAAE,OAAO,EAAE,KAAK,EAAoB,EAAG,EAAE;IACrE,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC;IAEzB,OAAO,CACN,eACC,SAAS,EAAC,iCAAiC,gBAC9B,OAAO;QACnB,oEAAoE;QACpE,EAAE,CAAE,mBAAmB,EAAE,oBAAoB,CAAE,EAC/C,OAAO,EACP,KAAK,CACL,YAEC,OAAO;QACR,oEAAoE;QACpE,EAAE,CAAE,cAAc,EAAE,oBAAoB,CAAE,EAC1C,OAAO,EACP,KAAK,CACL,GACK,CACP,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/StepCounter/style.scss

@@ -0,0 +1,4 @@
+.step-container-v2__step-counter {
+	color: var( --color-text-subtle );
+	white-space: nowrap;
+}

package/dist/esm/step-container-v2/components/StickyBottomBar/StickyBottomBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import './style.scss';
+export const StickyBottomBar = ({ leftElement, centerElement, rightElement, noBoxShadow, hasTransparentBackground, centerText, fullWidth, }) => {
+    return (_jsxs("div", { className: clsx('step-container-v2__sticky-bottom-bar', {
+            'step-container-v2__sticky-bottom-bar--no-box-shadow': noBoxShadow === true,
+            'step-container-v2__sticky-bottom-bar--center-text': centerText === true,
+            'step-container-v2__sticky-bottom-bar--full-width': fullWidth === true,
+            'step-container-v2__sticky-bottom-bar--has-transparent-background': hasTransparentBackground === true,
+        }), children: [leftElement && (_jsx("div", { className: "step-container-v2__sticky-bottom-bar-left-element", children: leftElement })), centerElement && (_jsx("div", { className: "step-container-v2__sticky-bottom-bar-center-element", children: centerElement })), rightElement && (_jsx("div", { className: "step-container-v2__sticky-bottom-bar-right-element", children: rightElement }))] }));
+};
+//# sourceMappingURL=StickyBottomBar.js.map

package/dist/esm/step-container-v2/components/StickyBottomBar/StickyBottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyBottomBar.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/StickyBottomBar/StickyBottomBar.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,cAAc,CAAC;AAYtB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAE,EAChC,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,wBAAwB,EACxB,UAAU,EACV,SAAS,GACa,EAAG,EAAE;IAC3B,OAAO,CACN,eACC,SAAS,EAAG,IAAI,CAAE,sCAAsC,EAAE;YACzD,qDAAqD,EAAE,WAAW,KAAK,IAAI;YAC3E,mDAAmD,EAAE,UAAU,KAAK,IAAI;YACxE,kDAAkD,EAAE,SAAS,KAAK,IAAI;YACtE,kEAAkE,EACjE,wBAAwB,KAAK,IAAI;SAClC,CAAE,aAED,WAAW,IAAI,CAChB,cAAK,SAAS,EAAC,mDAAmD,YAAG,WAAW,GAAQ,CACxF,EACC,aAAa,IAAI,CAClB,cAAK,SAAS,EAAC,qDAAqD,YAAG,aAAa,GAAQ,CAC5F,EACC,YAAY,IAAI,CACjB,cAAK,SAAS,EAAC,oDAAoD,YAAG,YAAY,GAAQ,CAC1F,IACI,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/StickyBottomBar/StickyBottomBarRenderer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useRef, useLayoutEffect } from 'react';
+import { StepContainerV2Context } from '../StepContainerV2/context';
+export const StickyBottomBarRenderer = ({ stickyBottomBar, }) => {
+    const context = useContext(StepContainerV2Context);
+    const { setStickyBottomBarHeight } = context;
+    const stickyBottomBarRef = useRef(null);
+    useLayoutEffect(() => {
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            if (entry) {
+                setStickyBottomBarHeight(entry.contentRect.height);
+            }
+        });
+        if (stickyBottomBarRef.current) {
+            setStickyBottomBarHeight(stickyBottomBarRef.current.clientHeight);
+            resizeObserver.observe(stickyBottomBarRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [setStickyBottomBarHeight]);
+    const content = typeof stickyBottomBar === 'function'
+        ? stickyBottomBar(context)
+        : !context.isSmallViewport && stickyBottomBar;
+    return (_jsx("div", { className: "step-container-v2__sticky-bottom-bar-wrapper", ref: stickyBottomBarRef, children: content }));
+};
+//# sourceMappingURL=StickyBottomBarRenderer.js.map

package/dist/esm/step-container-v2/components/StickyBottomBar/StickyBottomBarRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyBottomBarRenderer.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/StickyBottomBar/StickyBottomBarRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAe,MAAM,4BAA4B,CAAC;AAEjF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAE,EACxC,eAAe,GAGf,EAAG,EAAE;IACL,MAAM,OAAO,GAAG,UAAU,CAAE,sBAAsB,CAAE,CAAC;IACrD,MAAM,EAAE,wBAAwB,EAAE,GAAG,OAAO,CAAC;IAE7C,MAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IAE5D,eAAe,CAAE,GAAG,EAAE;QACrB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAE,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YAC1D,IAAK,KAAK,EAAG,CAAC;gBACb,wBAAwB,CAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAE,CAAC;YACtD,CAAC;QACF,CAAC,CAAE,CAAC;QAEJ,IAAK,kBAAkB,CAAC,OAAO,EAAG,CAAC;YAClC,wBAAwB,CAAE,kBAAkB,CAAC,OAAO,CAAC,YAAY,CAAE,CAAC;YACpE,cAAc,CAAC,OAAO,CAAE,kBAAkB,CAAC,OAAO,CAAE,CAAC;QACtD,CAAC;QAED,OAAO,GAAG,EAAE;YACX,cAAc,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC,CAAC;IACH,CAAC,EAAE,CAAE,wBAAwB,CAAE,CAAE,CAAC;IAElC,MAAM,OAAO,GACZ,OAAO,eAAe,KAAK,UAAU;QACpC,CAAC,CAAC,eAAe,CAAE,OAAO,CAAE;QAC5B,CAAC,CAAC,CAAE,OAAO,CAAC,eAAe,IAAI,eAAe,CAAC;IAEjD,OAAO,CACN,cAAK,SAAS,EAAC,8CAA8C,EAAC,GAAG,EAAG,kBAAkB,YACnF,OAAO,GACJ,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/StickyBottomBar/style.scss

@@ -0,0 +1,56 @@
+.step-container-v2__sticky-bottom-bar {
+	&-wrapper {
+		position: sticky;
+		bottom: 0;
+		width: 100%;
+	}
+
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	box-sizing: border-box;
+	align-items: center;
+	box-shadow: var( --color-border-subtle ) 0 1px 0 inset;
+	background-color: var( --color-surface );
+
+	&--no-box-shadow {
+		box-shadow: none;
+	}
+
+	&--has-transparent-background {
+		background-color: transparent;
+	}
+
+	&--center-text {
+		text-align: center;
+	}
+
+	&-left-element,
+	&-center-element,
+	&-right-element {
+		margin-block: 1rem;
+	}
+
+	&-left-element {
+		margin-left: 1rem;
+		margin-right: auto;
+	}
+
+	&-center-element {
+		margin-inline: 2rem;
+		min-width: 0;
+	}
+
+	&-right-element {
+		margin-left: auto;
+		margin-right: 1rem;
+	}
+
+	&--full-width {
+		.step-container-v2__sticky-bottom-bar-left-element,
+		.step-container-v2__sticky-bottom-bar-center-element,
+		.step-container-v2__sticky-bottom-bar-right-element {
+			flex-grow: 1;
+		}
+	}
+}

package/dist/esm/step-container-v2/components/TopBar/TopBar.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WordPressLogo, WordPressWordmark } from '@automattic/components';
+import clsx from 'clsx';
+import { isValidElement, useLayoutEffect, useRef } from 'react';
+import { useStepContainerV2Context } from '../../contexts/StepContainerV2Context';
+import './style.scss';
+export const TopBar = ({ leftElement, rightElement, logo, compactLogo, hideLogo = false, }) => {
+    const context = useStepContainerV2Context();
+    const topBarRef = useRef(null);
+    // Publish the rendered height to `:root --masterbar-height` so consumers that
+    // expect "the current route's top bar height" (e.g. the Help Center mobile
+    // sheet, layout sidebars) get the right value. Without this, routes that
+    // render `Step.TopBar` but also force `<EmptyMasterbar />` (e.g. checkout
+    // invoked from a stepper-v2 flow) report `--masterbar-height: 0`, leaving the
+    // overlay misaligned. Uses `!important` to beat EmptyMasterbar's stylesheet,
+    // and runs before paint so first-frame consumers don't see the stale value.
+    useLayoutEffect(() => {
+        const element = topBarRef.current;
+        if (!element) {
+            return;
+        }
+        const root = document.documentElement;
+        const publishHeight = () => {
+            const height = Math.round(element.getBoundingClientRect().height);
+            root.style.setProperty('--masterbar-height', `${height}px`, 'important');
+        };
+        publishHeight();
+        let observer;
+        if (typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(publishHeight);
+            observer.observe(element);
+        }
+        return () => {
+            observer?.disconnect();
+            root.style.removeProperty('--masterbar-height');
+        };
+    }, []);
+    // Context logo takes precedence over default WordPress logo.
+    // The `logo` prop provides an explicit override for both.
+    const defaultWordPressLogo = (_jsxs("div", { className: clsx('step-container-v2__top-bar-wordpress-logo-wrapper', {
+            'is-compact': compactLogo,
+        }), children: [!compactLogo && (_jsx(WordPressWordmark, { className: "step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--wordmark", color: "currentColor" })), _jsx(WordPressLogo, { size: 21, className: "step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo" })] }));
+    const resolvedLogo = logo ?? context.logo ?? defaultWordPressLogo;
+    return (_jsxs("div", { ref: topBarRef, className: "step-container-v2__top-bar", children: [!hideLogo && resolvedLogo, leftElement && (_jsx("div", { className: "step-container-v2__top-bar-left-element", children: leftElement })), rightElement && (_jsx("div", { className: "step-container-v2__top-bar-right-element", children: rightElement }))] }));
+};
+export const isTopBar = (element) => {
+    return isValidElement(element) && element.type === TopBar;
+};
+//# sourceMappingURL=TopBar.js.map

package/dist/esm/step-container-v2/components/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/TopBar/TopBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAC;AACnG,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAElF,OAAO,cAAc,CAAC;AA0BtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAE,EACvB,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,QAAQ,GAAG,KAAK,GACH,EAAG,EAAE;IAClB,MAAM,OAAO,GAAG,yBAAyB,EAAE,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IAEnD,8EAA8E;IAC9E,2EAA2E;IAC3E,yEAAyE;IACzE,0EAA0E;IAC1E,8EAA8E;IAC9E,6EAA6E;IAC7E,4EAA4E;IAC5E,eAAe,CAAE,GAAG,EAAE;QACrB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QAElC,IAAK,CAAE,OAAO,EAAG,CAAC;YACjB,OAAO;QACR,CAAC;QAED,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QAEtC,MAAM,aAAa,GAAG,GAAG,EAAE;YAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAE,CAAC;YACpE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAE,oBAAoB,EAAE,GAAI,MAAO,IAAI,EAAE,WAAW,CAAE,CAAC;QAC9E,CAAC,CAAC;QAEF,aAAa,EAAE,CAAC;QAEhB,IAAI,QAAoC,CAAC;QACzC,IAAK,OAAO,cAAc,KAAK,WAAW,EAAG,CAAC;YAC7C,QAAQ,GAAG,IAAI,cAAc,CAAE,aAAa,CAAE,CAAC;YAC/C,QAAQ,CAAC,OAAO,CAAE,OAAO,CAAE,CAAC;QAC7B,CAAC;QAED,OAAO,GAAG,EAAE;YACX,QAAQ,EAAE,UAAU,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAE,oBAAoB,CAAE,CAAC;QACnD,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAE,CAAC;IAER,6DAA6D;IAC7D,0DAA0D;IAC1D,MAAM,oBAAoB,GAAG,CAC5B,eACC,SAAS,EAAG,IAAI,CAAE,mDAAmD,EAAE;YACtE,YAAY,EAAE,WAAW;SACzB,CAAE,aAED,CAAE,WAAW,IAAI,CAClB,KAAC,iBAAiB,IACjB,SAAS,EAAC,+FAA+F,EACzG,KAAK,EAAC,cAAc,GACnB,CACF,EACD,KAAC,aAAa,IACb,IAAI,EAAG,EAAE,EACT,SAAS,EAAC,2FAA2F,GACpG,IACG,CACN,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,IAAI,OAAO,CAAC,IAAI,IAAI,oBAAoB,CAAC;IAElE,OAAO,CACN,eAAK,GAAG,EAAG,SAAS,EAAG,SAAS,EAAC,4BAA4B,aAC1D,CAAE,QAAQ,IAAI,YAAY,EAE1B,WAAW,IAAI,CAChB,cAAK,SAAS,EAAC,yCAAyC,YAAG,WAAW,GAAQ,CAC9E,EACC,YAAY,IAAI,CACjB,cAAK,SAAS,EAAC,0CAA0C,YAAG,YAAY,GAAQ,CAChF,IACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAE,OAAmB,EAA2C,EAAE;IACzF,OAAO,cAAc,CAAE,OAAO,CAAE,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC;AAC7D,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/TopBar/TopBarRenderer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useRef } from 'react';
+import { StepContainerV2Context, } from '../StepContainerV2/context';
+export const renderTopBar = (topBar, context) => {
+    return typeof topBar === 'function' ? topBar(context) : topBar;
+};
+export const TopBarRenderer = ({ topBar }) => {
+    const context = useContext(StepContainerV2Context);
+    const { setTopBarHeight } = context;
+    const topBarRef = useRef(null);
+    useLayoutEffect(() => {
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            if (entry) {
+                setTopBarHeight(`${entry.contentRect.height}px`);
+            }
+        });
+        if (topBarRef.current) {
+            setTopBarHeight(`${topBarRef.current.clientHeight}px`);
+            resizeObserver.observe(topBarRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [setTopBarHeight]);
+    return (_jsx("div", { ref: topBarRef, className: "step-container-v2__top-bar-wrapper", children: renderTopBar(topBar, context) }));
+};
+//# sourceMappingURL=TopBarRenderer.js.map

package/dist/esm/step-container-v2/components/TopBar/TopBarRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarRenderer.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/components/TopBar/TopBarRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EACN,sBAAsB,GAGtB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAC3B,MAAmB,EACnB,OAA0F,EACzF,EAAE;IACH,OAAO,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAE,OAAO,CAAE,CAAC,CAAC,CAAC,MAAM,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAE,EAAE,MAAM,EAA4B,EAAG,EAAE;IACxE,MAAM,OAAO,GAAG,UAAU,CAAE,sBAAsB,CAAE,CAAC;IACrD,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC;IAEpC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IAEnD,eAAe,CAAE,GAAG,EAAE;QACrB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAE,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YAC1D,IAAK,KAAK,EAAG,CAAC;gBACb,eAAe,CAAE,GAAI,KAAK,CAAC,WAAW,CAAC,MAAO,IAAI,CAAE,CAAC;YACtD,CAAC;QACF,CAAC,CAAE,CAAC;QAEJ,IAAK,SAAS,CAAC,OAAO,EAAG,CAAC;YACzB,eAAe,CAAE,GAAI,SAAS,CAAC,OAAO,CAAC,YAAa,IAAI,CAAE,CAAC;YAC3D,cAAc,CAAC,OAAO,CAAE,SAAS,CAAC,OAAO,CAAE,CAAC;QAC7C,CAAC;QAED,OAAO,GAAG,EAAE;YACX,cAAc,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC,CAAC;IACH,CAAC,EAAE,CAAE,eAAe,CAAE,CAAE,CAAC;IAEzB,OAAO,CACN,cAAK,GAAG,EAAG,SAAS,EAAG,SAAS,EAAC,oCAAoC,YAClE,YAAY,CAAE,MAAM,EAAE,OAAO,CAAE,GAC5B,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/TopBar/style.scss

@@ -0,0 +1,75 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__top-bar {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: var( --step-container-v2-top-bar-padding );
+
+	@include break-small {
+		padding-inline: 1.5rem;
+	}
+}
+
+.step-container-v2__top-bar-wrapper {
+	width: 100%;
+}
+
+.step-container-v2__top-bar-left-element,
+.step-container-v2__top-bar-right-element,
+.step-container-v2__top-bar-wordpress-logo {
+	height: var( --step-container-v2-top-bar-content-height );
+}
+
+.step-container-v2__top-bar-left-element,
+.step-container-v2__top-bar-right-element {
+	display: flex;
+	align-items: center;
+}
+
+.step-container-v2__top-bar-wordpress-logo {
+	color: var( --color-text );
+	margin: 0;
+}
+
+.step-container-v2__top-bar-wordpress-logo--wordmark {
+	display: none;
+
+	@include break-small {
+		display: block;
+	}
+}
+
+.step-container-v2__top-bar-wordpress-logo--logo {
+	display: block;
+
+	@include break-small {
+		/**
+		 * Hide the logo only when the wrapper is not compact.
+		 * This is important for current Login views, where the logo is always visible.
+		 * -- Confirm with Design before changing this --
+		 */
+		.step-container-v2__top-bar-wordpress-logo-wrapper:not( .is-compact ) & {
+			display: none;
+		}
+	}
+}
+
+.step-container-v2__top-bar-right-element {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-left: auto;
+	font-size: 0.875rem;
+	line-height: 1;
+
+	a,
+	button {
+		&.components-button:not( .is-destructive ).is-link {
+			--wp-components-color-accent: var( --color-neutral-100 );
+		}
+	}
+}

package/dist/esm/step-container-v2/components/buttons/BackButton/BackButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@wordpress/components';
+import { chevronLeft } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
+import { useStepContainerV2Context } from '../../../contexts/StepContainerV2Context';
+import { decorateButtonWithTracksEventRecording } from '../../../helpers/decorateButtonWithTracksEventRecording';
+import { normalizeButtonProps } from '../../../helpers/normalizeButtonProps';
+import './style.scss';
+export const BackButton = ({ enableTracksEvent = true, ...originalProps }) => {
+    const { __ } = useI18n();
+    const stepContext = useStepContainerV2Context();
+    const backButtonProps = normalizeButtonProps(originalProps, {
+        children: __('Back', __i18n_text_domain__),
+        className: 'step-container-v2__back-button',
+        icon: chevronLeft,
+    });
+    const buttonProps = enableTracksEvent
+        ? decorateButtonWithTracksEventRecording(backButtonProps, {
+            tracksEventName: 'calypso_signup_previous_step_button_click',
+            stepContext,
+        })
+        : backButtonProps;
+    return _jsx(Button, { ...buttonProps });
+};
+//# sourceMappingURL=BackButton.js.map

package/dist/esm/step-container-v2/components/buttons/BackButton/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","sourceRoot":"","sources":["../../../../../../src/step-container-v2/components/buttons/BackButton/BackButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,sCAAsC,EAAE,MAAM,yDAAyD,CAAC;AACjH,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAG7E,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAE,EAC3B,iBAAiB,GAAG,IAAI,EACxB,GAAG,aAAa,EAC+B,EAAG,EAAE;IACpD,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC;IACzB,MAAM,WAAW,GAAG,yBAAyB,EAAE,CAAC;IAEhD,MAAM,eAAe,GAAG,oBAAoB,CAAE,aAAa,EAAE;QAC5D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,gCAAgC;QAC3C,IAAI,EAAE,WAAW;KACjB,CAAE,CAAC;IAEJ,MAAM,WAAW,GAAG,iBAAiB;QACpC,CAAC,CAAC,sCAAsC,CAAE,eAAe,EAAE;YACzD,eAAe,EAAE,2CAA2C;YAC5D,WAAW;SACV,CAAE;QACL,CAAC,CAAC,eAAe,CAAC;IAEnB,OAAO,KAAC,MAAM,OAAM,WAAW,GAAK,CAAC;AACtC,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/buttons/BackButton/style.scss

@@ -0,0 +1,16 @@
+.step-container-v2__back-button.components-button {
+	--wp-components-color-accent: var(--color-neutral-100);
+	--color-link: var(--color-neutral-100);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1;
+	text-decoration: underline;
+	gap: 4px;
+	padding: 0 !important;
+	min-width: 0;
+	height: auto;
+
+	svg {
+		margin-inline-end: 0;
+	}
+}

package/dist/esm/step-container-v2/components/buttons/LinkButton/LinkButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@wordpress/components';
+import { useI18n } from '@wordpress/react-i18n';
+import { normalizeButtonProps } from '../../../helpers/normalizeButtonProps';
+import './style.scss';
+export const LinkButton = (originalProps) => {
+    const { __ } = useI18n();
+    const linkButtonProps = normalizeButtonProps(originalProps, {
+        children: __('Link', __i18n_text_domain__),
+        className: 'step-container-v2__link-button',
+    });
+    return _jsx(Button, { variant: "link", ...linkButtonProps });
+};
+//# sourceMappingURL=LinkButton.js.map

package/dist/esm/step-container-v2/components/buttons/LinkButton/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../../../../src/step-container-v2/components/buttons/LinkButton/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAG7E,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC1D,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC;IAEzB,MAAM,eAAe,GAAG,oBAAoB,CAAE,aAAa,EAAE;QAC5D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,gCAAgC;KAC3C,CAAE,CAAC;IAEJ,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,KAAM,eAAe,GAAK,CAAC;AACzD,CAAC,CAAC"}

package/dist/esm/step-container-v2/components/buttons/LinkButton/style.scss

@@ -0,0 +1,6 @@
+.step-container-v2__link-button.components-button {
+	font-size: inherit;
+	line-height: inherit;
+	font-weight: 500;
+	text-decoration: underline;
+}

package/dist/esm/step-container-v2/components/buttons/PrimaryButton/PrimaryButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@wordpress/components';
+import { useI18n } from '@wordpress/react-i18n';
+import { normalizeButtonProps } from '../../../helpers/normalizeButtonProps';
+import './style.scss';
+export const PrimaryButton = (originalProps) => {
+    const { __ } = useI18n();
+    const primaryButtonProps = normalizeButtonProps(originalProps, {
+        children: __('Next', __i18n_text_domain__),
+        className: 'step-container-v2__primary-button',
+    });
+    return _jsx(Button, { __next40pxDefaultSize: true, variant: "primary", ...primaryButtonProps });
+};
+//# sourceMappingURL=PrimaryButton.js.map