@homefile/components-v2 2.32.0 → 2.34.0

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1281,3 +1281,354 @@ export const homeItemDetails = [
         icon: 'barcode',
     },
 ];
+export const homeWizardForm = [
+    {
+        type: 'home-wizard',
+        id: 'home-wizard-1',
+        children: [
+            {
+                type: 'home-wizard-header',
+                id: 'home-wizard-header-1',
+                label: '1. Tell Homi about your goals.',
+                description: 'These choices help Homi build a personalized Homeboard that tracks your home’s performance, savings, and priorities.',
+                value: '',
+            },
+            {
+                type: 'home-wizard-initial-setup',
+                id: 'home-wizard-initial-setup-1',
+                value: 'What do you want Homie to help you with?',
+                children: [
+                    {
+                        id: 'maintenance',
+                        type: 'text',
+                        label: 'Maintenance',
+                        value: false,
+                        description: 'Stay ahead of maintenance and upkeep to avoid costly repairs.',
+                        icon: 'gear',
+                    },
+                    {
+                        id: 'documentation',
+                        type: 'text',
+                        label: 'documentation',
+                        value: false,
+                        description: 'Keep receipts, warranties, and records organized and accessible.',
+                        icon: 'folder',
+                    },
+                    {
+                        id: 'finance',
+                        type: 'text',
+                        label: 'Finance',
+                        value: false,
+                        description: 'Monitor spending, uncover savings, and plan smarter budgets.',
+                        icon: 'check',
+                    },
+                    {
+                        id: 'service-pros',
+                        type: 'text',
+                        label: 'Service Pros',
+                        value: false,
+                        description: 'Find trusted pros with upfront pricing and verified quality.',
+                        icon: 'search-person',
+                    },
+                    {
+                        id: 'improvements',
+                        type: 'text',
+                        label: 'Improvements',
+                        value: false,
+                        description: 'Track upgrades, costs, and ROI to grow your home’s worth.',
+                        icon: 'flower',
+                    },
+                    {
+                        id: 'insurance',
+                        type: 'text',
+                        label: 'Insurance',
+                        value: false,
+                        description: 'Verify insurance and warranties so nothing important slips through.',
+                        icon: 'warranty',
+                    },
+                ],
+            },
+        ],
+        value: true,
+    },
+    {
+        type: 'home-wizard',
+        id: 'home-wizard-2',
+        children: [
+            {
+                type: 'home-wizard-header',
+                id: 'home-wizard-header-2',
+                label: '2. Tell Homi about your fire safety.',
+                description: 'Homi tracks your safety devices, reminds you to test or replace them, and helps you keep your home protected year-round.',
+                value: '',
+            },
+            {
+                type: 'home-wizard-step-options',
+                id: 'home-wizard-step-options-1',
+                value: 'Select what fire protection you have in your home?',
+                children: [
+                    {
+                        id: 'smoke-detectors',
+                        type: 'text',
+                        label: 'WIRED SMOKE DET',
+                        value: false,
+                        icon: 'wired-smoke-detector',
+                    },
+                    {
+                        id: 'battery-smoke-detectors',
+                        type: 'text',
+                        label: 'BATTERY SMOKE DET',
+                        value: false,
+                        icon: 'battery-smoke-detector',
+                    },
+                    {
+                        id: 'co2-detectors',
+                        type: 'text',
+                        label: 'CO2 DETECTORS',
+                        value: false,
+                        icon: 'co2-detector',
+                    },
+                    {
+                        id: 'sprinkler-system',
+                        type: 'text',
+                        label: 'SPRINKLER SYSTEM',
+                        value: false,
+                        icon: 'sprinkler-system',
+                    },
+                    {
+                        id: 'fire-extinguisher',
+                        type: 'text',
+                        label: 'FIRE EXTINGUISHER',
+                        value: false,
+                        icon: 'fire-extinguisher',
+                    },
+                    {
+                        id: 'other-not-listed',
+                        type: 'text',
+                        label: 'OTHER/NOT LISTED',
+                        value: false,
+                        icon: 'other',
+                    },
+                ],
+            },
+        ],
+        value: true,
+    },
+    {
+        type: 'home-wizard',
+        id: 'home-wizard-3',
+        children: [
+            {
+                type: 'home-wizard-header',
+                id: 'home-wizard-header-3',
+                label: '3. Tell Homi about your appliances.',
+                description: 'Homi monitors warranties, service schedules, and replacement timing to help you extend lifespan and avoid costly breakdowns.',
+                value: '',
+            },
+            {
+                type: 'home-wizard-step-options',
+                id: 'home-wizard-step-options-1',
+                value: 'Select the appliances you have in your home.',
+                children: [
+                    {
+                        id: 'oven',
+                        type: 'text',
+                        label: 'OVEN',
+                        value: false,
+                        icon: 'oven',
+                    },
+                    {
+                        id: 'fridge',
+                        type: 'text',
+                        label: 'FRIDGE',
+                        value: false,
+                        icon: 'fridge',
+                    },
+                    {
+                        id: 'freezer',
+                        type: 'text',
+                        label: 'FREEZER',
+                        value: false,
+                        icon: 'freezer',
+                    },
+                    {
+                        id: 'washer',
+                        type: 'text',
+                        label: 'WASHER',
+                        value: false,
+                        icon: 'washer',
+                    },
+                    {
+                        id: 'dryer',
+                        type: 'text',
+                        label: 'DRYER',
+                        value: false,
+                        icon: 'dryer',
+                    },
+                    {
+                        id: 'dish-washer',
+                        type: 'text',
+                        label: 'DISH WASHER',
+                        value: false,
+                        icon: 'dish-washer',
+                    },
+                    {
+                        id: 'range',
+                        type: 'text',
+                        label: 'RANGE',
+                        value: false,
+                        icon: 'range',
+                    },
+                    {
+                        id: 'hood',
+                        type: 'text',
+                        label: 'HOOD',
+                        value: false,
+                        icon: 'hood',
+                    },
+                    {
+                        id: 'microwave',
+                        type: 'text',
+                        label: 'MICROWAVE',
+                        value: false,
+                        icon: 'microwave',
+                    },
+                    {
+                        id: 'cook-top',
+                        type: 'text',
+                        label: 'COOK TOP',
+                        value: false,
+                        icon: 'cook-top',
+                    },
+                    {
+                        id: 'tankless-waterhtr',
+                        type: 'text',
+                        label: 'TANKLESS WATERHTR',
+                        value: false,
+                        icon: 'tankless-water',
+                    },
+                    {
+                        id: 'tank-waterhtr',
+                        type: 'text',
+                        label: 'TANK WATERHTR',
+                        value: false,
+                        icon: 'tank-water',
+                    },
+                ],
+            },
+        ],
+        value: true,
+    },
+    {
+        type: 'home-wizard',
+        id: 'home-wizard-4',
+        children: [
+            {
+                type: 'home-wizard-header',
+                id: 'home-wizard-header-4',
+                label: '4. Tell Homi about your climate control.',
+                description: 'Homi manages filter changes, tune-ups, and efficiency tips to keep your system running smoothly and lower energy costs.',
+                value: '',
+            },
+            {
+                type: 'home-wizard-step-options',
+                id: 'home-wizard-step-options-1',
+                value: 'What heating and cooling devices in your home:',
+                children: [
+                    {
+                        id: 'hvac-furnace',
+                        type: 'text',
+                        label: 'HVAC/ FURNACE',
+                        value: false,
+                        icon: 'furnace',
+                    },
+                    {
+                        id: 'heat-pump',
+                        type: 'text',
+                        label: 'HEAT PUMP',
+                        value: false,
+                        icon: 'heat-pump',
+                    },
+                    {
+                        id: 'in-wall',
+                        type: 'text',
+                        label: 'IN-WALL',
+                        value: false,
+                        icon: 'in-wall',
+                    },
+                    {
+                        id: 'other-not-listed',
+                        type: 'text',
+                        label: 'OTHER/NOT LISTED',
+                        value: false,
+                        icon: 'other',
+                    },
+                ],
+            },
+        ],
+        value: true,
+    },
+    {
+        type: 'home-wizard',
+        id: 'home-wizard-5',
+        children: [
+            {
+                type: 'home-wizard-header',
+                id: 'home-wizard-header-5',
+                label: '5. Tell Homi about your landscape.',
+                description: 'Homi tracks outdoor systems, plans seasonal care, and helps protect your home’s curb appeal and investment.',
+                value: '',
+            },
+            {
+                type: 'home-wizard-step-options',
+                id: 'home-wizard-step-options-1',
+                value: 'Select the types of structure elements of your home:',
+                children: [
+                    {
+                        id: 'pool',
+                        type: 'text',
+                        label: 'POOL',
+                        value: false,
+                        icon: 'pool',
+                    },
+                    {
+                        id: 'jacuzzi',
+                        type: 'text',
+                        label: 'JACUZZI',
+                        value: false,
+                        icon: 'jacuzzi',
+                    },
+                    {
+                        id: 'sprinkler-system',
+                        type: 'text',
+                        label: 'SPRINKLER SYSTEM',
+                        value: false,
+                        icon: 'sprinkler-system2',
+                    },
+                    {
+                        id: 'landscape-lights',
+                        type: 'text',
+                        label: 'LANDSCAPE LIGHTS',
+                        value: false,
+                        icon: 'landscape-lights',
+                    },
+                    {
+                        id: 'outdoor-kitchen',
+                        type: 'text',
+                        label: 'OUTDOOR KITCHEN',
+                        value: false,
+                        icon: 'cook-top',
+                    },
+                    {
+                        id: 'other-not-listed',
+                        type: 'text',
+                        label: 'OTHER/NOT LISTED',
+                        value: false,
+                        icon: 'other',
+                    },
+                ],
+            },
+        ],
+        value: true,
+    },
+];

package/dist/stories/assets/Illustrations.stories.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Grid, Image, Text } from '@chakra-ui/react';
-import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Wallet, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
-import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, } from '../../assets/images/appliances';
+import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flower, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Wallet, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
+import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, tankWater, tanklessWater, } from '../../assets/images/appliances';
+import { BatterySmokeDetector, Co2Detector, FireExtinguisher, Furnace, HeatPump, InWall, LandscapeLights, Other, SprinklerSystem, SprinklerSystem2, WiredSmokeDetector, } from '../../assets/images/home-assistant';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Wallet, name: "Wallet" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: tankWater, name: "TankWater" }), _jsx(IconWrapper, { icon: tanklessWater, name: "TanklessWater" }), _jsx(IconWrapper, { icon: BatterySmokeDetector, name: "BatterySmokeDetector" }), _jsx(IconWrapper, { icon: Co2Detector, name: "Co2Detector" }), _jsx(IconWrapper, { icon: FireExtinguisher, name: "FireExtinguisher" }), _jsx(IconWrapper, { icon: Furnace, name: "Furnace" }), _jsx(IconWrapper, { icon: HeatPump, name: "HeatPump" }), _jsx(IconWrapper, { icon: InWall, name: "InWall" }), _jsx(IconWrapper, { icon: Jacuzzi, name: "Jacuzzi" }), _jsx(IconWrapper, { icon: LandscapeLights, name: "LandscapeLights" }), _jsx(IconWrapper, { icon: Other, name: "Other" }), _jsx(IconWrapper, { icon: SprinklerSystem, name: "SprinklerSystem" }), _jsx(IconWrapper, { icon: SprinklerSystem2, name: "SprinklerSystem2" }), _jsx(IconWrapper, { icon: WiredSmokeDetector, name: "WiredSmokeDetector" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: Flower, name: "Flower" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: MagnifyingGlassPerson, name: "MagnifyingGlassPerson" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Wallet, name: "Wallet" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
 };
 const IconWrapper = ({ icon, name }) => {
     return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Image, { src: icon, boxSize: "30px", mb: "2" }), _jsx(Text, { variant: "home", children: name })] }));

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

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ConfirmProperty, ControlledWizard, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, MyHomeDetails, SearchRecords, WizardTextBody, WizardTextHeader, } from '../../components';
-import { Box, Center, Stack } from '@chakra-ui/react';
 import { useState } from 'react';
+import { ConfirmProperty, ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, MyHomeDetails, SearchRecords, WizardTextHeader, } from '../../components';
+import { Box, Center, Stack } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
 import { formValues } from '../../helpers';
-import { propertiesMock } from '../../mocks';
+import { homeWizardForm, propertiesMock } from '../../mocks';
 import { WizardSuccessHeader } from '../../components/wizard/WizardSuccessHeader';
 export default {
     title: 'Components/Wizard/ControlledWizard',
@@ -26,19 +27,20 @@ function fakeLookup() {
 }
 export const ControlledWizardComponent = () => {
     const [step, setStep] = useState(0);
-    return (_jsx(ControlledWizard, { minHeight: "300px", step: step, setStep: setStep, steps: [
-            {
-                header: (_jsx(HomeAssistantWizardSteps, { currentStep: 2, onStepClick: () => { } })),
-                body: () => (_jsxs(Stack, { h: "500px", spacing: "10", w: { base: 'full', md: '600px' }, justify: "space-around", m: "auto", children: [_jsx(WizardTextBody, { title: "1. Tell Homi about your goals.", subtitle: "These choices help Homi build a personalized Homeboard that tracks your home\u2019s performance, savings, and priorities." }), _jsx(Box, { flex: "1", bg: "gray.1" }), _jsx(Box, { alignSelf: "flex-end", children: _jsx(FooterButtons, { button1: {
-                                    buttonStyle: 'secondaryFooter',
-                                    onClick: () => setStep(1),
-                                    label: 'Back',
-                                }, button2: {
-                                    buttonStyle: 'tertiaryFooter',
-                                    onClick: () => setStep(1),
-                                    label: 'Save selection',
-                                } }) })] })),
-            },
+    const homeAssistantSteps = homeWizardForm.map((form, index) => ({
+        header: _jsx(HomeAssistantWizardSteps, { currentStep: index + 1 }),
+        body: () => (_jsxs(Stack, { h: "full", spacing: "10", w: { base: 'full', md: '600px' }, justify: "space-around", m: "auto", children: [_jsx(DynamicForm, { form: [form], showTitle: false, callback: action('DynamicForm') }), _jsx(Box, { alignSelf: "flex-end", children: _jsx(FooterButtons, { button1: {
+                            buttonStyle: 'secondaryFooter',
+                            onClick: () => setStep(step - 1),
+                            label: 'Back',
+                        }, button2: {
+                            buttonStyle: 'tertiaryFooter',
+                            onClick: () => setStep(step + 1),
+                            label: 'Save selection',
+                        } }) })] })),
+    }));
+    return (_jsx(ControlledWizard, { minHeight: "700px", step: step, setStep: setStep, steps: [
+            ...homeAssistantSteps,
             {
                 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* () {
@@ -65,7 +67,7 @@ export const ControlledWizardComponent = () => {
                         number: '123',
                         zip: '80123',
                     }, name: "your home" })),
-                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(4), maxWidth: "500px" }) })),
+                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(4) }) })),
             },
         ] }));
 };

package/package.json

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

package/src/assets/images/appliances/index.ts

@@ -1,3 +1,5 @@
+import tankWater from './tank-water.svg'
+import tanklessWater from './tankless-water.svg'
 import CookTop from './cook-top.svg'
 import Dishwasher from './dish-washer.svg'
 import Dryer from './dryer.svg'
@@ -20,4 +22,6 @@ export {
   Oven,
   Range,
   Washer,
+  tankWater,
+  tanklessWater,
 }

package/src/assets/images/appliances/tank-water.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="31.962" viewBox="0 0 28 31.962">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_27156" data-name="Retângulo 27156" width="7.224" height="10.571" transform="translate(0 0)" fill="#5ac4fc"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_24360" data-name="Grupo 24360" transform="translate(-951 -522.355)">
+    <rect id="Retângulo_27149" data-name="Retângulo 27149" width="1.252" height="4.029" transform="translate(970.803 522.355)" fill="#00c0b7"/>
+    <rect id="Retângulo_27150" data-name="Retângulo 27150" width="1.178" height="3.16" transform="translate(973.051 522.355)" fill="#e24c5d"/>
+    <rect id="Retângulo_27151" data-name="Retângulo 27151" width="11.322" height="8.261" transform="translate(965 525.068)" fill="#00c0b7"/>
+    <rect id="Retângulo_27152" data-name="Retângulo 27152" width="16" height="25" rx="2" transform="translate(963 528)" fill="#d6ebed"/>
+    <rect id="Retângulo_27154" data-name="Retângulo 27154" width="11.759" height="1.635" transform="translate(965 552.683)" fill="#40566b"/>
+    <path id="Caminho_18627" data-name="Caminho 18627" d="M0,0H6.028V4.912H0Z" transform="translate(968 547.842)" fill="#01c0b6"/>
+    <g id="Grupo_23848" data-name="Grupo 23848" transform="translate(951 524.587)">
+      <g id="Grupo_23847" data-name="Grupo 23847" transform="translate(0 0)" clip-path="url(#clip-path)">
+        <path id="Caminho_18628" data-name="Caminho 18628" d="M7.224,6.957A3.612,3.612,0,1,1,0,6.957C0,4.962,3.612,0,3.612,0S7.224,4.962,7.224,6.957M2.813,9.4Z" transform="translate(0 0.001)" fill="#5ac4fc"/>
+      </g>
+    </g>
+    <line id="Linha_3647" data-name="Linha 3647" x2="15.571" transform="translate(962.929 540.5)" fill="none" stroke="#41566b" stroke-width="1"/>
+  </g>
+</svg>

package/src/assets/images/appliances/tankless-water.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="27.413" viewBox="0 0 36 27.413">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_27156" data-name="Retângulo 27156" width="7.224" height="10.571" transform="translate(0 0)" fill="#5ac4fc"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_24359" data-name="Grupo 24359" transform="translate(-861 -524.587)">
+    <g id="Grupo_23852" data-name="Grupo 23852" transform="translate(861 524.587)">
+      <g id="Grupo_23847" data-name="Grupo 23847" transform="translate(0 0)" clip-path="url(#clip-path)">
+        <path id="Caminho_18628" data-name="Caminho 18628" d="M7.224,6.957A3.612,3.612,0,1,1,0,6.957C0,4.962,3.612,0,3.612,0S7.224,4.962,7.224,6.957M2.813,9.4Z" transform="translate(0 0.001)" fill="#5ac4fc"/>
+      </g>
+    </g>
+    <g id="Grupo_23851" data-name="Grupo 23851" transform="translate(874 527.463)">
+      <rect id="Retângulo_27161" data-name="Retângulo 27161" width="2" height="2" transform="translate(7 22.537)" fill="#5ac4fc"/>
+      <rect id="Retângulo_27160" data-name="Retângulo 27160" width="2" height="2" transform="translate(11 22.537)" fill="#e24c5d"/>
+      <path id="Caminho_18629" data-name="Caminho 18629" d="M0,0H26V22H0Z" transform="translate(-3 -0.463)" fill="#d2edee"/>
+      <rect id="Retângulo_27158" data-name="Retângulo 27158" width="11" height="9" transform="translate(5 14.537)" fill="#41566b"/>
+      <rect id="Retângulo_27159" data-name="Retângulo 27159" width="16" height="23" transform="translate(2 -0.463)" fill="#01c0b6"/>
+    </g>
+  </g>
+</svg>

package/src/assets/images/flower.svg

@@ -0,0 +1,19 @@
+<svg id="Grupo_24121" data-name="Grupo 24121" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.052" height="19.279" viewBox="0 0 14.052 19.279">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_27483" data-name="Retângulo 27483" width="14.052" height="19.279" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_24104" data-name="Grupo 24104" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Caminho_18794" data-name="Caminho 18794" d="M12.973,11.755h-.006a5.874,5.874,0,1,1,.006,0m4.262-5.878a4.269,4.269,0,1,0-4.269,4.269,4.269,4.269,0,0,0,4.269-4.269" transform="translate(-5.947 0)" fill="#fea856"/>
+    <path id="Caminho_18795" data-name="Caminho 18795" d="M21.34,9.981a4.269,4.269,0,1,1-4.269,4.269A4.269,4.269,0,0,1,21.34,9.981" transform="translate(-14.32 -8.373)" fill="#f6cf76"/>
+    <path id="Caminho_18796" data-name="Caminho 18796" d="M56.37,84.406l4.966-2.465c-.032.089-1.08,2.913-2.111,3.431a2.121,2.121,0,0,1-2.846-.944l-.01-.021" transform="translate(-47.286 -68.737)" fill="#00a1aa"/>
+    <path id="Caminho_18797" data-name="Caminho 18797" d="M60.217,79.2l0,0-4.966,2.465a2.12,2.12,0,0,1,.954-2.825c1.047-.525,4.014.358,4.014.358" transform="translate(-46.165 -65.997)" fill="#00c0b7"/>
+    <path id="Caminho_18798" data-name="Caminho 18798" d="M4.976,84.406l-.01.021a2.121,2.121,0,0,1-2.846.944C1.09,84.854.042,82.03.01,81.941Z" transform="translate(-0.008 -68.737)" fill="#00a1aa"/>
+    <path id="Caminho_18799" data-name="Caminho 18799" d="M4.014,78.842a2.12,2.12,0,0,1,.954,2.825L0,79.2H0s2.967-.883,4.014-.358" transform="translate(0 -65.997)" fill="#00c0b7"/>
+    <rect id="Retângulo_27482" data-name="Retângulo 27482" width="0.483" height="7.554" transform="translate(6.784 11.725)" fill="#00a1aa"/>
+    <path id="Caminho_18800" data-name="Caminho 18800" d="M32.225,97.353,30.163,96.33l.215-.433,2.058,1.022-.1.22Z" transform="translate(-25.303 -80.444)" fill="#00a1aa"/>
+    <path id="Caminho_18801" data-name="Caminho 18801" d="M43.1,97.352l-.224-.428L44.943,95.9l.215.433Z" transform="translate(-35.967 -80.444)" fill="#00a1aa"/>
+    <path id="Caminho_18802" data-name="Caminho 18802" d="M34.149,22.661a1.184,1.184,0,0,0,.657.324v-1.75a4.449,4.449,0,0,1-.6-.188,1.523,1.523,0,0,1-.423-.244.846.846,0,0,1-.248-.347,1.521,1.521,0,0,1,.026-1.04,1.331,1.331,0,0,1,.716-.716,1.64,1.64,0,0,1,.531-.126v-.436h.363v.442a1.371,1.371,0,0,1,.852.4,1.889,1.889,0,0,1,.449.911h-.561a.879.879,0,0,0-.74-.766v1.624l.4.106a1.781,1.781,0,0,1,.31.116,1.42,1.42,0,0,1,.344.228,1.276,1.276,0,0,1,.281.363,1.1,1.1,0,0,1,.115.521,1.428,1.428,0,0,1-.109.574,1.31,1.31,0,0,1-.3.432,1.417,1.417,0,0,1-.456.287,2.009,2.009,0,0,1-.581.132v.541h-.363v-.541a1.54,1.54,0,0,1-1.492-1.545h.562a.978.978,0,0,0,.274.7m.119-3.331a.721.721,0,0,0-.221.571.7.7,0,0,0,.056.294.557.557,0,0,0,.158.2,1.027,1.027,0,0,0,.241.142,2.448,2.448,0,0,0,.3.106V19.1a.942.942,0,0,0-.538.228m1.241,3.588a.784.784,0,0,0,.271-.155.675.675,0,0,0,.178-.258.978.978,0,0,0,.063-.366.65.65,0,0,0-.244-.541,1.018,1.018,0,0,0-.271-.155c-.106-.042-.218-.08-.337-.116v1.658a1.35,1.35,0,0,0,.34-.066" transform="translate(-27.946 -15.216)" fill="#fff"/>
+  </g>
+</svg>

package/src/assets/images/home-assistant/battery-smoke-detector.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.602" height="21.042" viewBox="0 0 37.602 21.042">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_27241" data-name="Retângulo 27241" width="9.469" height="16.262" fill="#41566b"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <rect id="Retângulo_24992" data-name="Retângulo 24992" width="5.529" height="13.836" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_24356" data-name="Grupo 24356" transform="translate(-594.397 -437.458)">
+    <g id="Grupo_23921" data-name="Grupo 23921" transform="translate(594.397 437.458)">
+      <rect id="Retângulo_27236" data-name="Retângulo 27236" width="7.081" height="2.072" transform="translate(1.194 12.9)" fill="#28b5a8"/>
+      <rect id="Retângulo_27237" data-name="Retângulo 27237" width="7.081" height="2.072" transform="translate(1.194 9.572)" fill="#28b5a8"/>
+      <rect id="Retângulo_27238" data-name="Retângulo 27238" width="7.081" height="2.074" transform="translate(1.194 6.244)" fill="#28b5a8"/>
+      <rect id="Retângulo_27239" data-name="Retângulo 27239" width="7.081" height="2.072" transform="translate(1.194 2.918)" fill="#28b5a8"/>
+      <g id="Grupo_23922" data-name="Grupo 23922" transform="translate(0 0)">
+        <g id="Grupo_23921-2" data-name="Grupo 23921" transform="translate(0 0)" clip-path="url(#clip-path)">
+          <path id="Caminho_18664" data-name="Caminho 18664" d="M9.469,8.38V22.169a.5.5,0,0,1-.5.5H.5a.5.5,0,0,1-.5-.5V8.38a.5.5,0,0,1,.5-.5H8.971a.5.5,0,0,1,.5.5M8.275,19.305H1.194v2.072H8.275Zm0-3.328H1.194v2.072H8.275Zm0-3.328H1.194v2.074H8.275Zm0-3.326H1.194V11.4H8.275Z" transform="translate(0 -6.405)" fill="#41566b"/>
+          <rect id="Retângulo_27240" data-name="Retângulo 27240" width="5.234" height="1.475" transform="translate(2.119)" fill="#41566b"/>
+        </g>
+      </g>
+    </g>
+    <g id="Grupo_23927" data-name="Grupo 23927" transform="translate(-261.472 77.444)">
+      <g id="Grupo_21205" data-name="Grupo 21205" transform="translate(888.621 375.526) rotate(90)">
+        <g id="Grupo_21204" data-name="Grupo 21204" transform="translate(0 0)" clip-path="url(#clip-path-2)">
+          <path id="Caminho_15423" data-name="Caminho 15423" d="M.323,7.78,0,7.141A3.623,3.623,0,0,0,2,3.89,3.63,3.63,0,0,0,0,.638L.323,0A4.342,4.342,0,0,1,2.717,3.89,4.336,4.336,0,0,1,.323,7.78" transform="translate(0 3.027)" fill="#00c0b7"/>
+          <path id="Caminho_15424" data-name="Caminho 15424" d="M.189,13.836,0,13.146A6.472,6.472,0,0,0,4.747,6.917,6.47,6.47,0,0,0,0,.69L.189,0A7.187,7.187,0,0,1,5.462,6.917,7.189,7.189,0,0,1,.189,13.836" transform="translate(0.067 0)" fill="#00c0b7"/>
+        </g>
+      </g>
+      <circle id="Elipse_1183" data-name="Elipse 1183" cx="1.737" cy="1.737" r="1.737" transform="translate(884.314 369.203)" fill="#65c406"/>
+      <g id="Grupo_21132" data-name="Grupo 21132" transform="translate(869.091 360.556)">
+        <rect id="Retângulo_24947" data-name="Retângulo 24947" width="24.381" height="2.926" fill="#a0d0d0"/>
+        <path id="Caminho_15349" data-name="Caminho 15349" d="M0,0H21.455l-.6,8.226H.656Z" transform="translate(1.463 2.438)" fill="#d2edee"/>
+        <rect id="Retângulo_24948" data-name="Retângulo 24948" width="6.339" height="2.231" transform="translate(3.413 10.176)" fill="#41566b"/>
+      </g>
+    </g>
+  </g>
+</svg>