@homefile/components-v2 2.63.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/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.js

@@ -1,11 +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, AuthHeader } from '../../../components';
+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, { 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, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: title }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], 
+    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: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsx(Button, { as: "a", href: actionHref, w: "full", children: actionLabel }) }))] }), _jsx(Footer, {})] }));
+                                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.js

@@ -10,7 +10,7 @@ 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, heading, description, values = { email: '', password: '' }, }) => {
@@ -19,7 +19,7 @@ export const SignIn = ({ isPartner, isLoading, handleForgotPassword, handleSignI
     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: heading !== null && heading !== void 0 ? heading : (showSocial ? t('signin.titleSocial') : t('signin.title')), description: description }), _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') }) })] })] }) }), handleSignUp && (_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, heading, description, warning, submitLabel, errorMessage, }: 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,12 +1,21 @@
 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, heading, description, warning, submitLabel, errorMessage, }) => {
+// 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: heading !== null && heading !== void 0 ? heading : t('reset.2FA.title') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], 
+    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')] })) }), warning && (_jsx(Text, { fontFamily: "secondary", fontWeight: "semibold", textAlign: "center", px: ['10', '20'], pt: "4", sx: { textWrap: 'balance' }, children: warning }))] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], 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') }) }))] }) })] }), !isDialog && _jsx(Footer, {})] }));
+                                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/interfaces/pages/TwoFactor.interface.d.ts

@@ -7,7 +7,8 @@ export interface TwoFactorI {
     twoFactorMethod: 'sms' | 'email' | '';
     heading?: string;
     description?: string;
-    warning?: string;
+    note?: string;
     submitLabel?: string;
     errorMessage?: string;
+    resendNote?: string;
 }

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/pages/ActivateAccount.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { ActivateAccountI } from '../../../interfaces';
 declare const _default: Meta<ActivateAccountI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const ActivateAccountPage: {
         isLoading: boolean;
     };
 };
+export declare const ActivateAccountPhone: StoryObj<ActivateAccountI>;
+export declare const ActivateAccountSmallTablet: StoryObj<ActivateAccountI>;

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

@@ -1,6 +1,17 @@
+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 { Box } from '@chakra-ui/react';
+import { fn, within } from '@storybook/test';
 import { ActivateAccount } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: ActivateAccount,
@@ -12,3 +23,33 @@ ActivateAccountPage.args = {
     name: 'Matthew',
     isLoading: true,
 };
+// Activate account on a phone: like sign in, the card starts at the top, spans
+// the screen and runs down to the bottom of it; its text keeps 13px from the
+// sides.
+export const ActivateAccountPhone = {
+    parameters: PHONE,
+    args: {
+        name: 'Jordan',
+        isLoading: false,
+        handleActivateBt: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            instruction: canvas.getByText('To complete your Homefile registration process, please click on the button below to confirm and activate your account.'),
+            signature: canvas.getByText('Your Homefile Crew'),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// Activate account on a small tablet (744px): the card keeps the top gap.
+export const ActivateAccountSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: ActivateAccountPhone.args,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/EmailValidation.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { EmailValidationI } from '../../../interfaces';
 declare const _default: Meta<EmailValidationI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const EmailValidationPage: {
         isLoading: boolean;
     };
 };
+export declare const EmailValidationPhone: StoryObj<EmailValidationI>;
+export declare const EmailValidationSmallTablet: StoryObj<EmailValidationI>;

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

@@ -1,6 +1,17 @@
+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 { Box } from '@chakra-ui/react';
+import { fn, within } from '@storybook/test';
 import { EmailValidation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectContentSides, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: EmailValidation,
@@ -12,3 +23,35 @@ EmailValidationPage.args = {
     email: 'user@user.com.br',
     isLoading: true,
 };
+// The check-your-email page on a phone: like sign in, the card starts at the
+// top, spans the screen and runs down to the bottom of it; the title and the
+// button keep 13px from its sides.
+export const EmailValidationPhone = {
+    parameters: PHONE,
+    args: {
+        email: 'jordan@example.com',
+        isLoading: false,
+        handleResendBt: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectContentSides(card, {
+            title: canvas.getByText('jordan@example.com').parentElement,
+        });
+        yield expectSides(card, {
+            'Resend button': canvas.getByRole('button', { name: 'Resend Email Verification' }),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// The check-your-email page on a small tablet (744px): the card keeps the top gap.
+export const EmailValidationSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: EmailValidationPhone.args,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

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

@@ -9,11 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { expect, within } from '@storybook/test';
 import { MessagePage } from '../../../components';
+import { PHONE, expectCardAtTop, expectCardFullWidth, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding/Message Page',
     component: MessagePage,
-    // A whole page: render edge to edge, as on a phone.
-    parameters: { layout: 'fullscreen' },
+    // A whole page on a phone: edge to edge, at 390x844.
+    parameters: PHONE,
 };
 const BACK_TO_TEXTS = { actionLabel: 'Back to my texts', actionHref: 'sms:' };
 // Every message page shows its whole title and line; the button only when it has
@@ -36,6 +37,13 @@ const play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement,
         yield expect(links).toHaveLength(0);
         yield expect(canvas.queryAllByRole('button')).toHaveLength(0);
     }
+    // On a phone: full screen, no bar on top, and the button 13px from the sides.
+    const card = getCard(canvasElement);
+    yield expectCardAtTop(card);
+    yield expectCardFullWidth(card);
+    if (links.length > 0) {
+        yield expectSides(card, { [`${args.actionLabel} button`]: links[0] });
+    }
 });
 export const Connected = {
     args: Object.assign({ title: '(512) 555-0147 is connected', description: 'Go back to your texts. Homi will know it’s you now.' }, BACK_TO_TEXTS),

package/dist/stories/onboarding/pages/NewPassword.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { NewPasswordI } from '../../../interfaces';
 declare const _default: Meta<NewPasswordI>;
 export default _default;
@@ -28,3 +28,5 @@ export declare const NewPasswordNoAnswer: {
         supportEmail: string;
     };
 };
+export declare const NewPasswordPhone: StoryObj<NewPasswordI>;
+export declare const NewPasswordSmallTablet: StoryObj<NewPasswordI>;