@homefile/components-v2 1.4.2 → 1.6.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, 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, 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: 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: 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/contacts/ContactsContent.stories.d.ts

@@ -2,13 +2,4 @@ import { Meta } from '@storybook/react';
 import { ContactsContentI } from '../../interfaces';
 declare const _default: Meta<ContactsContentI>;
 export default _default;
-export declare const ContactsContentComponent: {
-    (args: ContactsContentI): import("react/jsx-runtime").JSX.Element;
-    args: {
-        contacts: import("../../interfaces").InfoContactCardI[];
-        menuItems: {
-            label: string;
-            handleClick: import("@storybook/addon-actions").HandlerFunction;
-        }[];
-    };
-};
+export declare const ContactsContentComponent: (args: ContactsContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/contacts/ContactsContent.stories.js

@@ -1,20 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ContactsContent, RightPanel } from '../../components';
-import { ContactsMock } from '../../mocks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactsContent, RightPanel, ShareContactsContent } from '../../components';
+import { ContactsMock, ContactsMockCompleted, menuMock } from '../../mocks';
+import { Fragment, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 export default {
     title: 'Components/Contacts',
     component: ContactsContent,
+    args: {
+        contacts: ContactsMock,
+        menuItems: menuMock,
+    },
 };
 export const ContactsContentComponent = (args) => {
-    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ContactsContent, Object.assign({}, args)) }));
-};
-ContactsContentComponent.args = {
-    contacts: ContactsMock,
-    menuItems: [
-        {
-            label: 'Edit',
-            handleClick: action('Edit'),
-        },
-    ],
+    const [sharePanel, setSharePanel] = useState({
+        contacts: [],
+        openSharePanel: false,
+    });
+    const [loading, setLoading] = useState(false);
+    const [emailsToShare, setEmailsToShare] = useState([]);
+    const handleToggleSharePanel = () => {
+        setSharePanel(Object.assign(Object.assign({}, sharePanel), { openSharePanel: !sharePanel.openSharePanel }));
+    };
+    const handleSetContacts = (contacts) => {
+        setSharePanel(Object.assign(Object.assign({}, sharePanel), { openSharePanel: true, contacts }));
+    };
+    const handleShareWithList = (contact) => {
+        action('onDropdownSelect')(contact);
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+            setEmailsToShare([...emailsToShare, contact.email]);
+        }, 1000);
+    };
+    const handleSearch = (email) => {
+        action('onContactSearch')(email);
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+            setEmailsToShare([...emailsToShare, email]);
+        }, 1000);
+    };
+    const handleOnRemoveContact = (email) => {
+        setEmailsToShare(emailsToShare.filter((e) => e !== email));
+    };
+    return (_jsxs(Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ContactsContent, Object.assign({}, args, { onShareContacts: handleSetContacts })) }), _jsx(RightPanel, { isOpen: sharePanel.openSharePanel, onClose: handleToggleSharePanel, children: _jsx(ShareContactsContent, { contacts: sharePanel.contacts, homefileContacts: ContactsMockCompleted, onClose: handleToggleSharePanel, onShare: action('onShare'), isLoading: loading, shareWithList: emailsToShare, onContactSearch: handleSearch, onDropdownSelect: handleShareWithList, onRemoveContact: handleOnRemoveContact }) })] }));
 };

package/dist/stories/homeAssistant/HomeMonitor.stories.d.ts

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

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HomeMonitor, HomeMonitorSteps, MonitorAlerts, Notifications, } from '../../components';
+import { Box, Flex, Stack } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+export default {
+    title: 'Components/HomeAssistant',
+    component: HomeMonitor,
+    decorators: [
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '669px'], h: "477px", children: _jsx(Story, {}) })),
+    ],
+};
+export const HomeMonitorComponent = () => {
+    const [alertId, setAlertId] = useState('smoke-detector-battery');
+    const handleAlertClick = (step) => {
+        setAlertId(stepAlerts[step]);
+        action('onStepClick')(step);
+    };
+    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(MonitorAlerts, { alertId: alertId }), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { stepsWithAlerts: [2, 3, 5], onStepClick: handleAlertClick })] }) }));
+};
+const stepAlerts = {
+    2: 'smoke-detector-expired',
+    3: 'change-air-filter',
+    5: 'smoke-detector-battery',
+};

package/dist/stories/homeAssistant/monitorAlerts/HomeAssistant.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { BaseAlertCardI } from '../../../interfaces';
+declare const _default: Meta<BaseAlertCardI>;
+export default _default;
+export declare const BaseAlertCardComponent: (args: BaseAlertCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/monitorAlerts/HomeAssistant.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseAlertCard, SmokeDetectorBattery } from '../../../components';
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { Battery } from '../../../assets/images';
+export default {
+    title: 'Components/HomeAssistant/MonitorAlerts',
+    component: BaseAlertCard,
+    args: {
+        onClose: action('onClose'),
+        description: 'Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.',
+        icon: Battery,
+        title: 'Check the batteries in your Smoke detectors.',
+        children: _jsx(SmokeDetectorBattery, {}),
+    },
+    decorators: [
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '440px'], h: "477px", children: _jsx(Story, {}) })),
+    ],
+};
+export const BaseAlertCardComponent = (args) => {
+    return _jsx(BaseAlertCard, Object.assign({}, args));
+};

package/dist/theme/colors.d.ts

@@ -49,6 +49,7 @@ export declare const colors: {
         8: string;
         9: string;
         10: string;
+        11: string;
     };
     blue: {
         1: string;
@@ -60,6 +61,8 @@ export declare const colors: {
         7: string;
         8: string;
         9: string;
+        10: string;
+        11: string;
     };
     lightGreen: {
         1: string;
@@ -111,4 +114,5 @@ export declare const colors: {
     };
     skyGradient: string;
     overlay: string;
+    overlayWhite: string;
 };

package/dist/theme/colors.js

@@ -49,6 +49,7 @@ export const colors = {
         8: '#90DAF7',
         9: '#84BAE2',
         10: '#cff1fc',
+        11: '#99AEB4',
     },
     blue: {
         1: '#3E9FDB',
@@ -60,6 +61,8 @@ export const colors = {
         7: '#3770DB',
         8: '#1E6388',
         9: '#558AB1',
+        10: '#232669',
+        11: '#424CBF',
     },
     lightGreen: {
         1: '#F0F8F0',
@@ -111,4 +114,5 @@ export const colors = {
     },
     skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
     overlay: '#00000040',
+    overlayWhite: '#FFFFFF80',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -64,6 +64,7 @@
     "@fontsource/poppins": "^5.0.14",
     "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "@hookform/resolvers": "^3.3.1",
+    "@rive-app/react-canvas": "^4.14.5",
     "axios": "^1.7.2",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.6",

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

@@ -0,0 +1,3 @@
+import SmokeDetectroExpiredImage from './smoke-detector-expired.jpg'
+
+export { SmokeDetectroExpiredImage }

package/src/assets/images/battery.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.027" height="44.459" viewBox="0 0 26.027 44.459">
+  <g id="Group_22444" data-name="Group 22444" transform="translate(-6573.237 14695.079)">
+    <g id="Group_22328" data-name="Group 22328" transform="translate(-838.979)">
+      <rect id="Rectangle_25697" data-name="Rectangle 25697" width="4.116" height="16.135" transform="translate(7417.163 -14690.963) rotate(-90)" fill="#969696"/>
+      <path id="Path_16018" data-name="Path 16018" d="M0,0V26.027H40.343V0Z" transform="translate(7412.217 -14650.62) rotate(-90)" fill="#696969"/>
+    </g>
+    <path id="Path_16020" data-name="Path 16020" d="M0,16.366H8.761L4.507,28.283,16.514,11.9H7.757L12.516,0Z" transform="translate(6577.994 -14685.009)" fill="#ffbd27"/>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -3,6 +3,7 @@ import AlertDeletePurple from './alert-delete-purple.svg'
 import Arrow from './arrow.svg'
 import Batery from './batery.svg'
 import Bathroom from './bathroom.svg'
+import Battery from './battery.svg'
 import Battery2 from './battery2.svg'
 import Bedroom from './bedroom.svg'
 import BgBlue from './bg-blue.png'
@@ -146,6 +147,7 @@ import Warranty from './warranty.svg'
 import WellDone from './well-done.png'
 import WholeHome from './whole-home.svg'
 import Wind from './wind.svg'
+import WindWhite from './wind-white.svg'
 import Wizard from './wizard.svg'
 import WizardDetailed from './wizard-detailed.svg'
 import WizardQuick from './wizard-quick.svg'
@@ -158,6 +160,7 @@ export {
   Arrow,
   Batery,
   Bathroom,
+  Battery,
   Battery2,
   Bedroom,
   BgBlue,
@@ -301,6 +304,7 @@ export {
   WellDone,
   WholeHome,
   Wind,
+  WindWhite,
   Wizard,
   WizardDetailed,
   WizardQuick,
@@ -308,6 +312,7 @@ export {
   YellowFolderUnshared,
 }
 
+export * from './alerts'
 export * from './appliances'
 export * from './clouds-animation'
 export * from './form'

package/src/assets/images/wind-white.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.666" height="29.146" viewBox="0 0 28.666 29.146">
+  <g id="Group_21361" data-name="Group 21361" transform="translate(-2367.248 -359.109)">
+    <path id="Path_15541" data-name="Path 15541" d="M13.425,10.969H4.109V8.278h9.316a2.794,2.794,0,1,0-2.794-2.794H7.941a5.484,5.484,0,1,1,5.484,5.484" transform="translate(2365.205 359.109)" fill="#fff"/>
+    <path id="Path_15542" data-name="Path 15542" d="M20.261,45.125a5.49,5.49,0,0,1-5.484-5.484h2.691a2.794,2.794,0,1,0,2.794-2.794H4.116v-2.69H20.261a5.484,5.484,0,0,1,0,10.969" transform="translate(2365.202 343.13)" fill="#fff"/>
+    <path id="Path_15543" data-name="Path 15543" d="M23.182,21.257H0V18.566H23.182a2.794,2.794,0,1,0-2.794-2.794H17.7a5.484,5.484,0,1,1,5.484,5.484" transform="translate(2367.248 353.995)" fill="#fff"/>
+  </g>
+</svg>

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

@@ -104,11 +104,13 @@
     "continue": "Continue",
     "close": "Close",
     "done": "Done",
+    "delete": "Delete",
     "forward": "Forward",
     "next": "Next",
     "previous": "Previous",
     "save": "Save",
     "send": "Send",
+    "share": "Share",
     "skip": "Skip for now",
     "saveStep": "Save Step"
   },
@@ -148,12 +150,20 @@
     "error": "Email should be from a valid Homefile account",
     "homeAddress": "Home Address",
     "notes": "Notes",
+    "sendContact": "You’ve selected to send contact information to",
     "shareContact": "Share Contact",
+    "shareWithEmail": "Share with someone via email",
+    "shareWithSMS": "Share with someone via text/SMS",
+    "shareWithSocial": "Share with your social account",
+    "shareWithHomefile": "Shared with a Homefile user(s)",
     "permissions": "Permissions",
     "placeholders": {
-      "email": "Enter Email"
+      "searchContact": "Search for a contact by email",
+      "email": "Enter Email",
+      "sms": "Enter Area Code + Number"
     },
     "rating": "Homeowner Rating",
+    "recipient": "recipient",
     "title": "Contacts"
   },
   "daysOfWeek": {
@@ -340,7 +350,64 @@
     "updated": "Updated"
   },
   "homeAssistant": {
+    "alerts": {
+      "airFilter": {
+        "description": "HEPA stands for High-Efficiency Particulate Air. HEPA filters catch really tiny particles, as small as 0.3 micrometers. They’re used in air purifiers, vacuum cleaners, and HVAC systems to get rid of things like allergens, dust, and pet dander, making the air cleaner and healthier.",
+        "main": {
+          "description": "Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.",
+          "title": "Time to change your heating & cooling air filter."
+        },
+        "bestBadge": "Best",
+        "betterBadge": "Better",
+        "title": "Homefile recommends 2 HEPA filter grades:",
+        "best": {
+          "description": "Standard in many places, these filters capture 99.97% of tiny particles. They are the go-to choice for homes and businesses, ensuring the air is clean and healthy. True HEPA filters are like the dependable players in the indoor air quality game.",
+          "title": "HEPA (Grade H)"
+        },
+        "better": {
+          "description": "These filters catch about 99% of particles. They are cost-effective and work well for everyday use, like in affordable air purifiers and vacuum cleaners. Think of them as the reliable team members suitable for common spaces.",
+          "title": "HEPA Type (Grade E)"
+        }
+      },
+      "smokeDetectorBattery": {
+        "main": {
+          "description": "Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.",
+          "title": "Check the batteries in your Smoke detectors."
+        },
+        "bestBadge": "Best",
+        "betterBadge": "Better",
+        "title": "Which batteries are best to use?",
+        "best": {
+          "description": "Lithium batteries last around 5 years (some lithium cells are also rechargeable, and when used in a mains-powered alarm may last for the entire functional lifespan of the alarm).",
+          "title": "Lithium Batteries"
+        },
+        "better": {
+          "description": "9V alkaline batteries last 12-18 months.",
+          "title": "9 Volt Batteries"
+        }
+      },
+      "smokeDetectorExpired": {
+        "description": "After about 5 years, alarm sensors can become less sensitive to smoke particles. If your alarm is older than 5 years and appears to be working, we still recommend replacing it so you have the best possible protection for your home.",
+        "main": {
+          "description": "Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.",
+          "title": "Your smoke detectors could be expired."
+        },
+        "title": "How to check if your detectors are expired?",
+        "check1": "Remove the alarm from the wall or ceiling.",
+        "check2": "Look at the back of the alarm for the date of manufacture.",
+        "check3": "If older than 5 years, replace."
+      }
+    },
     "details": "Provide details about your home’s",
+    "homeMonitor": "Home Monitor",
+    "monitorAlerts": {
+      "collapse": "Collapse Alert",
+      "homeAction": "Home Action",
+      "maintenance": "Maintenance Monitor",
+      "protection": "Protection Monitor",
+      "review": "Review Alert"
+    },
+    "notifications": "Notification coming",
     "selectAppliances": "Select the appliances you have in your home:",
     "steps": {
       "appliances": "Appliances",

package/src/components/animations/HomieAnimation.tsx

@@ -0,0 +1,12 @@
+import { useRive } from '@rive-app/react-canvas'
+const url = process.env.REACT_APP_RIVE_ASSETS
+
+export const HomieAnimation = () => {
+  const { RiveComponent } = useRive({
+    src: `${url}/homie-v2.riv`,
+    stateMachines: 'State Machine 1',
+    autoplay: true,
+  })
+
+  return <RiveComponent />
+}

package/src/components/animations/index.ts

@@ -1 +1,2 @@
 export * from './CloudsAnimation'
+export * from './HomieAnimation'

package/src/components/badge/CustomBadge.tsx

@@ -0,0 +1,22 @@
+import { Center } from '@chakra-ui/react'
+
+export const CustomBadge = ({
+  bg = 'neutral.white',
+  color = 'neutral.white',
+  label = '',
+}) => {
+  return (
+    <Center
+      bg={bg}
+      fontSize="xxs"
+      color={color}
+      fontWeight="bold"
+      py="1"
+      px="2"
+      rounded="md"
+      textTransform="uppercase"
+    >
+      {label}
+    </Center>
+  )
+}

package/src/components/badge/index.ts

@@ -1,4 +1,5 @@
-export * from "./LetterBadge"
-export * from "./NewBadge"
-export * from "./NumberBadge"
-export * from "./TextBadge"
+export * from './CustomBadge'
+export * from './LetterBadge'
+export * from './NewBadge'
+export * from './NumberBadge'
+export * from './TextBadge'

package/src/components/contacts/ContactCard.tsx

@@ -13,7 +13,8 @@ export const ContactCard = ({
   index,
   menuItems,
   onClick,
-  onShare,
+  showAvatar,
+  showHeader = true,
 }: ContactCardI) => {
   const hasOnClick = typeof onClick === 'function'
   return (
@@ -23,18 +24,15 @@ export const ContactCard = ({
       onClick={() => onClick?.({ ...contact, index })}
       transition="background-color 0.3s"
       _hover={{
-        bg: hasOnClick ? 'lightGreen.1' : 'transparent',
+        bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
       }}
       cursor={hasOnClick ? 'pointer' : 'default'}
     >
       <Stack pb="base" pt="1" px="base" spacing="base">
-        <ContactCardHeader
-          apiError={apiError}
-          contact={contact}
-          menuItems={menuItems}
-          onShare={onShare}
-        />
-        <CardBody {...{ contact, index }} />
+        {showHeader && (
+          <ContactCardHeader apiError={apiError} contact={contact} />
+        )}
+        <CardBody {...{ contact, index, showAvatar }} />
       </Stack>
     </Container>
   )
@@ -43,10 +41,11 @@ export const ContactCard = ({
 const CardBody = ({
   contact,
   index,
-}: Pick<ContactCardI, 'contact' | 'index'>) => {
+  showAvatar,
+}: Pick<ContactCardI, 'contact' | 'index' | 'showAvatar'>) => {
   return (
     <Flex justify="space-between" align="stretch" gap="base">
-      <ContactCardInfo {...{ ...contact, index }} />
+      <ContactCardInfo {...{ ...contact, index, showAvatar }} />
       <Box borderLeft={`1px solid ${colors.lightBlue[1]}`} w="45%" pl="base">
         <ContactCardAddress {...contact} />
       </Box>

package/src/components/contacts/ContactCardHeader.tsx

@@ -1,11 +1,14 @@
 import { t } from 'i18next'
 import { Flex, Image, Text } from '@chakra-ui/react'
 import { Contacts } from '@/assets/images'
-import { ContactHeaderMenu } from '@/components'
+import { IconMenu, MoreHorizontal } from '@/components'
 import { ContactCardHeaderI } from '@/interfaces'
 
-export const ContactCardHeader = (props: ContactCardHeaderI) => {
-  const { category, title } = props.contact
+export const ContactCardHeader = ({
+  contact,
+  menuItems = [],
+}: ContactCardHeaderI) => {
+  const { category, title } = contact
   return (
     <Flex align="center" justify="space-between">
       <Flex align="center" gap="base">
@@ -24,7 +27,12 @@ export const ContactCardHeader = (props: ContactCardHeaderI) => {
           <Text fontSize="xs">{title.toUpperCase()}</Text>
         </Flex>
       </Flex>
-      <ContactHeaderMenu {...props} />
+      <IconMenu
+        icon={<MoreHorizontal size={32} />}
+        itemForm={contact}
+        menuItems={menuItems}
+        disabled={menuItems.length < 1}
+      />
     </Flex>
   )
 }

package/src/components/contacts/ContactCardInfo.tsx

@@ -9,18 +9,21 @@ export const ContactCardInfo = ({
   index,
   lastName,
   phone,
+  showAvatar = true,
 }: ContactCardInfoI) => {
   const name = `${firstName} ${lastName}`.trim() || company
   return (
     <Flex gap="base" minH="50px" align="center">
-      <Avatar
-        w="40px"
-        h="40px"
-        bg={randomColor(index)}
-        fontWeight="bold"
-        color="neutral.white"
-        name={name}
-      />
+      {showAvatar && (
+        <Avatar
+          w="40px"
+          h="40px"
+          bg={randomColor(index)}
+          fontWeight="bold"
+          color="neutral.white"
+          name={name}
+        />
+      )}
       <Stack w="full" spacing="0.5">
         <Text fontWeight="bold">{name}</Text>
         <Box>