@automattic/onboarding 1.0.0

package/dist/cjs/navigator/navigator-header/style.scss

@@ -0,0 +1,45 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@automattic/typography/styles/fonts";
+
+.navigator-header {
+	display: none;
+	margin-bottom: 30px;
+
+	@include break-large {
+		display: block;
+	}
+}
+
+.navigator-header__heading {
+	margin-bottom: 8px;
+	color: var(--color-neutral-100);
+	text-wrap: pretty;
+
+	h2 {
+		font-family: Recoleta, sans-serif;
+		font-style: normal;
+		font-weight: 400;
+		font-size: $font-title-large;
+		line-height: 40px;
+		letter-spacing: -0.32px;
+	}
+
+	.button.is-borderless .gridicon {
+		top: 4px;
+	}
+
+	.premium-badge {
+		margin-inline-start: 2px;
+	}
+}
+
+.navigator-header__description {
+	font-size: $font-body-small;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.15px;
+	color: var(--color-neutral-60);
+	margin: 0;
+	text-wrap: pretty;
+}

package/dist/cjs/navigator/navigator-item-group/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+require("./style.scss");
+const NavigatorItemGroup = ({ children, title }) => {
+    return ((0, jsx_runtime_1.jsx)("section", { className: "navigator-item-group", children: (0, jsx_runtime_1.jsxs)(components_1.__experimentalVStack, { direction: "column", justify: "flex-start", alignment: "stretch", children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "navigator-item-group__title", children: title }), (0, jsx_runtime_1.jsx)(components_1.__experimentalItemGroup, { children: children })] }) }));
+};
+exports.default = NavigatorItemGroup;
+//# sourceMappingURL=index.js.map

package/dist/cjs/navigator/navigator-item-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-item-group/index.tsx"],"names":[],"mappings":";;;AAAA,sDAG+B;AAC/B,wBAAsB;AAOtB,MAAM,kBAAkB,GAAG,CAAE,EAAE,QAAQ,EAAE,KAAK,EAAS,EAAG,EAAE;IAC3D,OAAO,CACN,oCAAS,SAAS,EAAC,sBAAsB,YACxC,wBAAC,iCAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,SAAS,aAChE,KAAK,IAAI,+BAAI,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAO,EACrE,uBAAC,oCAAS,cAAG,QAAQ,GAAc,IAC3B,GACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/dist/cjs/navigator/navigator-item-group/style.scss

@@ -0,0 +1,28 @@
+@import "@automattic/typography/styles/fonts";
+
+.navigator-item-group {
+	flex-shrink: 0;
+
+	.components-item-group > div[role="listitem"] {
+		display: flex;
+	}
+
+	.navigator-item {
+		flex-grow: 1;
+	}
+
+	&:nth-child(1 of &):nth-last-child(1 of &) {
+		.navigator-item-group__title {
+			display: none;
+		}
+	}
+}
+
+.navigator-item-group__title {
+	color: var(--color-neutral-100);
+	font-size: $font-body-small;
+	font-weight: 500;
+	letter-spacing: -0.15px;
+	line-height: 1.4;
+	margin-bottom: 8px;
+}

package/dist/cjs/navigator/navigator-listener/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const hooks_1 = require("../hooks");
+const NavigatorListener = ({ onNavigatorPathChange }) => {
+    (0, hooks_1.useNavigatorListener)(onNavigatorPathChange);
+    return null;
+};
+exports.default = NavigatorListener;
+//# sourceMappingURL=index.js.map

package/dist/cjs/navigator/navigator-listener/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-listener/index.tsx"],"names":[],"mappings":";;AAAA,oCAAuE;AAMvE,MAAM,iBAAiB,GAAG,CAAE,EAAE,qBAAqB,EAAS,EAAG,EAAE;IAChE,IAAA,4BAAoB,EAAE,qBAAqB,CAAE,CAAC;IAC9C,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/dist/cjs/navigator/navigator-screen/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+/**
+ * A wrapper of the NavigatorScreen to support matching the path partially.
+ */
+const NavigatorScreen = ({ partialMatch, ...props }) => {
+    const { location } = (0, components_1.__experimentalUseNavigator)();
+    if (partialMatch && location.path?.startsWith(props.path)) {
+        return props.children;
+    }
+    return (0, jsx_runtime_1.jsx)(components_1.__experimentalNavigatorScreen, { ...props });
+};
+exports.default = NavigatorScreen;
+//# sourceMappingURL=index.js.map

package/dist/cjs/navigator/navigator-screen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-screen/index.tsx"],"names":[],"mappings":";;;AAAA,sDAG+B;AAO/B;;GAEG;AACH,MAAM,eAAe,GAAG,CAAE,EAAE,YAAY,EAAE,GAAG,KAAK,EAAS,EAAG,EAAE;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,uCAAY,GAAE,CAAC;IAEpC,IAAK,YAAY,IAAI,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAE,KAAK,CAAC,IAAI,CAAE,EAAG,CAAC;QAC/D,OAAO,KAAK,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,OAAO,uBAAC,0CAAmB,OAAM,KAAK,GAAK,CAAC;AAC7C,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/dist/cjs/navigator/navigator-screens/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigatorScreens = exports.useNavigatorButtons = void 0;
+var use_navigator_buttons_1 = require("./use-navigator-buttons");
+Object.defineProperty(exports, "useNavigatorButtons", { enumerable: true, get: function () { return __importDefault(use_navigator_buttons_1).default; } });
+var use_navigator_screens_1 = require("./use-navigator-screens");
+Object.defineProperty(exports, "useNavigatorScreens", { enumerable: true, get: function () { return __importDefault(use_navigator_screens_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/navigator/navigator-screens/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/navigator/navigator-screens/hooks/index.tsx"],"names":[],"mappings":";;;AAAA,iEAAyE;AAAhE,6IAAA,OAAO,OAAuB;AACvC,iEAAyE;AAAhE,6IAAA,OAAO,OAAuB"}

package/dist/cjs/navigator/navigator-screens/hooks/use-navigator-buttons.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const navigator_buttons_1 = require("../../navigator-buttons");
+const navigator_item_group_1 = tslib_1.__importDefault(require("../../navigator-item-group"));
+const useNavigatorButtons = (screens) => {
+    if (screens.length === 0) {
+        return null;
+    }
+    if (screens.length === 1) {
+        return screens[0].content;
+    }
+    return ((0, jsx_runtime_1.jsx)(navigator_item_group_1.default, { children: screens.map(({ slug, checked, icon, label, path, onSelect }) => ((0, jsx_runtime_1.jsx)(navigator_buttons_1.NavigatorButtonAsItem, { checked: checked, icon: icon, path: path, "aria-label": label, onClick: () => onSelect?.(slug), children: label }, path))) }));
+};
+exports.default = useNavigatorButtons;
+//# sourceMappingURL=use-navigator-buttons.js.map

package/dist/cjs/navigator/navigator-screens/hooks/use-navigator-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigator-buttons.js","sourceRoot":"","sources":["../../../../../src/navigator/navigator-screens/hooks/use-navigator-buttons.tsx"],"names":[],"mappings":";;;;AAAA,+DAAgE;AAChE,8FAA4D;AAG5D,MAAM,mBAAmB,GAAG,CAAE,OAAgC,EAAG,EAAE;IAClE,IAAK,OAAO,CAAC,MAAM,KAAK,CAAC,EAAG,CAAC;QAC5B,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAK,OAAO,CAAC,MAAM,KAAK,CAAC,EAAG,CAAC;QAC5B,OAAO,OAAO,CAAE,CAAC,CAAE,CAAC,OAAO,CAAC;IAC7B,CAAC;IAED,OAAO,CACN,uBAAC,8BAAkB,cAChB,OAAO,CAAC,GAAG,CAAE,CAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAG,EAAE,CAAC,CACpE,uBAAC,yCAAqB,IAErB,OAAO,EAAG,OAAO,EACjB,IAAI,EAAG,IAAI,EACX,IAAI,EAAG,IAAI,gBACE,KAAK,EAClB,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAE,IAAI,CAAE,YAEhC,KAAK,IAPD,IAAI,CAQa,CACxB,CAAE,GACiB,CACrB,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

package/dist/cjs/navigator/navigator-screens/hooks/use-navigator-screens.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const components_2 = require("@wordpress/components");
+const i18n_calypso_1 = require("i18n-calypso");
+const navigator_header_1 = tslib_1.__importDefault(require("../../navigator-header"));
+const useNavigatorScreens = (screens) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    return screens.map(({ slug, path, label, title, description, hideBack, content, actionText, onSubmit, onBack, }) => ((0, jsx_runtime_1.jsx)(components_2.__experimentalNavigatorScreen, { path: path, style: { animationDuration: '0s' }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(navigator_header_1.default, { title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: title ?? label }), description: description, hideBack: hideBack, onBack: () => onBack?.(slug) }), content, (0, jsx_runtime_1.jsxs)("div", { className: "navigator-screen__footer", children: [(0, jsx_runtime_1.jsxs)(components_2.__experimentalNavigatorBackButton, { className: "navigator-screen__footer-back-button", as: components_1.Button, title: translate('Back'), borderless: true, "aria-label": translate('Navigate to the previous view'), onClick: () => onBack?.(slug), children: [(0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "chevron-left", size: 18 }), translate('Back')] }), (0, jsx_runtime_1.jsx)(components_2.__experimentalNavigatorBackButton, { as: components_1.Button, primary: true, onClick: () => onSubmit?.(slug), children: actionText })] })] }) }, path)));
+};
+exports.default = useNavigatorScreens;
+//# sourceMappingURL=use-navigator-screens.js.map

package/dist/cjs/navigator/navigator-screens/hooks/use-navigator-screens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigator-screens.js","sourceRoot":"","sources":["../../../../../src/navigator/navigator-screens/hooks/use-navigator-screens.tsx"],"names":[],"mappings":";;;;AAAA,uDAA0D;AAC1D,sDAG+B;AAC/B,+CAA4C;AAC5C,sFAAqD;AAGrD,MAAM,mBAAmB,GAAG,CAAE,OAAgC,EAAG,EAAE;IAClE,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,OAAO,OAAO,CAAC,GAAG,CACjB,CAAE,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,MAAM,GACN,EAAG,EAAE,CAAC,CACN,uBAAC,0CAAe,IAAc,IAAI,EAAG,IAAI,EAAG,KAAK,EAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAC9E,6DACC,uBAAC,0BAAe,IACf,KAAK,EAAG,2DAAI,KAAK,IAAI,KAAK,GAAK,EAC/B,WAAW,EAAG,WAAW,EACzB,QAAQ,EAAG,QAAQ,EACnB,MAAM,EAAG,GAAG,EAAE,CAAC,MAAM,EAAE,CAAE,IAAI,CAAE,GAC9B,EACA,OAAO,EACT,iCAAK,SAAS,EAAC,0BAA0B,aACxC,wBAAC,8CAAmB,IACnB,SAAS,EAAC,sCAAsC,EAChD,EAAE,EAAG,mBAAM,EACX,KAAK,EAAG,SAAS,CAAE,MAAM,CAAE,EAC3B,UAAU,sBACG,SAAS,CAAE,+BAA+B,CAAE,EACzD,OAAO,EAAG,GAAG,EAAE,CAAC,MAAM,EAAE,CAAE,IAAI,CAAE,aAEhC,uBAAC,qBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAG,EAAE,GAAK,EAC1C,SAAS,CAAE,MAAM,CAAE,IACA,EACtB,uBAAC,8CAAmB,IAAC,EAAE,EAAG,mBAAM,EAAG,OAAO,QAAC,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAE,IAAI,CAAE,YAC1E,UAAU,GACS,IACjB,IACJ,IAzBmB,IAAI,CA0BT,CAClB,CACD,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

package/dist/cjs/navigator/navigator-screens/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigatorScreens = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./hooks"), exports);
+var navigator_screens_1 = require("./navigator-screens");
+Object.defineProperty(exports, "NavigatorScreens", { enumerable: true, get: function () { return tslib_1.__importDefault(navigator_screens_1).default; } });
+tslib_1.__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/navigator/navigator-screens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-screens/index.ts"],"names":[],"mappings":";;;;AAAA,kDAAwB;AACxB,yDAAkE;AAAzD,8IAAA,OAAO,OAAoB;AACpC,kDAAwB"}

package/dist/cjs/navigator/navigator-screens/navigator-screens.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const navigator_listener_1 = tslib_1.__importDefault(require("../navigator-listener"));
+const hooks_1 = require("./hooks");
+require("./navigator-screens.scss");
+const NavigatorScreens = ({ children, screens, initialPath = '/', onNavigatorPathChange, }) => {
+    const navigatorScreens = (0, hooks_1.useNavigatorScreens)(screens);
+    // We don't need navigator if there is only one screen
+    if (screens.length === 1) {
+        return children;
+    }
+    return ((0, jsx_runtime_1.jsxs)(components_1.__experimentalNavigatorProvider, { initialPath: initialPath, children: [(0, jsx_runtime_1.jsx)(components_1.__experimentalNavigatorScreen, { path: initialPath, children: children }), navigatorScreens, onNavigatorPathChange && ((0, jsx_runtime_1.jsx)(navigator_listener_1.default, { onNavigatorPathChange: onNavigatorPathChange }))] }));
+};
+exports.default = NavigatorScreens;
+//# sourceMappingURL=navigator-screens.js.map

package/dist/cjs/navigator/navigator-screens/navigator-screens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigator-screens.js","sourceRoot":"","sources":["../../../../src/navigator/navigator-screens/navigator-screens.tsx"],"names":[],"mappings":";;;;AAAA,sDAG+B;AAC/B,uFAAsD;AACtD,mCAA8C;AAE9C,oCAAkC;AASlC,MAAM,gBAAgB,GAAG,CAAE,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EACjB,qBAAqB,GACd,EAAG,EAAE;IACZ,MAAM,gBAAgB,GAAG,IAAA,2BAAmB,EAAE,OAAO,CAAE,CAAC;IAExD,sDAAsD;IACtD,IAAK,OAAO,CAAC,MAAM,KAAK,CAAC,EAAG,CAAC;QAC5B,OAAO,QAAQ,CAAC;IACjB,CAAC;IAED,OAAO,CACN,wBAAC,4CAAiB,IAAC,WAAW,EAAG,WAAW,aAC3C,uBAAC,0CAAe,IAAC,IAAI,EAAG,WAAW,YAAK,QAAQ,GAAoB,EAClE,gBAAgB,EAChB,qBAAqB,IAAI,CAC1B,uBAAC,4BAAiB,IAAC,qBAAqB,EAAG,qBAAqB,GAAK,CACrE,IACkB,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/dist/cjs/navigator/navigator-screens/navigator-screens.scss

@@ -0,0 +1,60 @@
+@import "@automattic/typography/styles/variables";
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.navigator-screen__footer {
+	display: flex;
+	position: fixed;
+	align-items: center;
+	justify-content: space-between;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 60px;
+	padding: 0 20px;
+	box-shadow: inset 0 1px 0 #e2e4e7;
+	box-sizing: border-box;
+	background-color: var(--studio-white);
+
+	a,
+	button {
+		border-radius: 4px;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+	}
+
+	.navigator-screen__footer-back-button {
+		display: block;
+		color: #101517;
+		font-size: $font-body-small;
+		font-weight: 600;
+
+		svg.gridicon {
+			width: 20px;
+			height: 20px;
+			top: 5px;
+			margin-right: 2px;
+
+			.rtl & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	@include break-large {
+		display: flex;
+		flex-direction: column;
+		align-items: initial;
+		position: sticky;
+		height: auto;
+		gap: 8px;
+		padding: 32px 16px;
+		margin: 0 -16px;
+		box-shadow: none;
+		box-sizing: content-box;
+
+		.navigator-screen__footer-back-button {
+			display: none;
+		}
+	}
+}

package/dist/cjs/navigator/navigator-screens/types.js

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

package/dist/cjs/navigator/navigator-screens/types.js.map

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

package/dist/cjs/notice/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@wordpress/icons");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const Notice = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('onboarding-notice'), children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: icons_1.info, size: 28 }), (0, jsx_runtime_1.jsx)("p", { children: children })] }));
+};
+exports.default = Notice;
+//# sourceMappingURL=index.js.map

package/dist/cjs/notice/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/notice/index.tsx"],"names":[],"mappings":";;;;AAAA,4CAA8C;AAC9C,wDAAwB;AAGxB,wBAAsB;AAEtB,MAAM,MAAM,GAA6D,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;IAC3F,OAAO,CACN,iCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,mBAAmB,CAAE,aAC3C,uBAAC,YAAI,IAAC,IAAI,EAAG,YAAI,EAAG,IAAI,EAAG,EAAE,GAAK,EAClC,wCAAK,QAAQ,GAAM,IACd,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/cjs/notice/style.scss

@@ -0,0 +1,19 @@
+.onboarding-notice {
+	display: flex;
+	color: var(--studio-gray-50);
+	font-size: 0.875em; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	margin-bottom: 1.5em;
+
+	svg {
+		align-self: center;
+		fill: var(--color-warning-30);
+		flex-shrink: 0;
+		margin-inline-end: 1em;
+		transform: rotate(180deg);
+	}
+
+	p {
+		margin-bottom: 0;
+		line-height: 28px;
+	}
+}

package/dist/cjs/progress/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const Progress = ({ className, align = 'center', children, ...additionalProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(`onboarding-progress onboarding-progress__align-${align}`, className), ...additionalProps, children: children }));
+};
+exports.default = Progress;
+//# sourceMappingURL=index.js.map

package/dist/cjs/progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwB;AAGxB,wBAAsB;AAQtB,MAAM,QAAQ,GAAG,CAAE,EAAE,SAAS,EAAE,KAAK,GAAG,QAAQ,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAS,EAAG,EAAE;IAC3F,OAAO,CACN,gCACC,SAAS,EAAG,IAAA,cAAI,EAAE,kDAAmD,KAAM,EAAE,EAAE,SAAS,CAAE,KACrF,eAAe,YAElB,QAAQ,GACL,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/dist/cjs/progress/style.scss

@@ -0,0 +1,34 @@
+.onboarding-progress {
+
+	&__align-center {
+		text-align: center;
+	}
+
+	&__align-right {
+		text-align: right;
+	}
+
+	&__align-left {
+		text-align: left;
+	}
+
+	.onboarding-title {
+		/* stylelint-disable-next-line scales/font-sizes */
+		font-size: 1.625rem; // 26px
+		margin-bottom: 2rem;
+	}
+
+	.onboarding-subtitle {
+		font-size: 0.875rem;
+		line-height: 1.5;
+
+		span {
+			color: var(--studio-gray-100);
+		}
+	}
+
+	.progress-bar {
+		margin-bottom: 1.5rem;
+		background: var(--studio-gray-10);
+	}
+}

package/dist/cjs/select-card-checkbox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const compose_1 = require("@wordpress/compose");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const SelectCardCheckbox = ({ children, className, onChange, checked, }) => {
+    const instanceId = (0, compose_1.useInstanceId)(components_1.CheckboxControl);
+    const id = `select-card-checkbox-${instanceId}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('select-card-checkbox__container', className, {
+            'is-checked': checked,
+        }), onClick: () => onChange(!checked), role: "presentation", children: [(0, jsx_runtime_1.jsx)(components_1.CheckboxControl, { checked: checked, id: id, onChange: onChange }), (0, jsx_runtime_1.jsx)("label", { className: "select-card-checkbox__label", htmlFor: id, children: children })] }));
+};
+exports.default = SelectCardCheckbox;
+//# sourceMappingURL=index.js.map

package/dist/cjs/select-card-checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select-card-checkbox/index.tsx"],"names":[],"mappings":";;;;AAAA,sDAAwD;AACxD,gDAAmD;AACnD,wDAAwB;AACxB,wBAAsB;AAStB,MAAM,kBAAkB,GAAG,CAAE,EAC5B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,GACkB,EAAG,EAAE;IAC9B,MAAM,UAAU,GAAG,IAAA,uBAAa,EAAE,4BAAe,CAAE,CAAC;IACpD,MAAM,EAAE,GAAG,wBAAyB,UAAW,EAAE,CAAC;IAElD,OAAO,CACN,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,iCAAiC,EAAE,SAAS,EAAE;YAC/D,YAAY,EAAE,OAAO;SACrB,CAAE,EACH,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,CAAE,CAAE,OAAO,CAAE,EACrC,IAAI,EAAC,cAAc,aAEnB,uBAAC,4BAAe,IAAC,OAAO,EAAG,OAAO,EAAG,EAAE,EAAG,EAAE,EAAG,QAAQ,EAAG,QAAQ,GAAK,EACvE,kCAAO,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAG,EAAE,YACxD,QAAQ,GACH,IACH,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/dist/cjs/select-card-checkbox/style.scss

@@ -0,0 +1,30 @@
+.select-card-checkbox__container {
+	border: 1px solid #dcdcde;
+	border-radius: 4px;
+	padding: 17px 25px;
+	font-size: 0.875rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+
+	.select-card-checkbox__label {
+		pointer-events: none;
+		user-select: none;
+		display: flex;
+		align-items: center;
+	}
+
+	&.is-checked {
+		border: 2px solid #0675c4;
+		background: #f9fbfd;
+		padding: 16px 24px;
+	}
+
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
+
+	.components-checkbox-control__input[type="checkbox"] {
+		border-color: #a7aaad;
+	}
+}

package/dist/cjs/select-card-radio/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectCardRadioList = exports.SelectCardRadio = 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");
+require("./style.scss");
+const SelectCardRadio = ({ option, onChange, name, className, }) => {
+    const id = (0, react_1.useId)();
+    const handleChange = (0, react_1.useCallback)((event) => {
+        onChange?.(event.target.value);
+    }, [onChange]);
+    return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-radio`, "aria-labelledby": `${id}-info`, className: (0, clsx_1.default)('select-card-radio', className), children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", className: "select-card-radio__input", id: `${id}-radio`, value: option.value, defaultChecked: option.selected, onChange: handleChange, name: name }), (0, jsx_runtime_1.jsxs)("div", { className: "select-card-radio__info", id: `${id}-info`, children: [(0, jsx_runtime_1.jsx)("span", { children: option.label }), (0, jsx_runtime_1.jsx)("span", { className: "select-card-radio__description", children: option.description })] })] }));
+};
+exports.SelectCardRadio = SelectCardRadio;
+const SelectCardRadioList = ({ children, className }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('select-card-radio__list', className), children: children });
+};
+exports.SelectCardRadioList = SelectCardRadioList;
+//# sourceMappingURL=index.js.map

package/dist/cjs/select-card-radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select-card-radio/index.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AACxB,iCAAkF;AAClF,wBAAsB;AAgBf,MAAM,eAAe,GAA+B,CAAE,EAC5D,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,GACT,EAAG,EAAE;IACL,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IAEnB,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC/B,CAAE,KAA4C,EAAG,EAAE;QAClD,QAAQ,EAAE,CAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAE,CAAC;IAClC,CAAC,EACD,CAAE,QAAQ,CAAE,CACZ,CAAC;IAEF,OAAO,CACN,mCACC,OAAO,EAAG,GAAI,EAAG,QAAQ,qBACP,GAAI,EAAG,OAAO,EAChC,SAAS,EAAG,IAAA,cAAI,EAAE,mBAAmB,EAAE,SAAS,CAAE,aAElD,kCACC,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAG,GAAI,EAAG,QAAQ,EACpB,KAAK,EAAG,MAAM,CAAC,KAAK,EACpB,cAAc,EAAG,MAAM,CAAC,QAAQ,EAChC,QAAQ,EAAG,YAAY,EACvB,IAAI,EAAG,IAAI,GACV,EACF,iCAAK,SAAS,EAAC,yBAAyB,EAAC,EAAE,EAAG,GAAI,EAAG,OAAO,aAC3D,2CAAQ,MAAM,CAAC,KAAK,GAAS,EAC7B,iCAAM,SAAS,EAAC,gCAAgC,YAAG,MAAM,CAAC,WAAW,GAAS,IACzE,IACC,CACR,CAAC;AACH,CAAC,CAAC;AApCW,QAAA,eAAe,mBAoC1B;AAOK,MAAM,mBAAmB,GAAmC,CAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAG,EAAE;IAChG,OAAO,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,yBAAyB,EAAE,SAAS,CAAE,YAAK,QAAQ,GAAQ,CAAC;AAC3F,CAAC,CAAC;AAFW,QAAA,mBAAmB,uBAE9B"}

package/dist/cjs/select-card-radio/style.scss

@@ -0,0 +1,44 @@
+
+.select-card-radio {
+	border-radius: 4px;
+	border: 1px solid #dcdcde;
+	display: flex;
+	transition: all 0.15s ease-in-out;
+	padding: 24px 16px;
+	align-items: baseline;
+	font-weight: 500;
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--color-primary);
+	}
+
+	&:has(input:checked) {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-primary-10);
+		background-color: #f9fbfd;
+	}
+
+	.select-card-radio__info {
+		display: flex;
+		gap: 8px;
+		flex-direction: column;
+	}
+
+	.select-card-radio__description {
+		font-weight: normal;
+		text-wrap: pretty;
+	}
+
+	.select-card-radio__input {
+		margin-right: 16px;
+		appearance: auto;
+	}
+
+}
+
+.select-card-radio__list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}

package/dist/cjs/select-items/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const icons_1 = require("@wordpress/icons");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+function SelectItems({ className, items, onSelect, preventWidows }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('select-items', className), children: items.map(({ key, title, badge, description, icon, titleIcon, actionText, value, isPrimary, allItemClickable, }) => ((0, jsx_runtime_1.jsxs)("div", { className: "select-items__item", children: [!titleIcon && ((0, jsx_runtime_1.jsx)(icons_1.Icon, { className: "select-items__item-icon", icon: icon, size: 24 })), (0, jsx_runtime_1.jsxs)("div", { className: "select-items__item-info-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "select-items__item-info", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "select-items__item-title", children: [titleIcon && ((0, jsx_runtime_1.jsx)(icons_1.Icon, { className: "select-items__item-icon", icon: titleIcon, size: 24 })), (0, jsx_runtime_1.jsx)("span", { className: "select-items__item-title-text", children: preventWidows(title) }), badge && ((0, jsx_runtime_1.jsx)("span", { className: "select-items__item-title-badge", children: (0, jsx_runtime_1.jsx)(components_1.Badge, { className: "free-domain__primary-badge", type: "info-green", children: preventWidows(badge) }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "select-items__item-description", children: preventWidows(description) })] }), actionText && ((0, jsx_runtime_1.jsx)(components_1.Button, { primary: isPrimary, className: "select-items__item-button", onClick: () => onSelect(value), children: actionText }))] }), allItemClickable && ((0, jsx_runtime_1.jsx)("button", { className: "select-items__item-clickable", onClick: () => onSelect(value) }))] }, key))) }));
+}
+exports.default = SelectItems;
+//# sourceMappingURL=index.js.map

package/dist/cjs/select-items/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select-items/index.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,4CAAwC;AACxC,wDAAwB;AACxB,wBAAsB;AAwBtB,SAAS,WAAW,CAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAc;IACnF,OAAO,CACN,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,cAAc,EAAE,SAAS,CAAE,YAC/C,KAAK,CAAC,GAAG,CACV,CAAE,EACD,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,GAChB,EAAG,EAAE,CAAC,CACN,iCAAiB,SAAS,EAAC,oBAAoB,aAC5C,CAAE,SAAS,IAAI,CAChB,uBAAC,YAAI,IAAC,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAG,IAAI,EAAG,IAAI,EAAG,EAAE,GAAK,CACtE,EACD,iCAAK,SAAS,EAAC,iCAAiC,aAC/C,iCAAK,SAAS,EAAC,yBAAyB,aACvC,gCAAI,SAAS,EAAC,0BAA0B,aACrC,SAAS,IAAI,CACd,uBAAC,YAAI,IAAC,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAG,SAAS,EAAG,IAAI,EAAG,EAAE,GAAK,CAC3E,EACD,iCAAM,SAAS,EAAC,+BAA+B,YAAG,aAAa,CAAE,KAAK,CAAE,GAAS,EAC/E,KAAK,IAAI,CACV,iCAAM,SAAS,EAAC,gCAAgC,YAC/C,uBAAC,kBAAK,IAAC,SAAS,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,YAC5D,aAAa,CAAE,KAAK,CAAE,GACjB,GACF,CACP,IACG,EACL,gCAAK,SAAS,EAAC,gCAAgC,YAC5C,aAAa,CAAE,WAAW,CAAE,GACzB,IACD,EACJ,UAAU,IAAI,CACf,uBAAC,mBAAM,IACN,OAAO,EAAG,SAAS,EACnB,SAAS,EAAC,2BAA2B,EACrC,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,CAAE,KAAK,CAAE,YAE/B,UAAU,GACJ,CACT,IACI,EACJ,gBAAgB,IAAI,CACrB,mCACC,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,CAAE,KAAK,CAAE,GAChC,CACF,KAtCS,GAAG,CAuCR,CACN,CACD,GACI,CACN,CAAC;AACH,CAAC;AAED,kBAAe,WAAW,CAAC"}

package/dist/cjs/select-items/style.scss

@@ -0,0 +1,96 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@automattic/typography/styles/fonts";
+
+.select-items {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin-top: -12px;
+	margin-bottom: 16px;
+	padding-left: 40px;
+
+	@include break-small {
+		margin-bottom: 40px;
+		padding-left: 60px;
+	}
+}
+
+.select-items__item {
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	padding: 24px 0;
+
+	p {
+		margin: 0;
+	}
+
+	@include break-small {
+		width: 342px;
+	}
+
+	@include break-medium {
+		width: 456px;
+	}
+
+	&-icon {
+		position: absolute;
+		top: 24px;
+		left: -40px;
+		@include break-small {
+			left: -48px;
+		}
+	}
+
+	&-info-wrapper {
+		@include break-mobile {
+			display: flex;
+			align-items: flex-start;
+			width: 100%;
+		}
+	}
+
+	&-info {
+		flex: 1;
+
+		@include break-mobile {
+			padding-right: 20px;
+		}
+	}
+
+	&-title {
+		margin-bottom: 8px;
+		font-size: $font-title-small;
+		font-weight: 400;
+		line-height: 1.2;
+		color: #101517;
+	}
+
+	&-description {
+		font-size: $font-body-small;
+		color: var(--studio-gray-50);
+
+		> p:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	button.select-items__item-button {
+		margin-top: 24px;
+		border-radius: 4px;
+		min-width: 130px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		border: 1px solid rgb(195, 196, 199);
+		color: #101517;
+		font-weight: 500;
+
+		@include break-mobile {
+			margin-top: 0;
+		}
+	}
+
+	& + & {
+		border-top: 1px solid rgba(220, 220, 222, 0.64);
+	}
+}

package/dist/cjs/select-items-alt/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const components_2 = require("@wordpress/components");
+const icons_1 = require("@wordpress/icons");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+function SelectItemsAlt({ className, items, onSelect }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('select-items-alt', className), children: items.map(({ disable, disableText, show, key, description, actionText, value }) => show && ((0, jsx_runtime_1.jsx)("div", { className: "select-items-alt__item", children: (0, jsx_runtime_1.jsxs)("div", { className: "select-items-alt__item-info-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "select-items-alt__item-info", children: (0, jsx_runtime_1.jsx)("p", { className: "select-items-alt__item-description", children: description }) }), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: disable, className: "select-items-alt__item-button", onClick: () => onSelect(value), children: actionText }), disable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(components_2.Tooltip, { text: disableText, position: "bottom center", children: (0, jsx_runtime_1.jsx)("div", { className: "select-items-alt__item-disabled-info", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: icons_1.info, size: 20 }) }) })] }))] }) }, key))) }));
+}
+exports.default = SelectItemsAlt;
+//# sourceMappingURL=index.js.map