@homefile/components-v2 2.62.0 → 2.63.0

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/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, 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'], 
+                                // 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, {})] }));
+};

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

@@ -13,13 +13,13 @@ import { Box, Button, Center, Container, Divider, Flex, Stack, Text, } from '@ch
 import { Footer, PageTitle, CardFooter, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, 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, { 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) => {
                                                 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/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, warning, submitLabel, errorMessage, }: TwoFactorI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
-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 { isEmptyField } from '../../../utils';
 import { useTwoFactor } from '../../../hooks';
-export const TwoFactor = ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, }) => {
+export const TwoFactor = ({ onReset, onResend, isDialog, isLoading, isPartner, twoFactorMethod, heading, description, warning, submitLabel, errorMessage, }) => {
     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, { 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'], 
+                                // 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, {})] }));
 };

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,9 @@ export interface TwoFactorI {
     isLoading: boolean;
     isPartner?: boolean;
     twoFactorMethod: 'sms' | 'email' | '';
+    heading?: string;
+    description?: string;
+    warning?: string;
+    submitLabel?: string;
+    errorMessage?: 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/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>;

package/dist/stories/onboarding/PageTitle.stories.js

@@ -1,4 +1,14 @@
+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 { expect, within } from '@storybook/test';
 import { PageTitle } from '../../components';
 export default {
     title: 'Components/Onboarding',
@@ -10,3 +20,24 @@ export const PageTitleComponent = (args) => {
 PageTitleComponent.args = {
     title: "Page's title",
 };
+const DESCRIPTION = 'Log in to your Homefile account to connect this phone. Then Homi will know it’s you.';
+export const PageTitleWithDescription = {
+    args: {
+        title: 'Connect (512) 555-0147',
+        description: DESCRIPTION,
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvas.getByText('Connect (512) 555-0147');
+        const description = canvas.getByText(DESCRIPTION);
+        // The line sits under the title, centred like it, and is never cut off.
+        yield expect(description.getBoundingClientRect().top).toBeGreaterThanOrEqual(title.getBoundingClientRect().bottom);
+        yield expect(getComputedStyle(description).textAlign).toBe('center');
+        const descriptionStyle = getComputedStyle(description);
+        yield expect(descriptionStyle.getPropertyValue('-webkit-line-clamp')).toBe('none');
+        yield expect(descriptionStyle.overflow).toBe('visible');
+        // Centred text wraps into even lines; line height at most 4px over the font size.
+        yield expect(descriptionStyle.getPropertyValue('text-wrap-style')).toBe('balance');
+        yield expect(parseFloat(descriptionStyle.lineHeight) - parseFloat(descriptionStyle.fontSize)).toBeLessThanOrEqual(4);
+    }),
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MessagePageI } from '../../../interfaces';
+declare const _default: Meta<MessagePageI>;
+export default _default;
+export declare const Connected: StoryObj<MessagePageI>;
+export declare const Expired: StoryObj<MessagePageI>;
+export declare const TooManyTries: StoryObj<MessagePageI>;
+export declare const ConnectedElsewhere: StoryObj<MessagePageI>;
+export declare const Support: StoryObj<MessagePageI>;

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

@@ -0,0 +1,65 @@
+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 { expect, within } from '@storybook/test';
+import { MessagePage } from '../../../components';
+export default {
+    title: 'Pages/Onboarding/Message Page',
+    component: MessagePage,
+    // A whole page: render edge to edge, as on a phone.
+    parameters: { layout: 'fullscreen' },
+};
+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
+// both a label and a link, and then it opens the texting app.
+const play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement, args }) {
+    var _b;
+    const canvas = within(canvasElement);
+    const title = canvas.getByText(args.title);
+    yield expect(title).toBeVisible();
+    yield expect(getComputedStyle(title).getPropertyValue('-webkit-line-clamp')).toBe('none');
+    yield expect(getComputedStyle(title).overflow).toBe('visible');
+    yield expect(canvas.getByText(args.description)).toBeVisible();
+    const links = canvas.queryAllByRole('link');
+    if (args.actionLabel && args.actionHref) {
+        yield expect(links).toHaveLength(1);
+        yield expect(links[0]).toHaveTextContent(args.actionLabel);
+        yield expect((_b = links[0].getAttribute('href')) === null || _b === void 0 ? void 0 : _b.startsWith('sms:')).toBe(true);
+    }
+    else {
+        yield expect(links).toHaveLength(0);
+        yield expect(canvas.queryAllByRole('button')).toHaveLength(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),
+    play,
+};
+export const Expired = {
+    args: Object.assign({ title: 'This link has expired', description: 'Text Homi and ask for a new one.' }, BACK_TO_TEXTS),
+    play,
+};
+export const TooManyTries = {
+    args: Object.assign({ title: 'Too many tries', description: 'Text Homi for a new link later.' }, BACK_TO_TEXTS),
+    play,
+};
+export const ConnectedElsewhere = {
+    args: {
+        title: 'This phone is already connected to a different Homefile account',
+        description: 'If that’s wrong, contact support@homefile.com.',
+    },
+    play,
+};
+export const Support = {
+    args: {
+        title: 'We can’t connect this phone here',
+        description: 'Contact support@homefile.com and we’ll help.',
+    },
+    play,
+};

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { SignInI } from '../../../interfaces';
 declare const _default: Meta;
 export default _default;
@@ -10,5 +10,12 @@ export declare const SignInPage: {
             email: string;
             password: string;
         };
+        handleForgotPassword: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        handleSignIn: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        handleSignUp: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
+    play({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }): Promise<void>;
 };
+export declare const SignInConnect: StoryObj<SignInI>;

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

@@ -1,4 +1,14 @@
+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 { expect, fn, within } from '@storybook/test';
 import { SignIn, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
@@ -13,4 +23,38 @@ export const SignInPage = (args) => {
 SignInPage.args = {
     isLoading: false,
     values: { email: 'damaprodutora@gmail.com', password: '123456' },
+    handleForgotPassword: fn(),
+    handleSignIn: fn(),
+    handleSignUp: fn(),
+};
+SignInPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // The default page is unchanged: its own title and the Sign-up box.
+    yield expect(canvas.getByText('Please Log in')).toBeVisible();
+    yield expect(canvas.getByText('Don’t have a Homefile account?')).toBeVisible();
+    yield expect(canvas.getByRole('button', { name: 'Sign up' })).toBeVisible();
+});
+const CONNECT_HEADING = 'Connect (512) 555-0147';
+const CONNECT_LINE = 'Log in to your Homefile account to connect this phone. Then Homi will know it’s you.';
+// The page a texter reaches from Homi's link to connect their phone.
+export const SignInConnect = {
+    args: {
+        isLoading: false,
+        heading: CONNECT_HEADING,
+        description: CONNECT_LINE,
+        handleForgotPassword: fn(),
+        handleSignIn: fn(),
+        handleGoogleSignIn: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        yield expect(canvas.getByText(CONNECT_HEADING)).toBeVisible();
+        yield expect(canvas.getByText(CONNECT_LINE)).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Continue with Google' })).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Log in' })).toBeVisible();
+        // No way to make a new account here, and no Apple button.
+        yield expect(canvas.queryByText('Don’t have a Homefile account?')).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Sign up' })).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Continue with Apple' })).toBeNull();
+    }),
 };

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

@@ -1,5 +1,12 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { TwoFactorI } from '../../../interfaces';
 declare const _default: Meta<TwoFactorI>;
 export default _default;
-export declare const TwoFactorPage: (args: TwoFactorI) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoFactorPage: {
+    (args: TwoFactorI): import("react/jsx-runtime").JSX.Element;
+    play({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }): Promise<void>;
+};
+export declare const TwoFactorConnect: StoryObj<TwoFactorI>;
+export declare const TwoFactorConnectWrongCode: StoryObj<TwoFactorI>;

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

@@ -1,5 +1,15 @@
+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 { expect, fn, within } from '@storybook/test';
 import { TwoFactor } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
@@ -19,3 +29,51 @@ export default {
 export const TwoFactorPage = (args) => {
     return _jsx(TwoFactor, Object.assign({}, args));
 };
+TwoFactorPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // The default page is unchanged: its own title, subtitle and button.
+    yield expect(canvas.getByText('Please validate your identity to log in.')).toBeVisible();
+    yield expect(canvas.getByText('We’ve sent a 6-digit security code to your phone. Please enter that code below.')).toBeVisible();
+    yield expect(canvas.getByRole('button', { name: 'Submit' })).toBeVisible();
+});
+const CONNECT_HEADING = 'Check your email';
+const CONNECT_LINE = 'We sent a 6-digit code to j•••••@example.com. Enter it to connect (512) 555-0147.';
+const CONNECT_WARNING = 'If someone sent you this link and asked you to log in, don’t enter the code.';
+const WRONG_CODE = 'That code didn’t work. Check the email and try again.';
+const connectArgs = {
+    twoFactorMethod: 'email',
+    heading: CONNECT_HEADING,
+    description: CONNECT_LINE,
+    warning: CONNECT_WARNING,
+    submitLabel: 'Connect phone',
+    onReset: fn(),
+    onResend: fn(),
+};
+// The code step of the page a texter reaches from Homi's link.
+export const TwoFactorConnect = {
+    args: connectArgs,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        yield expect(canvas.getByText(CONNECT_HEADING)).toBeVisible();
+        yield expect(canvas.getByText(CONNECT_LINE)).toBeVisible();
+        const warning = canvas.getByText(CONNECT_WARNING);
+        yield expect(warning).toBeVisible();
+        yield expect(Number(getComputedStyle(warning).fontWeight)).toBeGreaterThanOrEqual(600);
+        yield expect(canvas.getByRole('button', { name: 'Connect phone' })).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Resend new code' })).toBeVisible();
+        yield expect(canvas.queryByText('Please validate your identity to log in.')).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Submit' })).toBeNull();
+    }),
+};
+// After a wrong code: the error sits above the code field, and the warning stays.
+export const TwoFactorConnectWrongCode = {
+    args: Object.assign(Object.assign({}, connectArgs), { errorMessage: WRONG_CODE }),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText(WRONG_CODE);
+        yield expect(error).toBeVisible();
+        yield expect(canvas.getByText(CONNECT_WARNING)).toBeVisible();
+        const codeField = canvas.getByPlaceholderText('Enter your code here');
+        yield expect(error.getBoundingClientRect().bottom).toBeLessThanOrEqual(codeField.getBoundingClientRect().top);
+    }),
+};

package/dist/stories/partner/adminTiles/InboxCard.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
 import { InboxCardI } from '../../../interfaces';
-declare const _default: Meta;
+declare const _default: Meta<InboxCardI>;
 export default _default;
 export declare const InboxCardComponent: (args: InboxCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/partner/adminTiles/InboxCard.stories.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { fn } from '@storybook/test';
 import { InboxCard } from '../../../components';
 import { Document } from '../../../assets/images';
 export default {
     title: 'Components/Partner/Admin Tiles/Inbox',
     component: InboxCard,
     args: {
-        image: Document,
-        name: 'Inbox',
-        newMessages: 10,
-        showBorder: true,
-        totalMessages: 32,
+        box: {
+            image: Document,
+            name: 'Inbox',
+            newMessages: 10,
+            totalMessages: 32,
+        },
+        onClick: fn(),
     },
 };
 export const InboxCardComponent = (args) => {

package/dist/stories/typography/NoWidow.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+interface NoWidowArgs {
+    width: number;
+}
+declare const _default: Meta<NoWidowArgs>;
+export default _default;
+export declare const TitleAndBody: StoryObj<NoWidowArgs>;
+export declare const NeverWrappingTextStaysOnOneLine: StoryObj<NoWidowArgs>;

package/dist/stories/typography/NoWidow.stories.js

@@ -0,0 +1,61 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Stack, Text } from '@chakra-ui/react';
+import { expect, within } from '@storybook/test';
+export default {
+    title: 'Components/Typography/No Widow',
+    // A 390px phone screen: without the fix, both the title and the body end on one word.
+    args: { width: 390 },
+};
+const TITLE = 'Connect this phone to your Homefile account';
+const BODY = 'We sent a 6-digit code to the email on your account. Enter it here to finish connecting this phone.';
+// How many words sit on the last rendered line of an element's text.
+const wordsOnLastLine = (element) => {
+    var _a, _b, _c, _d, _e;
+    const rows = new Map();
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const text = (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+        for (const match of text.matchAll(/\S+/g)) {
+            const range = document.createRange();
+            range.setStart(node, (_b = match.index) !== null && _b !== void 0 ? _b : 0);
+            range.setEnd(node, ((_c = match.index) !== null && _c !== void 0 ? _c : 0) + match[0].length);
+            const top = Math.round(range.getBoundingClientRect().top);
+            rows.set(top, ((_d = rows.get(top)) !== null && _d !== void 0 ? _d : 0) + 1);
+        }
+    }
+    return (_e = rows.get(Math.max(...rows.keys()))) !== null && _e !== void 0 ? _e : 0;
+};
+export const TitleAndBody = {
+    render: ({ width }) => (_jsx(Box, { w: `${width}px`, p: "base", bg: "neutral.white", children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { variant: "title", children: TITLE }), _jsx(Text, { children: BODY })] }) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvas.getByText(TITLE);
+        const body = canvas.getByText(BODY);
+        yield expect(getComputedStyle(title).getPropertyValue('text-wrap-style')).toBe('balance');
+        yield expect(getComputedStyle(body).getPropertyValue('text-wrap-style')).toBe('pretty');
+        // Neither block ends on a single word.
+        yield expect(wordsOnLastLine(title)).toBeGreaterThanOrEqual(2);
+        yield expect(wordsOnLastLine(body)).toBeGreaterThanOrEqual(2);
+    }),
+};
+const BUTTON_LABEL = 'Set Up Homi on this phone';
+// The no-widow rule only changes HOW text breaks: text that never wraps (inside a
+// button, a badge) must still stay on one line.
+export const NeverWrappingTextStaysOnOneLine = {
+    render: () => (_jsx(Box, { w: "120px", p: "base", bg: "neutral.white", children: _jsx(Button, { w: "full", children: _jsx(Text, { children: BUTTON_LABEL }) }) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const label = within(canvasElement).getByText(BUTTON_LABEL);
+        yield expect(getComputedStyle(label).getPropertyValue('text-wrap-mode')).toBe('nowrap');
+        const lineHeight = parseFloat(getComputedStyle(label).lineHeight);
+        yield expect(label.getBoundingClientRect().height).toBeLessThan(lineHeight * 1.5);
+    }),
+};

package/dist/theme/components/TextStyles.d.ts

@@ -2,24 +2,29 @@ export declare const Text: {
     baseStyle: {
         fontWeight: string;
         lineHeight: string;
+        textWrapStyle: string;
     };
     variants: {
         heading: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         heading6: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         title: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         titleBolder: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             fontWeight: string;

package/dist/theme/components/TextStyles.js

@@ -2,24 +2,32 @@ export const Text = {
     baseStyle: {
         fontWeight: 'regular',
         lineHeight: '20px',
+        // No widows: running text never ends on a single word. The longhand only
+        // changes HOW lines break; the text-wrap shorthand would also undo the
+        // nowrap a Text inherits inside a Button or Badge.
+        textWrapStyle: 'pretty',
     },
     variants: {
         heading: {
+            textWrapStyle: 'balance',
             fontSize: '3xl',
             color: 'gray.3',
             lineHeight: '30px',
         },
         heading6: {
+            textWrapStyle: 'balance',
             fontSize: '2xl',
             color: 'gray.3',
             lineHeight: '30px',
         },
         title: {
+            textWrapStyle: 'balance',
             fontSize: 'lg',
             color: 'gray.3',
             lineHeight: '22px',
         },
         titleBolder: {
+            textWrapStyle: 'balance',
             fontSize: 'lg',
             color: 'gray.3',
             fontWeight: 'semibold',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -71,6 +71,7 @@
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
+    "@storybook/test-runner": "0.21.3",
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-datepicker": "^7.0.0",
@@ -120,5 +121,9 @@
     "tsc-alias": "^1.8.16",
     "valtio": "^2.1.3",
     "yup": "^1.6.1"
+  },
+  "resolutions": {
+    "playwright": "1.58.2",
+    "playwright-core": "1.58.2"
   }
 }