@automattic/onboarding 1.0.0 → 1.0.1

package/dist/cjs/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,iCAAiD;AAiBpC,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EAAwC;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/cjs/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/cjs/step-container-v2/components/StepCounter/StepCounter.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepCounter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_1 = require("@wordpress/i18n");
+const react_i18n_1 = require("@wordpress/react-i18n");
+require("./style.scss");
+const StepCounter = ({ current, total }) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    return ((0, jsx_runtime_1.jsx)("span", { className: "step-container-v2__step-counter", "aria-label": (0, i18n_1.sprintf)(
+        /* translators: 1: current step number, 2: total number of steps. */
+        __('Step %1$d of %2$d', __i18n_text_domain__), current, total), children: (0, i18n_1.sprintf)(
+        /* translators: 1: current step number, 2: total number of steps. */
+        __('%1$d of %2$d', __i18n_text_domain__), current, total) }));
+};
+exports.StepCounter = StepCounter;
+//# sourceMappingURL=StepCounter.js.map

package/dist/cjs/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,0CAA0C;AAC1C,sDAAgD;AAEhD,wBAAsB;AAOf,MAAM,WAAW,GAAG,CAAE,EAAE,OAAO,EAAE,KAAK,EAAoB,EAAG,EAAE;IACrE,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAEzB,OAAO,CACN,iCACC,SAAS,EAAC,iCAAiC,gBAC9B,IAAA,cAAO;QACnB,oEAAoE;QACpE,EAAE,CAAE,mBAAmB,EAAE,oBAAoB,CAAE,EAC/C,OAAO,EACP,KAAK,CACL,YAEC,IAAA,cAAO;QACR,oEAAoE;QACpE,EAAE,CAAE,cAAc,EAAE,oBAAoB,CAAE,EAC1C,OAAO,EACP,KAAK,CACL,GACK,CACP,CAAC;AACH,CAAC,CAAC;AArBW,QAAA,WAAW,eAqBtB"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyBottomBar = 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 StickyBottomBar = ({ leftElement, centerElement, rightElement, noBoxShadow, hasTransparentBackground, centerText, fullWidth, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('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 && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__sticky-bottom-bar-left-element", children: leftElement })), centerElement && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__sticky-bottom-bar-center-element", children: centerElement })), rightElement && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__sticky-bottom-bar-right-element", children: rightElement }))] }));
+};
+exports.StickyBottomBar = StickyBottomBar;
+//# sourceMappingURL=StickyBottomBar.js.map

package/dist/cjs/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,wDAAwB;AAGxB,wBAAsB;AAYf,MAAM,eAAe,GAAG,CAAE,EAChC,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,wBAAwB,EACxB,UAAU,EACV,SAAS,GACa,EAAG,EAAE;IAC3B,OAAO,CACN,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,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,gCAAK,SAAS,EAAC,mDAAmD,YAAG,WAAW,GAAQ,CACxF,EACC,aAAa,IAAI,CAClB,gCAAK,SAAS,EAAC,qDAAqD,YAAG,aAAa,GAAQ,CAC5F,EACC,YAAY,IAAI,CACjB,gCAAK,SAAS,EAAC,oDAAoD,YAAG,YAAY,GAAQ,CAC1F,IACI,CACN,CAAC;AACH,CAAC,CAAC;AA9BW,QAAA,eAAe,mBA8B1B"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyBottomBarRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../StepContainerV2/context");
+const StickyBottomBarRenderer = ({ stickyBottomBar, }) => {
+    const context = (0, react_1.useContext)(context_1.StepContainerV2Context);
+    const { setStickyBottomBarHeight } = context;
+    const stickyBottomBarRef = (0, react_1.useRef)(null);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__sticky-bottom-bar-wrapper", ref: stickyBottomBarRef, children: content }));
+};
+exports.StickyBottomBarRenderer = StickyBottomBarRenderer;
+//# sourceMappingURL=StickyBottomBarRenderer.js.map

package/dist/cjs/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,iCAA4D;AAC5D,wDAAiF;AAE1E,MAAM,uBAAuB,GAAG,CAAE,EACxC,eAAe,GAGf,EAAG,EAAE;IACL,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAE,gCAAsB,CAAE,CAAC;IACrD,MAAM,EAAE,wBAAwB,EAAE,GAAG,OAAO,CAAC;IAE7C,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAE,CAAC;IAE5D,IAAA,uBAAe,EAAE,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,gCAAK,SAAS,EAAC,8CAA8C,EAAC,GAAG,EAAG,kBAAkB,YACnF,OAAO,GACJ,CACN,CAAC;AACH,CAAC,CAAC;AArCW,QAAA,uBAAuB,2BAqClC"}

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTopBar = exports.TopBar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
+const StepContainerV2Context_1 = require("../../contexts/StepContainerV2Context");
+require("./style.scss");
+const TopBar = ({ leftElement, rightElement, logo, compactLogo, hideLogo = false, }) => {
+    const context = (0, StepContainerV2Context_1.useStepContainerV2Context)();
+    const topBarRef = (0, react_1.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.
+    (0, react_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('step-container-v2__top-bar-wordpress-logo-wrapper', {
+            'is-compact': compactLogo,
+        }), children: [!compactLogo && ((0, jsx_runtime_1.jsx)(components_1.WordPressWordmark, { className: "step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--wordmark", color: "currentColor" })), (0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: topBarRef, className: "step-container-v2__top-bar", children: [!hideLogo && resolvedLogo, leftElement && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__top-bar-left-element", children: leftElement })), rightElement && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2__top-bar-right-element", children: rightElement }))] }));
+};
+exports.TopBar = TopBar;
+const isTopBar = (element) => {
+    return (0, react_1.isValidElement)(element) && element.type === exports.TopBar;
+};
+exports.isTopBar = isTopBar;
+//# sourceMappingURL=TopBar.js.map

package/dist/cjs/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,uDAA0E;AAC1E,wDAAwB;AACxB,iCAAmG;AACnG,kFAAkF;AAElF,wBAAsB;AA0Bf,MAAM,MAAM,GAAG,CAAE,EACvB,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,QAAQ,GAAG,KAAK,GACH,EAAG,EAAE;IAClB,MAAM,OAAO,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAC5C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAE,CAAC;IAEnD,8EAA8E;IAC9E,2EAA2E;IAC3E,yEAAyE;IACzE,0EAA0E;IAC1E,8EAA8E;IAC9E,6EAA6E;IAC7E,4EAA4E;IAC5E,IAAA,uBAAe,EAAE,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,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,mDAAmD,EAAE;YACtE,YAAY,EAAE,WAAW;SACzB,CAAE,aAED,CAAE,WAAW,IAAI,CAClB,uBAAC,8BAAiB,IACjB,SAAS,EAAC,+FAA+F,EACzG,KAAK,EAAC,cAAc,GACnB,CACF,EACD,uBAAC,0BAAa,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,iCAAK,GAAG,EAAG,SAAS,EAAG,SAAS,EAAC,4BAA4B,aAC1D,CAAE,QAAQ,IAAI,YAAY,EAE1B,WAAW,IAAI,CAChB,gCAAK,SAAS,EAAC,yCAAyC,YAAG,WAAW,GAAQ,CAC9E,EACC,YAAY,IAAI,CACjB,gCAAK,SAAS,EAAC,0CAA0C,YAAG,YAAY,GAAQ,CAChF,IACI,CACN,CAAC;AACH,CAAC,CAAC;AAhFW,QAAA,MAAM,UAgFjB;AAEK,MAAM,QAAQ,GAAG,CAAE,OAAmB,EAA2C,EAAE;IACzF,OAAO,IAAA,sBAAc,EAAE,OAAO,CAAE,IAAI,OAAO,CAAC,IAAI,KAAK,cAAM,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBarRenderer = exports.renderTopBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../StepContainerV2/context");
+const renderTopBar = (topBar, context) => {
+    return typeof topBar === 'function' ? topBar(context) : topBar;
+};
+exports.renderTopBar = renderTopBar;
+const TopBarRenderer = ({ topBar }) => {
+    const context = (0, react_1.useContext)(context_1.StepContainerV2Context);
+    const { setTopBarHeight } = context;
+    const topBarRef = (0, react_1.useRef)(null);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { ref: topBarRef, className: "step-container-v2__top-bar-wrapper", children: (0, exports.renderTopBar)(topBar, context) }));
+};
+exports.TopBarRenderer = TopBarRenderer;
+//# sourceMappingURL=TopBarRenderer.js.map

package/dist/cjs/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,iCAA4D;AAC5D,wDAIoC;AAE7B,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;AALW,QAAA,YAAY,gBAKvB;AAEK,MAAM,cAAc,GAAG,CAAE,EAAE,MAAM,EAA4B,EAAG,EAAE;IACxE,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAE,gCAAsB,CAAE,CAAC;IACrD,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC;IAEpC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAE,CAAC;IAEnD,IAAA,uBAAe,EAAE,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,gCAAK,GAAG,EAAG,SAAS,EAAG,SAAS,EAAC,oCAAoC,YAClE,IAAA,oBAAY,EAAE,MAAM,EAAE,OAAO,CAAE,GAC5B,CACN,CAAC;AACH,CAAC,CAAC;AA5BW,QAAA,cAAc,kBA4BzB"}

package/dist/cjs/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/cjs/step-container-v2/components/buttons/BackButton/BackButton.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const icons_1 = require("@wordpress/icons");
+const react_i18n_1 = require("@wordpress/react-i18n");
+const StepContainerV2Context_1 = require("../../../contexts/StepContainerV2Context");
+const decorateButtonWithTracksEventRecording_1 = require("../../../helpers/decorateButtonWithTracksEventRecording");
+const normalizeButtonProps_1 = require("../../../helpers/normalizeButtonProps");
+require("./style.scss");
+const BackButton = ({ enableTracksEvent = true, ...originalProps }) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    const stepContext = (0, StepContainerV2Context_1.useStepContainerV2Context)();
+    const backButtonProps = (0, normalizeButtonProps_1.normalizeButtonProps)(originalProps, {
+        children: __('Back', __i18n_text_domain__),
+        className: 'step-container-v2__back-button',
+        icon: icons_1.chevronLeft,
+    });
+    const buttonProps = enableTracksEvent
+        ? (0, decorateButtonWithTracksEventRecording_1.decorateButtonWithTracksEventRecording)(backButtonProps, {
+            tracksEventName: 'calypso_signup_previous_step_button_click',
+            stepContext,
+        })
+        : backButtonProps;
+    return (0, jsx_runtime_1.jsx)(components_1.Button, { ...buttonProps });
+};
+exports.BackButton = BackButton;
+//# sourceMappingURL=BackButton.js.map

package/dist/cjs/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,sDAA+C;AAC/C,4CAA+C;AAC/C,sDAAgD;AAChD,qFAAqF;AACrF,oHAAiH;AACjH,gFAA6E;AAG7E,wBAAsB;AAEf,MAAM,UAAU,GAAG,CAAE,EAC3B,iBAAiB,GAAG,IAAI,EACxB,GAAG,aAAa,EAC+B,EAAG,EAAE;IACpD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAEhD,MAAM,eAAe,GAAG,IAAA,2CAAoB,EAAE,aAAa,EAAE;QAC5D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,gCAAgC;QAC3C,IAAI,EAAE,mBAAW;KACjB,CAAE,CAAC;IAEJ,MAAM,WAAW,GAAG,iBAAiB;QACpC,CAAC,CAAC,IAAA,+EAAsC,EAAE,eAAe,EAAE;YACzD,eAAe,EAAE,2CAA2C;YAC5D,WAAW;SACV,CAAE;QACL,CAAC,CAAC,eAAe,CAAC;IAEnB,OAAO,uBAAC,mBAAM,OAAM,WAAW,GAAK,CAAC;AACtC,CAAC,CAAC;AArBW,QAAA,UAAU,cAqBrB"}

package/dist/cjs/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/cjs/step-container-v2/components/buttons/LinkButton/LinkButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const react_i18n_1 = require("@wordpress/react-i18n");
+const normalizeButtonProps_1 = require("../../../helpers/normalizeButtonProps");
+require("./style.scss");
+const LinkButton = (originalProps) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    const linkButtonProps = (0, normalizeButtonProps_1.normalizeButtonProps)(originalProps, {
+        children: __('Link', __i18n_text_domain__),
+        className: 'step-container-v2__link-button',
+    });
+    return (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "link", ...linkButtonProps });
+};
+exports.LinkButton = LinkButton;
+//# sourceMappingURL=LinkButton.js.map

package/dist/cjs/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,sDAA+C;AAC/C,sDAAgD;AAChD,gFAA6E;AAG7E,wBAAsB;AAEf,MAAM,UAAU,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC1D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAEzB,MAAM,eAAe,GAAG,IAAA,2CAAoB,EAAE,aAAa,EAAE;QAC5D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,gCAAgC;KAC3C,CAAE,CAAC;IAEJ,OAAO,uBAAC,mBAAM,IAAC,OAAO,EAAC,MAAM,KAAM,eAAe,GAAK,CAAC;AACzD,CAAC,CAAC;AATW,QAAA,UAAU,cASrB"}

package/dist/cjs/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/cjs/step-container-v2/components/buttons/PrimaryButton/PrimaryButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrimaryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const react_i18n_1 = require("@wordpress/react-i18n");
+const normalizeButtonProps_1 = require("../../../helpers/normalizeButtonProps");
+require("./style.scss");
+const PrimaryButton = (originalProps) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    const primaryButtonProps = (0, normalizeButtonProps_1.normalizeButtonProps)(originalProps, {
+        children: __('Next', __i18n_text_domain__),
+        className: 'step-container-v2__primary-button',
+    });
+    return (0, jsx_runtime_1.jsx)(components_1.Button, { __next40pxDefaultSize: true, variant: "primary", ...primaryButtonProps });
+};
+exports.PrimaryButton = PrimaryButton;
+//# sourceMappingURL=PrimaryButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.js","sourceRoot":"","sources":["../../../../../../src/step-container-v2/components/buttons/PrimaryButton/PrimaryButton.tsx"],"names":[],"mappings":";;;;AAAA,sDAA+C;AAC/C,sDAAgD;AAChD,gFAA6E;AAG7E,wBAAsB;AAEf,MAAM,aAAa,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC7D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,IAAA,2CAAoB,EAAE,aAAa,EAAE;QAC/D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,mCAAmC;KAC9C,CAAE,CAAC;IAEJ,OAAO,uBAAC,mBAAM,IAAC,qBAAqB,QAAC,OAAO,EAAC,SAAS,KAAM,kBAAkB,GAAK,CAAC;AACrF,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}

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

@@ -0,0 +1,6 @@
+.step-container-v2__content-wrapper .step-container-v2__primary-button {
+	padding: 0.5rem 3rem;
+	font-size: 0.875rem;
+	line-height: 1;
+	justify-content: center;
+}

package/dist/cjs/step-container-v2/components/buttons/SecondaryButton/SecondaryButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const react_i18n_1 = require("@wordpress/react-i18n");
+const normalizeButtonProps_1 = require("../../../helpers/normalizeButtonProps");
+require("./style.scss");
+const SecondaryButton = (originalProps) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    const secondaryButtonProps = (0, normalizeButtonProps_1.normalizeButtonProps)(originalProps, {
+        children: __('Secondary', __i18n_text_domain__),
+        className: 'step-container-v2__secondary-button',
+    });
+    return (0, jsx_runtime_1.jsx)(components_1.Button, { __next40pxDefaultSize: true, variant: "secondary", ...secondaryButtonProps });
+};
+exports.SecondaryButton = SecondaryButton;
+//# sourceMappingURL=SecondaryButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryButton.js","sourceRoot":"","sources":["../../../../../../src/step-container-v2/components/buttons/SecondaryButton/SecondaryButton.tsx"],"names":[],"mappings":";;;;AAAA,sDAA+C;AAC/C,sDAAgD;AAChD,gFAA6E;AAG7E,wBAAsB;AAEf,MAAM,eAAe,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC/D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,IAAA,2CAAoB,EAAE,aAAa,EAAE;QACjE,QAAQ,EAAE,EAAE,CAAE,WAAW,EAAE,oBAAoB,CAAE;QACjD,SAAS,EAAE,qCAAqC;KAChD,CAAE,CAAC;IAEJ,OAAO,uBAAC,mBAAM,IAAC,qBAAqB,QAAC,OAAO,EAAC,WAAW,KAAM,oBAAoB,GAAK,CAAC;AACzF,CAAC,CAAC;AATW,QAAA,eAAe,mBAS1B"}

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

@@ -0,0 +1,6 @@
+.step-container-v2__content-wrapper .step-container-v2__secondary-button {
+	padding: 0.5rem 3rem;
+	font-size: 0.875rem;
+	line-height: 1;
+	justify-content: center;
+}

package/dist/cjs/step-container-v2/components/buttons/SkipButton/SkipButton.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_i18n_1 = require("@wordpress/react-i18n");
+const StepContainerV2Context_1 = require("../../../contexts/StepContainerV2Context");
+const decorateButtonWithTracksEventRecording_1 = require("../../../helpers/decorateButtonWithTracksEventRecording");
+const normalizeButtonProps_1 = require("../../../helpers/normalizeButtonProps");
+const LinkButton_1 = require("../LinkButton/LinkButton");
+/**
+ * Do NOT use this button if you don't intend to skip the step.
+ *
+ * This button is visually identical to {@link LinkButton}.
+ * The difference between them is that this one fires a Tracks event when clicked.
+ */
+const SkipButton = (originalProps) => {
+    const { __ } = (0, react_i18n_1.useI18n)();
+    const stepContext = (0, StepContainerV2Context_1.useStepContainerV2Context)();
+    const skipButtonProps = (0, normalizeButtonProps_1.normalizeButtonProps)(originalProps, {
+        children: __('Skip', __i18n_text_domain__),
+    });
+    return ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, { ...(0, decorateButtonWithTracksEventRecording_1.decorateButtonWithTracksEventRecording)(skipButtonProps, {
+            tracksEventName: 'calypso_signup_skip_step',
+            stepContext,
+        }) }));
+};
+exports.SkipButton = SkipButton;
+//# sourceMappingURL=SkipButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipButton.js","sourceRoot":"","sources":["../../../../../../src/step-container-v2/components/buttons/SkipButton/SkipButton.tsx"],"names":[],"mappings":";;;;AAAA,sDAAgD;AAChD,qFAAqF;AACrF,oHAAiH;AACjH,gFAA6E;AAE7E,yDAAsD;AAEtD;;;;;GAKG;AACI,MAAM,UAAU,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC1D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAEhD,MAAM,eAAe,GAAG,IAAA,2CAAoB,EAAE,aAAa,EAAE;QAC5D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;KAC5C,CAAE,CAAC;IAEJ,OAAO,CACN,uBAAC,uBAAU,OACL,IAAA,+EAAsC,EAAE,eAAe,EAAE;YAC7D,eAAe,EAAE,0BAA0B;YAC3C,WAAW;SACX,CAAE,GACF,CACF,CAAC;AACH,CAAC,CAAC;AAhBW,QAAA,UAAU,cAgBrB"}

package/dist/cjs/step-container-v2/contexts/StepContainerV2Context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepContainerV2Context = exports.StepContainerV2Provider = void 0;
+const react_1 = require("react");
+const defaultContextValue = {
+    flowName: '',
+    stepName: '',
+    recordTracksEvent: () => { },
+    logo: null,
+};
+const StepContainerV2Context = (0, react_1.createContext)(defaultContextValue);
+exports.StepContainerV2Provider = StepContainerV2Context.Provider;
+const useStepContainerV2Context = () => {
+    return (0, react_1.useContext)(StepContainerV2Context);
+};
+exports.useStepContainerV2Context = useStepContainerV2Context;
+//# sourceMappingURL=StepContainerV2Context.js.map

package/dist/cjs/step-container-v2/contexts/StepContainerV2Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepContainerV2Context.js","sourceRoot":"","sources":["../../../../src/step-container-v2/contexts/StepContainerV2Context.ts"],"names":[],"mappings":";;;AAAA,iCAAkE;AASlE,MAAM,mBAAmB,GAA+B;IACvD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC3B,IAAI,EAAE,IAAI;CACV,CAAC;AAEF,MAAM,sBAAsB,GAAG,IAAA,qBAAa,EAAgC,mBAAmB,CAAE,CAAC;AAErF,QAAA,uBAAuB,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAEhE,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC7C,OAAO,IAAA,kBAAU,EAAE,sBAAsB,CAAE,CAAC;AAC7C,CAAC,CAAC;AAFW,QAAA,yBAAyB,6BAEpC"}

package/dist/cjs/step-container-v2/helpers/decorateButtonWithTracksEventRecording.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decorateButtonWithTracksEventRecording = void 0;
+const data_stores_1 = require("@automattic/data-stores");
+const data_1 = require("@wordpress/data");
+const decorateButtonWithTracksEventRecording = ({ onClick, ...props }, { tracksEventName, stepContext, }) => {
+    const onClickHandler = (event) => {
+        onClick?.(event);
+        stepContext?.recordTracksEvent?.(tracksEventName, {
+            flow: stepContext?.flowName,
+            step: stepContext?.stepName,
+            intent: (0, data_1.select)(data_stores_1.Onboard.register()).getIntent(),
+        });
+    };
+    return { ...props, onClick: onClickHandler };
+};
+exports.decorateButtonWithTracksEventRecording = decorateButtonWithTracksEventRecording;
+//# sourceMappingURL=decorateButtonWithTracksEventRecording.js.map

package/dist/cjs/step-container-v2/helpers/decorateButtonWithTracksEventRecording.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorateButtonWithTracksEventRecording.js","sourceRoot":"","sources":["../../../../src/step-container-v2/helpers/decorateButtonWithTracksEventRecording.ts"],"names":[],"mappings":";;;AAAA,yDAAiE;AAEjE,0CAAyC;AAIlC,MAAM,sCAAsC,GAAG,CACrD,EAAE,OAAO,EAAE,GAAG,KAAK,EAAmC,EACtD,EACC,eAAe,EACf,WAAW,GAC2D,EACrC,EAAE;IACpC,MAAM,cAAc,GAAG,CACtB,KACkD,EACjD,EAAE;QACH,OAAO,EAAE,CAAE,KAAK,CAAE,CAAC;QAEnB,WAAW,EAAE,iBAAiB,EAAE,CAAE,eAAe,EAAE;YAClD,IAAI,EAAE,WAAW,EAAE,QAAQ;YAC3B,IAAI,EAAE,WAAW,EAAE,QAAQ;YAC3B,MAAM,EAAI,IAAA,aAAM,EAAE,qBAAO,CAAC,QAAQ,EAAE,CAAgC,CAAC,SAAS,EAAE;SAChF,CAAE,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;AAC9C,CAAC,CAAC;AArBW,QAAA,sCAAsC,0CAqBjD"}

package/dist/cjs/step-container-v2/helpers/normalizeButtonProps.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeButtonProps = void 0;
+const tslib_1 = require("tslib");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const normalizeButtonProps = (button, standardProps) => ({
+    ...standardProps,
+    ...button,
+    children: button.children ?? standardProps.children,
+    className: (0, clsx_1.default)(standardProps.className, button.className),
+});
+exports.normalizeButtonProps = normalizeButtonProps;
+//# sourceMappingURL=normalizeButtonProps.js.map

package/dist/cjs/step-container-v2/helpers/normalizeButtonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeButtonProps.js","sourceRoot":"","sources":["../../../../src/step-container-v2/helpers/normalizeButtonProps.ts"],"names":[],"mappings":";;;;AACA,wDAAwB;AAIjB,MAAM,oBAAoB,GAAG,CACnC,MAAmB,EACnB,aAAgB,EACZ,EAAE,CAAC,CAAE;IACT,GAAG,aAAa;IAChB,GAAG,MAAM;IACT,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ;IACnD,SAAS,EAAE,IAAA,cAAI,EAAE,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAE;CAC5D,CAAE,CAAC;AARS,QAAA,oBAAoB,wBAQ7B"}

package/dist/cjs/step-container-v2/helpers/wireframe-placeholder.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WireframePlaceholder = WireframePlaceholder;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function WireframePlaceholder({ height, children, className, style: additionalStyle, }) {
+    const style = {
+        background: '#ff80ff',
+        borderRadius: 10,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(height && { height }),
+        ...additionalStyle,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, children: children }));
+}
+//# sourceMappingURL=wireframe-placeholder.js.map

package/dist/cjs/step-container-v2/helpers/wireframe-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wireframe-placeholder.js","sourceRoot":"","sources":["../../../../src/step-container-v2/helpers/wireframe-placeholder.tsx"],"names":[],"mappings":";;AAAA,oDA2BC;;AA3BD,SAAgB,oBAAoB,CAAE,EACrC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EAAE,eAAe,GAMtB;IACA,MAAM,KAAK,GAAG;QACb,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,GAAG,CAAE,MAAM,IAAI,EAAE,MAAM,EAAE,CAAE;QAC3B,GAAG,eAAe;KACT,CAAC;IAEX,OAAO,CACN,gCAAK,SAAS,EAAG,SAAS,EAAG,KAAK,EAAG,KAAK,YACvC,QAAQ,GACL,CACN,CAAC;AACH,CAAC"}