@automattic/onboarding 1.0.0 → 1.0.1

package/dist/esm/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,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,aAAa,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC7D,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,oBAAoB,CAAE,aAAa,EAAE;QAC/D,QAAQ,EAAE,EAAE,CAAE,MAAM,EAAE,oBAAoB,CAAE;QAC5C,SAAS,EAAE,mCAAmC;KAC9C,CAAE,CAAC;IAEJ,OAAO,KAAC,MAAM,IAAC,qBAAqB,QAAC,OAAO,EAAC,SAAS,KAAM,kBAAkB,GAAK,CAAC;AACrF,CAAC,CAAC"}

package/dist/esm/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/esm/step-container-v2/components/buttons/SecondaryButton/SecondaryButton.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 SecondaryButton = (originalProps) => {
+    const { __ } = useI18n();
+    const secondaryButtonProps = normalizeButtonProps(originalProps, {
+        children: __('Secondary', __i18n_text_domain__),
+        className: 'step-container-v2__secondary-button',
+    });
+    return _jsx(Button, { __next40pxDefaultSize: true, variant: "secondary", ...secondaryButtonProps });
+};
+//# sourceMappingURL=SecondaryButton.js.map

package/dist/esm/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,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,eAAe,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC/D,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,oBAAoB,CAAE,aAAa,EAAE;QACjE,QAAQ,EAAE,EAAE,CAAE,WAAW,EAAE,oBAAoB,CAAE;QACjD,SAAS,EAAE,qCAAqC;KAChD,CAAE,CAAC;IAEJ,OAAO,KAAC,MAAM,IAAC,qBAAqB,QAAC,OAAO,EAAC,WAAW,KAAM,oBAAoB,GAAK,CAAC;AACzF,CAAC,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useI18n } from '@wordpress/react-i18n';
+import { useStepContainerV2Context } from '../../../contexts/StepContainerV2Context';
+import { decorateButtonWithTracksEventRecording } from '../../../helpers/decorateButtonWithTracksEventRecording';
+import { normalizeButtonProps } from '../../../helpers/normalizeButtonProps';
+import { LinkButton } from '../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.
+ */
+export const SkipButton = (originalProps) => {
+    const { __ } = useI18n();
+    const stepContext = useStepContainerV2Context();
+    const skipButtonProps = normalizeButtonProps(originalProps, {
+        children: __('Skip', __i18n_text_domain__),
+    });
+    return (_jsx(LinkButton, { ...decorateButtonWithTracksEventRecording(skipButtonProps, {
+            tracksEventName: 'calypso_signup_skip_step',
+            stepContext,
+        }) }));
+};
+//# sourceMappingURL=SkipButton.js.map

package/dist/esm/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,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;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAE,aAA0B,EAAG,EAAE;IAC1D,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;KAC5C,CAAE,CAAC;IAEJ,OAAO,CACN,KAAC,UAAU,OACL,sCAAsC,CAAE,eAAe,EAAE;YAC7D,eAAe,EAAE,0BAA0B;YAC3C,WAAW;SACX,CAAE,GACF,CACF,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+const defaultContextValue = {
+    flowName: '',
+    stepName: '',
+    recordTracksEvent: () => { },
+    logo: null,
+};
+const StepContainerV2Context = createContext(defaultContextValue);
+export const StepContainerV2Provider = StepContainerV2Context.Provider;
+export const useStepContainerV2Context = () => {
+    return useContext(StepContainerV2Context);
+};
+//# sourceMappingURL=StepContainerV2Context.js.map

package/dist/esm/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,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;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,aAAa,CAAgC,mBAAmB,CAAE,CAAC;AAElG,MAAM,CAAC,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAEvE,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC7C,OAAO,UAAU,CAAE,sBAAsB,CAAE,CAAC;AAC7C,CAAC,CAAC"}

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

@@ -0,0 +1,14 @@
+import { Onboard } from '@automattic/data-stores';
+import { select } from '@wordpress/data';
+export const decorateButtonWithTracksEventRecording = ({ onClick, ...props }, { tracksEventName, stepContext, }) => {
+    const onClickHandler = (event) => {
+        onClick?.(event);
+        stepContext?.recordTracksEvent?.(tracksEventName, {
+            flow: stepContext?.flowName,
+            step: stepContext?.stepName,
+            intent: select(Onboard.register()).getIntent(),
+        });
+    };
+    return { ...props, onClick: onClickHandler };
+};
+//# sourceMappingURL=decorateButtonWithTracksEventRecording.js.map

package/dist/esm/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,OAAO,EAAE,OAAO,EAAiB,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,MAAM,CAAC,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,MAAM,CAAE,OAAO,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"}

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

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+export const normalizeButtonProps = (button, standardProps) => ({
+    ...standardProps,
+    ...button,
+    children: button.children ?? standardProps.children,
+    className: clsx(standardProps.className, button.className),
+});
+//# sourceMappingURL=normalizeButtonProps.js.map

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,MAAM,CAAC,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,IAAI,CAAE,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAE;CAC5D,CAAE,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export 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 (_jsx("div", { className: className, style: style, children: children }));
+}
+//# sourceMappingURL=wireframe-placeholder.js.map

package/dist/esm/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,MAAM,UAAU,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,cAAK,SAAS,EAAG,SAAS,EAAG,KAAK,EAAG,KAAK,YACvC,QAAQ,GACL,CACN,CAAC;AACH,CAAC"}

package/dist/esm/step-container-v2/helpers/withStepContainerV2ContextDecorator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepContainerV2Provider } from '..';
+export const withStepContainerV2ContextDecorator = (Story) => {
+    return (_jsx(StepContainerV2Provider, { value: {
+            flowName: 'flowName',
+            stepName: 'stepName',
+            recordTracksEvent: () => { },
+            logo: null,
+        }, children: _jsx(Story, {}) }));
+};
+//# sourceMappingURL=withStepContainerV2ContextDecorator.js.map

package/dist/esm/step-container-v2/helpers/withStepContainerV2ContextDecorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withStepContainerV2ContextDecorator.js","sourceRoot":"","sources":["../../../../src/step-container-v2/helpers/withStepContainerV2ContextDecorator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,IAAI,CAAC;AAE7C,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAE,KAA0B,EAAG,EAAE;IACnF,OAAO,CACN,KAAC,uBAAuB,IACvB,KAAK,EAAG;YACP,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;YACpB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;YAC3B,IAAI,EAAE,IAAI;SACV,YAED,KAAC,KAAK,KAAG,GACgB,CAC1B,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/index.js

@@ -0,0 +1,22 @@
+/**
+ * NEVER export StepContainerV2 directly.
+ *
+ * Export only components and wireframes.
+ */
+export { StepContainerV2Provider } from './contexts/StepContainerV2Context';
+export { BackButton } from './components/buttons/BackButton/BackButton';
+export { PrimaryButton } from './components/buttons/PrimaryButton/PrimaryButton';
+export { SecondaryButton } from './components/buttons/SecondaryButton/SecondaryButton';
+export { SkipButton } from './components/buttons/SkipButton/SkipButton';
+export { LinkButton } from './components/buttons/LinkButton/LinkButton';
+export { Heading } from './components/Heading/Heading';
+export { StepCounter } from './components/StepCounter/StepCounter';
+export { TopBar } from './components/TopBar/TopBar';
+export { StickyBottomBar } from './components/StickyBottomBar/StickyBottomBar';
+export { CenteredColumnLayout } from './wireframes/CenteredColumnLayout/CenteredColumnLayout';
+export { TwoColumnLayout } from './wireframes/TwoColumnLayout/TwoColumnLayout';
+export { WideLayout } from './wireframes/WideLayout/WideLayout';
+export { Loading } from './wireframes/Loading/Loading';
+export { PlaygroundLayout } from './wireframes/PlaygroundLayout/PlaygroundLayout';
+export { FixedColumnOnTheLeftLayout } from './wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout';
+//# sourceMappingURL=index.js.map

package/dist/esm/step-container-v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step-container-v2/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,oEAAoE,CAAC"}

package/dist/esm/step-container-v2/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/step-container-v2/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/step-container-v2/types.ts"],"names":[],"mappings":""}

package/dist/esm/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { isTopBar } from '../../components/TopBar/TopBar';
+import { renderTopBar, TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+export const CenteredColumnLayout = ({ columnWidth, topBar, heading, headingColumnWidth = 6, className, children, stickyBottomBar, verticalAlign, noGap, }) => {
+    return (_jsx(StepContainerV2, { initialTopBarHeight: 
+        // Calculate the top bar height on the server side to avoid layout shifts.
+        typeof window === 'undefined' &&
+            isTopBar(renderTopBar(topBar, {
+                isLargeViewport: false,
+                isSmallViewport: false,
+            }))
+            ? 'calc( var( --step-container-v2-top-bar-content-height ) + 2 * var( --step-container-v2-top-bar-padding ) )'
+            : '0px', children: (context) => {
+            const content = typeof children === 'function' ? children(context) : children;
+            return (_jsxs(_Fragment, { children: [_jsx(TopBarRenderer, { topBar: topBar }), _jsxs(ContentWrapper, { centerAligned: verticalAlign === 'center', noGap: noGap, children: [heading && _jsx(ContentRow, { columns: headingColumnWidth, children: heading }), _jsx(ContentRow, { columns: columnWidth, className: className, children: content })] }), _jsx(StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+//# sourceMappingURL=CenteredColumnLayout.js.map

package/dist/esm/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenteredColumnLayout.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0DAA0D,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AActF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAE,EACrC,WAAW,EACX,MAAM,EACN,OAAO,EACP,kBAAkB,GAAG,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,eAAe,EACf,aAAa,EACb,KAAK,GACsB,EAAG,EAAE;IAChC,OAAO,CACN,KAAC,eAAe,IACf,mBAAmB;QAClB,0EAA0E;QAC1E,OAAO,MAAM,KAAK,WAAW;YAC7B,QAAQ,CACP,YAAY,CAAE,MAAM,EAAE;gBACrB,eAAe,EAAE,KAAK;gBACtB,eAAe,EAAE,KAAK;aACtB,CAAE,CACH;YACA,CAAC,CAAC,4GAA4G;YAC9G,CAAC,CAAC,KAAK,YAGP,CAAE,OAAO,EAAG,EAAE;YACf,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAE,OAAO,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAEhF,OAAO,CACN,8BACC,KAAC,cAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,MAAC,cAAc,IAAC,aAAa,EAAG,aAAa,KAAK,QAAQ,EAAG,KAAK,EAAG,KAAK,aACvE,OAAO,IAAI,KAAC,UAAU,IAAC,OAAO,EAAG,kBAAkB,YAAK,OAAO,GAAe,EAChF,KAAC,UAAU,IAAC,OAAO,EAAG,WAAW,EAAG,SAAS,EAAG,SAAS,YACtD,OAAO,GACG,IACG,EACjB,KAAC,uBAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createInterpolateElement } from '@wordpress/element';
+import { Heading, TopBar, BackButton, PrimaryButton, StickyBottomBar, SkipButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { CenteredColumnLayout } from './CenteredColumnLayout';
+const meta = {
+    title: 'Onboarding/StepWireframes/CenteredColumnLayout',
+    component: CenteredColumnLayout,
+    decorators: [withStepContainerV2ContextDecorator],
+};
+export default meta;
+export const FourColumnsCenteredLayout = () => {
+    const backButton = _jsx(BackButton, {});
+    const nextButton = _jsx(PrimaryButton, {});
+    const skipButton = _jsx(SkipButton, {});
+    return (_jsx(CenteredColumnLayout, { columnWidth: 4, topBar: _jsx(TopBar, { leftElement: backButton, rightElement: skipButton }), heading: _jsx(Heading, { text: "Four Columns Centered Layout", subText: createInterpolateElement('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: _jsx("code", {}),
+            }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: nextButton }), children: _jsx(WireframePlaceholder, { height: 370, children: "Content" }) }));
+};
+export const SixColumnsCenteredLayout = () => {
+    const backButton = _jsx(BackButton, {});
+    const nextButton = _jsx(PrimaryButton, {});
+    const skipButton = _jsx(SkipButton, {});
+    return (_jsx(CenteredColumnLayout, { columnWidth: 6, topBar: _jsx(TopBar, { leftElement: backButton, rightElement: skipButton }), heading: _jsx(Heading, { text: "Six Columns Centered Layout", subText: createInterpolateElement('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: _jsx("code", {}),
+            }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: nextButton }), children: _jsx(WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+export const EightColumnsCenteredLayout = () => {
+    const backButton = _jsx(BackButton, {});
+    const nextButton = _jsx(PrimaryButton, {});
+    const skipButton = _jsx(SkipButton, {});
+    return (_jsx(CenteredColumnLayout, { columnWidth: 8, topBar: _jsx(TopBar, { leftElement: backButton, rightElement: skipButton }), heading: _jsx(Heading, { text: "Six Columns Centered Layout", subText: createInterpolateElement('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: _jsx("code", {}),
+            }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: nextButton }), children: _jsx(WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+export const TenColumnsCenteredLayout = () => {
+    const backButton = _jsx(BackButton, {});
+    const nextButton = _jsx(PrimaryButton, {});
+    const skipButton = _jsx(SkipButton, {});
+    return (_jsx(CenteredColumnLayout, { columnWidth: 10, topBar: _jsx(TopBar, { leftElement: backButton, rightElement: skipButton }), heading: _jsx(Heading, { text: "Eight Columns Centered Layout", subText: createInterpolateElement('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: _jsx("code", {}),
+            }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: nextButton }), children: _jsx(WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+//# sourceMappingURL=CenteredColumnLayout.stories.js.map

package/dist/esm/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.stories.js.map

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

package/dist/esm/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { Heading } from '../../components/Heading/Heading';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+import './style.scss';
+const FixedColumnOnTheLeftLayout = ({ fixedColumnWidth, children, topBar, heading, footer, stickyBottomBar, }) => {
+    return (_jsx(StepContainerV2, { children: (context) => {
+            const [fixedColumn, secondColumn] = children.map((child) => {
+                if (typeof child === 'function') {
+                    return child(context);
+                }
+                return child;
+            });
+            return (_jsxs(_Fragment, { children: [_jsx(TopBarRenderer, { topBar: topBar }), _jsxs(ContentWrapper, { axisDirection: context.isLargeViewport ? 'horizontal' : 'vertical', noTopPadding: context.isLargeViewport, children: [_jsxs(ContentRow, { columns: context.isLargeViewport ? fixedColumnWidth : undefined, stretched: true, className: "step-container-v2--fixed-column-on-the-left-layout__fixed-column", children: [heading, fixedColumn, footer] }), _jsx(ContentRow, { stretched: true, children: secondColumn })] }), _jsx(StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+// eslint-disable-next-line react/display-name
+FixedColumnOnTheLeftLayout.Heading = (props) => (_jsx(Heading, { ...props, align: "left", size: "small" }));
+export { FixedColumnOnTheLeftLayout };
+//# sourceMappingURL=FixedColumnOnTheLeftLayout.js.map

package/dist/esm/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedColumnOnTheLeftLayout.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0DAA0D,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,cAAc,CAAC;AAWtB,MAAM,0BAA0B,GAAG,CAAE,EACpC,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,eAAe,GACkB,EAAG,EAAE;IACtC,OAAO,CACN,KAAC,eAAe,cACb,CAAE,OAAO,EAAG,EAAE;YACf,MAAM,CAAE,WAAW,EAAE,YAAY,CAAE,GAAG,QAAQ,CAAC,GAAG,CAAE,CAAE,KAAK,EAAG,EAAE;gBAC/D,IAAK,OAAO,KAAK,KAAK,UAAU,EAAG,CAAC;oBACnC,OAAO,KAAK,CAAE,OAAO,CAAE,CAAC;gBACzB,CAAC;gBACD,OAAO,KAAK,CAAC;YACd,CAAC,CAAE,CAAC;YAEJ,OAAO,CACN,8BACC,KAAC,cAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,MAAC,cAAc,IACd,aAAa,EAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACnE,YAAY,EAAG,OAAO,CAAC,eAAe,aAEtC,MAAC,UAAU,IACV,OAAO,EAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAChE,SAAS,QACT,SAAS,EAAC,kEAAkE,aAE1E,OAAO,EACP,WAAW,EACX,MAAM,IACI,EACb,KAAC,UAAU,IAAC,SAAS,kBAAG,YAAY,GAAe,IACnC,EACjB,KAAC,uBAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AAEF,8CAA8C;AAC9C,0BAA0B,CAAC,OAAO,GAAG,CAAE,KAAuC,EAAG,EAAE,CAAC,CACnF,KAAC,OAAO,OAAM,KAAK,EAAG,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAG,CAClD,CAAC;AAEF,OAAO,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/esm/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createInterpolateElement } from '@wordpress/element';
+import { TopBar, BackButton, PrimaryButton, StickyBottomBar, LinkButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { FixedColumnOnTheLeftLayout } from './FixedColumnOnTheLeftLayout';
+const meta = {
+    title: 'Onboarding/StepWireframes/FixedColumnOnTheLeftLayout',
+    component: FixedColumnOnTheLeftLayout,
+    decorators: [withStepContainerV2ContextDecorator],
+};
+export default meta;
+export const ThreeColumnsOnTheLeft = () => (_jsxs(FixedColumnOnTheLeftLayout, { fixedColumnWidth: 3, topBar: _jsx(TopBar, { leftElement: _jsx(BackButton, {}), rightElement: _jsxs("span", { children: ["Need help? ", _jsx(LinkButton, { children: "Contact us" })] }) }), heading: _jsx(FixedColumnOnTheLeftLayout.Heading, { text: "Fixed Column on the Left", subText: createInterpolateElement('An example of the <code>FixedColumnOnTheLeftLayout</code> wireframe layout.', {
+            code: _jsx("code", {}),
+        }) }), stickyBottomBar: (context) => {
+        if (context.isLargeViewport) {
+            return null;
+        }
+        return _jsx(StickyBottomBar, { rightElement: _jsx(PrimaryButton, {}) });
+    }, children: [_jsx(WireframePlaceholder, { style: { flex: 1 }, children: "Sidebar" }), _jsx(WireframePlaceholder, { height: "100%", children: "Main" })] }));
+//# sourceMappingURL=FixedColumnOnTheLeftLayout.stories.js.map

package/dist/esm/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedColumnOnTheLeftLayout.stories.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AACxG,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,MAAM,IAAI,GAA8C;IACvD,KAAK,EAAE,sDAAsD;IAC7D,SAAS,EAAE,0BAA0B;IACrC,UAAU,EAAE,CAAE,mCAAmC,CAAE;CACnD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAC1C,MAAC,0BAA0B,IAC1B,gBAAgB,EAAG,CAAC,EACpB,MAAM,EACL,KAAC,MAAM,IACN,WAAW,EAAG,KAAC,UAAU,KAAG,EAC5B,YAAY,EACX,0CACY,KAAC,UAAU,6BAAwB,IACxC,GAEP,EAEH,OAAO,EACN,KAAC,0BAA0B,CAAC,OAAO,IAClC,IAAI,EAAC,0BAA0B,EAC/B,OAAO,EAAG,wBAAwB,CACjC,6EAA6E,EAC7E;YACC,IAAI,EAAE,gBAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,CAAE,OAAO,EAAG,EAAE;QAC/B,IAAK,OAAO,CAAC,eAAe,EAAG,CAAC;YAC/B,OAAO,IAAI,CAAC;QACb,CAAC;QAED,OAAO,KAAC,eAAe,IAAC,YAAY,EAAG,KAAC,aAAa,KAAG,GAAK,CAAC;IAC/D,CAAC,aAED,KAAC,oBAAoB,IAAC,KAAK,EAAG,EAAE,IAAI,EAAE,CAAC,EAAE,wBAAiC,EAC1E,KAAC,oBAAoB,IAAC,MAAM,EAAC,MAAM,qBAA4B,IACnC,CAC7B,CAAC"}

package/dist/esm/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/style.scss

@@ -0,0 +1,14 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2--fixed-column-on-the-left-layout {
+	&__fixed-column {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+
+		@include break-large {
+			padding-top: 1.5rem;
+		}
+	}
+}

package/dist/esm/step-container-v2/wireframes/Loading/Loading.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressBar } from '@wordpress/components';
+import { useEffect, useState } from 'react';
+import { Heading } from '../../components/Heading/Heading';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { TopBar } from '../../components/TopBar/TopBar';
+import './style.scss';
+export const Loading = ({ title, progress, delay = 0, compactLogo }) => {
+    const [shouldDisplayTitle, setShouldDisplayTitle] = useState(delay === 0);
+    const [prevDelay, setPrevDelay] = useState(delay);
+    if (delay !== prevDelay) {
+        setPrevDelay(delay);
+        setShouldDisplayTitle(delay === 0);
+    }
+    useEffect(() => {
+        if (delay === 0) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            setShouldDisplayTitle(true);
+        }, delay);
+        return () => clearTimeout(timeout);
+    }, [delay]);
+    return (_jsxs(StepContainerV2, { children: [_jsx(TopBar, { compactLogo: compactLogo }), _jsxs("div", { className: "step-container-v2--loading", children: [title && shouldDisplayTitle && (_jsx("div", { className: "step-container-v2--loading__heading-wrapper", children: _jsx("div", { className: "step-container-v2--loading__heading", children: _jsx(Heading, { text: title, size: "small", align: "center" }) }) })), _jsx(ProgressBar, { className: "step-container-v2--loading__progress-bar", value: progress })] })] }));
+};
+//# sourceMappingURL=Loading.js.map

package/dist/esm/step-container-v2/wireframes/Loading/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/Loading/Loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,MAAM,EAAoB,MAAM,gCAAgC,CAAC;AAE1E,OAAO,cAAc,CAAC;AAStB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,WAAW,EAAgB,EAAG,EAAE;IACtF,MAAM,CAAE,kBAAkB,EAAE,qBAAqB,CAAE,GAAG,QAAQ,CAAE,KAAK,KAAK,CAAC,CAAE,CAAC;IAE9E,MAAM,CAAE,SAAS,EAAE,YAAY,CAAE,GAAG,QAAQ,CAAE,KAAK,CAAE,CAAC;IACtD,IAAK,KAAK,KAAK,SAAS,EAAG,CAAC;QAC3B,YAAY,CAAE,KAAK,CAAE,CAAC;QACtB,qBAAqB,CAAE,KAAK,KAAK,CAAC,CAAE,CAAC;IACtC,CAAC;IAED,SAAS,CAAE,GAAG,EAAE;QACf,IAAK,KAAK,KAAK,CAAC,EAAG,CAAC;YACnB,OAAO;QACR,CAAC;QAED,MAAM,OAAO,GAAG,UAAU,CAAE,GAAG,EAAE;YAChC,qBAAqB,CAAE,IAAI,CAAE,CAAC;QAC/B,CAAC,EAAE,KAAK,CAAE,CAAC;QAEX,OAAO,GAAG,EAAE,CAAC,YAAY,CAAE,OAAO,CAAE,CAAC;IACtC,CAAC,EAAE,CAAE,KAAK,CAAE,CAAE,CAAC;IAEf,OAAO,CACN,MAAC,eAAe,eACf,KAAC,MAAM,IAAC,WAAW,EAAG,WAAW,GAAK,EACtC,eAAK,SAAS,EAAC,4BAA4B,aACxC,KAAK,IAAI,kBAAkB,IAAI,CAChC,cAAK,SAAS,EAAC,6CAA6C,YAC3D,cAAK,SAAS,EAAC,qCAAqC,YACnD,KAAC,OAAO,IAAC,IAAI,EAAG,KAAK,EAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjD,GACD,CACN,EACD,KAAC,WAAW,IAAC,SAAS,EAAC,0CAA0C,EAAC,KAAK,EAAG,QAAQ,GAAK,IAClF,IACW,CAClB,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/wireframes/Loading/Loading.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { Loading } from './Loading';
+const meta = {
+    title: 'Onboarding/StepWireframes/Loading',
+    component: Loading,
+    decorators: [withStepContainerV2ContextDecorator],
+};
+export default meta;
+export const Default = () => {
+    return _jsx(Loading, { title: "Loading", progress: 0.5 });
+};
+export const Indeterminate = () => {
+    return _jsx(Loading, { title: "Loading", progress: undefined });
+};
+export const NoTitle = () => {
+    return _jsx(Loading, { progress: undefined });
+};
+export const DelayedTitle = () => {
+    return _jsx(Loading, { title: "Reticulating splines", progress: undefined, delay: 2000 });
+};
+//# sourceMappingURL=Loading.stories.js.map

package/dist/esm/step-container-v2/wireframes/Loading/Loading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.stories.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/Loading/Loading.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AACxG,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,MAAM,IAAI,GAA2B;IACpC,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,CAAE,mCAAmC,CAAE;CACnD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC3B,OAAO,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAG,GAAG,GAAK,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IACjC,OAAO,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAG,SAAS,GAAK,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC3B,OAAO,KAAC,OAAO,IAAC,QAAQ,EAAG,SAAS,GAAK,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAChC,OAAO,KAAC,OAAO,IAAC,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAG,SAAS,EAAG,KAAK,EAAG,IAAI,GAAK,CAAC;AACvF,CAAC,CAAC"}

package/dist/esm/step-container-v2/wireframes/Loading/style.scss

@@ -0,0 +1,22 @@
+.step-container-v2--loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	inset: 0;
+
+	&__heading-wrapper {
+		position: absolute;
+		height: 0;
+	}
+
+	&__heading {
+		transform: translateY( -100% );
+		padding-bottom: 3rem;
+	}
+
+	&__progress-bar {
+		--wp-components-color-foreground: var( --color-accent, #3858e9 );
+	}
+}

package/dist/esm/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+import './style.scss';
+export const PlaygroundLayout = ({ topBar, className, children }) => {
+    return (_jsx(StepContainerV2, { children: (context) => {
+            const content = typeof children === 'function' ? children(context) : children;
+            return (_jsxs(_Fragment, { children: [_jsx(TopBarRenderer, { topBar: topBar }), _jsx("div", { className: clsx('step-container-v2__playground-layout', className), children: content })] }));
+        } }));
+};
+//# sourceMappingURL=PlaygroundLayout.js.map

package/dist/esm/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundLayout.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,OAAO,cAAc,CAAC;AAQtB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAyB,EAAG,EAAE;IAC5F,OAAO,CACN,KAAC,eAAe,cACb,CAAE,OAAO,EAAG,EAAE;YACf,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAE,OAAO,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAEhF,OAAO,CACN,8BACC,KAAC,cAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,cAAK,SAAS,EAAG,IAAI,CAAE,sCAAsC,EAAE,SAAS,CAAE,YACvE,OAAO,GACJ,IACJ,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TopBar, BackButton, PrimaryButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { PlaygroundLayout } from './PlaygroundLayout';
+const meta = {
+    title: 'Onboarding/StepWireframes/PlaygroundLayout',
+    component: PlaygroundLayout,
+    decorators: [withStepContainerV2ContextDecorator],
+};
+export default meta;
+export const Default = () => (_jsx(PlaygroundLayout, { topBar: _jsx(TopBar, { leftElement: _jsx(BackButton, {}), rightElement: _jsx(PrimaryButton, {}) }), children: _jsx(WireframePlaceholder, { height: "100%", children: "Main" }) }));
+//# sourceMappingURL=PlaygroundLayout.stories.js.map

package/dist/esm/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundLayout.stories.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AACxG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,IAAI,GAAoC;IAC7C,KAAK,EAAE,4CAA4C;IACnD,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,CAAE,mCAAmC,CAAE;CACnD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAC5B,KAAC,gBAAgB,IAChB,MAAM,EAAG,KAAC,MAAM,IAAC,WAAW,EAAG,KAAC,UAAU,KAAG,EAAG,YAAY,EAAG,KAAC,aAAa,KAAG,GAAK,YAErF,KAAC,oBAAoB,IAAC,MAAM,EAAC,MAAM,qBAA4B,GAC7C,CACnB,CAAC"}

package/dist/esm/step-container-v2/wireframes/PlaygroundLayout/style.scss

@@ -0,0 +1,5 @@
+.step-container-v2__playground-layout {
+	height: calc(
+		100vh - var( --step-container-v2-top-bar-height )
+	);
+}

package/dist/esm/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Children, Fragment, isValidElement } from 'react';
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+import './style.scss';
+export const TwoColumnLayout = ({ firstColumnWidth, secondColumnWidth, children, topBar, heading, className, footer, stickyBottomBar, noBottomPadding = false, columns = 10, isFullWidth = false, noInlinePadding = false, }) => {
+    const getChildFlexGrow = (index) => {
+        switch (index) {
+            case 0:
+                return firstColumnWidth;
+            case 1:
+                return secondColumnWidth;
+            default:
+                return undefined;
+        }
+    };
+    return (_jsx(StepContainerV2, { children: (context) => {
+            let childElements = typeof children === 'function' ? children(context) : children;
+            if (isValidElement(childElements) &&
+                childElements.type === Fragment) {
+                childElements = childElements.props.children;
+            }
+            childElements = Children.toArray(childElements)
+                .filter(isValidElement)
+                .map((child, index) => (_jsx("div", { style: { flex: getChildFlexGrow(index) }, children: child }, index)));
+            return (_jsxs(_Fragment, { children: [_jsx(TopBarRenderer, { topBar: topBar }), _jsxs(ContentWrapper, { noBottomPadding: noBottomPadding, noInlinePadding: noInlinePadding, isFullWidth: isFullWidth, children: [heading && _jsx(ContentRow, { columns: 6, children: heading }), _jsx(ContentRow, { columns: columns, className: clsx('step-container-v2__content-row--two-column-layout', className), children: childElements }), footer && _jsx(ContentRow, { columns: 6, children: footer })] }), _jsx(StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+//# sourceMappingURL=TwoColumnLayout.js.map

package/dist/esm/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColumnLayout.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0DAA0D,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,cAAc,CAAC;AAiBtB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAE,EAChC,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,eAAe,EACf,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,KAAK,EACnB,eAAe,GAAG,KAAK,GACD,EAAG,EAAE;IAC3B,MAAM,gBAAgB,GAAG,CAAE,KAAa,EAAG,EAAE;QAC5C,QAAS,KAAK,EAAG,CAAC;YACjB,KAAK,CAAC;gBACL,OAAO,gBAAgB,CAAC;YACzB,KAAK,CAAC;gBACL,OAAO,iBAAiB,CAAC;YAC1B;gBACC,OAAO,SAAS,CAAC;QACnB,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,eAAe,cACb,CAAE,OAAO,EAAG,EAAE;YACf,IAAI,aAAa,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAE,OAAO,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACpF,IACC,cAAc,CAA8B,aAAa,CAAE;gBAC3D,aAAa,CAAC,IAAI,KAAK,QAAQ,EAC9B,CAAC;gBACF,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC9C,CAAC;YAED,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAE,aAAa,CAAE;iBAC/C,MAAM,CAAE,cAAc,CAAE;iBACxB,GAAG,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE,CAAC,CACzB,cAAK,KAAK,EAAG,EAAE,IAAI,EAAE,gBAAgB,CAAE,KAAK,CAAE,EAAE,YAC7C,KAAK,IADiD,KAAK,CAExD,CACN,CAAE,CAAC;YAEL,OAAO,CACN,8BACC,KAAC,cAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,MAAC,cAAc,IACd,eAAe,EAAG,eAAe,EACjC,eAAe,EAAG,eAAe,EACjC,WAAW,EAAG,WAAW,aAEvB,OAAO,IAAI,KAAC,UAAU,IAAC,OAAO,EAAG,CAAC,YAAK,OAAO,GAAe,EAC/D,KAAC,UAAU,IACV,OAAO,EAAG,OAAO,EACjB,SAAS,EAAG,IAAI,CAAE,mDAAmD,EAAE,SAAS,CAAE,YAEhF,aAAa,GACH,EACX,MAAM,IAAI,KAAC,UAAU,IAAC,OAAO,EAAG,CAAC,YAAK,MAAM,GAAe,IAC7C,EACjB,KAAC,uBAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createInterpolateElement } from '@wordpress/element';
+import { Heading, TopBar, BackButton, PrimaryButton, StickyBottomBar } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { TwoColumnLayout } from './TwoColumnLayout';
+const meta = {
+    title: 'Onboarding/StepWireframes/TwoColumnLayout',
+    component: TwoColumnLayout,
+    decorators: [withStepContainerV2ContextDecorator],
+};
+export default meta;
+export const ThreeColumnsOnRightLayout = () => (_jsxs(TwoColumnLayout, { firstColumnWidth: 2, secondColumnWidth: 1, topBar: _jsx(TopBar, { leftElement: _jsx(BackButton, {}) }), heading: _jsx(Heading, { text: "Three Columns on the Right", subText: createInterpolateElement('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: _jsx("code", {}),
+        }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: _jsx(PrimaryButton, {}) }), children: [_jsx(WireframePlaceholder, { height: 616, children: "Main" }), _jsx(WireframePlaceholder, { height: 616, children: "Sidebar" })] }));
+export const EqualTwoColumnLayout = () => (_jsxs(TwoColumnLayout, { firstColumnWidth: 1, secondColumnWidth: 1, topBar: _jsx(TopBar, { leftElement: _jsx(BackButton, {}) }), heading: _jsx(Heading, { text: "Two Equal Columns", subText: createInterpolateElement('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: _jsx("code", {}),
+        }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: _jsx(PrimaryButton, {}) }), children: [_jsx(WireframePlaceholder, { height: 616, children: "Content 1" }), _jsx(WireframePlaceholder, { height: 616, children: "Content 2" })] }));
+export const WithRenderProp = () => (_jsx(TwoColumnLayout, { firstColumnWidth: 1, secondColumnWidth: 1, topBar: _jsx(TopBar, { leftElement: _jsx(BackButton, {}) }), heading: _jsx(Heading, { text: "Columns Rendered with Render Prop", subText: createInterpolateElement('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: _jsx("code", {}),
+        }) }), stickyBottomBar: _jsx(StickyBottomBar, { rightElement: _jsx(PrimaryButton, {}) }), children: ({ isSmallViewport, isLargeViewport }) => (_jsxs(_Fragment, { children: [_jsxs(WireframePlaceholder, { height: 616, children: [_jsx("div", { children: "Content 1" }), _jsxs("pre", { children: ["is small viewport: ", isSmallViewport.toString()] })] }), _jsxs(WireframePlaceholder, { height: 616, children: [_jsx("div", { children: "Content 1" }), _jsxs("pre", { children: ["is large viewport: ", isLargeViewport.toString()] })] })] })) }));
+//# sourceMappingURL=TwoColumnLayout.stories.js.map

package/dist/esm/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColumnLayout.stories.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AACxG,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,IAAI,GAAmC;IAC5C,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,CAAE,mCAAmC,CAAE;CACnD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,CAC9C,MAAC,eAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,KAAC,MAAM,IAAC,WAAW,EAAG,KAAC,UAAU,KAAG,GAAK,EAClD,OAAO,EACN,KAAC,OAAO,IACP,IAAI,EAAC,4BAA4B,EACjC,OAAO,EAAG,wBAAwB,CACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,gBAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,KAAC,eAAe,IAAC,YAAY,EAAG,KAAC,aAAa,KAAG,GAAK,aAExE,KAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,qBAA8B,EAChE,KAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,wBAAiC,IAClD,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACzC,MAAC,eAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,KAAC,MAAM,IAAC,WAAW,EAAG,KAAC,UAAU,KAAG,GAAK,EAClD,OAAO,EACN,KAAC,OAAO,IACP,IAAI,EAAC,mBAAmB,EACxB,OAAO,EAAG,wBAAwB,CACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,gBAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,KAAC,eAAe,IAAC,YAAY,EAAG,KAAC,aAAa,KAAG,GAAK,aAExE,KAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,0BAAmC,EACrE,KAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,0BAAmC,IACpD,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CACnC,KAAC,eAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,KAAC,MAAM,IAAC,WAAW,EAAG,KAAC,UAAU,KAAG,GAAK,EAClD,OAAO,EACN,KAAC,OAAO,IACP,IAAI,EAAC,mCAAmC,EACxC,OAAO,EAAG,wBAAwB,CACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,gBAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,KAAC,eAAe,IAAC,YAAY,EAAG,KAAC,aAAa,KAAG,GAAK,YAEtE,CAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAAG,EAAE,CAAC,CAC7C,8BACC,MAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,aACjC,sCAAoB,EACpB,iDAA0B,eAAe,CAAC,QAAQ,EAAE,IAAQ,IACtC,EACvB,MAAC,oBAAoB,IAAC,MAAM,EAAG,GAAG,aACjC,sCAAoB,EACpB,iDAA0B,eAAe,CAAC,QAAQ,EAAE,IAAQ,IACtC,IACrB,CACH,GACgB,CAClB,CAAC"}

package/dist/esm/step-container-v2/wireframes/TwoColumnLayout/style.scss

@@ -0,0 +1,15 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__content-row--two-column-layout {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 3rem;
+
+	@include break-large {
+		gap: 4rem;
+		flex-direction: row;
+		align-items: flex-start;
+	}
+}

package/dist/esm/step-container-v2/wireframes/WideLayout/WideLayout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+export const WideLayout = ({ topBar, heading, headingColumnWidth, className, children, stickyBottomBar, }) => {
+    return (_jsx(StepContainerV2, { children: (context) => {
+            const content = typeof children === 'function' ? children(context) : children;
+            return (_jsxs(_Fragment, { children: [_jsx(TopBarRenderer, { topBar: topBar }), _jsxs(ContentWrapper, { children: [heading && _jsx(ContentRow, { columns: headingColumnWidth, children: heading }), _jsx(ContentRow, { className: className, children: content })] }), _jsx(StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+//# sourceMappingURL=WideLayout.js.map

package/dist/esm/step-container-v2/wireframes/WideLayout/WideLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WideLayout.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/WideLayout/WideLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0DAA0D,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAWxE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAE,EAC3B,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,eAAe,GACE,EAAG,EAAE;IACtB,OAAO,CACN,KAAC,eAAe,cACb,CAAE,OAAO,EAAG,EAAE;YACf,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAE,OAAO,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAEhF,OAAO,CACN,8BACC,KAAC,cAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,MAAC,cAAc,eACZ,OAAO,IAAI,KAAC,UAAU,IAAC,OAAO,EAAG,kBAAkB,YAAK,OAAO,GAAe,EAChF,KAAC,UAAU,IAAC,SAAS,EAAG,SAAS,YAAK,OAAO,GAAe,IAC5C,EACjB,KAAC,uBAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC"}