@homefile/components-v2 2.32.0 → 2.33.0

package/dist/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/dist/assets/images/index.d.ts

@@ -57,6 +57,7 @@ import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
+import Flower from './flower.svg';
 import FormSent from './form-sent.svg';
 import Foundation from './foundation.svg';
 import Garage from './garage.svg';
@@ -91,6 +92,7 @@ import Location from './location.jpg';
 import LogoCompany from './logo-company.svg';
 import LogoSmall from './logo-small.svg';
 import MagnifyingGlassReport from './magnifying-glass-report.svg';
+import MagnifyingGlassPerson from './magnifying-glass-person.svg';
 import Manager from './manager.svg';
 import MasterBedroom from './master-bedroom.svg';
 import Member from './member.svg';
@@ -165,7 +167,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js

@@ -57,6 +57,7 @@ import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
+import Flower from './flower.svg';
 import FormSent from './form-sent.svg';
 import Foundation from './foundation.svg';
 import Garage from './garage.svg';
@@ -91,6 +92,7 @@ import Location from './location.jpg';
 import LogoCompany from './logo-company.svg';
 import LogoSmall from './logo-small.svg';
 import MagnifyingGlassReport from './magnifying-glass-report.svg';
+import MagnifyingGlassPerson from './magnifying-glass-person.svg';
 import Manager from './manager.svg';
 import MasterBedroom from './master-bedroom.svg';
 import Member from './member.svg';
@@ -165,7 +167,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.ts

@@ -57,6 +57,7 @@ import FilterSize from './filter-size.png'
 import Finance from './finance.svg'
 import Fire from './fire.svg'
 import Flag from './flag.png'
+import Flower from './flower.svg'
 import FormSent from './form-sent.svg'
 import Foundation from './foundation.svg'
 import Garage from './garage.svg'
@@ -91,6 +92,7 @@ import Location from './location.jpg'
 import LogoCompany from './logo-company.svg'
 import LogoSmall from './logo-small.svg'
 import MagnifyingGlassReport from './magnifying-glass-report.svg'
+import MagnifyingGlassPerson from './magnifying-glass-person.svg'
 import Manager from './manager.svg'
 import MasterBedroom from './master-bedroom.svg'
 import Member from './member.svg'
@@ -226,6 +228,7 @@ export {
   Finance,
   Fire,
   Flag,
+  Flower,
   FormSent,
   Foundation,
   Garage,
@@ -260,6 +263,7 @@ export {
   LogoCompany,
   LogoSmall,
   MagnifyingGlassReport,
+  MagnifyingGlassPerson,
   Manager,
   MasterBedroom,
   Member,

package/dist/assets/images/magnifying-glass-person.svg

@@ -0,0 +1,18 @@
+<svg id="Grupo_24123" data-name="Grupo 24123" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.589" height="19.609" viewBox="0 0 19.589 19.609">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_27505" data-name="Retângulo 27505" width="19.589" height="19.609" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_24111" data-name="Grupo 24111" clip-path="url(#clip-path)">
+    <path id="Caminho_18811" data-name="Caminho 18811" d="M74.38,72.591l-2.605-2.605-.68-.682-2.268-2.268c-.01-.01-.023-.019-.033-.03-.03.045-.061.091-.1.135-.063.091-.129.178-.2.266s-.14.173-.215.259c-.11.128-.227.252-.348.372s-.252.243-.381.353c-.042.04-.086.077-.129.112-.175.147-.357.283-.542.411.012.012.021.024.033.037l2.266,2.266.682.682,2.605,2.6a1.352,1.352,0,0,0,1.913-1.913" transform="translate(-55.187 -55.29)" fill="#323954"/>
+    <path id="Caminho_18812" data-name="Caminho 18812" d="M12.746,2.186a7.47,7.47,0,0,1,.86,9.529c-.03.045-.061.091-.1.135-.065.089-.133.178-.2.266s-.142.173-.215.259c-.11.128-.227.252-.348.372s-.252.243-.381.353c-.042.038-.086.075-.129.112-.177.145-.358.281-.544.409l0,0A7.467,7.467,0,1,1,12.746,2.186m-1.234,9.324a5.721,5.721,0,1,0-8.09,0,5.721,5.721,0,0,0,8.09,0" transform="translate(0 0)" fill="#40566b"/>
+    <path id="Caminho_18813" data-name="Caminho 18813" d="M33.145,25.357c0,.04.005.079.005.117V26.4a2.462,2.462,0,0,1-.376,1.315,2.489,2.489,0,0,1-4.228,0,2.462,2.462,0,0,1-.376-1.315v-.923c0-.065,0-.129.009-.194a2.447,2.447,0,0,0,.645.087,2.489,2.489,0,0,0,2.263-1.451,2.487,2.487,0,0,0,2.058,1.441" transform="translate(-23.245 -19.734)" fill="#daf1f3"/>
+    <path id="Caminho_18814" data-name="Caminho 18814" d="M28.269,45.626A2.2,2.2,0,0,1,29.6,47.99H22.711a2.2,2.2,0,0,1,1.33-2.364,2.489,2.489,0,0,0,4.228,0" transform="translate(-18.74 -37.649)" fill="#00c0b7"/>
+    <path id="Caminho_18815" data-name="Caminho 18815" d="M45.07,19.086a2.49,2.49,0,0,1,1.839,2.285,2.487,2.487,0,0,1-2.058-1.441,2.477,2.477,0,0,0,.219-.844" transform="translate(-37.009 -15.749)" fill="#323954"/>
+    <path id="Caminho_18816" data-name="Caminho 18816" d="M31.347,18.673a2.48,2.48,0,0,1-3.126,2.208,2.49,2.49,0,0,1,2.481-2.3c.068,0,.136.005.2.011a2.447,2.447,0,0,1,.442.077" transform="translate(-23.287 -15.336)" fill="#40566b"/>
+    <path id="Caminho_18817" data-name="Caminho 18817" d="M34.695,35.7h-.8a.175.175,0,1,1,0-.35h.8a.175.175,0,1,1,0,.35" transform="translate(-27.825 -29.166)" fill="#40566b"/>
+    <path id="Caminho_18818" data-name="Caminho 18818" d="M45.495,35.7h-.8a.175.175,0,1,1,0-.35h.8a.175.175,0,1,1,0,.35" transform="translate(-36.737 -29.166)" fill="#40566b"/>
+    <path id="Caminho_18819" data-name="Caminho 18819" d="M38.971,43.543a1.158,1.158,0,0,1-.6-.166.175.175,0,0,1,.18-.3.815.815,0,0,0,1.021-.16.175.175,0,1,1,.265.229,1.149,1.149,0,0,1-.87.4" transform="translate(-31.596 -35.363)" fill="#40566b"/>
+  </g>
+</svg>

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { Box, Stack, Text } from '@chakra-ui/react';
-import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, SearchItemLoader, EditCollapsible, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, SearchItemLoader, EditCollapsible, HomeInitialSetup, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
@@ -89,6 +89,8 @@ export const DynamicForm = (_a) => {
                                 return (_jsx(CheckboxAgreement, { id: id, name: name, value: value, description: description, comments: comments }, id));
                             case 'tile-body':
                                 return (_createElement(TileBody, Object.assign({}, props, { key: id, callback: callback, fields: children, menuItems: menuItems })));
+                            case 'home-wizard':
+                                return (_createElement(HomeInitialSetup, Object.assign({}, props, { key: id, callback: callback, fields: children })));
                             default:
                                 return null;
                         }

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack } from '@chakra-ui/react';
+import { WizardTextBody, WizardInitialOptions } from '../../..';
+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 }) => {
+            switch (type) {
+                case 'home-wizard-header':
+                    return (_jsx(WizardTextBody, { title: label, subtitle: description }, id));
+                case 'home-wizard-initial-setup':
+                    return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback }, id));
+                case 'home-wizard-step-options':
+                    return _jsx(_Fragment, {});
+                default:
+                    return null;
+            }
+        }) }));
+};

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

@@ -9,6 +9,7 @@ export * from './FieldWithDelete';
 export * from './FileField';
 export * from './GridField';
 export * from './GroupField';
+export * from './HomeInitialSetup';
 export * from './LabeledField';
 export * from './NumberField';
 export * from './SwitchField';

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

@@ -9,6 +9,7 @@ export * from './FieldWithDelete';
 export * from './FileField';
 export * from './GridField';
 export * from './GroupField';
+export * from './HomeInitialSetup';
 export * from './LabeledField';
 export * from './NumberField';
 export * from './SwitchField';

package/dist/components/homeAssistant/wizard/HomeAssistantWizardSteps.d.ts

@@ -1,2 +1,2 @@
 import { HomeAssistantStepsI } from '../../../interfaces';
-export declare const HomeAssistantWizardSteps: ({ currentStep, }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantWizardSteps: ({ currentStep, }: Pick<HomeAssistantStepsI, "currentStep">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sendDocument/RecipientContent.js

@@ -4,5 +4,5 @@ import { randomColor } from '../../utils';
 import MoonLoader from 'react-spinners/MoonLoader';
 export const RecipientContent = ({ bgColor, firstName = '', index = 0, lastName = '', phone = '', email = '', }) => {
     const isPending = firstName === 'Account' && lastName === 'Pending';
-    return (_jsxs(Flex, { gap: "2", align: firstName ? 'start' : 'center', children: [isPending && (_jsx(MoonLoader, { color: "#2d2d2d", size: 20, speedMultiplier: 0.5 })), !isPending && (_jsx(Avatar, { size: "sm", bg: bgColor !== null && bgColor !== void 0 ? bgColor : randomColor(index), fontWeight: "bold", color: "neutral.white", name: firstName ? `${firstName} ${lastName}` : '' })), _jsxs(Stack, { w: "full", spacing: "-2", minH: "3rem", justify: "space-between", children: [_jsxs(Box, { children: [firstName && (_jsx(Text, { fontWeight: "medium", textTransform: "capitalize", children: `${firstName} ${lastName}` })), _jsx(Text, { fontSize: "xxs", children: phone })] }), _jsx(Text, { variant: "email", alignSelf: "flex-end", children: email })] })] }));
+    return (_jsxs(Flex, { gap: "2", align: firstName ? 'start' : 'center', children: [isPending && (_jsx(MoonLoader, { color: "#2d2d2d", size: 20, speedMultiplier: 0.5 })), !isPending && (_jsx(Avatar, { size: "sm", bg: bgColor !== null && bgColor !== void 0 ? bgColor : randomColor(index), fontWeight: "bold", color: "neutral.white", name: firstName ? `${firstName} ${lastName}` : '' })), _jsxs(Stack, { w: "full", spacing: "-2", minH: "3rem", justify: "space-between", children: [_jsxs(Box, { children: [firstName && (_jsx(Text, { textTransform: "capitalize", children: `${firstName} ${lastName}` })), _jsx(Text, { fontSize: "xxs", children: phone })] }), _jsx(Text, { variant: "email", alignSelf: "flex-end", children: email })] })] }));
 };

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

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

package/dist/components/wizard/WizardInitialOptions.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, SimpleGrid, Stack, Text, Image, Flex, } from '@chakra-ui/react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CheckInCircle } from '../../assets/images';
+import { fieldIcons } from '../../helpers';
+export const WizardInitialOptions = ({ form, title, callback, }) => {
+    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 { 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: () => {
+                                            onChange(!value);
+                                            callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
+                                        } }, setStyles(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 })] }))] }));
+                        } }, id));
+                }) })] }));
+};
+const setStyles = (completed = false) => {
+    switch (completed) {
+        case true:
+            return {
+                bg: 'lightGreen.7',
+                transition: 'all 0.3s',
+                _hover: {
+                    bg: 'lightGreen.8',
+                },
+            };
+        case false:
+            return {
+                bg: 'neutral.white',
+                transition: 'all 0.3s',
+                _hover: {
+                    bg: 'lightGreen.7',
+                },
+            };
+    }
+};

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

@@ -1,3 +1,4 @@
 export * from './ControlledWizard';
+export * from './WizardInitialOptions';
 export * from './WizardTextHeader';
 export * from './WizardTextBody';

package/dist/components/wizard/index.js

@@ -1,3 +1,4 @@
 export * from './ControlledWizard';
+export * from './WizardInitialOptions';
 export * from './WizardTextHeader';
 export * from './WizardTextBody';

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, Wallet, Fire, Plant, LifePreserver, BOCFilter, BOCGreen, BOCRenovation, BOCRepair, BOCService, BOCWarranty, MRBoxes, MRClock, MRCouch, MRHand, MRMakeReady, MRRental, Cleaning } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, Wallet, Fire, Plant, LifePreserver, BOCFilter, BOCGreen, BOCRenovation, BOCRepair, BOCService, BOCWarranty, MRBoxes, MRClock, MRCouch, MRHand, MRMakeReady, MRRental, Cleaning, GearTime, YellowFolder, Warranty, Flower, MagnifyingGlassPerson, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -44,12 +44,17 @@ export const fieldIcons = {
     pool: Pool2,
     roof: Roof2,
     umbrella: Closet,
+    warranty: Warranty,
     water: GlassWater,
     house: Structure,
     target: Target,
     title: CircleFace,
     company: Company2,
     wallet: Wallet,
+    gear: GearTime,
+    folder: YellowFolder,
+    flower: Flower,
+    'search-person': MagnifyingGlassPerson,
     'sh-gutter': GutterCleaning,
     'sh-home': HomeCleaning,
     'sh-house': HouseWashing,
@@ -76,5 +81,5 @@ export const fieldIcons = {
     'mr-hand': MRHand,
     'mr-make-ready': MRMakeReady,
     'mr-rental': MRRental,
-    'cleaning': Cleaning
+    cleaning: Cleaning,
 };

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

@@ -1,9 +1,10 @@
 import { AIGridFieldI, AlertFieldType, AlertTabType, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'collapsible' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType;
+export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'collapsible' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType | WizardTypes;
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
-export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'fire' | 'goldbars' | 'heart' | 'image' | 'life-preserver' | 'notes' | 'palette' | 'plant' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | 'wallet' | UIIconTypes;
+export type IconTypes = '68' | 'barcode' | 'battery' | 'billing' | 'book-opened' | 'book' | 'calc' | 'calendar-drop' | 'calendar' | 'calendar2' | 'check' | 'co2' | 'company' | 'contact' | 'date' | 'default' | 'detector' | 'drop' | 'electricity' | 'fire' | 'flower' | 'folder' | 'foundation' | 'gear' | 'goldbars' | 'heart' | 'heater' | 'house' | 'image' | 'life-preserver' | 'light' | 'mobile-drop' | 'notes' | 'palette' | 'people' | 'plant' | 'plate' | 'pool' | 'pressure-washer' | 'price' | 'rating' | 'receipt' | 'registry' | 'roof' | 'search-person' | 'solar-panel' | 'sprinkler' | 'target' | 'title' | 'tools' | 'umbrella' | 'wallet' | 'warranty' | 'water' | 'wind' | UIIconTypes;
 export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house' | 'aa-mowing' | 'aa-fertilization' | 'aa-disease' | 'aa-weed' | 'aa-dressing' | 'aa-pest' | 'boc-service' | 'boc-filter' | 'boc-repair' | 'boc-renovation' | 'boc-green' | 'boc-warranty' | 'filter-size' | string;
+export type WizardTypes = 'home-wizard' | 'home-wizard-header' | 'home-wizard-initial-setup' | 'home-wizard-step-options';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {

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

@@ -15,7 +15,7 @@ export interface VerticalIconI {
 }
 export interface TileCtaCallbackI {
     id: string;
-    value: string;
+    value: unknown;
     name?: string;
     link?: string;
     icon?: string;

package/dist/mocks/forms/dynamicForm.mock.d.ts

@@ -9,3 +9,4 @@ export declare const alertFieldsMock2: ReportI[];
 export declare const alertFieldsMock3: ReportI[];
 export declare const receiptFieldsMock: ReportI[];
 export declare const homeItemDetails: ReportI[];
+export declare const homeWizardForm: ReportI[];

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

@@ -1281,3 +1281,74 @@ 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,
+    },
+];

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

@@ -1,12 +1,12 @@
 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 { 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, 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, } from '../../assets/images/appliances';
 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: 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.33.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

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>