@automattic/onboarding 1.0.0

package/dist/esm/setup-tailored-site-after-creation.js

@@ -0,0 +1,103 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { Onboard, Site, updateLaunchpadSettings, } from '@automattic/data-stores';
+import { select, dispatch } from '@wordpress/data';
+import wpcomRequest from 'wpcom-proxy-request';
+import { isLinkInBioFlow, isNewsletterFlow, isNewsletterOrLinkInBioFlow, LINK_IN_BIO_FLOW, FREE_FLOW, isFreeFlow, } from './utils';
+const ONBOARD_STORE = Onboard.register();
+// `client_id` and `client_secret` are only needed when signing up users.
+const SITE_STORE = Site.register({ client_id: '', client_secret: '' });
+export const base64ImageToBlob = (base64String) => {
+    // extract content type and base64 payload from original string
+    const pos = base64String.indexOf(';base64,');
+    const type = base64String.substring(5, pos);
+    const b64 = base64String.substr(pos + 8);
+    // decode base64
+    const imageContent = atob(b64);
+    // create an ArrayBuffer and a view (as unsigned 8-bit)
+    const buffer = new ArrayBuffer(imageContent.length);
+    const view = new Uint8Array(buffer);
+    // fill the view, using the decoded base64
+    for (let n = 0; n < imageContent.length; n++) {
+        view[n] = imageContent.charCodeAt(n);
+    }
+    // convert ArrayBuffer to Blob
+    return new Blob([buffer], { type: type });
+};
+export function setupSiteAfterCreation({ siteId, flowName }) {
+    // const { resetOnboardStore } = dispatch( ONBOARD_STORE );
+    const goals = select(ONBOARD_STORE).getGoals();
+    const selectedDesign = select(ONBOARD_STORE).getSelectedDesign();
+    const siteTitle = select(ONBOARD_STORE).getSelectedSiteTitle();
+    const siteDescription = select(ONBOARD_STORE).getSelectedSiteDescription();
+    const siteLogo = select(ONBOARD_STORE).getSelectedSiteLogo();
+    if (siteId && flowName) {
+        const formData = [];
+        const settings = {
+            blogname: siteTitle,
+            blogdescription: siteDescription,
+        };
+        const promises = [];
+        if (isNewsletterOrLinkInBioFlow(flowName) || isFreeFlow(flowName)) {
+            // link-in-bio and link-in-bio-tld are considered the same intent.
+            if (isLinkInBioFlow(flowName) || isFreeFlow(flowName)) {
+                settings.site_intent = isLinkInBioFlow(flowName) ? LINK_IN_BIO_FLOW : FREE_FLOW;
+                if (selectedDesign && selectedDesign.is_virtual) {
+                    const { assembleSite } = dispatch(SITE_STORE);
+                    promises.push(wpcomRequest({
+                        path: `/sites/${encodeURIComponent(siteId)}/themes?status=active`,
+                        apiNamespace: 'wp/v2',
+                    }).then((activeThemes) => {
+                        assembleSite(String(siteId), activeThemes[0].stylesheet, {
+                            homeHtml: selectedDesign.recipe?.pattern_html,
+                            headerHtml: selectedDesign.recipe?.header_html,
+                            footerHtml: selectedDesign.recipe?.footer_html,
+                            siteSetupOption: 'assembler-virtual-theme',
+                        });
+                    }));
+                }
+            }
+            else {
+                settings.site_intent = flowName;
+            }
+            settings.launchpad_screen = 'full';
+        }
+        // Newsletter flow sets "paid-newsletter" goal as an indication to setup paid newsletter later on
+        if (isNewsletterFlow(flowName) && goals && goals.length > 0) {
+            settings.site_goals = Array.from(goals);
+        }
+        formData.push(['settings', JSON.stringify(settings)]);
+        if (siteLogo) {
+            formData.push([
+                'site_icon',
+                new File([base64ImageToBlob(siteLogo)], 'site-logo.png'),
+            ]);
+        }
+        promises.push(wpcomRequest({
+            path: `/sites/${siteId}/onboarding-customization`,
+            method: 'POST',
+            apiNamespace: 'wpcom/v2',
+            apiVersion: '2',
+            formData,
+        }).then(() => {
+            recordTracksEvent('calypso_signup_site_options_submit', {
+                has_site_title: !!siteTitle,
+                has_tagline: !!siteDescription,
+            });
+            /**
+             * We need to wait the site being created, then go to checkout and wait for the user
+             * to buy the plan before we can set a premium theme to the site. If we reset the store
+             * here we loose this information.
+             */
+            // resetOnboardStore();
+        }));
+        if (isFreeFlow(flowName)) {
+            if (siteTitle || siteDescription || siteLogo) {
+                promises.push(updateLaunchpadSettings(siteId, {
+                    checklist_statuses: { setup_free: true },
+                }));
+            }
+        }
+        return Promise.all(promises);
+    }
+}
+//# sourceMappingURL=setup-tailored-site-after-creation.js.map

package/dist/esm/setup-tailored-site-after-creation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-tailored-site-after-creation.js","sourceRoot":"","sources":["../../src/setup-tailored-site-after-creation.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WordPressLogo, JetpackLogo, WooCommerceWooLogo } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import ActionButtons from '../action-buttons';
+import SenseiLogo from '../sensei-logo';
+import StepNavigationLink from '../step-navigation-link';
+import VideoPressLogo from '../videopress-logo';
+import './style.scss';
+const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, shouldStickyNavButtons, hasStickyNavButtonsPadding, hideBack, backLabelText, hideSkip, skipLabelText, skipButtonAlign = 'top', skipHeadingText, hideNext = true, nextLabelText, formattedHeader, headerImageUrl, headerButton, hideFormattedHeader, className, isHorizontalLayout, isFullLayout, isWideLayout, isExtraWideLayout, isExternalBackUrl, isLargeSkipLayout, customizedActionButtons, goBack, goNext, flowName, intent, stepSectionName, recordTracksEvent, showHeaderJetpackPowered, showHeaderWooCommercePowered, showJetpackPowered, showSenseiPowered, showVideoPressPowered, showFooterWooCommercePowered, }) => {
+    const translate = useTranslate();
+    const recordClick = (direction, stepSectionName) => {
+        const tracksProps = {
+            flow: flowName,
+            step: stepName,
+            intent: intent,
+        };
+        // We don't need to track if we are in the sub-steps since it's not really going back a step
+        if (direction === 'back' && !stepSectionName) {
+            recordTracksEvent('calypso_signup_previous_step_button_click', tracksProps);
+        }
+        if (direction === 'forward') {
+            recordTracksEvent('calypso_signup_skip_step', tracksProps);
+        }
+    };
+    function BackButton() {
+        // Hide back button if goBack is falsy, it won't do anything in that case.
+        if (shouldHideNavButtons || !goBack) {
+            return null;
+        }
+        return (_jsx(StepNavigationLink, { direction: "back", handleClick: goBack, label: backLabelText, hasBackIcon: true, rel: isExternalBackUrl ? 'external' : '', recordClick: () => recordClick('back', stepSectionName) }));
+    }
+    function SkipButton() {
+        if (shouldHideNavButtons || !goNext) {
+            return null;
+        }
+        return (_jsxs("div", { className: "step-container__skip-wrapper", children: [skipHeadingText && (_jsx("div", { className: "step-container__skip-heading", children: skipHeadingText })), _jsx(StepNavigationLink, { direction: "forward", handleClick: goNext, label: skipLabelText, cssClass: clsx('step-container__navigation-link', 'has-underline', {
+                        'has-skip-heading': skipHeadingText,
+                    }), borderless: true, recordClick: () => recordClick('forward') })] }));
+    }
+    function NextButton() {
+        if (shouldHideNavButtons || !goNext) {
+            return null;
+        }
+        return (_jsx(StepNavigationLink, { direction: "forward", handleClick: goNext, label: nextLabelText || translate('Continue'), cssClass: "step-container__navigation-link", borderless: false, primary: true }));
+    }
+    const classes = clsx('step-container', className, flowName, stepName, {
+        'is-horizontal-layout': isHorizontalLayout,
+        'is-wide-layout': isWideLayout,
+        'is-full-layout': isFullLayout,
+        'is-large-skip-layout': isLargeSkipLayout,
+        'has-navigation': !shouldHideNavButtons,
+        'is-extra-wide-layout': isExtraWideLayout,
+    });
+    return (_jsxs("div", { className: classes, children: [_jsxs(ActionButtons, { className: clsx('step-container__navigation', {
+                    'should-hide-nav-buttons': shouldHideNavButtons,
+                    'should-sticky-nav-buttons': shouldStickyNavButtons,
+                    'has-sticky-nav-buttons-padding': hasStickyNavButtonsPadding,
+                }), children: [shouldStickyNavButtons && (_jsx(WordPressLogo, { className: "step-container__navigation-logo", size: 24 })), !hideBack && _jsx(BackButton, {}), !hideSkip && skipButtonAlign === 'top' && _jsx(SkipButton, {}), !hideNext && _jsx(NextButton, {}), customizedActionButtons] }), !hideFormattedHeader && (_jsxs("div", { className: "step-container__header", children: [formattedHeader, headerImageUrl && (_jsx("div", { className: "step-container__header-image", children: _jsx("img", { src: headerImageUrl, alt: "" }) })), headerButton && _jsx("div", { className: "step-container__header-button", children: headerButton }), showHeaderJetpackPowered && (_jsxs("div", { className: "step-container__header-jetpack-powered", children: [_jsx(JetpackLogo, { monochrome: true, size: 18 }), " ", _jsx("span", { children: translate('Jetpack powered') })] })), showHeaderWooCommercePowered && (_jsxs("div", { className: "step-container__header-woocommerce-powered", children: [_jsx(WooCommerceWooLogo, {}), " ", _jsx("span", { children: translate('WooCommerce powered') })] }))] })), _jsx("div", { className: "step-container__content", children: stepContent }), !hideSkip && skipButtonAlign === 'bottom' && (_jsxs("div", { className: "step-container__buttons", children: [isLargeSkipLayout && _jsx("hr", { className: "step-container__skip-hr" }), _jsx(SkipButton, {})] })), showJetpackPowered && (_jsxs("div", { className: "step-container__jetpack-powered", children: [_jsx(JetpackLogo, { monochrome: true, size: 18 }), " ", _jsx("span", { children: translate('Jetpack powered') })] })), showFooterWooCommercePowered && (_jsxs("div", { className: "step-container__woocommerce-powered", children: [_jsx(WooCommerceWooLogo, {}), " ", _jsx("span", { children: translate('WooCommerce powered') })] })), showSenseiPowered && (_jsxs("div", { className: "step-container__sensei-powered", children: [_jsx(SenseiLogo, {}), " ", _jsx("span", { children: translate('Powered by Sensei') })] })), showVideoPressPowered && (_jsxs("div", { className: "step-container__videopress-powered", children: [_jsx(VideoPressLogo, { size: 24 }), " ", _jsx("span", { children: translate('Powered by VideoPress') })] }))] }));
+};
+export default StepContainer;
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/step-container/style.scss

@@ -0,0 +1,304 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "../../styles/mixins.scss";
+
+/**
+ *	General
+ */
+.step-container {
+	max-width: 960px;
+	margin: 0 auto;
+
+	// Some steps (like plans) need a larger
+	// width column.
+	&.is-wide-layout {
+		max-width: 1040px;
+	}
+
+	// Some steps (like courses) have their width limitation
+	&.is-full-layout {
+		max-width: unset;
+	}
+
+	// Some steps (intent gathering) use a horizontal layout
+	&.is-horizontal-layout {
+		align-items: flex-start;
+		justify-content: space-between;
+		margin-top: 28px;
+		max-width: 1024px;
+		padding: 0 20px;
+
+		&.has-navigation {
+			padding-bottom: 60px;
+		}
+
+		@include break-small {
+			margin-top: 25vh;
+			display: flex;
+
+			.step-container__header {
+				margin-top: 0;
+				padding-inline-end: 20px;
+			}
+		}
+	}
+
+	.step-container__buttons {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.step-container__skip-hr {
+		background: var(--color-primary-light);
+		max-width: 270px;
+		margin-bottom: 50px;
+		margin-top: -20px;
+
+		@include break-small {
+			margin: 30px auto;
+		}
+	}
+
+	.is-large-skip-layout .step-container__buttons {
+		margin-bottom: 34px;
+
+		@include break-small {
+			margin-bottom: 14px;
+		}
+	}
+
+	/**
+	 *	Header
+	 */
+	.step-container__header {
+		margin-bottom: 32px;
+		margin-top: 0;
+		display: block;
+		justify-content: space-between;
+		align-items: center;
+
+		.formatted-header {
+			margin: 0;
+			flex-grow: 1;
+
+			.formatted-header__title {
+				@include onboarding-font-recoleta;
+				color: var(--studio-gray-100);
+				letter-spacing: 0.2px;
+				font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
+				font-weight: 400;
+				padding: 0;
+				margin: 0;
+
+				@include break-xlarge {
+					font-size: 2.75rem;
+				}
+			}
+
+			.formatted-header__subtitle {
+				padding: 0;
+				text-align: start;
+				color: var(--studio-gray-60);
+				font-size: 1rem;
+				margin-top: 16px;
+				line-height: 24px;
+
+				&.is-center-align {
+					text-align: center;
+				}
+
+				@include break-small {
+					margin-top: 8px;
+				}
+			}
+		}
+
+		.step-container__header-button {
+			@include break-small {
+				flex-basis: 100%;
+			}
+		}
+
+		.step-container__header-image {
+			margin-top: 64px;
+			display: none;
+
+			@include break-small {
+				display: block;
+
+				// Fix overflow caused by header_image
+				img {
+					height: auto;
+					max-width: 100%;
+				}
+			}
+		}
+
+		@include break-small {
+			flex-wrap: wrap;
+			margin-top: 24px;
+		}
+	}
+
+	/**
+	 *	Navigation
+	 */
+	.step-container__navigation {
+		pointer-events: none;
+		* {
+			pointer-events: auto;
+		}
+	}
+	.step-container__navigation.action-buttons {
+		background-color: $white;
+		height: 60px;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		font-size: 0.875rem;
+		position: fixed;
+		z-index: 30;
+		inset-inline-start: 0;
+		inset-inline-end: 0;
+		bottom: 0;
+		padding: 0 20px;
+		margin: 0;
+		border-top: none;
+		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		&:empty {
+			display: none;
+		}
+
+		&.should-hide-nav-buttons {
+			justify-content: flex-end;
+		}
+
+		.step-container__navigation-link {
+			font-size: 0.875rem;
+			font-weight: 500;
+
+			&.button.is-primary {
+				border-radius: 4px;
+				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+			}
+
+			&.has-underline {
+				text-decoration: underline;
+			}
+
+			&.has-skip-heading {
+				transform: translateY(-3px);
+				// override unessecary super specificity added by another class
+				padding-top: 0 !important;
+			}
+		}
+
+		.step-container__navigation-link.forward,
+		.step-container__skip-wrapper {
+			margin-inline-start: auto;
+		}
+
+		.step-container__skip-heading {
+			color: var(--color-text-inverted);
+		}
+
+		.step-container__navigation-logo {
+			display: none;
+			// Align with wordpress logo in signup-header
+			margin-top: 1px;
+			margin-inline-end: 24px;
+			fill: var(--color-text);
+			stroke: var(--color-text);
+
+			@include break-small {
+				display: block;
+			}
+		}
+
+		@include break-small {
+			position: absolute;
+			top: 8px;
+			inset-inline-start: 72px;
+			inset-inline-end: 24px;
+			// Align with wordpress logo in signup-header
+			padding: 1px 0 0;
+			background-color: transparent;
+			border: none;
+			box-shadow: none;
+
+			&.should-sticky-nav-buttons {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-inline-end: 0;
+				padding-inline-start: 24px;
+				padding-inline-end: 24px;
+				background-color: $white;
+			}
+
+			&.has-sticky-nav-buttons-padding {
+				padding-bottom: 48px;
+			}
+		}
+	}
+
+	/**
+	 *	Content
+	 */
+	.step-container__content {
+		margin-top: 0;
+		display: block;
+		min-height: 65vh;
+
+		@supports ( min-height: 65svh ) {
+			min-height: calc(65svh - 50px);
+		}
+	}
+
+	/**
+	 * Jetpack, Sensei and VideoPress Powered
+	 */
+	.step-container__jetpack-powered,
+	.step-container__header-jetpack-powered,
+	.step-container__woocommerce-powered,
+	.step-container__header-woocommerce-powered,
+	.step-container__sensei-powered,
+	.step-container__videopress-powered {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		text-align: center;
+		font-family: "SF Pro Text", $sans;
+		font-size: $font-body-extra-small;
+		font-weight: 400;
+		line-height: 20px;
+
+		svg {
+			margin-inline-end: 6px;
+		}
+	}
+
+	.step-container__jetpack-powered {
+		margin: 1rem 0;
+		width: 100%;
+	}
+
+	.step-container__header-jetpack-powered {
+		position: absolute;
+		top: 32px;
+		visibility: hidden;
+
+		@include break-small {
+			visibility: visible;
+		}
+	}
+
+	.step-container__sensei-powered {
+		padding-bottom: 24px;
+
+		svg {
+			margin-inline-end: 8px;
+		}
+	}
+}

package/dist/esm/step-navigation-link/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Gridicon } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import './style.scss';
+const StepNavigationLink = ({ direction, handleClick, label, hasBackIcon, hasForwardIcon, primary, borderless = true, cssClass, rel, recordClick, }) => {
+    const translate = useTranslate();
+    let backGridicon;
+    let text;
+    let forwardGridicon;
+    if (direction === 'back') {
+        backGridicon = hasBackIcon ? _jsx(Gridicon, { icon: "chevron-left", size: 18 }) : null;
+        if (label) {
+            text = label;
+        }
+        else {
+            text = translate('Back');
+        }
+    }
+    else if (direction === 'forward') {
+        forwardGridicon = hasForwardIcon ? _jsx(Gridicon, { icon: "chevron-right", size: 18 }) : null;
+        text = label ? label : translate('Skip for now');
+    }
+    const buttonClasses = clsx('navigation-link', cssClass);
+    const onClick = () => {
+        recordClick?.();
+        handleClick?.();
+    };
+    return (_jsxs(Button, { primary: primary, borderless: borderless, className: buttonClasses, onClick: onClick, rel: rel, children: [backGridicon, text, forwardGridicon] }));
+};
+export default StepNavigationLink;
+//# sourceMappingURL=index.js.map

package/dist/esm/step-navigation-link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step-navigation-link/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAmB,YAAY,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,cAAc,CAAC;AAetB,MAAM,kBAAkB,GAAsB,CAAE,EAC/C,SAAS,EACT,WAAW,EACX,KAAK,EACL,WAAW,EACX,cAAc,EACd,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,GAAG,EACH,WAAW,GACX,EAAG,EAAE;IACL,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,IAAI,YAAY,CAAC;IACjB,IAAI,IAAI,CAAC;IACT,IAAI,eAAe,CAAC;IAEpB,IAAK,SAAS,KAAK,MAAM,EAAG,CAAC;QAC5B,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAG,EAAE,GAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QACjF,IAAK,KAAK,EAAG,CAAC;YACb,IAAI,GAAG,KAAK,CAAC;QACd,CAAC;aAAM,CAAC;YACP,IAAI,GAAG,SAAS,CAAE,MAAM,CAAE,CAAC;QAC5B,CAAC;IACF,CAAC;SAAM,IAAK,SAAS,KAAK,SAAS,EAAG,CAAC;QACtC,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAG,EAAE,GAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QACxF,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAE,cAAc,CAAE,CAAC;IACpD,CAAC;IAED,MAAM,aAAa,GAAG,IAAI,CAAE,iBAAiB,EAAE,QAAQ,CAAE,CAAC;IAE1D,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,WAAW,EAAE,EAAE,CAAC;QAChB,WAAW,EAAE,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,MAAM,IACN,OAAO,EAAG,OAAO,EACjB,UAAU,EAAG,UAAU,EACvB,SAAS,EAAG,aAAa,EACzB,OAAO,EAAG,OAAO,EACjB,GAAG,EAAG,GAAG,aAEP,YAAY,EACZ,IAAI,EACJ,eAAe,IACT,CACT,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/step-navigation-link/style.scss

@@ -0,0 +1,42 @@
+$font-body-small: 14px !default;
+
+.button.navigation-link {
+	&.is-borderless {
+		background: none;
+		border: none;
+		color: #101517;
+		font-size: $font-body-small;
+		font-weight: 600;
+		padding: 0;
+
+		svg {
+			width: 20px;
+			height: 20px;
+			top: 5px;
+			margin-right: 2px;
+			fill: #101517;
+			.rtl & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	&.has-underline {
+		text-decoration: underline;
+	}
+
+	&.is-primary {
+		border-radius: 4px;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+		background-color: #117ac9;
+		border-color: #117ac9;
+		color: var(--color-text-inverted);
+		padding: 8px 14px;
+	}
+}
+
+.navigation-link--has-skip-heading {
+	//override unessecary super specificity added by another class
+	padding-top: 0 !important;
+	transform: translateY(-3px);
+}

package/dist/esm/titles/index.js

@@ -0,0 +1,7 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import './styles.scss';
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+export const Title = ({ className, children, tagName = 'h1', ...rest }) => React.createElement(tagName, { className: clsx('onboarding-title', className), ...rest }, children);
+export const SubTitle = ({ className, children, tagName = 'h2', ...rest }) => React.createElement(tagName, { className: clsx('onboarding-subtitle', className), ...rest }, children);
+//# sourceMappingURL=index.js.map

package/dist/esm/titles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/titles/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,eAAe,CAAC;AASvB,sDAAsD;AACtD,MAAM,CAAC,MAAM,KAAK,GAA2C,CAAE,EAC9D,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,GAAG,IAAI,EACP,EAAG,EAAE,CACL,KAAK,CAAC,aAAa,CAClB,OAAO,EACP,EAAE,SAAS,EAAE,IAAI,CAAE,kBAAkB,EAAE,SAAS,CAAE,EAAE,GAAG,IAAI,EAAE,EAC7D,QAAQ,CACR,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAE,EACjE,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,GAAG,IAAI,EACP,EAAG,EAAE,CACL,KAAK,CAAC,aAAa,CAClB,OAAO,EACP,EAAE,SAAS,EAAE,IAAI,CAAE,qBAAqB,EAAE,SAAS,CAAE,EAAE,GAAG,IAAI,EAAE,EAChE,QAAQ,CACR,CAAC"}

package/dist/esm/titles/styles.scss

@@ -0,0 +1,29 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.onboarding-title {
+	@include onboarding-heading-text-mobile;
+	color: var(--mainColor);
+	margin: 0;
+
+	@include break-mobile {
+		@include onboarding-heading-text-tablet;
+	}
+
+	@include break-xlarge {
+		@include onboarding-heading-text;
+	}
+}
+
+.onboarding-subtitle {
+	@include onboarding-large-text;
+	font-family: $default-font;
+	font-weight: normal;
+	letter-spacing: 0.2px;
+	color: var(--studio-gray-60);
+	margin: 5px 0 0;
+
+	@include break-small {
+		margin-top: 0;
+	}
+}

package/dist/esm/upload-and-set-site-logo.js

@@ -0,0 +1,27 @@
+import wpcomRequest from 'wpcom-proxy-request';
+export async function uploadAndSetSiteLogo(siteId, file) {
+    const formData = [['media[]', file]];
+    // first upload the image
+    const uploadResult = await wpcomRequest({
+        path: `/sites/${encodeURIComponent(siteId)}/media/new`,
+        apiVersion: '1.1',
+        formData,
+        method: 'POST',
+    });
+    // then update the site settings to the uploaded image
+    if (uploadResult.media?.length) {
+        const imageID = uploadResult.media[0].ID;
+        const logoResult = await wpcomRequest({
+            path: `/sites/${encodeURIComponent(siteId)}/settings`,
+            apiVersion: 'v2',
+            apiNamespace: 'wp/v2',
+            // we know the site doesn't have a logo nor an icon, let's set both
+            body: { site_logo: imageID, site_icon: imageID },
+            query: 'source=onboarding',
+            method: 'POST',
+        });
+        return { logoResult, uploadResult };
+    }
+    throw new Error('No image ID returned');
+}
+//# sourceMappingURL=upload-and-set-site-logo.js.map

package/dist/esm/upload-and-set-site-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-and-set-site-logo.js","sourceRoot":"","sources":["../../src/upload-and-set-site-logo.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAE,MAAmC,EAAE,IAAU;IAC1F,MAAM,QAAQ,GAAG,CAAE,CAAE,SAAS,EAAE,IAAI,CAAE,CAAE,CAAC;IACzC,yBAAyB;IACzB,MAAM,YAAY,GAAG,MAAM,YAAY,CAOlC;QACJ,IAAI,EAAE,UAAW,kBAAkB,CAAE,MAAgB,CAAG,YAAY;QACpE,UAAU,EAAE,KAAK;QACjB,QAAQ;QACR,MAAM,EAAE,MAAM;KACd,CAAE,CAAC;IAEJ,sDAAsD;IACtD,IAAK,YAAY,CAAC,KAAK,EAAE,MAAM,EAAG,CAAC;QAClC,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAE,CAAC,CAAE,CAAC,EAAE,CAAC;QAC3C,MAAM,UAAU,GAAG,MAAM,YAAY,CAGhC;YACJ,IAAI,EAAE,UAAW,kBAAkB,CAAE,MAAgB,CAAG,WAAW;YACnE,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,OAAO;YACrB,mEAAmE;YACnE,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE;YAChD,KAAK,EAAE,mBAAmB;YAC1B,MAAM,EAAE,MAAM;SACd,CAAE,CAAC;QACJ,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;IACrC,CAAC;IACD,MAAM,IAAI,KAAK,CAAE,sBAAsB,CAAE,CAAC;AAC3C,CAAC"}