@homefile/components-v2 2.62.0 → 2.63.1

package/dist/components/onboarding/CardFooter.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Text } from '@chakra-ui/react';
+import { ONBOARDING_PAGE_PX } from '../../components';
 export const CardFooter = ({ title = '', buttonLabel, handleButtonClick, children, }) => {
-    return (_jsx(Container, { variant: "secondary", centerContent: true, w: "full", flex: { base: 1, md: 'initial' }, children: _jsxs(Box, { w: "full", px: ['container.sm', 'container.md', 'container.lg'], 
+    return (_jsx(Container, { variant: "secondary", centerContent: true, w: "full", flex: { base: 1, md: 'initial' }, children: _jsxs(Box, { w: "full", px: ONBOARDING_PAGE_PX, 
             // Mobile: keep the footer text pinned at the top of the (grown) green
             // area instead of vertically centering it. Desktop: centered as before.
             my: { base: 0, md: 'auto' }, py: "2rem", children: [_jsxs(Text, { textAlign: "center", variant: "body", children: [title, ' ', _jsx(Box, { as: "button", type: "button", display: "inline", color: "link.default", fontWeight: "medium", onClick: handleButtonClick, _hover: { textDecoration: 'underline' }, _focusVisible: {

package/dist/components/onboarding/PageTitle.d.ts

@@ -1,2 +1,2 @@
 import { PageTitleI } from '../../interfaces';
-export declare const PageTitle: ({ title }: PageTitleI) => import("react/jsx-runtime").JSX.Element;
+export declare const PageTitle: ({ title, description }: PageTitleI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/PageTitle.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container, Text } from '@chakra-ui/react';
-export const PageTitle = ({ title }) => {
-    return (_jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsx(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: title }) }));
+export const PageTitle = ({ title, description }) => {
+    return (_jsxs(Container, { variant: "ghost", mt: 4, mb: 6, children: [_jsx(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: title }), description && (_jsx(Text, { variant: "info", color: "text.body", lineHeight: "20px", textAlign: "center", mt: "2", 
+                // Centred text wraps into even lines (no widows).
+                sx: { textWrap: 'balance' }, children: description }))] }));
 };

package/dist/components/onboarding/pages/ActivateAccount.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Container, Text, Center, Button } from '@chakra-ui/react';
-import { Logo, WelcomeHeader, ButtonLoader, BasePageWrapper, } from '../../../components';
+import { Logo, WelcomeHeader, ButtonLoader, BasePageWrapper, ONBOARDING_PHONE_PX, onboardingCardProps, } from '../../../components';
 import { useWindowDimensions } from '../../../hooks';
 export const ActivateAccount = ({ name, isLoading = false, handleActivateBt, }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsxs(Box, { px: ['container.sm', 'container.lg'], children: [_jsx(WelcomeHeader, { description: t('registration.instruction'), greeting: t('welcome.greeting'), name: name }), _jsx(Center, { children: _jsx(Button, { onClick: handleActivateBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), size: "onboarding", children: width < 400
+    return (_jsx(BasePageWrapper, { flushMobile: true, flushBelow: "sm", children: _jsxs(Container, Object.assign({ size: "validation" }, onboardingCardProps({ below: 'sm', maxW: 'container.lg' }), { children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsxs(Box, { px: [ONBOARDING_PHONE_PX, 'container.lg'], children: [_jsx(WelcomeHeader, { description: t('registration.instruction'), greeting: t('welcome.greeting'), name: name }), _jsx(Center, { children: _jsx(Button, { onClick: handleActivateBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), size: "onboarding", children: width < 400
                                     ? t('registration.activateBtShort')
-                                    : t('registration.activateBt') }) }), _jsx(Text, { variant: "info", mt: "8", children: t('welcome.signature') })] }), _jsx(Container, { variant: "tertiary", mt: "8", children: _jsx(Center, { h: "12", px: "4", children: _jsx(Text, { variant: "label", children: t('registration.notReply') }) }) })] }) }));
+                                    : t('registration.activateBt') }) }), _jsx(Text, { variant: "info", mt: "8", children: t('welcome.signature') })] }), _jsx(Container, { variant: "tertiary", mt: "8", children: _jsx(Center, { h: "12", px: "4", children: _jsx(Text, { variant: "label", children: t('registration.notReply') }) }) })] })) }));
 };

package/dist/components/onboarding/pages/AuthHeader.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Text, Box, Image } from '@chakra-ui/react';
-import { Logo } from '../../../components';
+import { Logo, ONBOARDING_PAGE_PX } from '../../../components';
 import { HomefileUpdate } from '../../../assets/images';
 export const AuthHeader = ({ isPartner = false }) => {
     if (!isPartner)
         return _jsx(Logo, {});
-    return (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", h: "container.xxs", px: ['container.sm', 'container.md', 'container.lg'], children: [_jsx(Image, { src: HomefileUpdate, alt: "Homefile", h: "image.logo" }), _jsx(Box, { pl: "base", borderLeft: "1px solid", borderColor: "gray.200", children: _jsx(Text, { fontSize: "lg", fontWeight: "medium", children: t('partner.admin') }) })] }));
+    return (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", h: "container.xxs", px: ONBOARDING_PAGE_PX, children: [_jsx(Image, { src: HomefileUpdate, alt: "Homefile", h: "image.logo" }), _jsx(Box, { pl: "base", borderLeft: "1px solid", borderColor: "gray.200", children: _jsx(Text, { fontSize: "lg", fontWeight: "medium", children: t('partner.admin') }) })] }));
 };

package/dist/components/onboarding/pages/BasePageWrapper.d.ts

@@ -1,6 +1,37 @@
 import { PropsWithChildren } from 'react';
+export declare const ONBOARDING_PHONE_PX = "base";
+export declare const ONBOARDING_PAGE_PX: string[];
+export type FlushBelow = 'sm' | 'md';
+export declare const onboardingCardProps: ({ below, shadow, maxW, }?: {
+    below?: FlushBelow;
+    shadow?: string;
+    maxW?: string;
+}) => {
+    boxShadow: {
+        [x: string]: string;
+        base: string;
+    };
+    borderRadius: {
+        [x: string]: string | number;
+        base: number;
+    };
+    maxW: {
+        [x: string]: string;
+        base: string;
+    };
+    flex: {
+        [x: string]: string | number;
+        base: number;
+    };
+    display: {
+        [x: string]: string;
+        base: string;
+    };
+    flexDirection: "column";
+};
 interface BasePageWrapperProps {
     flushMobile?: boolean;
+    flushBelow?: FlushBelow;
 }
-export declare const BasePageWrapper: ({ children, flushMobile, }: PropsWithChildren<BasePageWrapperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const BasePageWrapper: ({ children, flushMobile, flushBelow, }: PropsWithChildren<BasePageWrapperProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/onboarding/pages/BasePageWrapper.js

@@ -1,9 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
-export const BasePageWrapper = ({ children, flushMobile, }) => {
-    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", mt: flushMobile ? { base: '0', md: 'onboarding.top' } : 'onboarding.top', 
+// The side padding of every onboarding page on a phone: 13px ('base', Matt
+// 2026-10-07). The one place that says it.
+export const ONBOARDING_PHONE_PX = 'base';
+// The side padding of the sign-in family of onboarding pages (sign in, the code
+// step, sign up, reset and new password, the message pages, the Sign-up box and
+// the partner header): the phone value, 32px from 480px and 48px from 768px.
+// One value, so the pages can't drift apart.
+export const ONBOARDING_PAGE_PX = [ONBOARDING_PHONE_PX, 'container.md', 'container.lg'];
+// Sign in's card on a phone, the one copy every onboarding page uses: below
+// `below` the card is the whole page (no shadow, square corners, full width)
+// and grows so the copyright sits at the bottom of the screen. From `below` up
+// it is a card again, with the page's own shadow and width.
+export const onboardingCardProps = ({ below = 'md', shadow = 'lg', maxW = 'container.md', } = {}) => ({
+    boxShadow: { base: 'none', [below]: shadow },
+    borderRadius: { base: 0, [below]: 'sm' },
+    maxW: { base: '100%', [below]: maxW },
+    flex: { base: 1, [below]: 'initial' },
+    display: { base: 'flex', [below]: 'block' },
+    flexDirection: 'column',
+});
+export const BasePageWrapper = ({ children, flushMobile, flushBelow = 'md', }) => {
+    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", mt: flushMobile ? { base: '0', [flushBelow]: 'onboarding.top' } : 'onboarding.top', 
         // Mobile full-screen: this wrapper is the full-height flex column holding
         // the card + the copyright footer, so the card can flex to fill the space
         // above the copyright (which stays pinned at the bottom) with NO overflow.
-        minH: flushMobile ? { base: '100vh', md: 'auto' } : undefined, display: flushMobile ? { base: 'flex', md: 'block' } : undefined, flexDirection: flushMobile ? 'column' : undefined, children: children }));
+        minH: flushMobile ? { base: '100vh', [flushBelow]: 'auto' } : undefined, display: flushMobile ? { base: 'flex', [flushBelow]: 'block' } : undefined, flexDirection: flushMobile ? 'column' : undefined, children: children }));
 };

package/dist/components/onboarding/pages/EmailValidation.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
-import { Logo, ButtonLoader, BasePageWrapper } from '../../../components';
+import { Logo, ButtonLoader, BasePageWrapper, ONBOARDING_PHONE_PX, onboardingCardProps, } from '../../../components';
 import { Confirmation } from '../../../assets/images';
 export const EmailValidation = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
+    return (_jsx(BasePageWrapper, { flushMobile: true, flushBelow: "sm", children: _jsxs(Container, Object.assign({ size: "validation" }, onboardingCardProps({ below: 'sm', maxW: 'container.lg' }), { children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: [ONBOARDING_PHONE_PX, 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: [ONBOARDING_PHONE_PX, 4], variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] })) }));
 };

package/dist/components/onboarding/pages/MessagePage.d.ts

@@ -0,0 +1,2 @@
+import { MessagePageI } from '../../../interfaces';
+export declare const MessagePage: ({ title, description, actionLabel, actionHref, }: MessagePageI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/MessagePage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Container, Stack, Text } from '@chakra-ui/react';
+import { Footer, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, AuthHeader, } from '../../../components';
+// A page with only a message: a title, a line under it and, optionally, one link
+// button (e.g. "Back to my texts" opening the texting app).
+export const MessagePage = ({ title, description, actionLabel, actionHref, }) => {
+    const showAction = Boolean(actionLabel && actionHref);
+    return (_jsxs(BasePageWrapper, { flushMobile: true, children: [_jsxs(Container, Object.assign({ size: "onboarding", bg: "neutral.white" }, onboardingCardProps(), { children: [_jsx(AuthHeader, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: title }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], 
+                                // Centred text wraps into even lines (no widows).
+                                sx: { textWrap: 'balance' }, children: description })] }), showAction && (_jsx(Box, { px: ONBOARDING_PAGE_PX, pb: "container.md", mb: "6", children: _jsx(Button, { as: "a", href: actionHref, w: "full", children: actionLabel }) }))] })), _jsx(Footer, {})] }));
+};

package/dist/components/onboarding/pages/NewPassword.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react';
-import { Logo, Footer, ButtonLoader, PasswordInput, BasePageWrapper, } from '../../../components';
+import { Logo, Footer, ButtonLoader, PasswordInput, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, } from '../../../components';
 import { isValidPassword, passwordMatch } from '../../../utils';
 import { useNewPassword } from '../../../hooks';
 export const NewPassword = ({ isLoading, handleReset, userEmail, errorMessage, errorActionText, handleErrorAction, supportEmail, }) => {
     const { inputs, handleInputChange, handleSubmit, isValidated } = useNewPassword(handleReset);
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "gray.3", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: errorMessage ? 'base' : 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), Boolean(errorMessage) && (
+    return (_jsxs(BasePageWrapper, { flushMobile: true, flushBelow: "sm", children: [_jsxs(Container, Object.assign({ size: "onboarding" }, onboardingCardProps({ below: 'sm' }), { children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "gray.3", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ONBOARDING_PAGE_PX, pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: errorMessage ? 'base' : 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), Boolean(errorMessage) && (
                                         // Faint magenta box behind the whole message (Matt, 2026-10-06).
                                         _jsxs(Stack, { spacing: 2, align: "center", bg: "status.errorBg", borderRadius: "sm", px: 4, py: 3, children: [_jsx(Text, { variant: "error", textAlign: "center", children: errorMessage }), Boolean(errorActionText) && handleErrorAction && (_jsx(Button, { variant: "text", fontSize: "xs", lineHeight: "13px", h: "auto", onClick: handleErrorAction, children: errorActionText })), Boolean(supportEmail) && (_jsxs(Text, { textAlign: "center", variant: "hint", children: [t('newPassword.support'), ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] }))] })), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
                                                         ? t('forms.errorPasswordLength')
@@ -16,5 +16,5 @@ export const NewPassword = ({ isLoading, handleReset, userEmail, errorMessage, e
                                                         ? t('forms.errorPasswordLength')
                                                         : t('forms.errorPasswordMatch'), hasError: isValidated &&
                                                         (!isValidPassword(inputs.confirmPassword) ||
-                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] }), _jsx(Footer, {})] }));
+                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] })), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/ResendResetPassword.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
-import { BasePageWrapper, ButtonLoader, Logo } from '../../../components';
+import { BasePageWrapper, ButtonLoader, Logo, ONBOARDING_PHONE_PX, onboardingCardProps, } from '../../../components';
 import { ResendPassword } from '../../../assets/images';
 export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, handleBack }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
+    return (_jsx(BasePageWrapper, { flushMobile: true, flushBelow: "sm", children: _jsxs(Container, Object.assign({ size: "validation" }, onboardingCardProps({ below: 'sm', maxW: 'container.lg' }), { children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: [ONBOARDING_PHONE_PX, 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: [ONBOARDING_PHONE_PX, 4], variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: [ONBOARDING_PHONE_PX, 4], variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] })) }));
 };

package/dist/components/onboarding/pages/ResetPassword.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack } from '@chakra-ui/react';
-import { Logo, Footer, PageTitle, CardFooter, TextInput, ButtonLoader, BasePageWrapper, } from '../../../components';
+import { Logo, Footer, PageTitle, CardFooter, TextInput, ButtonLoader, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, } from '../../../components';
 import { isEmptyField, isValidEmail } from '../../../utils';
 import { useResetPassword } from '../../../hooks';
 export const ResetPassword = ({ isLoading, handleReset, handleSignIn, resetError, }) => {
@@ -9,10 +9,10 @@ export const ResetPassword = ({ isLoading, handleReset, handleSignIn, resetError
     const resetErrorType = resetError
         ? t('forms.errorEmailNotActivated')
         : t('forms.errorEmail');
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('reset.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('reset.instruction') }), _jsx(Stack, { spacing: 3, children: _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: isEmptyField(inputs.email)
+    return (_jsxs(BasePageWrapper, { flushMobile: true, flushBelow: "sm", children: [_jsxs(Container, Object.assign({ size: "onboarding" }, onboardingCardProps({ below: 'sm' }), { children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('reset.title') }), _jsx(Box, { px: ONBOARDING_PAGE_PX, mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('reset.instruction') }), _jsx(Stack, { spacing: 3, children: _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: isEmptyField(inputs.email)
                                             ? t('forms.email') + ' ' + t('forms.required')
                                             : resetErrorType, hasError: isValidated &&
                                             (resetError ||
                                                 isEmptyField(inputs.email) ||
-                                                !isValidEmail(inputs.email)), id: "email", placeholder: t('reset.email'), value: inputs.email, handleChange: handleInputChange }) }), _jsx(Stack, { spacing: 4, children: _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') }) })] }) }), _jsx(CardFooter, { buttonLabel: t('reset.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
+                                                !isValidEmail(inputs.email)), id: "email", placeholder: t('reset.email'), value: inputs.email, handleChange: handleInputChange }) }), _jsx(Stack, { spacing: 4, children: _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') }) })] }) }), _jsx(CardFooter, { buttonLabel: t('reset.signinBt'), handleButtonClick: handleSignIn })] })), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/SignIn.d.ts

@@ -1,2 +1,2 @@
 import { SignInI } from '../../../interfaces';
-export declare const SignIn: ({ isPartner, isLoading, handleForgotPassword, handleSignIn, handleSignUp, handleGoogleSignIn, handleAppleSignIn, loginErrorMessage, values, }: SignInI) => import("react/jsx-runtime").JSX.Element;
+export declare const SignIn: ({ isPartner, isLoading, handleForgotPassword, handleSignIn, handleSignUp, handleGoogleSignIn, handleAppleSignIn, loginErrorMessage, heading, description, values, }: SignInI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/SignIn.js

@@ -10,16 +10,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Center, Container, Divider, Flex, Stack, Text, } from '@chakra-ui/react';
-import { Footer, PageTitle, CardFooter, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, AuthHeader, GoogleIcon, AppleIcon, } from '../../../components';
+import { Footer, PageTitle, CardFooter, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, AuthHeader, GoogleIcon, AppleIcon, } from '../../../components';
 import { isEmptyField } from '../../../utils';
 import { useSignIn } from '../../../hooks';
-export const SignIn = ({ isPartner, isLoading, handleForgotPassword, handleSignIn, handleSignUp, handleGoogleSignIn, handleAppleSignIn, loginErrorMessage, values = { email: '', password: '' }, }) => {
+export const SignIn = ({ isPartner, isLoading, handleForgotPassword, handleSignIn, handleSignUp, handleGoogleSignIn, handleAppleSignIn, loginErrorMessage, heading, description, values = { email: '', password: '' }, }) => {
     const { inputs, handleInputChange, isValidated, setIsValidated } = useSignIn(values);
     // Social sign-in renders only when a handler is provided (dark otherwise).
     const showGoogle = Boolean(handleGoogleSignIn);
     const showApple = Boolean(handleAppleSignIn);
     const showSocial = showGoogle || showApple;
-    return (_jsxs(BasePageWrapper, { flushMobile: true, children: [_jsxs(Container, { size: "onboarding", bg: "neutral.white", boxShadow: { base: 'none', md: 'lg' }, borderRadius: { base: 0, md: 'sm' }, maxW: { base: '100%', md: 'container.md' }, flex: { base: 1, md: 'initial' }, display: { base: 'flex', md: 'block' }, flexDirection: "column", children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: showSocial ? t('signin.titleSocial') : t('signin.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", children: [showSocial && (_jsxs(Stack, { spacing: "base", children: [showGoogle && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(GoogleIcon, { size: 20 }), onClick: handleGoogleSignIn, children: t('signup.continueGoogle') })), showApple && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(AppleIcon, { size: 20 }), onClick: handleAppleSignIn, children: t('signup.continueApple') })), _jsxs(Flex, { align: "center", gap: "3", py: "0", children: [_jsx(Divider, { flex: "1", borderColor: "border.default" }), _jsx(Text, { variant: "caption", children: t('signup.or') }), _jsx(Divider, { flex: "1", borderColor: "border.default" })] })] })), _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(loginErrorMessage) && (_jsx(Text, { variant: "error", children: loginErrorMessage })), _jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", autoComplete: "username", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.email), id: "email", placeholder: t('forms.email'), value: values.email || inputs.email, handleChange: (event) => {
+    return (_jsxs(BasePageWrapper, { flushMobile: true, children: [_jsxs(Container, Object.assign({ size: "onboarding", bg: "neutral.white" }, onboardingCardProps(), { children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: heading !== null && heading !== void 0 ? heading : (showSocial ? t('signin.titleSocial') : t('signin.title')), description: description }), _jsx(Box, { px: ONBOARDING_PAGE_PX, mb: 6, children: _jsxs(Stack, { spacing: "base", children: [showSocial && (_jsxs(Stack, { spacing: "base", children: [showGoogle && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(GoogleIcon, { size: 20 }), onClick: handleGoogleSignIn, children: t('signup.continueGoogle') })), showApple && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(AppleIcon, { size: 20 }), onClick: handleAppleSignIn, children: t('signup.continueApple') })), _jsxs(Flex, { align: "center", gap: "3", py: "0", children: [_jsx(Divider, { flex: "1", borderColor: "border.default" }), _jsx(Text, { variant: "caption", children: t('signup.or') }), _jsx(Divider, { flex: "1", borderColor: "border.default" })] })] })), _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(loginErrorMessage) && (_jsx(Text, { variant: "error", children: loginErrorMessage })), _jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", autoComplete: "username", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.email), id: "email", placeholder: t('forms.email'), value: values.email || inputs.email, handleChange: (event) => {
                                                 values.email = event.target.value;
                                                 handleInputChange(event);
                                             } }), _jsx(PasswordInput, { showLabel: false, autoComplete: "current-password", errorMessage: t('forms.password') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.password), id: "password", placeholder: t('forms.password'), value: values.password || inputs.password, handleChange: (event) => {
@@ -31,5 +31,5 @@ export const SignIn = ({ isPartner, isLoading, handleForgotPassword, handleSignI
                                                     !isEmptyField(inputs.password)) {
                                                     handleSignIn(inputs);
                                                 }
-                                            }), children: t('signin.signinBt') }), _jsx(Center, { children: _jsx(Button, { onClick: handleForgotPassword, variant: "text", children: t('signin.forgotBt') }) })] })] }) }), _jsx(CardFooter, { title: isPartner ? t('signin.signupPartner') : t('signin.signup'), buttonLabel: t('signin.signupBt'), handleButtonClick: handleSignUp })] }), _jsx(Footer, {})] }));
+                                            }), children: t('signin.signinBt') }), _jsx(Center, { children: _jsx(Button, { onClick: handleForgotPassword, variant: "text", children: t('signin.forgotBt') }) })] })] }) }), handleSignUp && (_jsx(CardFooter, { title: isPartner ? t('signin.signupPartner') : t('signin.signup'), buttonLabel: t('signin.signupBt'), handleButtonClick: handleSignUp }))] })), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/SignUp.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { t } from 'i18next';
 import { Box, Button, Center, Container, Divider, Flex, Stack, Text, } from '@chakra-ui/react';
-import { Footer, CardFooter, PageTitle, PasswordInput, PasswordStrengthMeter, TextInput, ButtonLoader, BasePageWrapper, AuthHeader, GoogleIcon, AppleIcon, } from '../../../components';
+import { Footer, CardFooter, PageTitle, PasswordInput, PasswordStrengthMeter, TextInput, ButtonLoader, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, AuthHeader, GoogleIcon, AppleIcon, } from '../../../components';
 import { isEmptyField, isValidEmail, isValidPassword } from '../../../utils';
 import { useSignUp } from '../../../hooks';
 export const SignUp = ({ isLoading, isPartner, handleCreateAccount, handleSignIn, handleGoogleSignIn, handleAppleSignIn, signupErrorMessage, values = {
@@ -25,6 +25,6 @@ export const SignUp = ({ isLoading, isPartner, handleCreateAccount, handleSignIn
     const showGoogle = Boolean(handleGoogleSignIn);
     const showApple = Boolean(handleAppleSignIn);
     const showSocial = showGoogle || showApple;
-    return (_jsxs(BasePageWrapper, { flushMobile: true, children: [_jsxs(Container, { size: "onboarding", bg: "neutral.white", boxShadow: { base: 'none', md: 'lg' }, borderRadius: { base: 0, md: 'sm' }, maxW: { base: '100%', md: 'container.md' }, flex: { base: 1, md: 'initial' }, display: { base: 'flex', md: 'block' }, flexDirection: "column", children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: isPartner ? t('signup.titlePartner') : t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(signupErrorMessage) && (_jsx(Text, { variant: "error", children: signupErrorMessage })), _jsx(TextInput, { showLabel: false, errorMessage: t('forms.fullName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.name), id: "name", placeholder: t('forms.fullName'), value: (_a = inputs.name) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: "name" }), _jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
-                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: "email" }), _jsxs(Box, { children: [_jsx(PasswordInput, { showLabel: false, errorMessage: passwordErrorMessage(values.password), hasError: isValidated && !isValidPassword(inputs.password), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(PasswordStrengthMeter, { password: (_c = inputs.password) !== null && _c !== void 0 ? _c : '' })] }), _jsx(Center, { children: _jsx(Button, { variant: "text", leftIcon: _jsx(Text, { as: "span", fontSize: "md", lineHeight: "1", children: "+" }), onClick: () => setShowPartnerCode((prev) => !prev), children: t('signup.partnerCodePrompt') }) }), showPartnerCode && (_jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", id: "partnerCode", placeholder: t('forms.promoCode'), value: (_d = inputs.partnerCode) !== null && _d !== void 0 ? _d : '', handleChange: handleInputChange, autoComplete: "off" })), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') }), showSocial && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "3", py: "1", children: [_jsx(Divider, { flex: "1", borderColor: "border.default" }), _jsx(Text, { variant: "caption", children: t('signup.or') }), _jsx(Divider, { flex: "1", borderColor: "border.default" })] }), showGoogle && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(GoogleIcon, { size: 20 }), onClick: handleGoogleSignIn, children: t('signup.continueGoogle') })), showApple && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(AppleIcon, { size: 20 }), onClick: handleAppleSignIn, children: t('signup.continueApple') }))] }))] }) }), _jsx(CardFooter, { title: isPartner ? t('signup.signinPartner') : t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn, children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), ' ', _jsxs(Text, { as: "span", whiteSpace: "nowrap", children: ["Homefile", ' ', _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') }), "."] })] }) })] }), _jsx(Footer, {})] }));
+    return (_jsxs(BasePageWrapper, { flushMobile: true, children: [_jsxs(Container, Object.assign({ size: "onboarding", bg: "neutral.white" }, onboardingCardProps(), { children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: isPartner ? t('signup.titlePartner') : t('signup.title') }), _jsx(Box, { px: ONBOARDING_PAGE_PX, mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(signupErrorMessage) && (_jsx(Text, { variant: "error", children: signupErrorMessage })), _jsx(TextInput, { showLabel: false, errorMessage: t('forms.fullName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.name), id: "name", placeholder: t('forms.fullName'), value: (_a = inputs.name) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: "name" }), _jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
+                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: "email" }), _jsxs(Box, { children: [_jsx(PasswordInput, { showLabel: false, errorMessage: passwordErrorMessage(values.password), hasError: isValidated && !isValidPassword(inputs.password), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(PasswordStrengthMeter, { password: (_c = inputs.password) !== null && _c !== void 0 ? _c : '' })] }), _jsx(Center, { children: _jsx(Button, { variant: "text", leftIcon: _jsx(Text, { as: "span", fontSize: "md", lineHeight: "1", children: "+" }), onClick: () => setShowPartnerCode((prev) => !prev), children: t('signup.partnerCodePrompt') }) }), showPartnerCode && (_jsx(TextInput, { showLabel: false, autoCapitalize: "none", autoCorrect: "off", id: "partnerCode", placeholder: t('forms.promoCode'), value: (_d = inputs.partnerCode) !== null && _d !== void 0 ? _d : '', handleChange: handleInputChange, autoComplete: "off" })), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') }), showSocial && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "3", py: "1", children: [_jsx(Divider, { flex: "1", borderColor: "border.default" }), _jsx(Text, { variant: "caption", children: t('signup.or') }), _jsx(Divider, { flex: "1", borderColor: "border.default" })] }), showGoogle && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(GoogleIcon, { size: 20 }), onClick: handleGoogleSignIn, children: t('signup.continueGoogle') })), showApple && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(AppleIcon, { size: 20 }), onClick: handleAppleSignIn, children: t('signup.continueApple') }))] }))] }) }), _jsx(CardFooter, { title: isPartner ? t('signup.signinPartner') : t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn, children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), ' ', _jsxs(Text, { as: "span", whiteSpace: "nowrap", children: ["Homefile", ' ', _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') }), "."] })] }) })] })), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/TwoFactor.d.ts

@@ -1,2 +1,2 @@
 import { TwoFactorI } from '../../../interfaces';
-export declare const TwoFactor: ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, }: TwoFactorI) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoFactor: ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, heading, description, note, submitLabel, errorMessage, resendNote, }: TwoFactorI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/TwoFactor.js

@@ -1,10 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack, Center } from '@chakra-ui/react';
-import { Footer, ButtonLoader, TextInput, BasePageWrapper, AuthHeader, } from '../../../components';
+import { Footer, ButtonLoader, TextInput, BasePageWrapper, ONBOARDING_PAGE_PX, onboardingCardProps, AuthHeader, } from '../../../components';
 import { isEmptyField } from '../../../utils';
 import { useTwoFactor } from '../../../hooks';
-export const TwoFactor = ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, }) => {
+// In a dialog (Account 2FA) the code step is a plain card at every width.
+const DIALOG_CARD = {
+    boxShadow: 'none',
+    borderRadius: 'sm',
+    maxW: 'container.md',
+    flex: 'initial',
+    display: 'block',
+    flexDirection: 'column',
+};
+export const TwoFactor = ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, heading, description, note, submitLabel, errorMessage, resendNote, }) => {
     const { code, handleInputChange, handleSubmit, isValidated } = useTwoFactor(onReset);
-    return (_jsxs(BasePageWrapper, { flushMobile: !isDialog, children: [_jsxs(Container, { size: "onboarding", bg: "neutral.white", boxShadow: isDialog ? 'none' : { base: 'none', md: 'lg' }, borderRadius: isDialog ? 'sm' : { base: 0, md: 'sm' }, maxW: isDialog ? 'container.md' : { base: '100%', md: 'container.md' }, flex: isDialog ? 'initial' : { base: 1, md: 'initial' }, display: isDialog ? 'block' : { base: 'flex', md: 'block' }, flexDirection: "column", children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: t('reset.2FA.title') }), _jsxs(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [_jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('forms.submit') }), onResend && (_jsx(Center, { children: _jsx(Button, { onClick: onResend, variant: "text", children: t('reset.2FA.resend') }) }))] }) })] }), !isDialog && _jsx(Footer, {})] }));
+    return (_jsxs(BasePageWrapper, { flushMobile: !isDialog, children: [_jsxs(Container, Object.assign({ size: "onboarding", bg: "neutral.white" }, (isDialog ? DIALOG_CARD : onboardingCardProps()), { children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: heading !== null && heading !== void 0 ? heading : t('reset.2FA.title') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], 
+                                // Centred text wraps into even lines (no widows).
+                                sx: { textWrap: 'balance' }, children: description !== null && description !== void 0 ? description : (_jsxs(_Fragment, { children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })) }), note && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], pt: "4", sx: { textWrap: 'balance' }, children: note }))] }), _jsx(Box, { px: ONBOARDING_PAGE_PX, pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [Boolean(errorMessage) && _jsx(Text, { variant: "error", children: errorMessage }), _jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : t('forms.submit') }), onResend && (_jsx(Center, { children: _jsx(Button, { onClick: onResend, variant: "text", children: t('reset.2FA.resend') }) })), resendNote && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", sx: { textWrap: 'balance' }, children: resendNote }))] }) })] })), !isDialog && _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/Welcome.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Container, Text, Center, Button, Stack, AspectRatio, } from '@chakra-ui/react';
-import { Logo, WelcomeHeader } from '../../../components';
+import { Logo, WelcomeHeader, ONBOARDING_PHONE_PX } from '../../../components';
 export const Welcome = ({ handleClick, name, videoUrl = '' }) => {
-    return (_jsx(Box, { w: "container.full", children: _jsxs(Container, { size: "validation", children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsx(Text, { variant: "heading", textAlign: "center", mt: "3rem", children: t('welcome.title') }), _jsx(Box, { px: ['container.sm', 'container.lg'], children: _jsxs(Stack, { spacing: "8", children: [_jsx(WelcomeHeader, { description: t('welcome.message'), greeting: t('welcome.greeting'), name: name }), videoUrl !== '' && (_jsx(AspectRatio, { w: "full", children: _jsx("iframe", { title: "Welcome Homefile", src: videoUrl, allowFullScreen: true }) })), _jsx(Text, { variant: "info", children: t('welcome.message2') }), _jsx(Text, { variant: "info", children: t('welcome.signature') }), _jsx(Center, { children: _jsx(Button, { onClick: handleClick, size: "onboarding", mb: "4rem", children: t('welcome.welcomeBt') }) })] }) }), _jsx(Container, { variant: "tertiary", h: "container.xxs" })] }) }));
+    return (_jsx(Box, { w: "container.full", children: _jsxs(Container, { size: "validation", children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsx(Text, { variant: "heading", textAlign: "center", mt: "3rem", children: t('welcome.title') }), _jsx(Box, { px: [ONBOARDING_PHONE_PX, 'container.lg'], children: _jsxs(Stack, { spacing: "8", children: [_jsx(WelcomeHeader, { description: t('welcome.message'), greeting: t('welcome.greeting'), name: name }), videoUrl !== '' && (_jsx(AspectRatio, { w: "full", children: _jsx("iframe", { title: "Welcome Homefile", src: videoUrl, allowFullScreen: true }) })), _jsx(Text, { variant: "info", children: t('welcome.message2') }), _jsx(Text, { variant: "info", children: t('welcome.signature') }), _jsx(Center, { children: _jsx(Button, { onClick: handleClick, size: "onboarding", mb: "4rem", children: t('welcome.welcomeBt') }) })] }) }), _jsx(Container, { variant: "tertiary", h: "container.xxs" })] }) }));
 };

package/dist/components/onboarding/pages/index.d.ts

@@ -9,3 +9,4 @@ export * from './Welcome';
 export * from './NewPassword';
 export * from './ResendResetPassword';
 export * from './TwoFactor';
+export * from './MessagePage';

package/dist/components/onboarding/pages/index.js

@@ -9,3 +9,4 @@ export * from './Welcome';
 export * from './NewPassword';
 export * from './ResendResetPassword';
 export * from './TwoFactor';
+export * from './MessagePage';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, BrandLogo, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, Close, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomiPresence, HomiVoice, InlineEditField, ProgressBar, RevealValueCard, StaggerReveal, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, IncludePublicRecords, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTile, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomeCard, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardStepPrompt, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, BrandLogo, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, Close, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomiPresence, HomiVoice, InlineEditField, ProgressBar, RevealValueCard, StaggerReveal, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, IncludePublicRecords, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePage, MessagePanel, MinimizedTile, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomeCard, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardStepPrompt, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
 export { useCustomToast, useConfirmPropertyModel, usePrefersReducedMotion, useCountUp, useDirtySave, } from './hooks';
 export { useFilesUploader } from './hooks/folderPanel/useFilesUploader';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, BrandLogo, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, Close, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomiPresence, HomiVoice, InlineEditField, ProgressBar, RevealValueCard, StaggerReveal, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, IncludePublicRecords, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePanel, MinimizedTile, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomeCard, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardStepPrompt, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AppliancesReceived, AssignableReceipts, BackendAlert, BackHeader, BarDivider, BrandLogo, CalendarWidget, CancelAccount, CatalogPopup, CloudsAnimation, Close, ConfirmHomeDetails, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, ConfirmPropertyRecords, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DragDropArea, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EditItemName, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomiPresence, HomiVoice, InlineEditField, ProgressBar, RevealValueCard, StaggerReveal, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, HomiSms, InboxForwardBanner, InboxTile, IncludePublicRecords, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadApplianceAutofiler, LaunchpadAppliancePanel, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessageChatPanel, MessagePage, MessagePanel, MinimizedTile, MinimizedTiles, MonthlyCharge, MortgageInfo, MortgageInfoReadOnly, MoveModal, MyHomeCard, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewParterDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCard, PartnerCustomerCode, PartnerCustomersToolbar, PartnerCustomersWrapper, PartnerDetails, PartnerHomeHeader, PartnerImages, PartnerPanel, PartnerServiceCard, PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, PartnerSidebarMenu, PartnerWizardStepBrand, PartnerWizardStepServices, PartnerWizardStepServicesSelect, PartnerWizardStepServiceZones, PartnerWizardStepCta, PartnerWizardStepSocial, PartnerWizardStepHeader, PartnerWizardStepLayout, PartnerWizardSuccessHeader, PartnerWizardSuccessBody, PartnerWizardSteps, PasswordInput, PaymentBanner, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StartHomiSetup, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorDialog, TwoFactorSetting, UpdateList, UploadTile, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WidgetCarousel, WellDone, WizardBodyPadding, WizardStepGoal, WizardStepPrompt, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, WizardValueSummaryBody, WizardValueSummaryFooter, YtdTile, } from './components';
 export { useCustomToast, useConfirmPropertyModel, usePrefersReducedMotion, useCountUp, useDirtySave, } from './hooks';
 export { useFilesUploader } from './hooks/folderPanel/useFilesUploader';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';

package/dist/interfaces/onboarding/PageTitle.interface.d.ts

@@ -1,3 +1,4 @@
 export interface PageTitleI {
     title: string;
+    description?: string;
 }

package/dist/interfaces/pages/MessagePage.interface.d.ts

@@ -0,0 +1,6 @@
+export interface MessagePageI {
+    title: string;
+    description: string;
+    actionLabel?: string;
+    actionHref?: string;
+}

package/dist/interfaces/pages/MessagePage.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/pages/SignIn.interface.d.ts

@@ -7,9 +7,11 @@ export interface SignInI {
     isPartner?: boolean;
     handleForgotPassword: () => void;
     handleSignIn: (form: SignInFormI) => void;
-    handleSignUp: () => void;
+    handleSignUp?: () => void;
     handleGoogleSignIn?: () => void;
     handleAppleSignIn?: () => void;
     loginErrorMessage?: string;
+    heading?: string;
+    description?: string;
     values?: SignInFormI;
 }

package/dist/interfaces/pages/TwoFactor.interface.d.ts

@@ -5,4 +5,10 @@ export interface TwoFactorI {
     isLoading: boolean;
     isPartner?: boolean;
     twoFactorMethod: 'sms' | 'email' | '';
+    heading?: string;
+    description?: string;
+    note?: string;
+    submitLabel?: string;
+    errorMessage?: string;
+    resendNote?: string;
 }

package/dist/interfaces/pages/index.d.ts

@@ -5,4 +5,5 @@ export * from './ResetPassword.interface';
 export * from './SignIn.interface';
 export * from './SignUp.interface';
 export * from './TwoFactor.interface';
+export * from './MessagePage.interface';
 export * from './Welcome.interface';

package/dist/interfaces/pages/index.js

@@ -5,4 +5,5 @@ export * from './ResetPassword.interface';
 export * from './SignIn.interface';
 export * from './SignUp.interface';
 export * from './TwoFactor.interface';
+export * from './MessagePage.interface';
 export * from './Welcome.interface';

package/dist/stories/onboarding/CardFooter.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { CardFooterI } from '../../interfaces';
 declare const _default: Meta<CardFooterI>;
 export default _default;
@@ -9,3 +9,4 @@ export declare const CardFooterComponent: {
         buttonLabel: string;
     };
 };
+export declare const CardFooterPhone: StoryObj<CardFooterI>;

package/dist/stories/onboarding/CardFooter.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { within } from '@storybook/test';
 import { CardFooter } from '../../components';
+import { PHONE, expectCardFullWidth, expectSides, getCard } from './phoneLayout';
 export default {
     title: 'Components/Onboarding',
     component: CardFooter,
@@ -11,3 +22,16 @@ CardFooterComponent.args = {
     title: 'Card title',
     buttonLabel: 'Click here',
 };
+// The Sign-up box on a phone: its text keeps 13px from the sides of the screen.
+export const CardFooterPhone = {
+    parameters: PHONE,
+    args: {
+        title: 'Card title',
+        buttonLabel: 'Click here',
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const box = getCard(canvasElement);
+        yield expectCardFullWidth(box);
+        yield expectSides(box, { text: within(canvasElement).getByText('Card title') });
+    }),
+};

package/dist/stories/onboarding/PageTitle.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { PageTitleI } from '../../interfaces';
 declare const _default: Meta<PageTitleI>;
 export default _default;
@@ -8,3 +8,4 @@ export declare const PageTitleComponent: {
         title: string;
     };
 };
+export declare const PageTitleWithDescription: StoryObj<PageTitleI>;