@homefile/components-v2 2.19.0 → 2.21.0

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

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
 import { BackendAlert } from '../../../components';
 import { alertFieldsMock } from '../../../mocks';
 export default {
@@ -7,6 +8,7 @@ export default {
     args: {
         category: 'budget',
         form: alertFieldsMock,
+        callback: action('onClick'),
     },
 };
 export const BackendAlertComponent = (args) => {

package/package.json

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

package/src/assets/images/index.ts

@@ -151,6 +151,7 @@ import TreesCrop2 from './trees-crop2.png'
 import VideoIcon from './video-icon.svg'
 import VideoPlay from './video-play.svg'
 import VioletFolder from './violet-folder.svg'
+import Wallet from './wallet.svg'
 import Warning from './warning.svg'
 import Warranty from './warranty.svg'
 import WellDone from './well-done.png'
@@ -317,6 +318,7 @@ export {
   VideoIcon,
   VideoPlay,
   VioletFolder,
+  Wallet,
   Warning,
   Warranty,
   WellDone,

package/src/assets/images/wallet.svg

@@ -0,0 +1,18 @@
+<svg id="Grupo_22869" data-name="Grupo 22869" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.199" height="39.708" viewBox="0 0 35.199 39.708">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_26646" data-name="Retângulo 26646" width="35.199" height="39.708" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_22868" data-name="Grupo 22868" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Caminho_18397" data-name="Caminho 18397" d="M0,39.93a2.882,2.882,0,0,0,2.882,2.878h.53V65.725h-.53A2.883,2.883,0,0,1,0,62.844Z" transform="translate(0 -26.017)" fill="#323954"/>
+    <path id="Caminho_18398" data-name="Caminho 18398" d="M76.372,66.9v8.474H67.431a4.237,4.237,0,1,1,0-8.474Zm-6.363,4.237a1.594,1.594,0,1,0-1.6,1.592,1.593,1.593,0,0,0,1.6-1.592" transform="translate(-41.172 -43.589)" fill="#e24c5d"/>
+    <path id="Caminho_18399" data-name="Caminho 18399" d="M75.2,74.49a1.592,1.592,0,1,1-1.592,1.592A1.593,1.593,0,0,1,75.2,74.49" transform="translate(-47.961 -48.535)" fill="#f6cf76"/>
+    <path id="Caminho_18400" data-name="Caminho 18400" d="M35.463,48.19h6.115v6.519H32.637a4.237,4.237,0,1,0,0,8.474h8.941v7.924H9.79V48.19H35.463Z" transform="translate(-6.379 -31.399)" fill="#40566b"/>
+    <path id="Caminho_18401" data-name="Caminho 18401" d="M2.881,31.65A2.883,2.883,0,0,0,0,34.532v0a2.882,2.882,0,0,0,2.882,2.878H7.8L9.39,34.532l1.585-2.882Z" transform="translate(0.001 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18402" data-name="Caminho 18402" d="M86.644,31.65l-1.586,2.882L83.47,37.413h6.115V31.65Z" transform="translate(-54.386 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18403" data-name="Caminho 18403" d="M33.024,3.388l-8.23,14.948h-2.4l1.589-2.882,1.585-2.882,5.617-10.2Z" transform="translate(-14.588 -1.544)" fill="#00c0b7"/>
+    <path id="Caminho_18404" data-name="Caminho 18404" d="M49.757,13.91l-1.589,2.882h-2.4l4.4-7.99-10.8-5.944L31.691,16.791h-2.4L37.52,1.843,38.534,0,53.022,7.976l-1.679,3.052Z" transform="translate(-19.084 0)" fill="#00a1aa"/>
+    <path id="Caminho_18405" data-name="Caminho 18405" d="M54.65,14.145l-4.4,7.99H36.179L43.852,8.2Z" transform="translate(-23.573 -5.343)" fill="#00c0b7"/>
+  </g>
+</svg>

package/src/components/badge/CustomBadge.tsx

@@ -1,10 +1,11 @@
-import { Center } from '@chakra-ui/react'
+import { Center, CenterProps } from '@chakra-ui/react'
 
 export const CustomBadge = ({
   bg = 'neutral.white',
   color = 'neutral.white',
   label = '',
-}) => {
+  ...props
+}: CenterProps & { label?: string }) => {
   return (
     <Center
       bg={bg}
@@ -15,6 +16,7 @@ export const CustomBadge = ({
       px="2"
       rounded="md"
       textTransform="uppercase"
+      {...props}
     >
       {label}
     </Center>

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

@@ -3,7 +3,7 @@ import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
 import { Divider } from '@chakra-ui/react'
 
-export const BackendAlert = ({ category, form }: BackendAlertI) => {
+export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
   const alert = form?.find((item) => item.type === 'alert')
@@ -13,7 +13,9 @@ export const BackendAlert = ({ category, form }: BackendAlertI) => {
       (tab) =>
         ({
           label: tab.name,
-          component: <AlertFields fields={tab.children ?? []} />,
+          component: (
+            <AlertFields fields={tab.children ?? []} callback={callback} />
+          ),
         } as TabI)
     ) ?? []
 

package/src/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.tsx

@@ -1,11 +1,18 @@
 import { FieldTypesI, IconTypes } from '@/interfaces'
-import { Box, Stack, Text } from '@chakra-ui/react'
-import { FilterSize, SearchField, VideoDetail } from '@/components'
+import { Stack, Text } from '@chakra-ui/react'
+import {
+  FilterSize,
+  HireInfo,
+  HireService,
+  PurchaseProduct,
+  SearchField,
+  VideoDetail,
+} from '@/components'
 import { fieldIcons } from '@/helpers'
 
 export const AlertFields = ({ fields, callback }: FieldTypesI) => {
   return (
-    <Stack spacing="base" p="base">
+    <Stack spacing="1" p="base">
       {fields?.map((field) => {
         const { id, type, value, icon } = field
         const mappedIcon = icon && (fieldIcons[icon] as IconTypes)
@@ -28,6 +35,12 @@ export const AlertFields = ({ fields, callback }: FieldTypesI) => {
             return <FilterSize {...field} key={id} icon={mappedIcon} />
           case 'search':
             return <SearchField {...field} key={id} callback={callback} />
+          case 'purchase-product':
+            return <PurchaseProduct {...field} key={id} callback={callback} />
+          case 'hire-info':
+            return <HireInfo {...field} key={id} icon={mappedIcon} />
+          case 'hire-service':
+            return <HireService {...field} key={id} callback={callback} />
           default:
             return null
         }

package/src/components/homeAssistant/monitorAlerts/alertDetails/HireInfo.tsx

@@ -0,0 +1,11 @@
+import { ReportI } from '@/interfaces'
+import { Flex, Image, Text } from '@chakra-ui/react'
+
+export const HireInfo = ({ name, icon, value }: ReportI) => {
+  return (
+    <Flex bg="lightBlue.2" gap="base" p="base" mx="-base">
+      <Image boxSize="40px" src={icon} alt={name} />
+      <Text>{value}</Text>
+    </Flex>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/HireService.tsx

@@ -0,0 +1,92 @@
+import { CustomBadge, Plus, Calendar } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+import {
+  AspectRatio,
+  Box,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Text,
+} from '@chakra-ui/react'
+
+export const HireService = ({
+  description,
+  name,
+  label,
+  icon,
+  comments,
+  value,
+  callback,
+  children,
+  ...rest
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const ctaIcon = {
+    plus: <Plus stroke={colors.blue[3]} />,
+    calendar: <Calendar stroke={colors.blue[3]} />,
+  }
+  return (
+    <Container p="base" position="relative" boxShadow="md">
+      <CustomBadge
+        label={label}
+        bg="#77C100"
+        position="absolute"
+        top="2"
+        left="-1"
+        zIndex="3"
+      />
+      <Flex gap="base" ml="10" align="center">
+        <Image src={icon} alt={name} objectFit="contain" w="70px" h="70px" />
+        <Flex align="end" justify="space-between" w="100%">
+          <Box>
+            <Text
+              fontWeight="semibold"
+              fontSize="sm"
+              noOfLines={2}
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {name}
+            </Text>
+            <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+              {description}
+            </Text>
+            <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+              {comments}
+            </Text>
+            <Text
+              fontSize="sm"
+              fontFamily="secondary"
+              color="blue.2"
+              lineHeight="1.2"
+            >
+              {value}
+            </Text>
+          </Box>
+          <Flex gap="2">
+            {children?.map((child) => {
+              const { id, icon, label = '' } = child
+              return (
+                <IconButton
+                  key={id}
+                  w="2rem"
+                  h="2rem"
+                  aria-label={label}
+                  variant="iconOutlined"
+                  icon={ctaIcon[icon as keyof typeof ctaIcon] || <Plus />}
+                  onClick={() =>
+                    callback?.({
+                      ...child,
+                      value: String(child.value),
+                    })
+                  }
+                />
+              )
+            })}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Container>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/PurchaseProduct.tsx

@@ -0,0 +1,75 @@
+import { CustomBadge, Plus } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+import {
+  AspectRatio,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+
+export const PurchaseProduct = ({
+  name,
+  label,
+  icon,
+  comments,
+  value,
+  callback,
+  ...rest
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const bgs = {
+    best: '#232669',
+    better: '#424CBF',
+    good: '#5C81C7',
+  }
+  const bg = bgs[(label?.toLowerCase() as keyof typeof bgs) ?? 'best']
+  return (
+    <Container p="base" position="relative" boxShadow="md">
+      <CustomBadge
+        label={label}
+        bg={bg}
+        position="absolute"
+        top="2"
+        left="-1"
+        zIndex="3"
+      />
+      <Flex gap="base" ml="6">
+        <Image src={icon} alt={name} objectFit="contain" w="70px" h="70px" />
+        <Stack spacing="0">
+          <Text
+            fontWeight="semibold"
+            fontSize="sm"
+            noOfLines={2}
+            overflow="hidden"
+            textOverflow="ellipsis"
+          >
+            {name}
+          </Text>
+          <Flex alignSelf="end" gap="base" align="end">
+            <Stack spacing="0" align="end">
+              <Text fontSize="xs" fontFamily="secondary" color="red">
+                {comments}
+              </Text>
+              <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
+                {value}
+              </Text>
+            </Stack>
+            <IconButton
+              w="2rem"
+              h="2rem"
+              aria-label="Add product"
+              variant="iconOutlined"
+              icon={<Plus size={20} stroke={colors.blue['3']} />}
+              onClick={() =>
+                callback?.({ name, icon, value: String(value), ...rest })
+              }
+            />
+          </Flex>
+        </Stack>
+      </Flex>
+    </Container>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/VideoDetail.tsx

@@ -3,7 +3,7 @@ import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react'
 
 export const VideoDetail = ({ name, label, link, description }: ReportI) => {
   return (
-    <Container p="base">
+    <Container p="base" boxShadow="md">
       <Flex gap="base">
         <AspectRatio w="140px" ratio={16 / 9}>
           <iframe title={name} src={link} allowFullScreen />

package/src/components/homeAssistant/monitorAlerts/alertDetails/index.ts

@@ -2,6 +2,9 @@ export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
 export * from './FilterSize'
+export * from './HireInfo'
+export * from './HireService'
+export * from './PurchaseProduct'
 export * from './SearchField'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'

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

@@ -58,6 +58,7 @@ import {
   AAWeed,
   AApest,
   FilterSize,
+  Wallet,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -108,6 +109,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   target: Target,
   title: CircleFace,
   company: Company2,
+  wallet: Wallet,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
   'sh-house': HouseWashing,

package/src/index.ts

@@ -18,6 +18,7 @@ export {
   AppBar,
   AssignableReceipts,
   BackHeader,
+  BackendAlert,
   BarDivider,
   CancelAccount,
   CatalogPopup,

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

@@ -106,6 +106,7 @@ export type IconTypes =
   | 'target'
   | 'title'
   | 'company'
+  | 'wallet'
   | UIIconTypes
 
 export type UIIconTypes =
@@ -123,6 +124,7 @@ export type UIIconTypes =
   | 'aa-dressing'
   | 'aa-pest'
   | 'filter-size'
+  | string
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

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

@@ -4,7 +4,13 @@ export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export type AlertFieldType = 'alert' | 'search'
+export type AlertFieldType =
+  | 'alert'
+  | 'search'
+  | 'purchase-product'
+  | 'hire-info'
+  | 'hire-service'
+  | 'hire-service-cta'
 
 export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory

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

@@ -945,6 +945,180 @@ export const alertFieldsMock: ReportI[] = [
           },
         ],
       },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Purchase',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'purchase',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Allergen Defense Furnace AC Air Filter 1000 MPR',
+            label: 'best',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT50sebT9p-twQB-DdM2tlRo12In8F09QCsmg&s',
+            comments: 'Save 20% off Retail',
+            value: '$22.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Smart Allergen Bacteria & Virus Furnace AC Air Filter MPR 1500',
+            label: 'better',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbFpjG3kybZDb6psqPIlQSoXgp9OjOR672kg&s',
+            comments: 'Save 28% off Retail',
+            value: '$16.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ 700 MPR Dust Pollen and Pet Dander Electrostatic Air Filter',
+            label: 'good',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7j1KYfPZqPnFmTgyx7b9pp78N6RForQfZFQ&s',
+            comments: 'Save 24% off Retail',
+            value: '$10.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Hire out',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.image.urlPicsumPhotos(),
+        type: 'hire-out',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            icon: 'wallet',
+            comments: '',
+            value:
+              'Average cost for this service range from $100-125 in your area, including filter.',
+            type: 'hire-info',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Bobs Heating & Cooling',
+            label: 'match',
+            description: 'Jerry Marks',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUXEpc3FdoRVmQoYvmAttMwG2dzvBz49oGg&s',
+            comments: '512-650-3030',
+            value: 'JerryM@BobsHTC.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Bobs Heating & Cooling - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Bobs Heating & Cooling - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Sears Home Services',
+            label: 'match',
+            description: 'Mark Jones',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJU3pPD1SFxFnAuaOkoHR36lcVNmoP39USqA&s',
+            comments: '512-354-6584',
+            value: 'MarkJones@searssvc.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Sears Home Services - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Sears Home Services - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Airco Mechanical',
+            label: 'match',
+            description: 'Chris Rodriquez',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWZ_hk6-7mpzQG2ZSQTu0XV2FiMF4AYkT4Wg&s',
+            comments: '512-888-5454',
+            value: 'ChrisR@airco.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Airco Mechanical - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Airco Mechanical - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 ]