@homefile/components-v2 2.1.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, 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, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, 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, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, PressureWasher, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -35,6 +35,7 @@ export const fieldIcons = {
     heater: Heater,
     light: Light,
     plate: Plate,
+    'pressure-washer': PressureWasher,
     pool: Pool2,
     roof: Roof2,
     umbrella: Closet,

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

@@ -1,7 +1,7 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
+type KindTypes = 'checkbox' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
 type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
-export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | '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' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
+export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | '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' | UIIconTypes;
 export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;

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

@@ -1,4 +1,4 @@
-import { DynamicFormI, MenuItemI, PartnerFooterI } from '../../..';
+import { DynamicFormI, MenuItemI, PartnerFooterI, ReportI } from '../../..';
 export interface TileBodyLogoI {
     menuItems?: MenuItemI[];
     name?: string;
@@ -13,8 +13,19 @@ export interface VerticalIconI {
     icon?: string;
     value: string;
 }
-export interface TileCtaI {
-    callback?: (value: string) => void;
+interface TileCtaCallbackI {
+    id: string;
+    value: string;
+    name?: string;
+    link?: string;
+    icon?: string;
+    description?: string;
+    canBeHidden?: boolean;
+    visible?: boolean;
+}
+export interface TileCtaI extends Pick<ReportI, 'id' | 'name' | 'link' | 'icon' | 'description' | 'canBeHidden' | 'visible'> {
+    callback?: (form: TileCtaCallbackI) => void;
     type: 'primary-cta' | 'secondary-cta';
     value: string;
 }
+export {};

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

@@ -2,5 +2,4 @@ export interface ApplianceStepsI {
     addedAppliances?: AppliancesType[];
     onClick: (selectedSteps: string[]) => void;
 }
-type AppliancesType = 'fridge' | 'freezer' | 'washer' | 'dryer' | 'dish-washer' | 'cook-top' | 'oven' | 'range' | 'hood' | 'microwave';
-export {};
+export type AppliancesType = 'fridge' | 'freezer' | 'washer' | 'dryer' | 'dish-washer' | 'cook-top' | 'oven' | 'range' | 'hood' | 'microwave';

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

@@ -6,7 +6,6 @@ export interface HomeMonitortStepsI {
 }
 export interface HomeMonitorButtonI {
     currentStep: number;
-    menuItems: HomeMonitortStepsI['menuItems'];
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;

package/dist/interfaces/launchpad/IconMenu.interface.d.ts

@@ -7,6 +7,8 @@ export interface IconMenuI<T> {
     icon?: JSX.Element;
     itemForm?: T;
     menuItems?: MenuItemI[];
+    onClick?: () => void;
     variant?: string;
     width?: string;
+    zIndex?: string;
 }

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

@@ -189,6 +189,72 @@ export const formFieldsMock = [
         visible: false,
         icon: 'book',
     },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Services',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: 'Select the services you are requesting support for?',
+        type: 'checkbox-group',
+        visible: true,
+        icon: 'pressure-washer',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Pressure Washing',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Window Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: false,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Roof Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: false,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Holiday Lights',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Gutter Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Exterior Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: false,
+            },
+        ],
+    },
 ];
 export const contactFieldsMock = [
     {

package/dist/mocks/homeAssistant/homeAssistantForms.js

@@ -158,6 +158,12 @@ export const homeAssitantStep3FormMock = [
     },
 ];
 export const homeAssitantStep4FormMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Appliances List',
+        value: ['fridge', 'dish-washer', 'hood', 'oven'],
+        type: 'hidden',
+    },
     {
         id: faker.database.mongodbObjectId(),
         name: 'Heater',

package/dist/stories/animations/HomieAnimation.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const Homie: () => import("react/jsx-runtime").JSX.Element;
+export declare const HomieLarge: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/animations/HomieAnimation.stories.js

@@ -9,3 +9,4 @@ export default {
     ],
 };
 export const Homie = () => _jsx(HomieAnimation, {});
+export const HomieLarge = () => _jsx(HomieAnimation, { animation: "homie-v3" });

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, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, 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, 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, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } 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, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, 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, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } 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: IA, name: "IA" }), _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: 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: 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: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _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: 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: 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: 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: 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: IA, name: "IA" }), _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: 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: 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: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _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: 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: 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: 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/forms/dynamicForm/DynamicForm.stories.js

@@ -7,8 +7,6 @@ export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
     args: {
-        callback: action('callback'),
-        onUpload: action('onUpload'),
         menuItems: menuMock,
         socialLinks: socialLinksMock,
         websiteUrl: 'http://www.audreyscheckdesign.com',
@@ -18,5 +16,5 @@ export const DynamicFormComponent = (args) => {
     return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock })) }));
 };
 export const DynamicUIFormComponent = (args) => {
-    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false })) }));
+    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false, callback: action('callback') })) }));
 };

package/package.json

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

package/src/assets/images/ia.svg

@@ -1,18 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.975" height="27.878" viewBox="0 0 24.975 27.878">
-  <g id="Group_21224" data-name="Group 21224" transform="translate(-761.466 -63.12)">
-    <path id="Subtraction_163" data-name="Subtraction 163" d="M13.736,23.975h-3.5a.857.857,0,0,1-.856-.856v-1.3A9.705,9.705,0,0,1,6.9,20.762l-.937.938a.855.855,0,0,1-1.21,0L2.276,19.229a.862.862,0,0,1,0-1.213l.992-.993a9.915,9.915,0,0,1-.951-2.432H.856A.861.861,0,0,1,0,13.756V10.219a.861.861,0,0,1,.856-.835H2.431a10.063,10.063,0,0,1,1-2.273L2.276,5.958a.858.858,0,0,1,0-1.21L4.749,2.275a.859.859,0,0,1,1.21,0l1.208,1.21a9.959,9.959,0,0,1,2.217-.9V.858A.862.862,0,0,1,10.219,0h3.537a.862.862,0,0,1,.836.858V2.588a9.887,9.887,0,0,1,2.217.9l1.207-1.21a.859.859,0,0,1,1.21,0L21.7,4.749a.859.859,0,0,1,0,1.21L20.548,7.11a9.911,9.911,0,0,1,1,2.273h1.576a.856.856,0,0,1,.856.856v3.5a.857.857,0,0,1-.856.856H21.658a9.917,9.917,0,0,1-.951,2.432l.993.993a.863.863,0,0,1,0,1.213L19.226,21.7a.844.844,0,0,1-.6.251.853.853,0,0,1-.606-.251l-.937-.937a9.686,9.686,0,0,1-2.488,1.054v1.3A.857.857,0,0,1,13.736,23.975ZM11.99,3.764a8.2,8.2,0,1,0,3.2.646A8.177,8.177,0,0,0,11.99,3.764Z" transform="translate(761.966 66.523)" fill="#00c0b7" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <g id="Group_21161" data-name="Group 21161" transform="translate(761.99 63.12)">
-      <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="1.967" cy="1.967" r="1.967" transform="translate(10.008)" fill="#bcd1d8"/>
-      <line id="Line_3403" data-name="Line 3403" y2="2.485" transform="translate(11.975 3.934)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
-      <rect id="Rectangle_24537" data-name="Rectangle 24537" width="9.835" height="3.934" rx="1.967" transform="translate(7.058 5.901)" fill="#00a1aa"/>
-      <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="2.95" cy="2.95" r="2.95" transform="translate(0 12.785)" fill="#00a1aa"/>
-      <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.459" cy="2.95" rx="2.459" ry="2.95" transform="translate(19.033 12.785)" fill="#00a1aa"/>
-      <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="2.95" cy="2.95" r="2.95" transform="translate(15.099 12.785)" fill="#00a1aa"/>
-      <rect id="Rectangle_24536" data-name="Rectangle 24536" width="18.05" height="15.736" rx="5" transform="translate(2.95 7.868)" fill="#02c0b7"/>
-      <rect id="Rectangle_24476" data-name="Rectangle 24476" width="13.769" height="5.901" rx="2.95" transform="translate(5.091 10.818)" fill="#324459"/>
-      <line id="Line_3401" data-name="Line 3401" x2="2.485" transform="translate(7.771 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <line id="Line_3402" data-name="Line 3402" x2="2.485" transform="translate(14.052 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.621,2.621,0,0,0,2.622,2.231,2.666,2.666,0,0,0,2.618-2.231" transform="translate(122.294 -1742.01)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="30.202" height="30.2" viewBox="0 0 30.202 30.2">
+  <g id="Group_21564" data-name="Group 21564" transform="translate(10417.861 8318.462)">
+    <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="2.157" cy="2.157" r="2.157" transform="translate(-10404.917 -8318.462)" fill="#bcd1d8"/>
+    <line id="Line_3403" data-name="Line 3403" y2="2.725" transform="translate(-10402.761 -8314.146)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
+    <rect id="Rectangle_24537" data-name="Rectangle 24537" width="10.786" height="4.314" rx="2.157" transform="translate(-10408.155 -8311.99)" fill="#00a1aa"/>
+    <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="3.236" cy="3.236" r="3.236" transform="translate(-10417.861 -8304.439)" fill="#00a1aa"/>
+    <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.696" cy="3.236" rx="2.696" ry="3.236" transform="translate(-10393.053 -8304.439)" fill="#00a1aa"/>
+    <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="3.236" cy="3.236" r="3.236" transform="translate(-10397.368 -8304.439)" fill="#00a1aa"/>
+    <rect id="Rectangle_24536" data-name="Rectangle 24536" width="23.729" height="21.572" rx="3" transform="translate(-10414.626 -8309.834)" fill="#02c0b7"/>
+    <rect id="Rectangle_24476" data-name="Rectangle 24476" width="15.1" height="6.472" rx="3" transform="translate(-10410.311 -8304.439)" fill="#324459"/>
+    <line id="Line_3401" data-name="Line 3401" x2="2.725" transform="translate(-10407.915 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <line id="Line_3402" data-name="Line 3402" x2="2.725" transform="translate(-10399.874 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.874,2.874,0,0,0,2.876,2.446,2.924,2.924,0,0,0,2.871-2.446" transform="translate(-10292.654 -10055.396)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
   </g>
 </svg>
+
+

package/src/assets/images/index.ts

@@ -102,6 +102,7 @@ import Play from './play.svg'
 import Plus from './plus.svg'
 import Pool from './pool.svg'
 import Pool2 from './pool2.svg'
+import PressureWasher from './pressure-washer.svg'
 import Price from './price.svg'
 import Profile from './profile.svg'
 import ProgressReport from './progress-report.svg'
@@ -259,6 +260,7 @@ export {
   Plus,
   Pool,
   Pool2,
+  PressureWasher,
   Price,
   Profile,
   ProgressReport,

package/src/assets/images/pressure-washer.svg

@@ -0,0 +1,16 @@
+<svg id="Group_22267" data-name="Group 22267" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.455" height="30.766" viewBox="0 0 28.455 30.766">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25649" data-name="Rectangle 25649" width="28.455" height="30.766" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_22266" data-name="Group 22266" clip-path="url(#clip-path)">
+    <path id="Path_17637" data-name="Path 17637" d="M2.623,97.179a2.624,2.624,0,1,1,2.392-3.7c.033.074.062.148.088.222l-.786.276c-.019-.054-.04-.107-.063-.158a1.79,1.79,0,1,0-.009,1.5,1.44,1.44,0,0,0,.067-.172c.014-.038.02-.052.024-.068s.011-.041.016-.057a.37.37,0,0,0,.014-.054c.01-.043.014-.064.018-.088l.821.14c-.007.043-.015.083-.025.126s-.021.09-.035.133-.026.087-.042.131A2.377,2.377,0,0,1,5,95.674a2.641,2.641,0,0,1-2.373,1.5" transform="translate(0 -66.413)" fill="#00c0b7"/>
+    <path id="Path_17638" data-name="Path 17638" d="M74.807,0V1.516H71.726V0Z" transform="translate(-51.817 0)" fill="#40566b"/>
+    <path id="Path_17639" data-name="Path 17639" d="M30.728,16.7v3.794h-2V16.7Z" transform="translate(-20.753 -12.064)" fill="#40566b"/>
+    <path id="Path_17640" data-name="Path 17640" d="M26.768,35.665a4,4,0,0,1,0,8.008H10.422V41.827H26.768a2.157,2.157,0,1,0,0-4.313H7.21a4.008,4.008,0,0,1-4.005-4V24.2A4.011,4.011,0,0,1,7.21,20.2h3.079v1.849H7.21A2.159,2.159,0,0,0,5.054,24.2v9.307A2.157,2.157,0,0,0,7.21,35.665Z" transform="translate(-2.315 -14.592)" fill="#00c0b7"/>
+    <path id="Path_17641" data-name="Path 17641" d="M18.926,98.119v1.846h-3.95a1.872,1.872,0,0,0,.086-.219.869.869,0,0,0,.036-.114.881.881,0,0,0,.031-.117c.009-.033.014-.064.02-.1a2.066,2.066,0,0,0,.036-.394,2.188,2.188,0,0,0-.12-.716c-.022-.064-.047-.128-.075-.189Z" transform="translate(-10.819 -70.884)" fill="#e24c5d"/>
+    <path id="Path_17642" data-name="Path 17642" d="M53.8,10.734V16.8a5.273,5.273,0,0,1-5.274,5.274H39.055a3.118,3.118,0,0,1-3.12-3.117V8.58a3.119,3.119,0,0,1,3.12-3.12h9.471A5.273,5.273,0,0,1,53.8,10.734m-4.158,7.594V9.4a.616.616,0,0,0-.616-.616H45.791a.618.618,0,0,0-.616.616v8.932a.617.617,0,0,0,.616.616h3.234a.615.615,0,0,0,.616-.616" transform="translate(-25.961 -3.944)" fill="#e24c5d"/>
+    <path id="Path_17643" data-name="Path 17643" d="M73.69,26.969a.615.615,0,0,1-.616.616H69.84a.617.617,0,0,1-.616-.616V18.037a.618.618,0,0,1,.616-.616h3.234a.616.616,0,0,1,.616.616Z" transform="translate(-50.01 -12.586)" fill="#ddeff2"/>
+  </g>
+</svg>

package/src/assets/locales/en/index.json

@@ -399,8 +399,8 @@
       }
     },
     "details": "Provide details about your home’s",
-    "homeMonitor": "Home Monitor",
-    "homeMonitoring": "Homefile is monitoring your home.",
+    "homeMonitor": "Homie",
+    "homeMonitoring": "Homie is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",
@@ -418,10 +418,11 @@
       "smoke": "Smoke & CO2 detectors",
       "structure": "Structure"
     },
-    "title": "Home Assistant - Set Up",
+    "title": "Set Up Homie",
     "tutorialButton": "Start Quick Setup",
-    "tutorialDescription": "Our Home assistant helps you manage every aspect of your home. We’ve added a short overview to help you learn more about it.",
-    "tutorialTitle": "Let’s quickly configure your AI Home Assistant."
+    "tutorialDescription": "Homie helps you manage every aspect of your home. We've added a short overview to help you learn more about it.",
+    "tutorialTitle": "Let’s quickly set up Homie, your friendly AI home assistant.",
+    "tutorialNote": "Just a few set-up questions to help Homie get going."
   },
   "homeBoard": {
     "addRecords": "Add Property Records",
@@ -603,7 +604,7 @@
   "newPassword": {
     "confirm": "Confirm Password",
     "create": "Create Password",
-    "title": "Enter your password below."
+    "title": "Please enter your new password."
   },
   "partner": {
     "aphw": {
@@ -743,7 +744,7 @@
       "title": "Property Taxes"
     },
     "trending": {
-      "addMortgage": "Add Mortgage Info",
+      "addMortgage": "Mortgage Info",
       "estimated": "Estimated Market Value",
       "mortgage": "Mortgage Balance*",
       "public": "*Estimated from Public Data",

package/src/components/animations/HomieAnimation.tsx

@@ -1,9 +1,9 @@
 import { useRive } from '@rive-app/react-canvas'
 const url = import.meta.env.VITE_RIVE_ASSETS
 
-export const HomieAnimation = () => {
+export const HomieAnimation = ({ animation = 'homie-v2' }) => {
   const { RiveComponent } = useRive({
-    src: `${url}/homie-v2.riv`,
+    src: `${url}/${animation}.riv`,
     stateMachines: 'State Machine 1',
     autoplay: true,
   })

package/src/components/contacts/ContactsContent.tsx

@@ -96,7 +96,7 @@ export const ContactsContent = ({
           pt="base"
           pb="120px"
           pr="base"
-          bg="lightBlue.5"
+          bg="lightBlue.2"
           minHeight="full"
         >
           <Flex gap="3" pl="base">

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -17,6 +17,7 @@ import {
   NumberField,
   CurrencyField,
   TileBody,
+  CheckboxGroupField,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -163,6 +164,16 @@ export const DynamicForm = ({
                     canBeHidden={canBeHidden}
                   />
                 )
+              case 'checkbox-group':
+                return (
+                  <CheckboxGroupField
+                    key={id}
+                    id={id}
+                    children={children}
+                    value={value}
+                    icon={baseProps.icon}
+                  />
+                )
               case 'tile-body':
                 return (
                   <TileBody

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

@@ -0,0 +1,65 @@
+import {
+  Box,
+  Checkbox,
+  CheckboxGroup,
+  Flex,
+  SimpleGrid,
+  Text,
+} from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+import { FormIcon } from '@/components'
+import { Controller, useFormContext } from 'react-hook-form'
+
+export const CheckboxGroupField = ({
+  children,
+  icon,
+  id,
+  value,
+}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value'>) => {
+  const { control } = useFormContext()
+  const defaultValues = children
+    ?.map((child) => {
+      if (child.value) {
+        return child.id
+      }
+    })
+    .filter((value) => value) as string[]
+
+  return (
+    <Box>
+      <Box p="base" borderBottom="1px dashed" borderColor="lightBlue.6">
+        <Text fontFamily="secondary" fontSize="sm">
+          {value}
+        </Text>
+      </Box>
+      <Flex p="base" gap="base">
+        <FormIcon icon={icon} />
+        <Controller
+          control={control}
+          name={id}
+          defaultValue={defaultValues}
+          render={({ field: { onChange } }) => {
+            return (
+              <CheckboxGroup defaultValue={defaultValues} onChange={onChange}>
+                <SimpleGrid columns={2} spacing="base" w="full">
+                  {children?.map((child) => {
+                    const { id, name, value } = child
+                    return (
+                      <Checkbox
+                        key={id}
+                        value={String(id)}
+                        isChecked={Boolean(value)}
+                      >
+                        <Text fontSize="sm">{name}</Text>
+                      </Checkbox>
+                    )
+                  })}
+                </SimpleGrid>
+              </CheckboxGroup>
+            )
+          }}
+        />
+      </Flex>
+    </Box>
+  )
+}

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

@@ -30,6 +30,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
           type,
           value,
           icon,
+          link,
           options = [],
         }) => {
           const baseProps = {
@@ -102,18 +103,27 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
               return (
                 <TileCta
                   key={id}
+                  callback={callback}
+                  description={description}
+                  icon={icon}
+                  id={id}
+                  name={name}
                   type={type}
+                  link={link}
                   value={String(baseProps.value)}
-                  callback={callback}
                 />
               )
             case 'secondary-cta':
               return (
                 <TileCta
                   key={id}
+                  callback={callback}
+                  description={description}
+                  icon={icon}
+                  id={id}
+                  name={name}
                   type={type}
                   value={String(baseProps.value)}
-                  callback={callback}
                 />
               )
 

package/src/components/forms/dynamicForm/fields/index.ts

@@ -1,3 +1,4 @@
+export * from './CheckboxGroupField'
 export * from './CurrencyField'
 export * from './DateField'
 export * from './FieldDescription'

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyAction.tsx

@@ -2,10 +2,10 @@ import { Flex } from '@chakra-ui/react'
 import { SingleFields } from '@/components'
 import { TileBodyI } from '@/interfaces'
 
-export const TileBodyAction = ({ fields }: TileBodyI) => {
+export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
     <Flex p="base" align="center" gap="base">
-      <SingleFields fields={fields} />
+      <SingleFields fields={fields} callback={callback} />
     </Flex>
   )
 }

package/src/components/forms/dynamicForm/fields/uiFields/TileCta.tsx

@@ -1,10 +1,11 @@
 import { Button } from '@chakra-ui/react'
 import { TileCtaI } from '@/interfaces'
 
-export const TileCta = ({ callback, type, value }: TileCtaI) => {
+export const TileCta = ({ callback, ...props }: TileCtaI) => {
+  const { type, value } = props
   return (
     <Button
-      onClick={() => callback?.(value)}
+      onClick={() => callback?.({ ...props })}
       variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
       fontSize="sm"
     >

package/src/components/homeAssistant/HomeAssistantTutorial.tsx

@@ -48,6 +48,9 @@ export const HomeAssistantTutorial = ({
           </Flex>
         </Button>
       </Stack>
+      <Text fontFamily="secondary" textAlign="center">
+        {t('homeAssistant.tutorialNote')}
+      </Text>
       {url && (
         <VideoPlayerModal
           url={url}