@homefile/components-v2 2.1.1 → 2.2.1

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.1",
+  "version": "2.2.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

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/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/folderSharing/FolderSharing.tsx

@@ -106,8 +106,8 @@ export const FolderSharing = ({
                       />
                       <Text
                         noOfLines={2}
-                        lineHeight="1.1"
                         fontSize="sm"
+                        lineHeight="17px"
                         textOverflow="ellipsis"
                       >
                         {name}

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'
@@ -27,6 +28,7 @@ export const DynamicForm = ({
   menuItems,
   onUpload,
   showTitle = true,
+  title,
   uploadingFieldId,
   ...props
 }: DynamicFormI) => {
@@ -44,7 +46,7 @@ export const DynamicForm = ({
     <Stack bg="lightBlue.1" spacing="0" h="full">
       {showTitle && (
         <Text fontFamily="secondary" px="base" pt="4" pb="2">
-          {t('forms.itemDetails')}
+          {title ? title : t('forms.itemDetails')}
         </Text>
       )}
       <FormProvider {...form}>
@@ -163,14 +165,24 @@ 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
+                    {...props}
                     key={id}
                     callback={callback}
                     fields={children}
                     menuItems={menuItems}
-                    {...props}
                   />
                 )
               default:

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.name
+      }
+    })
+    .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(name)}
+                        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 = {
@@ -99,21 +100,18 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
                 />
               )
             case 'primary-cta':
-              return (
-                <TileCta
-                  key={id}
-                  type={type}
-                  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}
+                  link={link}
                   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/HomeMonitorSteps.tsx

@@ -17,16 +17,12 @@ export const HomeMonitorSteps = ({
     'homeMonitorButton-4',
     'homeMonitorButton-5',
     'homeMonitorButton-6',
-    'menuItems',
   ]
   const [selectedId, setSelectedId] = useState<string>('')
   const isDisabled = menuItems.length === 0
 
   useComponentStyles({ ids, selectedId, zIndex: '2' })
-  const handleStepClick = (step: number) => {
-    onStepClick(step)
-    setSelectedId(`homeMonitorButton-${step}`)
-  }
+  const handleStepClick = (step: number) => onStepClick(step)
   return (
     <Flex gap="base">
       {homeAssistantSteps.map((step, index) => (
@@ -45,7 +41,7 @@ export const HomeMonitorSteps = ({
                 itemForm={index + 1}
                 menuItems={menuItems}
                 disabled={isDisabled}
-                onClick={() => setSelectedId('menuItems')}
+                onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
               />
             </Box>
           </Box>

package/src/components/homeAssistant/monitorAlerts/HomefileMonitoring.tsx

@@ -7,7 +7,7 @@ export const HomefileMonitoring = () => {
     <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
       <Flex align="center">
         <Box boxSize="47px">
-          <HomieAnimation />
+          <HomieAnimation animation="homie-v3" />
         </Box>
         <Text>{t('homeAssistant.homeMonitoring')}</Text>
       </Flex>

package/src/components/homeBoard/HomeBoard.tsx

@@ -340,9 +340,14 @@ export const HomeBoard = () => {
                     <Notifications date="10-10-24" local="TX - Houston" />
                   </Flex>
                   <HomeMonitorSteps
-                    menuItems={menuMock}
+                    menuItems={[
+                      {
+                        label: 'Details',
+                        handleClick: handleHomeAssistantClick,
+                      },
+                    ]}
                     stepsWithAlerts={[]}
-                    onStepClick={handleHomeAssistantClick}
+                    onStepClick={() => null}
                   />
                 </Stack>
               </HomeMonitor>

package/src/helpers/forms/dynamicForm.helper.ts

@@ -47,6 +47,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -86,6 +87,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   heater: Heater,
   light: Light,
   plate: Plate,
+  'pressure-washer': PressureWasher,
   pool: Pool2,
   roof: Roof2,
   umbrella: Closet,

package/src/helpers/homeBoard/FolderSharing.helper.ts

@@ -30,7 +30,7 @@ export const testFolders: FolderI[] = [
   {
     _id: faker.database.mongodbObjectId(),
     home: '6317993b4a8e6e909bcced0a',
-    name: 'Test',
+    name: 'Mortgage',
     public: false,
     icon: 'project',
     createdAt: '2023-01-13T20:35:02.538Z',
@@ -153,19 +153,21 @@ export const fileDB: ReportsI[] = [
     createdAt: '2022-06-15T21:17:33.246Z',
     updatedAt: '2022-06-15T21:17:33.246Z',
     __v: 0,
-    files: [{
-      _id: '62aa4c6db225dd3957d09b24',
-      fileName: 'test-plans.jpeg-37f8c3',
-      extension: 'mov',
-      originalName: 'test-plans.jpeg',
-      bucketName: 'homefile-images',
-      description: '',
-      collectionName: 'homes',
-      docId: '62a20af1cc6d1000ef17c7d0',
-      createdAt: '2022-06-15T21:17:33.166Z',
-      updatedAt: '2022-06-15T21:17:33.166Z',
-      __v: 0,
-    }],
+    files: [
+      {
+        _id: '62aa4c6db225dd3957d09b24',
+        fileName: 'test-plans.jpeg-37f8c3',
+        extension: 'mov',
+        originalName: 'test-plans.jpeg',
+        bucketName: 'homefile-images',
+        description: '',
+        collectionName: 'homes',
+        docId: '62a20af1cc6d1000ef17c7d0',
+        createdAt: '2022-06-15T21:17:33.166Z',
+        updatedAt: '2022-06-15T21:17:33.166Z',
+        __v: 0,
+      },
+    ],
     room: {
       _id: '63176dfa5d8cee7e11f6f962',
       name: 'Master Bedroom',
@@ -191,19 +193,21 @@ export const fileDB: ReportsI[] = [
     createdAt: '2022-06-15T21:17:33.246Z',
     updatedAt: '2022-06-15T21:17:33.246Z',
     __v: 0,
-    files: [{
-      _id: '62aa4c6db225dd3957d09b24',
-      fileName: 'test-plans.jpeg-37f8c3',
-      extension: 'jpeg',
-      originalName: 'test-plans.jpeg',
-      bucketName: 'homefile-images',
-      description: '',
-      collectionName: 'homes',
-      docId: '62a20af1cc6d1000ef17c7d0',
-      createdAt: '2022-06-15T21:17:33.166Z',
-      updatedAt: '2022-06-15T21:17:33.166Z',
-      __v: 0,
-    }],
+    files: [
+      {
+        _id: '62aa4c6db225dd3957d09b24',
+        fileName: 'test-plans.jpeg-37f8c3',
+        extension: 'jpeg',
+        originalName: 'test-plans.jpeg',
+        bucketName: 'homefile-images',
+        description: '',
+        collectionName: 'homes',
+        docId: '62a20af1cc6d1000ef17c7d0',
+        createdAt: '2022-06-15T21:17:33.166Z',
+        updatedAt: '2022-06-15T21:17:33.166Z',
+        __v: 0,
+      },
+    ],
     room: {
       _id: '63176dfa5d8cee7e11f6f962',
       name: 'Master Bedroom',

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

@@ -2,6 +2,7 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
+  | 'checkbox-group'
   | 'currency'
   | 'date'
   | 'email'
@@ -73,6 +74,7 @@ export type IconTypes =
   | 'mobile-drop'
   | 'light'
   | 'plate'
+  | 'pressure-washer'
   | 'house'
   | 'target'
   | 'title'
@@ -111,6 +113,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   menuItems?: MenuItemI[]
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
   showTitle?: boolean
+  title?: string
   uploadingFieldId?: string
 }
 

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

@@ -1,4 +1,4 @@
-import { DynamicFormI, MenuItemI, PartnerFooterI } from '@/interfaces'
+import { DynamicFormI, MenuItemI, PartnerFooterI, ReportI } from '@/interfaces'
 
 export interface TileBodyLogoI {
   menuItems?: MenuItemI[]
@@ -17,8 +17,23 @@ export interface VerticalIconI {
   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
 }

package/src/mocks/forms/dynamicForm.mock.ts

@@ -13,6 +13,7 @@ export const formFieldsMock: ReportI[] = [
     visible: false,
     icon: 'barcode',
   },
+
   {
     id: faker.database.mongodbObjectId(),
     name: 'Receipt',
@@ -191,6 +192,72 @@ export const formFieldsMock: ReportI[] = [
     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: ReportI[] = [
@@ -456,7 +523,7 @@ export const tileUIMock: ReportI[] = [
             comments: '',
             value: 'Request Support',
             type: 'secondary-cta',
-            link: 'open-drawer',
+            link: 'www.shine.com',
           },
         ],
       },