@automattic/onboarding 1.0.0 → 1.0.1

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withStepContainerV2ContextDecorator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const withStepContainerV2ContextDecorator = (Story) => {
+    return ((0, jsx_runtime_1.jsx)(__1.StepContainerV2Provider, { value: {
+            flowName: 'flowName',
+            stepName: 'stepName',
+            recordTracksEvent: () => { },
+            logo: null,
+        }, children: (0, jsx_runtime_1.jsx)(Story, {}) }));
+};
+exports.withStepContainerV2ContextDecorator = withStepContainerV2ContextDecorator;
+//# sourceMappingURL=withStepContainerV2ContextDecorator.js.map

package/dist/cjs/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,0BAA6C;AAEtC,MAAM,mCAAmC,GAAG,CAAE,KAA0B,EAAG,EAAE;IACnF,OAAO,CACN,uBAAC,2BAAuB,IACvB,KAAK,EAAG;YACP,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;YACpB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;YAC3B,IAAI,EAAE,IAAI;SACV,YAED,uBAAC,KAAK,KAAG,GACgB,CAC1B,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,mCAAmC,uCAa9C"}

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

@@ -0,0 +1,41 @@
+"use strict";
+/**
+ * NEVER export StepContainerV2 directly.
+ *
+ * Export only components and wireframes.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FixedColumnOnTheLeftLayout = exports.PlaygroundLayout = exports.Loading = exports.WideLayout = exports.TwoColumnLayout = exports.CenteredColumnLayout = exports.StickyBottomBar = exports.TopBar = exports.StepCounter = exports.Heading = exports.LinkButton = exports.SkipButton = exports.SecondaryButton = exports.PrimaryButton = exports.BackButton = exports.StepContainerV2Provider = void 0;
+var StepContainerV2Context_1 = require("./contexts/StepContainerV2Context");
+Object.defineProperty(exports, "StepContainerV2Provider", { enumerable: true, get: function () { return StepContainerV2Context_1.StepContainerV2Provider; } });
+var BackButton_1 = require("./components/buttons/BackButton/BackButton");
+Object.defineProperty(exports, "BackButton", { enumerable: true, get: function () { return BackButton_1.BackButton; } });
+var PrimaryButton_1 = require("./components/buttons/PrimaryButton/PrimaryButton");
+Object.defineProperty(exports, "PrimaryButton", { enumerable: true, get: function () { return PrimaryButton_1.PrimaryButton; } });
+var SecondaryButton_1 = require("./components/buttons/SecondaryButton/SecondaryButton");
+Object.defineProperty(exports, "SecondaryButton", { enumerable: true, get: function () { return SecondaryButton_1.SecondaryButton; } });
+var SkipButton_1 = require("./components/buttons/SkipButton/SkipButton");
+Object.defineProperty(exports, "SkipButton", { enumerable: true, get: function () { return SkipButton_1.SkipButton; } });
+var LinkButton_1 = require("./components/buttons/LinkButton/LinkButton");
+Object.defineProperty(exports, "LinkButton", { enumerable: true, get: function () { return LinkButton_1.LinkButton; } });
+var Heading_1 = require("./components/Heading/Heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
+var StepCounter_1 = require("./components/StepCounter/StepCounter");
+Object.defineProperty(exports, "StepCounter", { enumerable: true, get: function () { return StepCounter_1.StepCounter; } });
+var TopBar_1 = require("./components/TopBar/TopBar");
+Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return TopBar_1.TopBar; } });
+var StickyBottomBar_1 = require("./components/StickyBottomBar/StickyBottomBar");
+Object.defineProperty(exports, "StickyBottomBar", { enumerable: true, get: function () { return StickyBottomBar_1.StickyBottomBar; } });
+var CenteredColumnLayout_1 = require("./wireframes/CenteredColumnLayout/CenteredColumnLayout");
+Object.defineProperty(exports, "CenteredColumnLayout", { enumerable: true, get: function () { return CenteredColumnLayout_1.CenteredColumnLayout; } });
+var TwoColumnLayout_1 = require("./wireframes/TwoColumnLayout/TwoColumnLayout");
+Object.defineProperty(exports, "TwoColumnLayout", { enumerable: true, get: function () { return TwoColumnLayout_1.TwoColumnLayout; } });
+var WideLayout_1 = require("./wireframes/WideLayout/WideLayout");
+Object.defineProperty(exports, "WideLayout", { enumerable: true, get: function () { return WideLayout_1.WideLayout; } });
+var Loading_1 = require("./wireframes/Loading/Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
+var PlaygroundLayout_1 = require("./wireframes/PlaygroundLayout/PlaygroundLayout");
+Object.defineProperty(exports, "PlaygroundLayout", { enumerable: true, get: function () { return PlaygroundLayout_1.PlaygroundLayout; } });
+var FixedColumnOnTheLeftLayout_1 = require("./wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout");
+Object.defineProperty(exports, "FixedColumnOnTheLeftLayout", { enumerable: true, get: function () { return FixedColumnOnTheLeftLayout_1.FixedColumnOnTheLeftLayout; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,4EAA4E;AAAnE,iIAAA,uBAAuB,OAAA;AAEhC,yEAAwE;AAA/D,wGAAA,UAAU,OAAA;AACnB,kFAAiF;AAAxE,8GAAA,aAAa,OAAA;AACtB,wFAAuF;AAA9E,kHAAA,eAAe,OAAA;AACxB,yEAAwE;AAA/D,wGAAA,UAAU,OAAA;AACnB,yEAAwE;AAA/D,wGAAA,UAAU,OAAA;AACnB,wDAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,oEAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,qDAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,gFAA+E;AAAtE,kHAAA,eAAe,OAAA;AAExB,+FAA8F;AAArF,4HAAA,oBAAoB,OAAA;AAC7B,gFAA+E;AAAtE,kHAAA,eAAe,OAAA;AACxB,iEAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,wDAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,mFAAkF;AAAzE,oHAAA,gBAAgB,OAAA;AACzB,iHAAgH;AAAvG,wIAAA,0BAA0B,OAAA"}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenteredColumnLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentRow_1 = require("../../components/ContentRow/ContentRow");
+const ContentWrapper_1 = require("../../components/ContentWrapper/ContentWrapper");
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const StickyBottomBarRenderer_1 = require("../../components/StickyBottomBar/StickyBottomBarRenderer");
+const TopBar_1 = require("../../components/TopBar/TopBar");
+const TopBarRenderer_1 = require("../../components/TopBar/TopBarRenderer");
+const CenteredColumnLayout = ({ columnWidth, topBar, heading, headingColumnWidth = 6, className, children, stickyBottomBar, verticalAlign, noGap, }) => {
+    return ((0, jsx_runtime_1.jsx)(StepContainerV2_1.StepContainerV2, { initialTopBarHeight: 
+        // Calculate the top bar height on the server side to avoid layout shifts.
+        typeof window === 'undefined' &&
+            (0, TopBar_1.isTopBar)((0, TopBarRenderer_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TopBarRenderer_1.TopBarRenderer, { topBar: topBar }), (0, jsx_runtime_1.jsxs)(ContentWrapper_1.ContentWrapper, { centerAligned: verticalAlign === 'center', noGap: noGap, children: [heading && (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: headingColumnWidth, children: heading }), (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: columnWidth, className: className, children: content })] }), (0, jsx_runtime_1.jsx)(StickyBottomBarRenderer_1.StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+exports.CenteredColumnLayout = CenteredColumnLayout;
+//# sourceMappingURL=CenteredColumnLayout.js.map

package/dist/cjs/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,uEAAoE;AACpE,mFAAgF;AAChF,sFAAmF;AAEnF,sGAAmG;AACnG,2DAA0D;AAC1D,2EAAsF;AAc/E,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,uBAAC,iCAAe,IACf,mBAAmB;QAClB,0EAA0E;QAC1E,OAAO,MAAM,KAAK,WAAW;YAC7B,IAAA,iBAAQ,EACP,IAAA,6BAAY,EAAE,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,6DACC,uBAAC,+BAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,wBAAC,+BAAc,IAAC,aAAa,EAAG,aAAa,KAAK,QAAQ,EAAG,KAAK,EAAG,KAAK,aACvE,OAAO,IAAI,uBAAC,uBAAU,IAAC,OAAO,EAAG,kBAAkB,YAAK,OAAO,GAAe,EAChF,uBAAC,uBAAU,IAAC,OAAO,EAAG,WAAW,EAAG,SAAS,EAAG,SAAS,YACtD,OAAO,GACG,IACG,EACjB,uBAAC,iDAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AA5CW,QAAA,oBAAoB,wBA4C/B"}

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TenColumnsCenteredLayout = exports.EightColumnsCenteredLayout = exports.SixColumnsCenteredLayout = exports.FourColumnsCenteredLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const __1 = require("../..");
+const wireframe_placeholder_1 = require("../../helpers/wireframe-placeholder");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const CenteredColumnLayout_1 = require("./CenteredColumnLayout");
+const meta = {
+    title: 'Onboarding/StepWireframes/CenteredColumnLayout',
+    component: CenteredColumnLayout_1.CenteredColumnLayout,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const FourColumnsCenteredLayout = () => {
+    const backButton = (0, jsx_runtime_1.jsx)(__1.BackButton, {});
+    const nextButton = (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {});
+    const skipButton = (0, jsx_runtime_1.jsx)(__1.SkipButton, {});
+    return ((0, jsx_runtime_1.jsx)(CenteredColumnLayout_1.CenteredColumnLayout, { columnWidth: 4, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: backButton, rightElement: skipButton }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Four Columns Centered Layout", subText: (0, element_1.createInterpolateElement)('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: (0, jsx_runtime_1.jsx)("code", {}),
+            }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: nextButton }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 370, children: "Content" }) }));
+};
+exports.FourColumnsCenteredLayout = FourColumnsCenteredLayout;
+const SixColumnsCenteredLayout = () => {
+    const backButton = (0, jsx_runtime_1.jsx)(__1.BackButton, {});
+    const nextButton = (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {});
+    const skipButton = (0, jsx_runtime_1.jsx)(__1.SkipButton, {});
+    return ((0, jsx_runtime_1.jsx)(CenteredColumnLayout_1.CenteredColumnLayout, { columnWidth: 6, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: backButton, rightElement: skipButton }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Six Columns Centered Layout", subText: (0, element_1.createInterpolateElement)('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: (0, jsx_runtime_1.jsx)("code", {}),
+            }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: nextButton }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+exports.SixColumnsCenteredLayout = SixColumnsCenteredLayout;
+const EightColumnsCenteredLayout = () => {
+    const backButton = (0, jsx_runtime_1.jsx)(__1.BackButton, {});
+    const nextButton = (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {});
+    const skipButton = (0, jsx_runtime_1.jsx)(__1.SkipButton, {});
+    return ((0, jsx_runtime_1.jsx)(CenteredColumnLayout_1.CenteredColumnLayout, { columnWidth: 8, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: backButton, rightElement: skipButton }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Six Columns Centered Layout", subText: (0, element_1.createInterpolateElement)('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: (0, jsx_runtime_1.jsx)("code", {}),
+            }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: nextButton }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+exports.EightColumnsCenteredLayout = EightColumnsCenteredLayout;
+const TenColumnsCenteredLayout = () => {
+    const backButton = (0, jsx_runtime_1.jsx)(__1.BackButton, {});
+    const nextButton = (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {});
+    const skipButton = (0, jsx_runtime_1.jsx)(__1.SkipButton, {});
+    return ((0, jsx_runtime_1.jsx)(CenteredColumnLayout_1.CenteredColumnLayout, { columnWidth: 10, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: backButton, rightElement: skipButton }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Eight Columns Centered Layout", subText: (0, element_1.createInterpolateElement)('An example of the <code>CenteredColumnLayout</code> wireframe layout.', {
+                code: (0, jsx_runtime_1.jsx)("code", {}),
+            }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: nextButton }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 500, children: "Content" }) }));
+};
+exports.TenColumnsCenteredLayout = TenColumnsCenteredLayout;
+//# sourceMappingURL=CenteredColumnLayout.stories.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FixedColumnOnTheLeftLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentRow_1 = require("../../components/ContentRow/ContentRow");
+const ContentWrapper_1 = require("../../components/ContentWrapper/ContentWrapper");
+const Heading_1 = require("../../components/Heading/Heading");
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const StickyBottomBarRenderer_1 = require("../../components/StickyBottomBar/StickyBottomBarRenderer");
+const TopBarRenderer_1 = require("../../components/TopBar/TopBarRenderer");
+require("./style.scss");
+const FixedColumnOnTheLeftLayout = ({ fixedColumnWidth, children, topBar, heading, footer, stickyBottomBar, }) => {
+    return ((0, jsx_runtime_1.jsx)(StepContainerV2_1.StepContainerV2, { children: (context) => {
+            const [fixedColumn, secondColumn] = children.map((child) => {
+                if (typeof child === 'function') {
+                    return child(context);
+                }
+                return child;
+            });
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TopBarRenderer_1.TopBarRenderer, { topBar: topBar }), (0, jsx_runtime_1.jsxs)(ContentWrapper_1.ContentWrapper, { axisDirection: context.isLargeViewport ? 'horizontal' : 'vertical', noTopPadding: context.isLargeViewport, children: [(0, jsx_runtime_1.jsxs)(ContentRow_1.ContentRow, { columns: context.isLargeViewport ? fixedColumnWidth : undefined, stretched: true, className: "step-container-v2--fixed-column-on-the-left-layout__fixed-column", children: [heading, fixedColumn, footer] }), (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { stretched: true, children: secondColumn })] }), (0, jsx_runtime_1.jsx)(StickyBottomBarRenderer_1.StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+exports.FixedColumnOnTheLeftLayout = FixedColumnOnTheLeftLayout;
+// eslint-disable-next-line react/display-name
+FixedColumnOnTheLeftLayout.Heading = (props) => ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { ...props, align: "left", size: "small" }));
+//# sourceMappingURL=FixedColumnOnTheLeftLayout.js.map

package/dist/cjs/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,uEAAoE;AACpE,mFAAgF;AAChF,8DAA2D;AAC3D,sFAAmF;AAEnF,sGAAmG;AACnG,2EAAwE;AACxE,wBAAsB;AAWtB,MAAM,0BAA0B,GAAG,CAAE,EACpC,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,eAAe,GACkB,EAAG,EAAE;IACtC,OAAO,CACN,uBAAC,iCAAe,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,6DACC,uBAAC,+BAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,wBAAC,+BAAc,IACd,aAAa,EAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACnE,YAAY,EAAG,OAAO,CAAC,eAAe,aAEtC,wBAAC,uBAAU,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,uBAAC,uBAAU,IAAC,SAAS,kBAAG,YAAY,GAAe,IACnC,EACjB,uBAAC,iDAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AAOO,gEAA0B;AALnC,8CAA8C;AAC9C,0BAA0B,CAAC,OAAO,GAAG,CAAE,KAAuC,EAAG,EAAE,CAAC,CACnF,uBAAC,iBAAO,OAAM,KAAK,EAAG,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAG,CAClD,CAAC"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeColumnsOnTheLeft = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const __1 = require("../..");
+const wireframe_placeholder_1 = require("../../helpers/wireframe-placeholder");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const FixedColumnOnTheLeftLayout_1 = require("./FixedColumnOnTheLeftLayout");
+const meta = {
+    title: 'Onboarding/StepWireframes/FixedColumnOnTheLeftLayout',
+    component: FixedColumnOnTheLeftLayout_1.FixedColumnOnTheLeftLayout,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const ThreeColumnsOnTheLeft = () => ((0, jsx_runtime_1.jsxs)(FixedColumnOnTheLeftLayout_1.FixedColumnOnTheLeftLayout, { fixedColumnWidth: 3, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}), rightElement: (0, jsx_runtime_1.jsxs)("span", { children: ["Need help? ", (0, jsx_runtime_1.jsx)(__1.LinkButton, { children: "Contact us" })] }) }), heading: (0, jsx_runtime_1.jsx)(FixedColumnOnTheLeftLayout_1.FixedColumnOnTheLeftLayout.Heading, { text: "Fixed Column on the Left", subText: (0, element_1.createInterpolateElement)('An example of the <code>FixedColumnOnTheLeftLayout</code> wireframe layout.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), stickyBottomBar: (context) => {
+        if (context.isLargeViewport) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) });
+    }, children: [(0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { style: { flex: 1 }, children: "Sidebar" }), (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: "100%", children: "Main" })] }));
+exports.ThreeColumnsOnTheLeft = ThreeColumnsOnTheLeft;
+//# sourceMappingURL=FixedColumnOnTheLeftLayout.stories.js.map

package/dist/cjs/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,gDAA8D;AAC9D,6BAAuF;AACvF,+EAA2E;AAC3E,2GAAwG;AACxG,6EAA0E;AAG1E,MAAM,IAAI,GAA8C;IACvD,KAAK,EAAE,sDAAsD;IAC7D,SAAS,EAAE,uDAA0B;IACrC,UAAU,EAAE,CAAE,yEAAmC,CAAE;CACnD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEb,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAC1C,wBAAC,uDAA0B,IAC1B,gBAAgB,EAAG,CAAC,EACpB,MAAM,EACL,uBAAC,UAAM,IACN,WAAW,EAAG,uBAAC,cAAU,KAAG,EAC5B,YAAY,EACX,4DACY,uBAAC,cAAU,6BAAwB,IACxC,GAEP,EAEH,OAAO,EACN,uBAAC,uDAA0B,CAAC,OAAO,IAClC,IAAI,EAAC,0BAA0B,EAC/B,OAAO,EAAG,IAAA,kCAAwB,EACjC,6EAA6E,EAC7E;YACC,IAAI,EAAE,kCAAQ;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,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,CAAC;IAC/D,CAAC,aAED,uBAAC,4CAAoB,IAAC,KAAK,EAAG,EAAE,IAAI,EAAE,CAAC,EAAE,wBAAiC,EAC1E,uBAAC,4CAAoB,IAAC,MAAM,EAAC,MAAM,qBAA4B,IACnC,CAC7B,CAAC;AAnCW,QAAA,qBAAqB,yBAmChC"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const react_1 = require("react");
+const Heading_1 = require("../../components/Heading/Heading");
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const TopBar_1 = require("../../components/TopBar/TopBar");
+require("./style.scss");
+const Loading = ({ title, progress, delay = 0, compactLogo }) => {
+    const [shouldDisplayTitle, setShouldDisplayTitle] = (0, react_1.useState)(delay === 0);
+    const [prevDelay, setPrevDelay] = (0, react_1.useState)(delay);
+    if (delay !== prevDelay) {
+        setPrevDelay(delay);
+        setShouldDisplayTitle(delay === 0);
+    }
+    (0, react_1.useEffect)(() => {
+        if (delay === 0) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            setShouldDisplayTitle(true);
+        }, delay);
+        return () => clearTimeout(timeout);
+    }, [delay]);
+    return ((0, jsx_runtime_1.jsxs)(StepContainerV2_1.StepContainerV2, { children: [(0, jsx_runtime_1.jsx)(TopBar_1.TopBar, { compactLogo: compactLogo }), (0, jsx_runtime_1.jsxs)("div", { className: "step-container-v2--loading", children: [title && shouldDisplayTitle && ((0, jsx_runtime_1.jsx)("div", { className: "step-container-v2--loading__heading-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "step-container-v2--loading__heading", children: (0, jsx_runtime_1.jsx)(Heading_1.Heading, { text: title, size: "small", align: "center" }) }) })), (0, jsx_runtime_1.jsx)(components_1.ProgressBar, { className: "step-container-v2--loading__progress-bar", value: progress })] })] }));
+};
+exports.Loading = Loading;
+//# sourceMappingURL=Loading.js.map

package/dist/cjs/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,sDAAoD;AACpD,iCAAuD;AACvD,8DAA2D;AAC3D,sFAAmF;AACnF,2DAA0E;AAE1E,wBAAsB;AASf,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,IAAA,gBAAQ,EAAE,KAAK,KAAK,CAAC,CAAE,CAAC;IAE9E,MAAM,CAAE,SAAS,EAAE,YAAY,CAAE,GAAG,IAAA,gBAAQ,EAAE,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,IAAA,iBAAS,EAAE,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,wBAAC,iCAAe,eACf,uBAAC,eAAM,IAAC,WAAW,EAAG,WAAW,GAAK,EACtC,iCAAK,SAAS,EAAC,4BAA4B,aACxC,KAAK,IAAI,kBAAkB,IAAI,CAChC,gCAAK,SAAS,EAAC,6CAA6C,YAC3D,gCAAK,SAAS,EAAC,qCAAqC,YACnD,uBAAC,iBAAO,IAAC,IAAI,EAAG,KAAK,EAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjD,GACD,CACN,EACD,uBAAC,wBAAW,IAAC,SAAS,EAAC,0CAA0C,EAAC,KAAK,EAAG,QAAQ,GAAK,IAClF,IACW,CAClB,CAAC;AACH,CAAC,CAAC;AApCW,QAAA,OAAO,WAoClB"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DelayedTitle = exports.NoTitle = exports.Indeterminate = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const Loading_1 = require("./Loading");
+const meta = {
+    title: 'Onboarding/StepWireframes/Loading',
+    component: Loading_1.Loading,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const Default = () => {
+    return (0, jsx_runtime_1.jsx)(Loading_1.Loading, { title: "Loading", progress: 0.5 });
+};
+exports.Default = Default;
+const Indeterminate = () => {
+    return (0, jsx_runtime_1.jsx)(Loading_1.Loading, { title: "Loading", progress: undefined });
+};
+exports.Indeterminate = Indeterminate;
+const NoTitle = () => {
+    return (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: undefined });
+};
+exports.NoTitle = NoTitle;
+const DelayedTitle = () => {
+    return (0, jsx_runtime_1.jsx)(Loading_1.Loading, { title: "Reticulating splines", progress: undefined, delay: 2000 });
+};
+exports.DelayedTitle = DelayedTitle;
+//# sourceMappingURL=Loading.stories.js.map

package/dist/cjs/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,2GAAwG;AACxG,uCAAoC;AAGpC,MAAM,IAAI,GAA2B;IACpC,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,iBAAO;IAClB,UAAU,EAAE,CAAE,yEAAmC,CAAE;CACnD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEb,MAAM,OAAO,GAAG,GAAG,EAAE;IAC3B,OAAO,uBAAC,iBAAO,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAG,GAAG,GAAK,CAAC;AACrD,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IACjC,OAAO,uBAAC,iBAAO,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAG,SAAS,GAAK,CAAC;AAC3D,CAAC,CAAC;AAFW,QAAA,aAAa,iBAExB;AAEK,MAAM,OAAO,GAAG,GAAG,EAAE;IAC3B,OAAO,uBAAC,iBAAO,IAAC,QAAQ,EAAG,SAAS,GAAK,CAAC;AAC3C,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB;AAEK,MAAM,YAAY,GAAG,GAAG,EAAE;IAChC,OAAO,uBAAC,iBAAO,IAAC,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAG,SAAS,EAAG,KAAK,EAAG,IAAI,GAAK,CAAC;AACvF,CAAC,CAAC;AAFW,QAAA,YAAY,gBAEvB"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaygroundLayout = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const TopBarRenderer_1 = require("../../components/TopBar/TopBarRenderer");
+require("./style.scss");
+const PlaygroundLayout = ({ topBar, className, children }) => {
+    return ((0, jsx_runtime_1.jsx)(StepContainerV2_1.StepContainerV2, { children: (context) => {
+            const content = typeof children === 'function' ? children(context) : children;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TopBarRenderer_1.TopBarRenderer, { topBar: topBar }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('step-container-v2__playground-layout', className), children: content })] }));
+        } }));
+};
+exports.PlaygroundLayout = PlaygroundLayout;
+//# sourceMappingURL=PlaygroundLayout.js.map

package/dist/cjs/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,wDAAwB;AACxB,sFAAmF;AAEnF,2EAAwE;AAExE,wBAAsB;AAQf,MAAM,gBAAgB,GAAG,CAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAyB,EAAG,EAAE;IAC5F,OAAO,CACN,uBAAC,iCAAe,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,6DACC,uBAAC,+BAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,sCAAsC,EAAE,SAAS,CAAE,YACvE,OAAO,GACJ,IACJ,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AAjBW,QAAA,gBAAgB,oBAiB3B"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("../..");
+const wireframe_placeholder_1 = require("../../helpers/wireframe-placeholder");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const PlaygroundLayout_1 = require("./PlaygroundLayout");
+const meta = {
+    title: 'Onboarding/StepWireframes/PlaygroundLayout',
+    component: PlaygroundLayout_1.PlaygroundLayout,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const Default = () => ((0, jsx_runtime_1.jsx)(PlaygroundLayout_1.PlaygroundLayout, { topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}), rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: "100%", children: "Main" }) }));
+exports.Default = Default;
+//# sourceMappingURL=PlaygroundLayout.stories.js.map

package/dist/cjs/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,6BAA0D;AAC1D,+EAA2E;AAC3E,2GAAwG;AACxG,yDAAsD;AAGtD,MAAM,IAAI,GAAoC;IAC7C,KAAK,EAAE,4CAA4C;IACnD,SAAS,EAAE,mCAAgB;IAC3B,UAAU,EAAE,CAAE,yEAAmC,CAAE;CACnD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEb,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAC5B,uBAAC,mCAAgB,IAChB,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,EAAG,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,YAErF,uBAAC,4CAAoB,IAAC,MAAM,EAAC,MAAM,qBAA4B,GAC7C,CACnB,CAAC;AANW,QAAA,OAAO,WAMlB"}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwoColumnLayout = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
+const ContentRow_1 = require("../../components/ContentRow/ContentRow");
+const ContentWrapper_1 = require("../../components/ContentWrapper/ContentWrapper");
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const StickyBottomBarRenderer_1 = require("../../components/StickyBottomBar/StickyBottomBarRenderer");
+const TopBarRenderer_1 = require("../../components/TopBar/TopBarRenderer");
+require("./style.scss");
+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 ((0, jsx_runtime_1.jsx)(StepContainerV2_1.StepContainerV2, { children: (context) => {
+            let childElements = typeof children === 'function' ? children(context) : children;
+            if ((0, react_1.isValidElement)(childElements) &&
+                childElements.type === react_1.Fragment) {
+                childElements = childElements.props.children;
+            }
+            childElements = react_1.Children.toArray(childElements)
+                .filter(react_1.isValidElement)
+                .map((child, index) => ((0, jsx_runtime_1.jsx)("div", { style: { flex: getChildFlexGrow(index) }, children: child }, index)));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TopBarRenderer_1.TopBarRenderer, { topBar: topBar }), (0, jsx_runtime_1.jsxs)(ContentWrapper_1.ContentWrapper, { noBottomPadding: noBottomPadding, noInlinePadding: noInlinePadding, isFullWidth: isFullWidth, children: [heading && (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: 6, children: heading }), (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: columns, className: (0, clsx_1.default)('step-container-v2__content-row--two-column-layout', className), children: childElements }), footer && (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: 6, children: footer })] }), (0, jsx_runtime_1.jsx)(StickyBottomBarRenderer_1.StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+exports.TwoColumnLayout = TwoColumnLayout;
+//# sourceMappingURL=TwoColumnLayout.js.map

package/dist/cjs/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,wDAAwB;AACxB,iCAAsE;AACtE,uEAAoE;AACpE,mFAAgF;AAChF,sFAAmF;AAEnF,sGAAmG;AACnG,2EAAwE;AACxE,wBAAsB;AAiBf,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,uBAAC,iCAAe,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,IAAA,sBAAc,EAA8B,aAAa,CAAE;gBAC3D,aAAa,CAAC,IAAI,KAAK,gBAAQ,EAC9B,CAAC;gBACF,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC9C,CAAC;YAED,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAE,aAAa,CAAE;iBAC/C,MAAM,CAAE,sBAAc,CAAE;iBACxB,GAAG,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE,CAAC,CACzB,gCAAK,KAAK,EAAG,EAAE,IAAI,EAAE,gBAAgB,CAAE,KAAK,CAAE,EAAE,YAC7C,KAAK,IADiD,KAAK,CAExD,CACN,CAAE,CAAC;YAEL,OAAO,CACN,6DACC,uBAAC,+BAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,wBAAC,+BAAc,IACd,eAAe,EAAG,eAAe,EACjC,eAAe,EAAG,eAAe,EACjC,WAAW,EAAG,WAAW,aAEvB,OAAO,IAAI,uBAAC,uBAAU,IAAC,OAAO,EAAG,CAAC,YAAK,OAAO,GAAe,EAC/D,uBAAC,uBAAU,IACV,OAAO,EAAG,OAAO,EACjB,SAAS,EAAG,IAAA,cAAI,EAAE,mDAAmD,EAAE,SAAS,CAAE,YAEhF,aAAa,GACH,EACX,MAAM,IAAI,uBAAC,uBAAU,IAAC,OAAO,EAAG,CAAC,YAAK,MAAM,GAAe,IAC7C,EACjB,uBAAC,iDAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AAnEW,QAAA,eAAe,mBAmE1B"}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithRenderProp = exports.EqualTwoColumnLayout = exports.ThreeColumnsOnRightLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const __1 = require("../..");
+const wireframe_placeholder_1 = require("../../helpers/wireframe-placeholder");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const TwoColumnLayout_1 = require("./TwoColumnLayout");
+const meta = {
+    title: 'Onboarding/StepWireframes/TwoColumnLayout',
+    component: TwoColumnLayout_1.TwoColumnLayout,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const ThreeColumnsOnRightLayout = () => ((0, jsx_runtime_1.jsxs)(TwoColumnLayout_1.TwoColumnLayout, { firstColumnWidth: 2, secondColumnWidth: 1, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Three Columns on the Right", subText: (0, element_1.createInterpolateElement)('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: [(0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Main" }), (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Sidebar" })] }));
+exports.ThreeColumnsOnRightLayout = ThreeColumnsOnRightLayout;
+const EqualTwoColumnLayout = () => ((0, jsx_runtime_1.jsxs)(TwoColumnLayout_1.TwoColumnLayout, { firstColumnWidth: 1, secondColumnWidth: 1, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Two Equal Columns", subText: (0, element_1.createInterpolateElement)('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: [(0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Content 1" }), (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Content 2" })] }));
+exports.EqualTwoColumnLayout = EqualTwoColumnLayout;
+const WithRenderProp = () => ((0, jsx_runtime_1.jsx)(TwoColumnLayout_1.TwoColumnLayout, { firstColumnWidth: 1, secondColumnWidth: 1, topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Columns Rendered with Render Prop", subText: (0, element_1.createInterpolateElement)('An example of the <code>TwoColumnLayout</code> wireframe layout.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: ({ isSmallViewport, isLargeViewport }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: [(0, jsx_runtime_1.jsx)("div", { children: "Content 1" }), (0, jsx_runtime_1.jsxs)("pre", { children: ["is small viewport: ", isSmallViewport.toString()] })] }), (0, jsx_runtime_1.jsxs)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: [(0, jsx_runtime_1.jsx)("div", { children: "Content 1" }), (0, jsx_runtime_1.jsxs)("pre", { children: ["is large viewport: ", isLargeViewport.toString()] })] })] })) }));
+exports.WithRenderProp = WithRenderProp;
+//# sourceMappingURL=TwoColumnLayout.stories.js.map

package/dist/cjs/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,gDAA8D;AAC9D,6BAAoF;AACpF,+EAA2E;AAC3E,2GAAwG;AACxG,uDAAoD;AAGpD,MAAM,IAAI,GAAmC;IAC5C,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,iCAAe;IAC1B,UAAU,EAAE,CAAE,yEAAmC,CAAE;CACnD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEb,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,CAC9C,wBAAC,iCAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK,EAClD,OAAO,EACN,uBAAC,WAAO,IACP,IAAI,EAAC,4BAA4B,EACjC,OAAO,EAAG,IAAA,kCAAwB,EACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,kCAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,aAExE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,qBAA8B,EAChE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,wBAAiC,IAClD,CAClB,CAAC;AArBW,QAAA,yBAAyB,6BAqBpC;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACzC,wBAAC,iCAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK,EAClD,OAAO,EACN,uBAAC,WAAO,IACP,IAAI,EAAC,mBAAmB,EACxB,OAAO,EAAG,IAAA,kCAAwB,EACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,kCAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,aAExE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,0BAAmC,EACrE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,0BAAmC,IACpD,CAClB,CAAC;AArBW,QAAA,oBAAoB,wBAqB/B;AAEK,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CACnC,uBAAC,iCAAe,IACf,gBAAgB,EAAG,CAAC,EACpB,iBAAiB,EAAG,CAAC,EACrB,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK,EAClD,OAAO,EACN,uBAAC,WAAO,IACP,IAAI,EAAC,mCAAmC,EACxC,OAAO,EAAG,IAAA,kCAAwB,EACjC,kEAAkE,EAClE;YACC,IAAI,EAAE,kCAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,YAEtE,CAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAAG,EAAE,CAAC,CAC7C,6DACC,wBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,aACjC,wDAAoB,EACpB,mEAA0B,eAAe,CAAC,QAAQ,EAAE,IAAQ,IACtC,EACvB,wBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,aACjC,wDAAoB,EACpB,mEAA0B,eAAe,CAAC,QAAQ,EAAE,IAAQ,IACtC,IACrB,CACH,GACgB,CAClB,CAAC;AA/BW,QAAA,cAAc,kBA+BzB"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WideLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentRow_1 = require("../../components/ContentRow/ContentRow");
+const ContentWrapper_1 = require("../../components/ContentWrapper/ContentWrapper");
+const StepContainerV2_1 = require("../../components/StepContainerV2/StepContainerV2");
+const StickyBottomBarRenderer_1 = require("../../components/StickyBottomBar/StickyBottomBarRenderer");
+const TopBarRenderer_1 = require("../../components/TopBar/TopBarRenderer");
+const WideLayout = ({ topBar, heading, headingColumnWidth, className, children, stickyBottomBar, }) => {
+    return ((0, jsx_runtime_1.jsx)(StepContainerV2_1.StepContainerV2, { children: (context) => {
+            const content = typeof children === 'function' ? children(context) : children;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TopBarRenderer_1.TopBarRenderer, { topBar: topBar }), (0, jsx_runtime_1.jsxs)(ContentWrapper_1.ContentWrapper, { children: [heading && (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { columns: headingColumnWidth, children: heading }), (0, jsx_runtime_1.jsx)(ContentRow_1.ContentRow, { className: className, children: content })] }), (0, jsx_runtime_1.jsx)(StickyBottomBarRenderer_1.StickyBottomBarRenderer, { stickyBottomBar: stickyBottomBar })] }));
+        } }));
+};
+exports.WideLayout = WideLayout;
+//# sourceMappingURL=WideLayout.js.map

package/dist/cjs/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,uEAAoE;AACpE,mFAAgF;AAChF,sFAAmF;AAEnF,sGAAmG;AACnG,2EAAwE;AAWjE,MAAM,UAAU,GAAG,CAAE,EAC3B,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,eAAe,GACE,EAAG,EAAE;IACtB,OAAO,CACN,uBAAC,iCAAe,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,6DACC,uBAAC,+BAAc,IAAC,MAAM,EAAG,MAAM,GAAK,EACpC,wBAAC,+BAAc,eACZ,OAAO,IAAI,uBAAC,uBAAU,IAAC,OAAO,EAAG,kBAAkB,YAAK,OAAO,GAAe,EAChF,uBAAC,uBAAU,IAAC,SAAS,EAAG,SAAS,YAAK,OAAO,GAAe,IAC5C,EACjB,uBAAC,iDAAuB,IAAC,eAAe,EAAG,eAAe,GAAK,IAC7D,CACH,CAAC;QACH,CAAC,GACgB,CAClB,CAAC;AACH,CAAC,CAAC;AA1BW,QAAA,UAAU,cA0BrB"}

package/dist/cjs/step-container-v2/wireframes/WideLayout/WideLayout.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wide_Playground = exports.Wide_HeadingSixColumns = exports.Wide_Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const __1 = require("../..");
+const wireframe_placeholder_1 = require("../../helpers/wireframe-placeholder");
+const withStepContainerV2ContextDecorator_1 = require("../../helpers/withStepContainerV2ContextDecorator");
+const WideLayout_1 = require("./WideLayout");
+const meta = {
+    title: 'Onboarding/StepWireframes/WideLayout',
+    component: WideLayout_1.WideLayout,
+    decorators: [withStepContainerV2ContextDecorator_1.withStepContainerV2ContextDecorator],
+};
+exports.default = meta;
+const Wide_Default = () => ((0, jsx_runtime_1.jsx)(WideLayout_1.WideLayout, { topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Wide layout", subText: (0, element_1.createInterpolateElement)('A <code>WideLayout</code> with the heading rendered in the default 12-column track. This subtext is intentionally long enough that you can compare it side-by-side with the 6-column variant and see the wrapping change.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Main" }) }));
+exports.Wide_Default = Wide_Default;
+const Wide_HeadingSixColumns = () => ((0, jsx_runtime_1.jsx)(WideLayout_1.WideLayout, { topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }), heading: (0, jsx_runtime_1.jsx)(__1.Heading, { text: "Wide layout \u2014 6-column heading", subText: (0, element_1.createInterpolateElement)('A <code>WideLayout</code> with the heading constrained to a 6-column track (matching the heading width used by <code>CenteredColumnLayout</code> by default). Main content keeps the full 12-column width. This subtext is intentionally long enough that you can compare it side-by-side with the default and see the wrapping change.', {
+            code: (0, jsx_runtime_1.jsx)("code", {}),
+        }) }), headingColumnWidth: 6, stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }), children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Main" }) }));
+exports.Wide_HeadingSixColumns = Wide_HeadingSixColumns;
+exports.Wide_Playground = {
+    args: {
+        topBar: (0, jsx_runtime_1.jsx)(__1.TopBar, { leftElement: (0, jsx_runtime_1.jsx)(__1.BackButton, {}) }),
+        heading: ((0, jsx_runtime_1.jsx)(__1.Heading, { text: "Wide layout \u2014 Playground", subText: (0, element_1.createInterpolateElement)('Use the <code>Controls</code> panel to switch <code>headingColumnWidth</code> between values and watch the heading wrapper resize. The main content row below stays full-width regardless.', {
+                code: (0, jsx_runtime_1.jsx)("code", {}),
+            }) })),
+        headingColumnWidth: 6,
+        stickyBottomBar: (0, jsx_runtime_1.jsx)(__1.StickyBottomBar, { rightElement: (0, jsx_runtime_1.jsx)(__1.PrimaryButton, {}) }),
+        children: (0, jsx_runtime_1.jsx)(wireframe_placeholder_1.WireframePlaceholder, { height: 616, children: "Main" }),
+    },
+    argTypes: {
+        headingColumnWidth: {
+            control: { type: 'select' },
+            options: [undefined, 4, 5, 6, 8, 10],
+        },
+    },
+};
+//# sourceMappingURL=WideLayout.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WideLayout.stories.js","sourceRoot":"","sources":["../../../../../src/step-container-v2/wireframes/WideLayout/WideLayout.stories.tsx"],"names":[],"mappings":";;;;AAAA,gDAA8D;AAC9D,6BAAoF;AACpF,+EAA2E;AAC3E,2GAAwG;AACxG,6CAA0C;AAG1C,MAAM,IAAI,GAA8B;IACvC,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,uBAAU;IACrB,UAAU,EAAE,CAAE,yEAAmC,CAAE;CACnD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEb,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACjC,uBAAC,uBAAU,IACV,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK,EAClD,OAAO,EACN,uBAAC,WAAO,IACP,IAAI,EAAC,aAAa,EAClB,OAAO,EAAG,IAAA,kCAAwB,EACjC,2NAA2N,EAC3N;YACC,IAAI,EAAE,kCAAQ;SACd,CACD,GACA,EAEH,eAAe,EAAG,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,YAExE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,qBAA8B,GACpD,CACb,CAAC;AAlBW,QAAA,YAAY,gBAkBvB;AAEK,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,CAC3C,uBAAC,uBAAU,IACV,MAAM,EAAG,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK,EAClD,OAAO,EACN,uBAAC,WAAO,IACP,IAAI,EAAC,qCAAgC,EACrC,OAAO,EAAG,IAAA,kCAAwB,EACjC,yUAAyU,EACzU;YACC,IAAI,EAAE,kCAAQ;SACd,CACD,GACA,EAEH,kBAAkB,EAAG,CAAC,EACtB,eAAe,EAAG,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK,YAExE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,qBAA8B,GACpD,CACb,CAAC;AAnBW,QAAA,sBAAsB,0BAmBjC;AAIW,QAAA,eAAe,GAAoB;IAC/C,IAAI,EAAE;QACL,MAAM,EAAE,uBAAC,UAAM,IAAC,WAAW,EAAG,uBAAC,cAAU,KAAG,GAAK;QACjD,OAAO,EAAE,CACR,uBAAC,WAAO,IACP,IAAI,EAAC,+BAA0B,EAC/B,OAAO,EAAG,IAAA,kCAAwB,EACjC,4LAA4L,EAC5L;gBACC,IAAI,EAAE,kCAAQ;aACd,CACD,GACA,CACF;QACD,kBAAkB,EAAE,CAAC;QACrB,eAAe,EAAE,uBAAC,mBAAe,IAAC,YAAY,EAAG,uBAAC,iBAAa,KAAG,GAAK;QACvE,QAAQ,EAAE,uBAAC,4CAAoB,IAAC,MAAM,EAAG,GAAG,qBAA8B;KAC1E;IACD,QAAQ,EAAE;QACT,kBAAkB,EAAE;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE;SACtC;KACD;CACD,CAAC"}