@homefile/components-v2 2.35.0 → 2.36.1

package/dist/components/forms/dynamicForm/fields/HomeInitialSetup.d.ts

@@ -1,2 +1,2 @@
 import { FieldTypesI } from '@/interfaces';
-export declare const HomeInitialSetup: ({ fields, callback }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeInitialSetup: ({ fields, callback, style }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/HomeInitialSetup.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
 import { WizardTextBody, WizardInitialOptions, WizardStepOptions, } from '@/components';
-export const HomeInitialSetup = ({ fields, callback }) => {
-    return (_jsx(Stack, { bg: "neutral.white", spacing: "10", children: fields === null || fields === void 0 ? void 0 : fields.map(({ children = [], id, label = '', type, value, description }) => {
+export const HomeInitialSetup = ({ fields, callback, style }) => {
+    const isWizard = style === 'wizard';
+    return (_jsx(Stack, { bg: "neutral.white", spacing: { base: '6', md: isWizard ? '10' : '0' }, children: fields === null || fields === void 0 ? void 0 : fields.map(({ children = [], id, label = '', type, value, description }) => {
             switch (type) {
                 case 'home-wizard-header':
-                    return (_jsx(WizardTextBody, { title: label, subtitle: description }, id));
+                    return (_jsx(WizardTextBody, { title: label, subtitle: description, style: style }, id));
                 case 'home-wizard-initial-setup':
-                    return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback }, id));
+                    return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback, style: style }, id));
                 case 'home-wizard-step-options':
-                    return (_jsx(WizardStepOptions, { form: children, title: String(value), callback: callback }, id));
+                    return (_jsx(WizardStepOptions, { form: children, title: String(value), callback: callback, style: style }, id));
                 default:
                     return null;
             }

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts

@@ -1,3 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '@/interfaces';
 export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantWizardPanel: ({ currentForm, currentStep, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/panel/HomeAssistantPanel.js

@@ -4,11 +4,11 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '@/assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, } from '@/components';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, HomeAssistantWizardSteps, DynamicForm, } from '@/components';
 import { homeAssistantSteps } from '@/helpers';
 import { useSimpleDynamicForm } from '@/hooks';
 import { homeAssistantProxy } from '@/proxies';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick = () => { }, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
     var _a, _b;
     const [addedAppliances, updateAddedAppliances] = useState([]);
     const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
@@ -49,7 +49,7 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
                         label: !hasCompleted && currentStep === 6
                             ? t('buttons.finish')
                             : t('buttons.saveStep'),
-                        onClick: () => onSave(updatedFields),
+                        onClick: () => onSave === null || onSave === void 0 ? void 0 : onSave(updatedFields),
                     }, button3: !hasCompleted && currentStep === 6
                         ? undefined
                         : {
@@ -59,3 +59,28 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
                             isDisabled: nextDisabled,
                         } }) })] }));
 };
+export const HomeAssistantWizardPanel = ({ currentForm, currentStep, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
+    if (isLoading)
+        return _jsx(Loading, {});
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantWizardSteps, { currentStep: currentStep }), _jsx(DynamicForm, { form: currentForm, showTitle: false, style: "panel" })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: currentStep === 1
+                        ? undefined
+                        : {
+                            buttonStyle: 'secondaryFooter',
+                            label: t('buttons.back'),
+                            onClick: onBack,
+                            isDisabled: backDisabled,
+                        }, button2: {
+                        buttonStyle: 'primaryFooter',
+                        label: !hasCompleted && currentStep === 5
+                            ? t('buttons.finish')
+                            : t('buttons.saveStep'),
+                        onClick: () => onSave === null || onSave === void 0 ? void 0 : onSave(),
+                    }, button3: !hasCompleted && currentStep === 5
+                        ? undefined
+                        : {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.next'),
+                            onClick: onNext,
+                            isDisabled: nextDisabled,
+                        } }) })] }));
+};

package/dist/components/homeBoard/AddPropertyRecords.js

@@ -21,5 +21,5 @@ export const AddPropertyRecords = (_a) => {
         loading: _jsx(SearchRecords, {}),
         properties: _jsx(ConfirmProperty, Object.assign({}, props, { handleAddress: onSelectAddress })),
     };
-    return (_jsxs(DrawerContent, { overflowY: "scroll", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeBoard.addRecords'), icon: Records }) }), _jsx(Box, { h: "full", children: currentStep[step] })] }));
+    return (_jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeBoard.addRecords'), icon: Records }) }), _jsx(Box, { h: "full", children: currentStep[step] })] }));
 };

package/dist/components/inputs/RadioCard.js

@@ -10,7 +10,7 @@ export const RadioCard = (props) => {
                     borderLeft: '6px solid',
                     borderLeftColor: 'blue.6',
                     boxShadow: 'md',
-                }, px: 5, py: 3, children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, { height: "18px", width: "18px", rounded: isSafari() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", _checked: {
+                }, px: 5, py: 3, children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, { height: "18px", width: "18px", rounded: isSafari() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", flexShrink: 0, _checked: {
                                 bg: 'blue.2',
                                 outline: '2px solid white',
                                 outlineOffset: '-3px',

package/dist/components/myHomes/AddHomeContent.js

@@ -23,5 +23,5 @@ export const AddHomeContent = (_a) => {
         loading: _jsx(SearchRecords, { isFirstHome: props.isFirstHome }),
         properties: _jsx(ConfirmProperty, Object.assign({}, props)),
     };
-    return (_jsxs(DrawerContent, { bg: "neutral.white", overflowY: "scroll", children: [_jsx(DrawerHeader, { p: "0", children: !isFirstHome && (_jsx(PanelHeader, { handleCloseButton: handleSkipClick, title: t('myHomes.newHome.title'), icon: House })) }), _jsx(Box, { h: "full", children: (_b = currentStep[step]) !== null && _b !== void 0 ? _b : currentStep['initial'] })] }));
+    return (_jsxs(DrawerContent, { bg: "neutral.white", children: [_jsx(DrawerHeader, { p: "0", children: !isFirstHome && (_jsx(PanelHeader, { handleCloseButton: handleSkipClick, title: t('myHomes.newHome.title'), icon: House })) }), _jsx(Box, { h: "full", children: (_b = currentStep[step]) !== null && _b !== void 0 ? _b : currentStep['initial'] })] }));
 };

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

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '@/interfaces';
-export declare const WizardInitialOptions: ({ form, title, callback, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const WizardInitialOptions: ({ form, title, callback, style, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardInitialOptions.js

@@ -3,15 +3,16 @@ import { Container, SimpleGrid, Stack, Text, Image, Flex, } from '@chakra-ui/rea
 import { Controller, useFormContext } from 'react-hook-form';
 import { CheckInCircle } from '@/assets/images';
 import { fieldIcons, setOptionButtonStyles } from '@/helpers';
-export const WizardInitialOptions = ({ form, title, callback, }) => {
+export const WizardInitialOptions = ({ form, title, callback, style = 'wizard', }) => {
     const { control } = useFormContext();
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: 2, spacing: "base", children: form.map((field) => {
+    const isWizard = style === 'wizard';
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: { base: 1, md: isWizard ? 2 : 1 }, spacing: { base: 1, md: isWizard ? 'base' : 1 }, children: form.map((field) => {
                     const { id, value, label, icon, description } = field;
                     return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                             const iconSrc = icon
                                 ? fieldIcons[icon]
                                 : undefined;
-                            return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", p: "base", onClick: () => {
+                            return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", p: "base", w: "full", onClick: () => {
                                             onChange(!value);
                                             callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
                                         } }, setOptionButtonStyles(value), { children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [_jsx(Image, { src: iconSrc, alt: "icon", h: "16px", w: "auto" }), label && (_jsx(Text, { fontWeight: "bold", fontSize: "xs", textTransform: "capitalize", fontFamily: "secondary", children: label }))] }), _jsx(Text, { fontFamily: "secondary", textAlign: "left", children: description })] }))] }));

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

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '@/interfaces';
-export declare const WizardStepOptions: ({ form, title, callback }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const WizardStepOptions: ({ form, title, callback, style, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardStepOptions.js

@@ -3,9 +3,10 @@ import { Container, SimpleGrid, Stack, Text, Image, Center, } from '@chakra-ui/r
 import { Controller, useFormContext } from 'react-hook-form';
 import { CheckInCircle } from '@/assets/images';
 import { fieldIcons, setOptionButtonStyles } from '@/helpers';
-export const WizardStepOptions = ({ form, title, callback }) => {
+export const WizardStepOptions = ({ form, title, callback, style = 'wizard', }) => {
     const { control } = useFormContext();
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: 6, spacing: "base", gridAutoRows: "1fr", alignItems: "stretch", children: form.map((field) => {
+    const isWizard = style === 'wizard';
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: { base: 3, md: isWizard ? 6 : 5 }, spacing: "base", gridAutoRows: "1fr", alignItems: "stretch", children: form.map((field) => {
                     const { id, value, label, icon } = field;
                     return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                             const iconSrc = icon

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

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

package/dist/components/wizard/WizardTextBody.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Center, Stack, Text } from '@chakra-ui/react';
-export const WizardTextBody = ({ title, subtitle }) => {
-    return (_jsx(Center, { w: "full", minH: "100px", children: _jsxs(Stack, { spacing: "4", w: "80%", children: [_jsx(Text, { fontSize: { base: 'xl', md: '2xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: "center", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", children: subtitle }))] }) }));
+import { Box, Center, Stack, Text } from '@chakra-ui/react';
+export const WizardTextBody = ({ title, subtitle, style, }) => {
+    const isWizard = style === 'wizard';
+    if (isWizard) {
+        return (_jsx(Center, { w: "full", minH: { md: '100px' }, children: _jsxs(Stack, { spacing: "4", w: { base: 'full', md: '80%' }, children: [_jsx(Text, { fontSize: { base: 'xl', md: '2xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: { base: 'left', md: 'center' }, children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: { base: 'left', md: 'center' }, children: subtitle }))] }) }));
+    }
+    return (_jsx(Box, { p: "base", children: _jsxs(Stack, { spacing: "4", w: "full", children: [_jsx(Text, { fontSize: "2xl", lineHeight: "base", textAlign: "left", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "left", children: subtitle }))] }) }));
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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, WizardValueSummary, } 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, HomeAssistantWizardPanel, 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, WizardValueSummary, } 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';

package/dist/index.js

@@ -1,4 +1,4 @@
-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, WizardValueSummary, } 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, HomeAssistantWizardPanel, 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, WizardValueSummary, } 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';

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -36,6 +36,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     singleFileUpload?: boolean;
     title?: string;
     uploadingFieldId?: string;
+    style?: 'wizard' | 'panel';
 }
 export interface DynamicFormProxyI {
     fields: ReportI[];

package/dist/interfaces/forms/dynamicForm/fields/GroupField.interface.d.ts

@@ -11,4 +11,5 @@ export interface FieldTypesI {
     fields?: DynamicFormI['form'];
     menuItems?: MenuItemI[];
     showIcon?: boolean;
+    style?: DynamicFormI['style'];
 }

package/dist/interfaces/homeAssistant/HomeAssistantPanel.interface.d.ts

@@ -2,11 +2,11 @@ import { DynamicFormI, ReportI } from '@/interfaces';
 export interface HomeAssistantPanelI {
     currentForm: DynamicFormI['form'];
     currentStep: number;
-    onApplianceClick: (selected: string[]) => void;
+    onApplianceClick?: (selected: string[]) => void;
     onBack: () => void;
     onClose: () => void;
     onNext: () => void;
-    onSave: (form: ReportI[]) => void;
+    onSave?: (form?: ReportI[]) => void;
     backDisabled: boolean;
     nextDisabled: boolean;
     hasCompleted: boolean;

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

@@ -1,4 +1,5 @@
 export interface WizardTextHeaderI {
     title: string;
     subtitle?: string;
+    style?: 'wizard' | 'panel';
 }

package/dist/mocks/myHomes/Properties.mock.js

@@ -32,4 +32,202 @@ export const propertiesMock = [
             zip: '20171',
         },
     },
+    {
+        id: '11',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '21',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '31',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '12',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '22',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '32',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '13',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '23',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '33',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '14',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '24',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '34',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '15',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '25',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '35',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '16',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '26',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
+    {
+        id: '36',
+        address: {
+            address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+            city: 'Herndon',
+            county: 'Fairfax',
+            state: 'VA',
+            street: '13723 Neil Armstrong Ave Unit 308',
+            zip: '20171',
+        },
+    },
 ];

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.d.ts

@@ -3,3 +3,4 @@ import { HomeAssistantPanelI } from '@/interfaces';
 declare const _default: Meta;
 export default _default;
 export declare const HomeAssistantPanelComponent: (args: HomeAssistantPanelI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewHomeAssistantPanelComponent: (args: HomeAssistantPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerContent } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { HomeAssistantPanel, RightPanel } from '@/components';
-import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, } from '@/mocks';
+import { HomeAssistantPanel, HomeAssistantWizardPanel, RightPanel, } from '@/components';
+import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, homeWizardForm, } from '@/mocks';
 import { useState } from 'react';
 export default {
     title: 'Components/HomeAssistant',
@@ -39,3 +39,18 @@ export const HomeAssistantPanelComponent = (args) => {
     const currentForm = forms[currentStep];
     return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave'), isLoading: false })) }));
 };
+export const NewHomeAssistantPanelComponent = (args) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const handleFormChange = () => setCurrentStep((prev) => {
+        if (prev === 5)
+            return 1;
+        return prev + 1;
+    });
+    const handleBack = () => setCurrentStep((prev) => {
+        if (prev === 0)
+            return 5;
+        return prev - 1;
+    });
+    const currentForm = homeWizardForm[currentStep];
+    return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantWizardPanel, Object.assign({}, args, { currentStep: currentStep + 1, currentForm: [currentForm], onNext: handleFormChange, onBack: handleBack, onSave: action('onSave'), isLoading: false })) }));
+};

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

@@ -39,10 +39,6 @@ export const ControlledWizardComponent = () => {
                         } }) })] })),
     }));
     return (_jsx(ControlledWizard, { minHeight: "700px", step: step, setStep: setStep, steps: [
-            {
-                header: (_jsx(WizardTextHeader, { title: "This is the data we found in public records.", subtitle: "The details linked to your address come from public data sources and may not \nrepresent the most up-to-date information about your home." })),
-                body: ({ setStep }) => (_jsx(WizardValueSummary, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock, onAccurate: () => setStep(step + 1), onNotAccurate: () => setStep(step + 1) })),
-            },
             {
                 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* () {
@@ -61,6 +57,10 @@ export const ControlledWizardComponent = () => {
                         setStep(3);
                     } })),
             },
+            {
+                header: (_jsx(WizardTextHeader, { title: "This is the data we found in public records.", subtitle: "The details linked to your address come from public data sources and may not \nrepresent the most up-to-date information about your home." })),
+                body: ({ setStep }) => (_jsx(WizardValueSummary, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock, onAccurate: () => setStep(step + 1), onNotAccurate: () => setStep(step + 1) })),
+            },
             {
                 header: (_jsx(WizardSuccessHeader, { title: "Your homefile has been created.", subtitle: "Your Homefile is created. You will be able to edit and update your home details once setup is complete.", address: {
                         city: 'Austin',
@@ -69,7 +69,7 @@ export const ControlledWizardComponent = () => {
                         number: '123',
                         zip: '80123',
                     }, name: "your home" })),
-                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(4) }) })),
+                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(step + 1) }) })),
             },
             ...homeAssistantSteps,
         ] }));

package/package.json

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

package/src/components/forms/dynamicForm/fields/HomeInitialSetup.tsx

@@ -6,15 +6,24 @@ import {
   WizardStepOptions,
 } from '@/components'
 
-export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
+export const HomeInitialSetup = ({ fields, callback, style }: FieldTypesI) => {
+  const isWizard = style === 'wizard'
   return (
-    <Stack bg="neutral.white" spacing="10">
+    <Stack
+      bg="neutral.white"
+      spacing={{ base: '6', md: isWizard ? '10' : '0' }}
+    >
       {fields?.map(
         ({ children = [], id, label = '', type, value, description }) => {
           switch (type) {
             case 'home-wizard-header':
               return (
-                <WizardTextBody key={id} title={label} subtitle={description} />
+                <WizardTextBody
+                  key={id}
+                  title={label}
+                  subtitle={description}
+                  style={style}
+                />
               )
             case 'home-wizard-initial-setup':
               return (
@@ -23,6 +32,7 @@ export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
                   form={children}
                   title={String(value)}
                   callback={callback}
+                  style={style}
                 />
               )
             case 'home-wizard-step-options':
@@ -32,6 +42,7 @@ export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
                   form={children}
                   title={String(value)}
                   callback={callback}
+                  style={style}
                 />
               )
 

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState, useEffect, use } from 'react'
+import { PropsWithChildren, useState, useEffect } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
@@ -16,6 +16,8 @@ import {
   HomeAssistantPanelStep,
   PanelHeader,
   Loading,
+  HomeAssistantWizardSteps,
+  DynamicForm,
 } from '@/components'
 import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
@@ -26,7 +28,7 @@ export const HomeAssistantPanel = ({
   children,
   currentForm,
   currentStep,
-  onApplianceClick,
+  onApplianceClick = () => {},
   onBack,
   onClose,
   onNext,
@@ -112,7 +114,7 @@ export const HomeAssistantPanel = ({
               !hasCompleted && currentStep === 6
                 ? t('buttons.finish')
                 : t('buttons.saveStep'),
-            onClick: () => onSave(updatedFields),
+            onClick: () => onSave?.(updatedFields),
           }}
           button3={
             !hasCompleted && currentStep === 6
@@ -129,3 +131,66 @@ export const HomeAssistantPanel = ({
     </>
   )
 }
+
+export const HomeAssistantWizardPanel = ({
+  currentForm,
+  currentStep,
+  onBack,
+  onClose,
+  onNext,
+  onSave,
+  backDisabled,
+  nextDisabled,
+  hasCompleted,
+  isLoading,
+}: PropsWithChildren<HomeAssistantPanelI>) => {
+  if (isLoading) return <Loading />
+
+  return (
+    <>
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={t('homeAssistant.title')}
+          icon={IA}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0">
+        <HomeAssistantWizardSteps currentStep={currentStep} />
+        <DynamicForm form={currentForm} showTitle={false} style="panel" />
+      </DrawerBody>
+      <DrawerFooter px="0" py="6" bg="neutral.white">
+        <FooterButtons
+          button1={
+            currentStep === 1
+              ? undefined
+              : {
+                  buttonStyle: 'secondaryFooter',
+                  label: t('buttons.back'),
+                  onClick: onBack,
+                  isDisabled: backDisabled,
+                }
+          }
+          button2={{
+            buttonStyle: 'primaryFooter',
+            label:
+              !hasCompleted && currentStep === 5
+                ? t('buttons.finish')
+                : t('buttons.saveStep'),
+            onClick: () => onSave?.(),
+          }}
+          button3={
+            !hasCompleted && currentStep === 5
+              ? undefined
+              : {
+                  buttonStyle: 'primaryFooter',
+                  label: t('buttons.next'),
+                  onClick: onNext,
+                  isDisabled: nextDisabled,
+                }
+          }
+        />
+      </DrawerFooter>
+    </>
+  )
+}

package/src/components/homeAssistant/wizard/HomeAssistantWizardButton.tsx

@@ -1,4 +1,4 @@
-import { border, Box, Center, Image, Stack, Text } from '@chakra-ui/react'
+import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { CheckInCircle } from '@/assets/images'
 import { HomeAssistantButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'

package/src/components/homeBoard/AddPropertyRecords.tsx

@@ -22,7 +22,7 @@ export const AddPropertyRecords = ({
     properties: <ConfirmProperty {...props} handleAddress={onSelectAddress} />,
   }
   return (
-    <DrawerContent overflowY="scroll">
+    <DrawerContent>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}

package/src/components/inputs/RadioCard.tsx

@@ -1,4 +1,4 @@
-import {  PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import { Box, Flex, useRadio, UseRadioProps } from '@chakra-ui/react'
 import { isSafari } from '@/utils'
 
@@ -33,6 +33,7 @@ export const RadioCard = (props: PropsWithChildren<UseRadioProps>) => {
             rounded={isSafari() ? 'sm' : 'full'}
             border="1px"
             borderColor="lightBlue.5"
+            flexShrink={0}
             _checked={{
               bg: 'blue.2',
               outline: '2px solid white',

package/src/components/myHomes/AddHomeContent.tsx

@@ -20,7 +20,7 @@ export const AddHomeContent = ({ ...props }: AddHomeContentI) => {
   }
 
   return (
-    <DrawerContent bg="neutral.white" overflowY="scroll">
+    <DrawerContent bg="neutral.white">
       <DrawerHeader p="0">
         {!isFirstHome && (
           <PanelHeader

package/src/components/wizard/WizardInitialOptions.tsx

@@ -15,14 +15,19 @@ export const WizardInitialOptions = ({
   form,
   title,
   callback,
+  style = 'wizard',
 }: DynamicFormI) => {
   const { control } = useFormContext()
+  const isWizard = style === 'wizard'
   return (
     <Stack spacing="base" bg="lightBlue.1" p="base">
       <Text fontFamily="secondary" fontSize="sm">
         {title}
       </Text>
-      <SimpleGrid columns={2} spacing="base">
+      <SimpleGrid
+        columns={{ base: 1, md: isWizard ? 2 : 1 }}
+        spacing={{ base: 1, md: isWizard ? 'base' : 1 }}
+      >
         {form.map((field) => {
           const { id, value, label, icon, description } = field
           return (
@@ -54,6 +59,7 @@ export const WizardInitialOptions = ({
                     <Stack
                       as="button"
                       p="base"
+                      w="full"
                       onClick={() => {
                         onChange(!value)
                         callback?.({ ...field, value: !value })

package/src/components/wizard/WizardStepOptions.tsx

@@ -12,15 +12,21 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { CheckInCircle } from '@/assets/images'
 import { fieldIcons, setOptionButtonStyles } from '@/helpers'
 
-export const WizardStepOptions = ({ form, title, callback }: DynamicFormI) => {
+export const WizardStepOptions = ({
+  form,
+  title,
+  callback,
+  style = 'wizard',
+}: DynamicFormI) => {
   const { control } = useFormContext()
+  const isWizard = style === 'wizard'
   return (
     <Stack spacing="base" bg="lightBlue.1" p="base">
       <Text fontFamily="secondary" fontSize="sm">
         {title}
       </Text>
       <SimpleGrid
-        columns={6}
+        columns={{ base: 3, md: isWizard ? 6 : 5 }}
         spacing="base"
         gridAutoRows="1fr"
         alignItems="stretch"

package/src/components/wizard/WizardTextBody.tsx

@@ -1,23 +1,48 @@
-import { Center, Stack, Text } from '@chakra-ui/react'
+import { Box, Center, Stack, Text } from '@chakra-ui/react'
 import { WizardTextHeaderI } from '@/interfaces'
 
-export const WizardTextBody = ({ title, subtitle }: WizardTextHeaderI) => {
+export const WizardTextBody = ({
+  title,
+  subtitle,
+  style,
+}: WizardTextHeaderI) => {
+  const isWizard = style === 'wizard'
+
+  if (isWizard) {
+    return (
+      <Center w="full" minH={{ md: '100px' }}>
+        <Stack spacing="4" w={{ base: 'full', md: '80%' }}>
+          <Text
+            fontSize={{ base: 'xl', md: '2xl' }}
+            lineHeight={{ base: 'shorter', md: 'base' }}
+            textAlign={{ base: 'left', md: 'center' }}
+          >
+            {title}
+          </Text>
+          {subtitle && (
+            <Text
+              fontFamily="secondary"
+              textAlign={{ base: 'left', md: 'center' }}
+            >
+              {subtitle}
+            </Text>
+          )}
+        </Stack>
+      </Center>
+    )
+  }
   return (
-    <Center w="full" minH="100px">
-      <Stack spacing="4" w="80%">
-        <Text
-          fontSize={{ base: 'xl', md: '2xl' }}
-          lineHeight={{ base: 'shorter', md: 'base' }}
-          textAlign="center"
-        >
+    <Box p="base">
+      <Stack spacing="4" w="full">
+        <Text fontSize="2xl" lineHeight="base" textAlign="left">
           {title}
         </Text>
         {subtitle && (
-          <Text fontFamily="secondary" textAlign="center">
+          <Text fontFamily="secondary" textAlign="left">
             {subtitle}
           </Text>
         )}
       </Stack>
-    </Center>
+    </Box>
   )
 }

package/src/index.ts

@@ -72,6 +72,7 @@ export {
   HelpContent,
   HomeAssistant,
   HomeAssistantPanel,
+  HomeAssistantWizardPanel,
   HomeBoardGrid,
   HomeBoardTour,
   HomeCard,

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -210,6 +210,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   singleFileUpload?: boolean
   title?: string
   uploadingFieldId?: string
+  style?: 'wizard' | 'panel'
 }
 
 export interface DynamicFormProxyI {

package/src/interfaces/forms/dynamicForm/fields/GroupField.interface.ts

@@ -13,4 +13,5 @@ export interface FieldTypesI {
   fields?: DynamicFormI['form']
   menuItems?: MenuItemI[]
   showIcon?: boolean
+  style?: DynamicFormI['style']
 }

package/src/interfaces/homeAssistant/HomeAssistantPanel.interface.ts

@@ -3,11 +3,11 @@ import { DynamicFormI, ReportI } from '@/interfaces'
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
   currentStep: number
-  onApplianceClick: (selected: string[]) => void
+  onApplianceClick?: (selected: string[]) => void
   onBack: () => void
   onClose: () => void
   onNext: () => void
-  onSave: (form: ReportI[]) => void
+  onSave?: (form?: ReportI[]) => void
   backDisabled: boolean
   nextDisabled: boolean
   hasCompleted: boolean

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

@@ -1,4 +1,5 @@
 export interface WizardTextHeaderI {
   title: string
   subtitle?: string
+  style?: 'wizard' | 'panel'
 }

package/src/mocks/myHomes/Properties.mock.ts

@@ -34,4 +34,202 @@ export const propertiesMock: AddHomeContentI['properties'] = [
       zip: '20171',
     },
   },
+  {
+    id: '11',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '21',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '31',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '12',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '22',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '32',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '13',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '23',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '33',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '14',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '24',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '34',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '15',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '25',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '35',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '16',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '26',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
+  {
+    id: '36',
+    address: {
+      address: '13723 Neil Armstrong Ave Unit 308, Herndon, Va 20171',
+      city: 'Herndon',
+      county: 'Fairfax',
+      state: 'VA',
+      street: '13723 Neil Armstrong Ave Unit 308',
+      zip: '20171',
+    },
+  },
 ]

package/src/stories/homeAssistant/panel/HomeAssistantPanel.stories.tsx

@@ -1,7 +1,11 @@
 import { Meta } from '@storybook/react'
 import { DrawerContent } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
-import { HomeAssistantPanel, RightPanel } from '@/components'
+import {
+  HomeAssistantPanel,
+  HomeAssistantWizardPanel,
+  RightPanel,
+} from '@/components'
 import { HomeAssistantPanelI, ReportI } from '@/interfaces'
 import {
   homeAssitantStep1FormMock,
@@ -10,6 +14,7 @@ import {
   homeAssitantStep4FormMock,
   homeAssitantStep5FormMock,
   homeAssitantStep6FormMock,
+  homeWizardForm,
 } from '@/mocks'
 import { useState } from 'react'
 
@@ -67,3 +72,33 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
     </DrawerContent>
   )
 }
+
+export const NewHomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
+  const [currentStep, setCurrentStep] = useState<number>(0)
+  const handleFormChange = () =>
+    setCurrentStep((prev) => {
+      if (prev === 5) return 1
+      return prev + 1
+    })
+
+  const handleBack = () =>
+    setCurrentStep((prev) => {
+      if (prev === 0) return 5
+      return prev - 1
+    })
+
+  const currentForm = homeWizardForm[currentStep]
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <HomeAssistantWizardPanel
+        {...args}
+        currentStep={currentStep + 1}
+        currentForm={[currentForm]}
+        onNext={handleFormChange}
+        onBack={handleBack}
+        onSave={action('onSave')}
+        isLoading={false}
+      />
+    </DrawerContent>
+  )
+}

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

@@ -80,28 +80,6 @@ export const ControlledWizardComponent = () => {
       step={step}
       setStep={setStep}
       steps={[
-        {
-          header: (
-            <WizardTextHeader
-              title="This is the data we found in public records."
-              subtitle="The details linked to your address come from public data sources and may not 
-represent the most up-to-date information about your home."
-            />
-          ),
-          body: ({ setStep }) => (
-            <WizardValueSummary
-              title="The Edmunds"
-              address="113 South First Street, Austin TX 89853"
-              estimatedValue={894000}
-              purchasePrice={456432}
-              assessedValue={726678}
-              purchasePriceDetails={purchasePriceMock}
-              assessedValueDetails={assessedValueMock}
-              onAccurate={() => setStep(step + 1)}
-              onNotAccurate={() => setStep(step + 1)}
-            />
-          ),
-        },
         {
           header: (
             <WizardTextHeader
@@ -146,6 +124,28 @@ represent the most up-to-date information about your home."
             />
           ),
         },
+        {
+          header: (
+            <WizardTextHeader
+              title="This is the data we found in public records."
+              subtitle="The details linked to your address come from public data sources and may not 
+represent the most up-to-date information about your home."
+            />
+          ),
+          body: ({ setStep }) => (
+            <WizardValueSummary
+              title="The Edmunds"
+              address="113 South First Street, Austin TX 89853"
+              estimatedValue={894000}
+              purchasePrice={456432}
+              assessedValue={726678}
+              purchasePriceDetails={purchasePriceMock}
+              assessedValueDetails={assessedValueMock}
+              onAccurate={() => setStep(step + 1)}
+              onNotAccurate={() => setStep(step + 1)}
+            />
+          ),
+        },
         {
           header: (
             <WizardSuccessHeader
@@ -163,10 +163,11 @@ represent the most up-to-date information about your home."
           ),
           body: () => (
             <Center w="full" h="full">
-              <HomeAssistantTutorial onStart={() => setStep(4)} />
+              <HomeAssistantTutorial onStart={() => setStep(step + 1)} />
             </Center>
           ),
         },
+
         ...homeAssistantSteps,
       ]}
     />