@homefile/components-v2 2.29.7 → 2.30.0

package/dist/components/index.d.ts

@@ -44,3 +44,4 @@ export * from './tour';
 export * from './householdItems';
 export * from './valueMonitor';
 export * from './videoPlayer';
+export * from './wizard';

package/dist/components/index.js

@@ -44,3 +44,4 @@ export * from './tour';
 export * from './householdItems';
 export * from './valueMonitor';
 export * from './videoPlayer';
+export * from './wizard';

package/dist/components/myHomes/WrapperWithShadow.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { WrapperWithShadowI } from '../../interfaces';
-export declare const WrapperWithShadow: ({ animation, children, fadeDelay, }: PropsWithChildren<WrapperWithShadowI>) => import("react/jsx-runtime").JSX.Element;
+export declare const WrapperWithShadow: ({ animation, children, fadeDelay, isWizard, }: PropsWithChildren<WrapperWithShadowI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/WrapperWithShadow.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Fade } from '@chakra-ui/react';
-export const WrapperWithShadow = ({ animation, children, fadeDelay = 0.3, }) => {
-    return (_jsx(Stack, { w: "full", spacing: "base", p: "base", borderTopRadius: "xl", bg: "neutral.white", animation: animation, h: "full", overflowY: "scroll", pb: "3rem", children: _jsx(Fade, { delay: fadeDelay, in: true, children: children }) }));
+export const WrapperWithShadow = ({ animation, children, fadeDelay = 0.3, isWizard = false, }) => {
+    const styles = isWizard
+        ? {}
+        : {
+            borderTopRadius: 'xl',
+            bg: 'neutral.white',
+            animation,
+            h: 'full',
+            overflowY: 'scroll',
+        };
+    return (_jsx(Stack, Object.assign({}, styles, { w: "full", spacing: "base", p: "base", pb: "3rem", children: _jsx(Fade, { delay: fadeDelay, in: true, children: children }) })));
 };

package/dist/components/myHomes/steps/ConfirmProperty.d.ts

@@ -1,2 +1,2 @@
 import { AddHomeContentI } from '../../../interfaces';
-export declare const ConfirmProperty: ({ handleAddress, isFirstHome, isLoading, properties, }: Pick<AddHomeContentI, "isFirstHome" | "properties" | "handleAddress" | "isLoading">) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmProperty: ({ handleAddress, isFirstHome, isLoading, properties, isWizard, }: Pick<AddHomeContentI, "isFirstHome" | "properties" | "handleAddress" | "isLoading" | "isWizard">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/ConfirmProperty.js

@@ -3,7 +3,7 @@ import { t } from 'i18next';
 import { useState } from 'react';
 import { Box, Button, Stack, Text } from '@chakra-ui/react';
 import { MyHomesStepBody, MyHomesStepWrapper, PropertyCards, } from '../..';
-export const ConfirmProperty = ({ handleAddress = () => { }, isFirstHome, isLoading, properties = [], }) => {
+export const ConfirmProperty = ({ handleAddress = () => { }, isFirstHome, isLoading, properties = [], isWizard = false, }) => {
     var _a, _b;
     const [currentProperty, setCurrentProperty] = useState((_b = (_a = properties === null || properties === void 0 ? void 0 : properties[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'none');
     const footerText = (properties === null || properties === void 0 ? void 0 : properties.length) > 0
@@ -18,5 +18,8 @@ export const ConfirmProperty = ({ handleAddress = () => { }, isFirstHome, isLoad
             },
         },
     ];
+    if (isWizard) {
+        return (_jsxs(Stack, { children: [_jsxs(Stack, { align: "center", borderRadius: "sm", w: "100%", py: "4", children: [_jsx(PropertyCards, { properties: propertiesWithNoneOfTheAbove, currentProperty: currentProperty, onChange: setCurrentProperty }), _jsx(Box, { px: "6", children: _jsx(Text, { variant: "home", textAlign: "center", children: footerText }) })] }), _jsx(Button, { onClick: () => handleAddress === null || handleAddress === void 0 ? void 0 : handleAddress(currentProperty), disabled: isLoading, children: t('buttons.continue') })] }));
+    }
     return (_jsx(MyHomesStepWrapper, { isFirstHome: isFirstHome, children: _jsxs(MyHomesStepBody, { fadeDelay: 0, title: t('myHomes.properties.title'), subtitle: t('myHomes.properties.subtitle'), children: [_jsxs(Stack, { align: "center", bg: "lightViolet.1", borderRadius: "sm", w: "100%", py: "6", children: [_jsx(PropertyCards, { properties: propertiesWithNoneOfTheAbove, currentProperty: currentProperty, onChange: setCurrentProperty }), _jsx(Box, { px: "6", children: _jsx(Text, { variant: "home", textAlign: "center", children: footerText }) })] }), _jsx(Button, { onClick: () => handleAddress === null || handleAddress === void 0 ? void 0 : handleAddress(currentProperty), disabled: isLoading, children: t('buttons.continue') })] }) }));
 };

package/dist/components/myHomes/steps/MyHomeDetails.d.ts

@@ -1,3 +1,3 @@
 import { AddHomeContentI } from '../../../interfaces';
 export declare const up: string;
-export declare const MyHomeDetails: ({ handleCreateHomeClick, handleSkipClick, isFirstHome, showExternalLink, userFirstName, values, isLoading, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const MyHomeDetails: ({ handleCreateHomeClick, handleSkipClick, isFirstHome, showExternalLink, userFirstName, values, isLoading, isWizard, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/MyHomeDetails.js

@@ -13,12 +13,12 @@ const upAnimation = keyframes `
  to { transform: translateY(0); box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.07)}
 `;
 export const up = `${upAnimation} 200ms ease forwards`;
-export const MyHomeDetails = ({ handleCreateHomeClick, handleSkipClick, isFirstHome = false, showExternalLink, userFirstName = '', values, isLoading, }) => {
+export const MyHomeDetails = ({ handleCreateHomeClick, handleSkipClick, isFirstHome = false, showExternalLink, userFirstName = '', values, isLoading, isWizard = false, }) => {
     const { handleErrorMessage, handleLinkChange, handleNameChange, handleNameValidation, handleSelectRecords, handleSubmit, isOwner, group, ownRadio, rentRadio, } = useAddHouseContent(values, handleCreateHomeClick);
     const { externalLink, name, isNameValid, searchRecords } = useSnapshot(firstHomeProxy, { sync: true });
     const bgColors = {
         body: isFirstHome ? 'neutral.white' : 'lightBlue.1',
         input: isFirstHome ? 'lightGreen.1' : 'lightBlue.2',
     };
-    return (_jsxs(_Fragment, { children: [isFirstHome && _jsx(FirstHomeHeader, { firstName: userFirstName }), _jsxs(Container, { variant: "ghost", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsx(Box, { bg: bgColors.body, children: _jsxs(Stack, { spacing: "input.sm", p: "base", children: [_jsx(SectionHeader, { title: t('myHomes.section1'), titleIcon: HomeAddress, leftElement: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('forms.required2') }) }), _jsx(AddressStored, {})] }) })), _jsxs(Stack, { spacing: "base", bg: "lightBlue.1", children: [_jsxs(Flex, Object.assign({}, group, { p: "base", gap: "4", borderY: "2px dashed", borderColor: "lightBlue.2", marginX: "base", children: [_jsx(RadioButton, Object.assign({}, ownRadio, { children: t('myHomes.own') })), _jsx(RadioButton, Object.assign({}, rentRadio, { children: t('myHomes.rent') }))] })), _jsxs(Stack, { spacing: "base", bg: bgColors.input, p: "base", children: [_jsx(SectionHeader, { title: t('myHomes.section2'), titleIcon: RelationshipHome }), _jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "projectName", placeholder: t('myHomes.form.projectName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), showExternalLink && (_jsx(TextInput, { errorMessage: handleErrorMessage(), id: "externalLink", placeholder: t('myHomes.form.externalLink'), handleChange: handleLinkChange, value: externalLink }))] })] }), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, children: _jsxs(Flex, { direction: "column", justify: "space-between", gap: "10", h: "100%", children: [_jsxs(Stack, { spacing: "base", children: [isOwner && (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: t('myHomes.section3'), titleIcon: MagnifyingGlassReport }), _jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords })] })), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, children: t('buttons.confirm') })] }), isFirstHome && (_jsx(Button, { variant: "text", onClick: handleSkipClick, alignSelf: "center", children: t('buttons.skip') }))] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [isFirstHome && _jsx(FirstHomeHeader, { firstName: userFirstName }), _jsxs(Container, { variant: "ghost", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsx(Box, { bg: isWizard ? 'transparent' : bgColors.body, children: _jsxs(Stack, { spacing: "input.sm", p: "base", children: [_jsx(SectionHeader, { title: t('myHomes.section1'), titleIcon: HomeAddress, leftElement: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('forms.required2') }) }), _jsx(AddressStored, {})] }) })), _jsxs(Stack, { spacing: "base", bg: isWizard ? 'transparent' : 'lightBlue.1', children: [_jsxs(Flex, Object.assign({}, group, { p: "base", gap: "4", borderY: "2px dashed", borderColor: "lightBlue.2", marginX: "base", children: [_jsx(RadioButton, Object.assign({}, ownRadio, { children: t('myHomes.own') })), _jsx(RadioButton, Object.assign({}, rentRadio, { children: t('myHomes.rent') }))] })), _jsxs(Stack, { spacing: "base", bg: isWizard ? 'transparent' : bgColors.input, p: "base", children: [_jsx(SectionHeader, { title: t('myHomes.section2'), titleIcon: RelationshipHome }), _jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "projectName", placeholder: t('myHomes.form.projectName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), showExternalLink && (_jsx(TextInput, { errorMessage: handleErrorMessage(), id: "externalLink", placeholder: t('myHomes.form.externalLink'), handleChange: handleLinkChange, value: externalLink }))] })] }), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, isWizard: isWizard, children: _jsxs(Flex, { direction: "column", justify: "space-between", gap: "10", h: "100%", children: [_jsxs(Stack, { spacing: "base", children: [isOwner && (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: t('myHomes.section3'), titleIcon: MagnifyingGlassReport }), _jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords })] })), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, children: t('buttons.confirm') })] }), isFirstHome && (_jsx(Button, { variant: "text", onClick: handleSkipClick, alignSelf: "center", children: t('buttons.skip') }))] }) })] })] }));
 };

package/dist/components/myHomes/steps/MyHomesStepBody.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { MyHomesStepBodyI } from '../../../interfaces';
-export declare const MyHomesStepBody: ({ animation, children, fadeDelay, subtitle, title, }: PropsWithChildren<MyHomesStepBodyI>) => import("react/jsx-runtime").JSX.Element;
+export declare const MyHomesStepBody: ({ animation, children, fadeDelay, subtitle, title, isWizard, }: PropsWithChildren<MyHomesStepBodyI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/MyHomesStepBody.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
 import { WrapperWithShadow } from '../..';
-export const MyHomesStepBody = ({ animation, children, fadeDelay, subtitle, title, }) => {
+export const MyHomesStepBody = ({ animation, children, fadeDelay, subtitle, title, isWizard, }) => {
+    if (isWizard) {
+        return (_jsx(WrapperWithShadow, { animation: animation, fadeDelay: fadeDelay, isWizard: true, children: children }));
+    }
     return (_jsx(WrapperWithShadow, { animation: animation, fadeDelay: fadeDelay, children: _jsxs(Stack, { align: "center", spacing: "4", py: "8", children: [_jsx(Text, { fontSize: "xl", textAlign: "center", w: "80%", lineHeight: "1.3", children: title }), _jsx(Text, { fontFamily: "secondary", w: "85%", textAlign: "center", children: subtitle }), children] }) }));
 };

package/dist/components/myHomes/steps/MyHomesStepWrapper.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { AddHomeContentI } from '../../../interfaces';
-export declare const MyHomesStepWrapper: ({ children, isFirstHome, }: PropsWithChildren<Pick<AddHomeContentI, "isFirstHome">>) => import("react/jsx-runtime").JSX.Element;
+export declare const MyHomesStepWrapper: ({ children, isFirstHome, isWizard, }: PropsWithChildren<Pick<AddHomeContentI, "isFirstHome" | "isWizard">>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/MyHomesStepWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
 import { MyHomesStepHeader } from '../..';
-export const MyHomesStepWrapper = ({ children, isFirstHome, }) => {
+export const MyHomesStepWrapper = ({ children, isFirstHome, isWizard, }) => {
     const bg = isFirstHome ? 'lightGreen.1' : 'lightBlue.1';
-    return (_jsxs(Box, { bg: bg, h: "100%", children: [_jsx(MyHomesStepHeader, { isFirstHome: isFirstHome }), children] }));
+    return (_jsxs(Box, { bg: isWizard ? 'transparent' : bg, h: "100%", children: [_jsx(MyHomesStepHeader, { isFirstHome: isFirstHome }), children] }));
 };

package/dist/components/myHomes/steps/SearchRecords.d.ts

@@ -1,2 +1,2 @@
 import { AddHomeContentI } from '../../../interfaces';
-export declare const SearchRecords: ({ isFirstHome, }: Pick<AddHomeContentI, "isFirstHome">) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchRecords: ({ isFirstHome, isWizard, }: Pick<AddHomeContentI, "isFirstHome" | "isWizard">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/SearchRecords.js

@@ -17,7 +17,7 @@ const fadeAnimation = keyframes `
  to { opacity: 1 }
 `;
 const fade = `${fadeAnimation} 50ms ease-in-out backwards`;
-export const SearchRecords = ({ isFirstHome, }) => {
+export const SearchRecords = ({ isFirstHome, isWizard = false, }) => {
     const { fields: { street, city, state }, } = useSnapshot(addressProxy, { sync: true });
     const [progressValue, setProgressValue] = useState(0);
     const address = `${street}, ${city} ${state}`;
@@ -28,5 +28,5 @@ export const SearchRecords = ({ isFirstHome, }) => {
         }, 500);
         return () => clearInterval(interval);
     }, []);
-    return (_jsx(MyHomesStepWrapper, { isFirstHome: isFirstHome, children: _jsx(MyHomesStepBody, { animation: up, title: t('myHomes.search.title'), subtitle: `${t('myHomes.search.subtitle')} ${address}`, children: _jsxs(Stack, { align: "center", bg: "lightViolet.1", borderRadius: "sm", w: "100%", py: "6", children: [_jsxs(Box, { position: "relative", children: [_jsx(CircularProgress, { value: progressValue, isIndeterminate: progressValue === 100, color: "violet.1", thickness: "4px", size: size, zIndex: "1" }), _jsx(Center, { position: "absolute", top: "0", left: "0", h: size, w: size, children: _jsx(Center, { bg: "neutral.white", h: "70px", w: "70px", borderRadius: "50%", children: _jsx(Image, { src: MagnifyingGlassReport, alt: "records", h: "40px", w: "auto" }) }) })] }), _jsxs(Flex, { direction: "column", alignItems: "center", children: [_jsx(AnimatedText, { animation: fade, children: t('myHomes.search.msl') }), _jsx(AnimatedText, { animationDelay: "1.5s", animation: fade, children: t('myHomes.search.tax') }), _jsx(AnimatedText, { animationDelay: "2s", animation: fade, children: t('myHomes.search.google') }), _jsx(AnimatedText, { animationDelay: "2.5s", animation: fade, children: t('myHomes.search.leins') })] })] }) }) }));
+    return (_jsx(MyHomesStepWrapper, { isFirstHome: isFirstHome, isWizard: isWizard, children: _jsx(MyHomesStepBody, { isWizard: isWizard, animation: up, title: t('myHomes.search.title'), subtitle: `${t('myHomes.search.subtitle')} ${address}`, children: _jsxs(Stack, { align: "center", bg: isWizard ? 'transparent' : 'lightViolet.1', borderRadius: "sm", w: "100%", py: "6", children: [_jsxs(Box, { position: "relative", children: [_jsx(CircularProgress, { value: progressValue, isIndeterminate: progressValue === 100, color: "violet.1", thickness: "4px", size: size, zIndex: "1" }), _jsx(Center, { position: "absolute", top: "0", left: "0", h: size, w: size, children: _jsx(Center, { bg: "neutral.white", h: "70px", w: "70px", borderRadius: "50%", children: _jsx(Image, { src: MagnifyingGlassReport, alt: "records", h: "40px", w: "auto" }) }) })] }), _jsxs(Flex, { direction: "column", alignItems: "center", children: [_jsx(AnimatedText, { animation: fade, children: t('myHomes.search.msl') }), _jsx(AnimatedText, { animationDelay: "1.5s", animation: fade, children: t('myHomes.search.tax') }), _jsx(AnimatedText, { animationDelay: "2s", animation: fade, children: t('myHomes.search.google') }), _jsx(AnimatedText, { animationDelay: "2.5s", animation: fade, children: t('myHomes.search.leins') })] })] }) }) }));
 };

package/dist/components/wizard/ControlledWizard.d.ts

@@ -0,0 +1,2 @@
+import { ControlledWizardI } from '../../interfaces';
+export declare function ControlledWizard({ step, setStep, steps, minHeight, headerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/ControlledWizard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@chakra-ui/react';
+import { AnimatePresence, motion } from 'framer-motion';
+const MotionBox = motion(typeof Box);
+export function ControlledWizard({ step, setStep, steps, minHeight = '770px', headerBlink, }) {
+    const current = steps[step];
+    const headerVariants = {
+        initial: { opacity: 0, y: 8 },
+        animate: headerBlink
+            ? { opacity: [1, 0.55, 1], y: 0, transition: { duration: 0.28 } }
+            : { opacity: 1, y: 0, transition: { duration: 0.28 } },
+        exit: { opacity: 0, y: -8, transition: { duration: 0.18 } },
+    };
+    const bodyVariants = {
+        initial: { opacity: 0, y: 12, scale: 0.98 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: -8, scale: 0.98 },
+    };
+    return (_jsxs(Stack, { spacing: "0", shadow: "md", minH: minHeight, bg: "white", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", children: current.header }, `h-${step}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", children: _jsx(Box, { w: "full", p: { base: 4, md: 6 }, children: current.body({ setStep }) }) }, `b-${step}`) })] }));
+}

package/dist/components/wizard/WizardTextHeader.d.ts

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

package/dist/components/wizard/WizardTextHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Center, Show, Stack, Text, Box } from '@chakra-ui/react';
+import { Logo } from '..';
+export const WizardTextHeader = ({ title, subtitle }) => {
+    return (_jsx(Center, { w: "full", bg: "lightGreen.1", minH: "212px", children: _jsxs(Stack, { w: "full", spacing: "0", align: "center", children: [_jsx(Show, { below: "md", children: _jsx(Logo, {}) }), _jsxs(Stack, { spacing: "6", w: "80%", children: [_jsx(Text, { fontSize: { base: '2xl', md: '3xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: "center", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", children: subtitle })), _jsx(Show, { below: "md", children: _jsx(Box, { h: "6" }) })] })] }) }));
+};

package/dist/components/wizard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlledWizard';
+export * from './WizardTextHeader';

package/dist/components/wizard/index.js

@@ -0,0 +1,2 @@
+export * from './ControlledWizard';
+export * from './WizardTextHeader';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, 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, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, 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, SectionHeader, SendCommunication, SearchItemLoader, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, 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, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, 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, SectionHeader, SendCommunication, SearchItemLoader, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, WizardTextHeader, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';
-export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
+export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, addressProxy, } from './proxies';
 import theme from './theme';
 export { theme };

package/dist/index.js

@@ -1,7 +1,7 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, 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, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, 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, SectionHeader, SendCommunication, SearchItemLoader, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, ControlledWizard, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, 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, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, 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, SectionHeader, SendCommunication, SearchItemLoader, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, WizardTextHeader, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';
-export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
+export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, addressProxy, } from './proxies';
 import theme from './theme';
 export { theme };

package/dist/interfaces/index.d.ts

@@ -42,3 +42,4 @@ export * from './householdItems';
 export * from './valueMonitor';
 export * from './DrawerHeader.interface';
 export * from './videoPlayer';
+export * from './wizard';

package/dist/interfaces/index.js

@@ -42,3 +42,4 @@ export * from './householdItems';
 export * from './valueMonitor';
 export * from './DrawerHeader.interface';
 export * from './videoPlayer';
+export * from './wizard';

package/dist/interfaces/myHomes/AddHomeContent.interface.d.ts

@@ -22,4 +22,5 @@ export interface AddHomeContentI {
     step?: 'initial' | 'loading' | 'properties';
     userFirstName?: string;
     values?: HomeFormI;
+    isWizard?: boolean;
 }

package/dist/interfaces/myHomes/WrapperWithShadow.interface.d.ts

@@ -1,4 +1,5 @@
 export interface WrapperWithShadowI {
     animation?: string;
     fadeDelay?: number;
+    isWizard?: boolean;
 }

package/dist/interfaces/wizard/ControlledWizard.interface.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type WizardStep = {
+    header: ReactNode;
+    body: (api: {
+        setStep: (i: number) => void;
+    }) => ReactNode;
+};
+export interface ControlledWizardI {
+    step: number;
+    setStep: (i: number) => void;
+    steps: WizardStep[];
+    minHeight?: string | number;
+    headerBlink?: boolean;
+}

package/dist/interfaces/wizard/ControlledWizard.interface.js

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

package/dist/interfaces/wizard/WizardTextHeader.interface.d.ts

@@ -0,0 +1,4 @@
+export interface WizardTextHeaderI {
+    title: string;
+    subtitle?: string;
+}

package/dist/interfaces/wizard/WizardTextHeader.interface.js

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

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

@@ -0,0 +1,2 @@
+export * from './ControlledWizard.interface';
+export * from './WizardTextHeader.interface';

package/dist/interfaces/wizard/index.js

@@ -0,0 +1,2 @@
+export * from './ControlledWizard.interface';
+export * from './WizardTextHeader.interface';

package/dist/stories/wizard/ControlledWizard.stories.d.ts

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

package/dist/stories/wizard/ControlledWizard.stories.js

@@ -0,0 +1,48 @@
+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 { ConfirmProperty, ControlledWizard, MyHomeDetails, SearchRecords, WizardTextHeader, } from '../../components';
+import { Box } from '@chakra-ui/react';
+import { useState } from 'react';
+import { formValues } from '../../helpers';
+import { propertiesMock } from '../../mocks';
+export default {
+    title: 'Components/Wizard/ControlledWizard',
+    component: ControlledWizard,
+    decorators: [
+        (story) => (_jsx(Box, { maxW: "800px", mx: "auto", children: story() })),
+    ],
+};
+function fakeLookup() {
+    return new Promise((r) => setTimeout(r, 1500));
+}
+export const ControlledWizardComponent = () => {
+    const [step, setStep] = useState(0);
+    return (_jsx(ControlledWizard, { step: step, setStep: setStep, steps: [
+            {
+                header: (_jsx(WizardTextHeader, { title: "Hi John, let\u2019s get your Homefile set up.", subtitle: "Complete this quick setup and we\u2019ll handle the rest." })),
+                body: ({ setStep }) => (_jsx(MyHomeDetails, { isWizard: true, userFirstName: "Adam", values: formValues, properties: propertiesMock, handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
+                        setStep(1);
+                        yield fakeLookup();
+                        setStep(2);
+                    }) })),
+            },
+            {
+                header: (_jsx(WizardTextHeader, { title: "One moment while we search public records\u2026" })),
+                body: () => _jsx(SearchRecords, { isWizard: true }),
+            },
+            {
+                header: (_jsx(WizardTextHeader, { title: "This is the data we found in public records.", subtitle: "Details may not represent the most up-to-date info about your home." })),
+                body: () => (_jsx(ConfirmProperty, { isWizard: true, properties: propertiesMock, handleAddress: () => {
+                        setStep(0);
+                    } })),
+            },
+        ] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.29.7",
+  "version": "2.30.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/index.ts

@@ -44,3 +44,4 @@ export * from './tour'
 export * from './householdItems'
 export * from './valueMonitor'
 export * from './videoPlayer'
+export * from './wizard'

package/src/components/myHomes/WrapperWithShadow.tsx

@@ -1,22 +1,28 @@
 import { PropsWithChildren } from 'react'
-import { Stack, Fade } from '@chakra-ui/react'
+import { Stack, Fade, ComponentWithAs, StackProps } from '@chakra-ui/react'
 import { WrapperWithShadowI } from '@/interfaces'
 
 export const WrapperWithShadow = ({
   animation,
   children,
   fadeDelay = 0.3,
+  isWizard = false,
 }: PropsWithChildren<WrapperWithShadowI>) => {
+  const styles = isWizard
+    ? {}
+    : {
+        borderTopRadius: 'xl',
+        bg: 'neutral.white',
+        animation,
+        h: 'full',
+        overflowY: 'scroll',
+      }
   return (
     <Stack
+      {...(styles as ComponentWithAs<'div', StackProps>)}
       w="full"
       spacing="base"
       p="base"
-      borderTopRadius="xl"
-      bg="neutral.white"
-      animation={animation}
-      h="full"
-      overflowY="scroll"
       pb="3rem"
     >
       <Fade delay={fadeDelay} in>

package/src/components/myHomes/steps/ConfirmProperty.tsx

@@ -13,9 +13,10 @@ export const ConfirmProperty = ({
   isFirstHome,
   isLoading,
   properties = [],
+  isWizard = false,
 }: Pick<
   AddHomeContentI,
-  'isFirstHome' | 'properties' | 'handleAddress' | 'isLoading'
+  'isFirstHome' | 'properties' | 'handleAddress' | 'isLoading' | 'isWizard'
 >) => {
   const [currentProperty, setCurrentProperty] = useState(
     properties?.[0]?.id ?? 'none'
@@ -35,6 +36,31 @@ export const ConfirmProperty = ({
     },
   ]
 
+  if (isWizard) {
+    return (
+      <Stack>
+        <Stack align="center" borderRadius="sm" w="100%" py="4">
+          <PropertyCards
+            properties={propertiesWithNoneOfTheAbove}
+            currentProperty={currentProperty}
+            onChange={setCurrentProperty}
+          />
+          <Box px="6">
+            <Text variant="home" textAlign="center">
+              {footerText}
+            </Text>
+          </Box>
+        </Stack>
+        <Button
+          onClick={() => handleAddress?.(currentProperty)}
+          disabled={isLoading}
+        >
+          {t('buttons.continue')}
+        </Button>
+      </Stack>
+    )
+  }
+
   return (
     <MyHomesStepWrapper isFirstHome={isFirstHome}>
       <MyHomesStepBody

package/src/components/myHomes/steps/MyHomeDetails.tsx

@@ -44,6 +44,7 @@ export const MyHomeDetails = ({
   userFirstName = '',
   values,
   isLoading,
+  isWizard = false,
 }: AddHomeContentI) => {
   const {
     handleErrorMessage,
@@ -76,7 +77,7 @@ export const MyHomeDetails = ({
           </Center>
         )}
         {!isLoading && (
-          <Box bg={bgColors.body}>
+          <Box bg={isWizard ? 'transparent' : bgColors.body}>
             <Stack spacing="input.sm" p="base">
               <SectionHeader
                 title={t('myHomes.section1')}
@@ -91,7 +92,7 @@ export const MyHomeDetails = ({
             </Stack>
           </Box>
         )}
-        <Stack spacing="base" bg="lightBlue.1">
+        <Stack spacing="base" bg={isWizard ? 'transparent' : 'lightBlue.1'}>
           <Flex
             {...group}
             p="base"
@@ -103,7 +104,11 @@ export const MyHomeDetails = ({
             <RadioButton {...ownRadio}>{t('myHomes.own')}</RadioButton>
             <RadioButton {...rentRadio}>{t('myHomes.rent')}</RadioButton>
           </Flex>
-          <Stack spacing="base" bg={bgColors.input} p="base">
+          <Stack
+            spacing="base"
+            bg={isWizard ? 'transparent' : bgColors.input}
+            p="base"
+          >
             <SectionHeader
               title={t('myHomes.section2')}
               titleIcon={RelationshipHome}
@@ -129,7 +134,7 @@ export const MyHomeDetails = ({
           </Stack>
         </Stack>
 
-        <WrapperWithShadow animation={up} fadeDelay={0.2}>
+        <WrapperWithShadow animation={up} fadeDelay={0.2} isWizard={isWizard}>
           <Flex direction="column" justify="space-between" gap="10" h="100%">
             <Stack spacing="base">
               {isOwner && (

package/src/components/myHomes/steps/MyHomesStepBody.tsx

@@ -9,7 +9,15 @@ export const MyHomesStepBody = ({
   fadeDelay,
   subtitle,
   title,
+  isWizard,
 }: PropsWithChildren<MyHomesStepBodyI>) => {
+  if (isWizard) {
+    return (
+      <WrapperWithShadow animation={animation} fadeDelay={fadeDelay} isWizard>
+        {children}
+      </WrapperWithShadow>
+    )
+  }
   return (
     <WrapperWithShadow animation={animation} fadeDelay={fadeDelay}>
       <Stack align="center" spacing="4" py="8">

package/src/components/myHomes/steps/MyHomesStepWrapper.tsx

@@ -6,10 +6,11 @@ import { AddHomeContentI } from '@/interfaces'
 export const MyHomesStepWrapper = ({
   children,
   isFirstHome,
-}: PropsWithChildren<Pick<AddHomeContentI, 'isFirstHome'>>) => {
+  isWizard,
+}: PropsWithChildren<Pick<AddHomeContentI, 'isFirstHome' | 'isWizard'>>) => {
   const bg = isFirstHome ? 'lightGreen.1' : 'lightBlue.1'
   return (
-    <Box bg={bg} h="100%">
+    <Box bg={isWizard ? 'transparent' : bg} h="100%">
       <MyHomesStepHeader isFirstHome={isFirstHome} />
       {children}
     </Box>

package/src/components/myHomes/steps/SearchRecords.tsx

@@ -30,7 +30,8 @@ const fade = `${fadeAnimation} 50ms ease-in-out backwards`
 
 export const SearchRecords = ({
   isFirstHome,
-}: Pick<AddHomeContentI, 'isFirstHome'>) => {
+  isWizard = false,
+}: Pick<AddHomeContentI, 'isFirstHome' | 'isWizard'>) => {
   const {
     fields: { street, city, state },
   } = useSnapshot(addressProxy, { sync: true })
@@ -46,15 +47,16 @@ export const SearchRecords = ({
   }, [])
 
   return (
-    <MyHomesStepWrapper isFirstHome={isFirstHome}>
+    <MyHomesStepWrapper isFirstHome={isFirstHome} isWizard={isWizard}>
       <MyHomesStepBody
+        isWizard={isWizard}
         animation={up}
         title={t('myHomes.search.title')}
         subtitle={`${t('myHomes.search.subtitle')} ${address}`}
       >
         <Stack
           align="center"
-          bg="lightViolet.1"
+          bg={isWizard ? 'transparent' : 'lightViolet.1'}
           borderRadius="sm"
           w="100%"
           py="6"

package/src/components/wizard/ControlledWizard.tsx

@@ -0,0 +1,64 @@
+import { Box, Stack } from '@chakra-ui/react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { ControlledWizardI } from '@/interfaces'
+
+const MotionBox = motion(typeof Box)
+
+export function ControlledWizard({
+  step,
+  setStep,
+  steps,
+  minHeight = '770px',
+  headerBlink,
+}: ControlledWizardI) {
+  const current = steps[step]
+  const headerVariants = {
+    initial: { opacity: 0, y: 8 },
+    animate: headerBlink
+      ? { opacity: [1, 0.55, 1], y: 0, transition: { duration: 0.28 } }
+      : { opacity: 1, y: 0, transition: { duration: 0.28 } },
+    exit: { opacity: 0, y: -8, transition: { duration: 0.18 } },
+  }
+  const bodyVariants = {
+    initial: { opacity: 0, y: 12, scale: 0.98 },
+    animate: { opacity: 1, y: 0, scale: 1 },
+    exit: { opacity: 0, y: -8, scale: 0.98 },
+  }
+
+  return (
+    <Stack spacing="0" shadow="md" minH={minHeight} bg="white">
+      {/* header */}
+      <AnimatePresence mode="wait">
+        <Box
+          as={MotionBox}
+          key={`h-${step}`}
+          variants={headerVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          w="full"
+        >
+          {current.header}
+        </Box>
+      </AnimatePresence>
+
+      {/* body */}
+      <AnimatePresence mode="wait">
+        <Box
+          as={MotionBox}
+          key={`b-${step}`}
+          variants={bodyVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          flex="1"
+          display="flex"
+        >
+          <Box w="full" p={{ base: 4, md: 6 }}>
+            {current.body({ setStep })}
+          </Box>
+        </Box>
+      </AnimatePresence>
+    </Stack>
+  )
+}

package/src/components/wizard/WizardTextHeader.tsx

@@ -0,0 +1,32 @@
+import { Center, Show, Stack, Text, Box } from '@chakra-ui/react'
+import { Logo } from '@/components'
+import { WizardTextHeaderI } from '@/interfaces'
+
+export const WizardTextHeader = ({ title, subtitle }: WizardTextHeaderI) => {
+  return (
+    <Center w="full" bg="lightGreen.1" minH="212px">
+      <Stack w="full" spacing="0" align="center">
+        <Show below="md">
+          <Logo />
+        </Show>
+        <Stack spacing="6" w="80%">
+          <Text
+            fontSize={{ base: '2xl', md: '3xl' }}
+            lineHeight={{ base: 'shorter', md: 'base' }}
+            textAlign="center"
+          >
+            {title}
+          </Text>
+          {subtitle && (
+            <Text fontFamily="secondary" textAlign="center">
+              {subtitle}
+            </Text>
+          )}
+          <Show below="md">
+            <Box h="6" />
+          </Show>
+        </Stack>
+      </Stack>
+    </Center>
+  )
+}

package/src/components/wizard/index.ts

@@ -0,0 +1,2 @@
+export * from './ControlledWizard'
+export * from './WizardTextHeader'

package/src/index.ts

@@ -26,6 +26,7 @@ export {
   ContactList,
   ContactsContent,
   ContainerHeader,
+  ControlledWizard,
   CreateDocumentHeader,
   CreateHouseholdItemHeader,
   CreditCardContainer,
@@ -217,6 +218,7 @@ export {
   WeatherWidget,
   WellDone,
   YtdTile,
+  WizardTextHeader,
 } from './components'
 
 export { useCustomToast } from './hooks'
@@ -251,6 +253,7 @@ export {
   recordsInputsToDBProxy,
   userDetailsProxy,
   confirmAddressProxy,
+  addressProxy,
 } from './proxies'
 
 import theme from './theme'

package/src/interfaces/index.ts

@@ -42,3 +42,4 @@ export * from './householdItems'
 export * from './valueMonitor'
 export * from './DrawerHeader.interface'
 export * from './videoPlayer'
+export * from './wizard'

package/src/interfaces/myHomes/AddHomeContent.interface.ts

@@ -25,4 +25,5 @@ export interface AddHomeContentI {
   step?: 'initial' | 'loading' | 'properties'
   userFirstName?: string
   values?: HomeFormI
+  isWizard?: boolean
 }

package/src/interfaces/myHomes/WrapperWithShadow.interface.ts

@@ -1,4 +1,5 @@
 export interface WrapperWithShadowI {
   animation?: string
   fadeDelay?: number
+  isWizard?: boolean
 }

package/src/interfaces/wizard/ControlledWizard.interface.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+export type WizardStep = {
+  header: ReactNode
+  body: (api: { setStep: (i: number) => void }) => ReactNode
+}
+
+export interface ControlledWizardI {
+  step: number
+  setStep: (i: number) => void
+  steps: WizardStep[]
+  minHeight?: string | number
+  headerBlink?: boolean
+}

package/src/interfaces/wizard/WizardTextHeader.interface.ts

@@ -0,0 +1,4 @@
+export interface WizardTextHeaderI {
+  title: string
+  subtitle?: string
+}

package/src/interfaces/wizard/index.ts

@@ -0,0 +1,2 @@
+export * from './ControlledWizard.interface'
+export * from './WizardTextHeader.interface'

package/src/stories/wizard/ControlledWizard.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/react'
+import {
+  ConfirmProperty,
+  ControlledWizard,
+  MyHomeDetails,
+  SearchRecords,
+  WizardTextHeader,
+} from '@/components'
+import { Box } from '@chakra-ui/react'
+import { useState } from 'react'
+import { formValues } from '@/helpers'
+import { propertiesMock } from '@/mocks'
+import { ControlledWizardI, HomeFormI } from '@/interfaces'
+
+export default {
+  title: 'Components/Wizard/ControlledWizard',
+  component: ControlledWizard,
+  decorators: [
+    (story) => (
+      <Box maxW="800px" mx="auto">
+        {story()}
+      </Box>
+    ),
+  ],
+} as Meta<ControlledWizardI>
+
+function fakeLookup() {
+  return new Promise((r) => setTimeout(r, 1500))
+}
+
+export const ControlledWizardComponent = () => {
+  const [step, setStep] = useState(0)
+  return (
+    <ControlledWizard
+      step={step}
+      setStep={setStep}
+      steps={[
+        {
+          header: (
+            <WizardTextHeader
+              title="Hi John, let’s get your Homefile set up."
+              subtitle="Complete this quick setup and we’ll handle the rest."
+            />
+          ),
+          body: ({ setStep }) => (
+            <MyHomeDetails
+              isWizard
+              userFirstName="Adam"
+              values={formValues}
+              properties={propertiesMock}
+              handleCreateHomeClick={async (values: HomeFormI) => {
+                setStep(1)
+                await fakeLookup()
+                setStep(2)
+              }}
+            />
+          ),
+        },
+        {
+          header: (
+            <WizardTextHeader title="One moment while we search public records…" />
+          ),
+          body: () => <SearchRecords isWizard />,
+        },
+        {
+          header: (
+            <WizardTextHeader
+              title="This is the data we found in public records."
+              subtitle="Details may not represent the most up-to-date info about your home."
+            />
+          ),
+          body: () => (
+            <ConfirmProperty
+              isWizard
+              properties={propertiesMock}
+              handleAddress={() => {
+                setStep(0)
+              }}
+            />
+          ),
+        },
+      ]}
+    />
+  )
+}