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

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

@@ -3,10 +3,23 @@ import { action } from '@storybook/addon-actions';
 import { Box } from '@chakra-ui/react';
 import { DynamicForm } from '../../../components';
 import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '../../../mocks';
+import { faker } from '@faker-js/faker';
 export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
     args: {
+        callback: action('callback'),
+        displayImages: [
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+            faker.image.urlPicsumPhotos(),
+        ],
+        onUpload: action('onUpload'),
         menuItems: menuMock,
         socialLinks: socialLinksMock,
         websiteUrl: 'http://www.audreyscheckdesign.com',

package/dist/stories/homeItems/ViewingHomeItem.stories.d.ts

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

package/dist/stories/homeItems/ViewingHomeItem.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RightPanel, ViewingHomeItemPanel } from '../../components';
+import { action } from '@storybook/addon-actions';
+import { viewingHomeItemMock } from '../../mocks';
+export default {
+    title: 'Components/HomeItems',
+    component: ViewingHomeItemPanel,
+    args: {
+        form: viewingHomeItemMock,
+        onEdit: action('onEdit'),
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),
+    ],
+};
+export const ViewingHomeItemPanelComponent = (args) => (_jsx(ViewingHomeItemPanel, Object.assign({}, args)));

package/dist/stories/{partner/adminTiles/InboxTile.stories.d.ts → inboxTile/inboxTile.stories.d.ts}

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

package/dist/stories/inboxTile/inboxTile.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { InboxForwardBanner, InboxTile } from '../../components';
+import { Message, Register } from '../../assets/images';
+import { menuMock } from '../../mocks';
+export default {
+    title: 'Components/Inbox',
+    component: InboxTile,
+    args: {
+        banner: _jsx(InboxForwardBanner, {}),
+        boxes: [
+            {
+                image: Register,
+                name: 'Receipts',
+                newMessages: 1,
+                totalMessages: 37,
+            },
+            {
+                image: Message,
+                name: 'Messages',
+                totalMessages: 2,
+            },
+        ],
+        menuItems: menuMock,
+    },
+};
+export const InboxTileComponent = (args) => {
+    return (_jsx(Box, { p: "base", w: ['full', '350px'], h: "400px", children: _jsx(InboxTile, Object.assign({}, args)) }));
+};

package/dist/stories/notifications/NotificationsPanel.stories.d.ts

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

package/dist/stories/notifications/NotificationsPanel.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RightPanel, NotificationsPanel } from '../../components';
+import { action } from '@storybook/addon-actions';
+import { notificationsMock } from '../../mocks';
+export default {
+    title: 'Components/Notifications',
+    component: NotificationsPanel,
+    args: {
+        notifications: notificationsMock,
+        onClose: action('onClose'),
+        onDismiss: action('onDismiss'),
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), size: "sm", children: _jsx(Story, {}) })),
+    ],
+};
+export const NotificationsPanelComponent = (args) => (_jsx(NotificationsPanel, Object.assign({}, args)));

package/dist/stories/valueMonitor/ValueMonitor.stories.d.ts

@@ -8,7 +8,6 @@ export declare const ValueMonitorComponent: {
         balance: string;
         menuItems: never[];
         totalValue: number;
-        year: number;
         yearValue: number;
     };
 };

package/dist/stories/valueMonitor/ValueMonitor.stories.js

@@ -12,6 +12,6 @@ ValueMonitorComponent.args = {
     balance: '+3%',
     menuItems: [],
     totalValue: 200000,
-    year: 2021,
+    // year: 2021,
     yearValue: 50000,
 };

package/dist/theme/colors.d.ts

@@ -37,6 +37,7 @@ export declare const colors: {
         3: string;
         4: string;
         5: string;
+        6: string;
     };
     lightBlue: {
         1: string;

package/dist/theme/colors.js

@@ -37,6 +37,7 @@ export const colors = {
         3: '#DE9E35',
         4: '#F1BB87',
         5: '#F78D69',
+        6: '#FFFCE6',
     },
     lightBlue: {
         1: '#F4F7F8',

package/package.json

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

package/src/assets/images/index.ts

@@ -127,6 +127,7 @@ import SixtyEight from './sixty-eight.svg'
 import SMS from './sms.svg'
 import Social from './social.svg'
 import SolarPanel from './solar-panel.svg'
+import Speaker from './speaker.svg'
 import Sprinkler from './sprinkler.svg'
 import Structure from './structure.svg'
 import Subscription from './subscription.svg'
@@ -285,6 +286,7 @@ export {
   SMS,
   Social,
   SolarPanel,
+  Speaker,
   Sprinkler,
   Structure,
   Subscription,

package/src/assets/images/speaker.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.583" height="23.521" viewBox="0 0 31.583 23.521">
+  <g id="Group_23052" data-name="Group 23052" transform="translate(-2614.222 -2095.171)">
+    <g id="Group_23003" data-name="Group 23003" transform="translate(1755.841 2072.773)">
+      <rect id="Rectangle_2034" data-name="Rectangle 2034" width="4.205" height="0.863" transform="translate(885.758 33.849)" fill="#00c0b7"/>
+      <rect id="Rectangle_2035" data-name="Rectangle 2035" width="4.205" height="0.863" transform="matrix(0.707, -0.707, 0.707, 0.707, 884.549, 29.857)" fill="#00c0b7"/>
+      <rect id="Rectangle_2036" data-name="Rectangle 2036" width="0.863" height="4.205" transform="translate(884.549 38.708) rotate(-45)" fill="#00c0b7"/>
+    </g>
+    <g id="Group_23007" data-name="Group 23007" transform="translate(1755.8 2072.191)">
+      <path id="Path_18016" data-name="Path 18016" d="M24.851,50.454l-.768-.044.03-.451c.016-.236.031-.462.05-.674.268-3.138,1.771-6.043,3.83-7.4l.423.642c-1.87,1.231-3.238,3.91-3.487,6.823-.019.209-.034.429-.049.659Z" transform="translate(851.091 -10.419)" fill="#fff"/>
+      <path id="Path_4022" data-name="Path 4022" d="M5810.5-622.634a1.425,1.425,0,0,1-.474-.084l-5.457-1.9a2.08,2.08,0,0,1-1.318-1.856v-2h1.012v2a1.069,1.069,0,0,0,.641.9l5.458,1.9a.278.278,0,0,0,.234,0,.281.281,0,0,0,.074-.221v-2h1.012v2a1.252,1.252,0,0,1-.5,1.046A1.163,1.163,0,0,1,5810.5-622.634Z" transform="translate(-4939.069 668.243)" fill="#40566b"/>
+      <rect id="Rectangle_2033" data-name="Rectangle 2033" width="3.55" height="6.261" transform="translate(858.421 31.433)" fill="#40566b"/>
+      <path id="Path_4023" data-name="Path 4023" d="M5868.355-682.568v20.354a1.5,1.5,0,0,1-1.4,1.583,1.322,1.322,0,0,1-.99-.463,1.706,1.706,0,0,1-.409-1.12v-20.354a1.5,1.5,0,0,1,1.4-1.583,1.324,1.324,0,0,1,.991.463A1.684,1.684,0,0,1,5868.355-682.568Z" transform="translate(-4985.622 707.13)" fill="#40566b"/>
+      <path id="Path_4024" data-name="Path 4024" d="M5812.487-658.645v.276l-7.832-3.131-7.419-2.964-2.71-1.084v-7.179l17.961-6.843v20.926Z" transform="translate(-4932.554 703.709)" fill="#abe188"/>
+      <path id="Intersection_1" data-name="Intersection 1" d="M10.129,6.4,2.711,3.811,0,2.866V0H17.961V9.128Z" transform="translate(861.972 36.212)" fill="#8dc966" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    </g>
+  </g>
+</svg>

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

@@ -181,7 +181,8 @@
     "message2": "browse"
   },
   "dynamicForm": {
-    "item": "Name this item"
+    "item": "Name this item",
+    "myRating": "My Rating"
   },
   "feedback": {
     "alt": "Feedback sent",
@@ -321,6 +322,7 @@
     "required2": "*Required",
     "return": "Back",
     "search": "Find",
+    "sortBy": "Sort by",
     "street": "Street",
     "number": "Number",
     "submit": "Submit",
@@ -435,6 +437,9 @@
     },
     "viewDetails": "View All"
   },
+  "homeItems": {
+    "title": "Viewing Home Item"
+  },
   "homeHeader": {
     "backBtn": "Return to Launchpad"
   },
@@ -449,10 +454,19 @@
       "unopened": "Unopened"
     }
   },
+  "householdItems": {
+    "headers": {
+      "itemName": "An item name",
+      "placeholder": "Name this item"
+    }
+  },
   "images": {
     "altIcon": "icon",
     "altImage": "image"
   },
+  "inbox": {
+    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to "
+  },
   "launchpad": {
     "menu": {
       "profile": "My Account",
@@ -607,6 +621,24 @@
     "create": "Create Password",
     "title": "Please enter your new password."
   },
+  "notifications": {
+    "status": {
+      "added": "Added",
+      "removed": "Removed",
+      "shared": "Shared",
+      "updated": "Updated"
+    },
+    "types": {
+      "contact": "Contact",
+      "file": "File",
+      "folder": "Folder",
+      "receipt": "Receipt",
+      "user": "User",
+      "tile": "Tile",
+      "payment": "Payment"
+    },
+    "title": "Notifications"
+  },
   "partner": {
     "aphw": {
       "description": "APHW’s home warranty plans and cost cover your major home appliances and systems.",
@@ -859,12 +891,6 @@
     },
     "placeholder": "Insert document name"
   },
-  "householdItems": {
-    "headers": {
-      "itemName": "An item name",
-      "placeholder": "Name this item"
-    }
-  },
   "shareHome": {
     "accountTypes": "Member,Contributor,Manager",
     "btInvite": "Invite",
@@ -957,7 +983,9 @@
     "homeAssistant": "Home AI Assistant",
     "homeCard": "Home card",
     "homeItem": "Home item",
+    "inbox": "Inbox",
     "more": "More options",
+    "notifications": "Notifications",
     "myHomes": "My homes",
     "partner": "Partner",
     "propertyTaxes": "Property taxes",

package/src/components/appBar/ContactList.tsx

@@ -2,11 +2,11 @@ import { t } from 'i18next'
 import { Box, Flex, Img, Tooltip } from '@chakra-ui/react'
 import { Contacts2 as Contact } from '@/assets/images'
 import { NumberBadge } from '@/components'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 import { useWindowDimensions } from '@/hooks'
 import { MOBILE_WIDTH } from '@/utils'
 
-export const ContactList = ({ onClick, total }: PeopleConnectedI) => {
+export const ContactList = ({ onClick, total }: AppBarIconI) => {
   const {
     windowDimensions: { width },
   } = useWindowDimensions()

package/src/components/appBar/NotificationsReminder.tsx

@@ -0,0 +1,49 @@
+import { t } from 'i18next'
+import { Box, Flex, Img, Tooltip } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
+import { Speaker } from '@/assets/images'
+import { NumberBadge } from '@/components'
+import { AppBarIconI } from '@/interfaces'
+import { useWindowDimensions } from '@/hooks'
+import { MOBILE_WIDTH } from '@/utils'
+
+export const NotificationsReminder = ({ onClick, total }: AppBarIconI) => {
+  const {
+    windowDimensions: { width },
+  } = useWindowDimensions()
+  const isMobile = width < MOBILE_WIDTH
+  return (
+    <Tooltip label={t('tooltips.notifications')}>
+      <Box id="notificationsRemember">
+        <Flex gap="1" as="button" onClick={onClick}>
+          <Img
+            src={Speaker}
+            aria-label={t('tooltips.notifications')}
+            h="26px"
+            w="auto"
+          />
+          {!isMobile && (
+            <NumberBadge
+              total={total}
+              background="linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)"
+              backgroundSize={100}
+              animation={`${bgGradient} 6s linear infinite`}
+            />
+          )}
+        </Flex>
+      </Box>
+    </Tooltip>
+  )
+}
+
+const bgGradient = keyframes`
+ 0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`

package/src/components/appBar/PeopleConnected.tsx

@@ -2,11 +2,11 @@ import { t } from 'i18next'
 import { Flex, Img, Tooltip } from '@chakra-ui/react'
 import { PersonMail } from '@/assets/images'
 import { NumberBadge } from '@/components'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 import { useWindowDimensions } from '@/hooks'
 import { MOBILE_WIDTH } from '@/utils'
 
-export const PeopleConnected = ({ onClick, total }: PeopleConnectedI) => {
+export const PeopleConnected = ({ onClick, total }: AppBarIconI) => {
   const {
     windowDimensions: { width },
   } = useWindowDimensions()

package/src/components/appBar/Trash.tsx

@@ -1,12 +1,12 @@
 import { t } from 'i18next'
 import { Flex, Tooltip } from '@chakra-ui/react'
 import { NumberBadge, TrashIcon } from '@/components'
-import { PeopleConnectedI } from '@/interfaces'
+import { AppBarIconI } from '@/interfaces'
 import { colors } from '@/theme/colors'
 import { useWindowDimensions } from '@/hooks'
 import { MOBILE_WIDTH } from '@/utils'
 
-export const Trash = ({ onClick, total }: PeopleConnectedI) => {
+export const Trash = ({ onClick, total }: AppBarIconI) => {
   const {
     windowDimensions: { width },
   } = useWindowDimensions()

package/src/components/appBar/index.ts

@@ -2,9 +2,10 @@ export * from './AppBar'
 export * from './BarDivider'
 export * from './ContactList'
 export * from './HomefileLogo'
+export * from './NotificationsReminder'
 export * from './PeopleConnected'
 export * from './StorageUsed'
 export * from './TourButton'
 export * from './Trash'
 export * from './TutorialsButton'
-export * from './UserProfile'
+export * from './UserProfile'

package/src/components/badge/NumberBadge.tsx

@@ -7,6 +7,7 @@ export const NumberBadge = ({
   px = '1',
   py = '1',
   total,
+  ...props
 }: NumberBadgeI) => {
   const bgColor = bg ?? 'blue.4'
   return (
@@ -17,6 +18,7 @@ export const NumberBadge = ({
       borderRadius="4px"
       h="fit-content"
       minW="1.3rem"
+      {...props}
     >
       <Text fontWeight="semibold" color={color} fontSize="xs" lineHeight="1">
         {total}

package/src/components/customToast/CustomToast.tsx

@@ -1,5 +1,5 @@
 import { t } from 'i18next'
-import { Box, Flex, IconButton, Stat, Text } from '@chakra-ui/react'
+import { Box, Flex, Text } from '@chakra-ui/react'
 import { Close, StatusIllustration } from '@/components'
 import { colors } from '@/theme/colors'
 import { CustomToastI } from '@/interfaces'

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

@@ -24,8 +24,10 @@ import { fieldIcons } from '@/helpers'
 
 export const DynamicForm = ({
   callback,
+  displayImages,
   form: fields,
   menuItems,
+  onRemoveImage,
   onUpload,
   showTitle = true,
   title,
@@ -158,8 +160,10 @@ export const DynamicForm = ({
                     <FileField
                       icon={baseProps.icon}
                       description={description}
+                      onRemove={onRemoveImage}
                       onUpload={(files) => handleFilesUpload({ id, files })}
                       uploading={uploadingFieldId === id}
+                      displayImages={displayImages}
                     />
                   </FieldWithDelete>
                 )

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

@@ -1,18 +1,36 @@
-import { Flex, Image, Stack, Text } from '@chakra-ui/react'
-import { DragDropArea } from '@/components'
+import {
+  AspectRatio,
+  Box,
+  CloseButton,
+  Flex,
+  Grid,
+  IconButton,
+  Image,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { Close, DragDropArea } from '@/components'
 import { useFilesUploader } from '@/hooks'
 import { FileFieldI } from '@/interfaces'
+import { colors } from '@/theme/colors'
 
 export const FileField = ({
   description,
   icon,
+  onRemove,
   onUpload,
   uploading = false,
+  displayImages = [],
 }: FileFieldI) => {
-  const { errorMessage, getInputProps, getRootProps } = useFilesUploader({
-    onUpload,
-    uploading,
-  })
+  const { errorMessage, getInputProps, getRootProps, thumbnails } =
+    useFilesUploader({
+      onUpload,
+      uploading,
+      displayImages,
+    })
+
+  const isStringArray =
+    Array.isArray(thumbnails) && typeof thumbnails[0] === 'string'
   return (
     <Flex gap="base" align="center" flex="auto">
       {icon && <Image h="auto" w="icon.md" src={icon} marginTop="2" />}
@@ -24,6 +42,34 @@ export const FileField = ({
           getRootProps={getRootProps}
           height="85px"
         />
+        <Grid
+          gridTemplateColumns={`repeat(auto-fill, minmax(22px, 1fr))`}
+          gap="base"
+        >
+          {isStringArray &&
+            thumbnails.map((file, index) => (
+              <Box key={file} position="relative">
+                <IconButton
+                  variant="ghost"
+                  aria-label="close"
+                  maxW="fit-content"
+                  onClick={() => onRemove?.(file)}
+                  icon={<Close size={11} stroke={colors.error['2']} />}
+                  disabled={uploading}
+                  position="absolute"
+                  bg="neutral.white"
+                  p="0.5"
+                  borderRadius="full"
+                  top="-2"
+                  right="-2"
+                  zIndex="1"
+                />
+                <AspectRatio maxW="100%" ratio={1}>
+                  <Image src={file} objectFit="cover" alt={`file-${index}`} />
+                </AspectRatio>
+              </Box>
+            ))}
+        </Grid>
       </Stack>
     </Flex>
   )

package/src/components/forms/readOnly/ReadOnlyDynamicForm.tsx

@@ -1,6 +1,7 @@
-import { Box, Stack } from '@chakra-ui/react'
-import { DynamicFormI, IconTypes } from '@/interfaces'
+import { Box } from '@chakra-ui/react'
+import { ReadOnlyDynamicFormI, IconTypes } from '@/interfaces'
 import {
+  ReadOnlyAppliances,
   ReadOnlyDate,
   ReadOnlyGrid,
   ReadOnlyGroup,
@@ -12,7 +13,8 @@ import { fieldIcons } from '@/helpers'
 
 export const ReadOnlyDynamicForm = ({
   form: fields,
-}: Pick<DynamicFormI, 'form'>) => {
+  onEdit = () => {},
+}: ReadOnlyDynamicFormI) => {
   return (
     <Box bg="lightBlue.1">
       {fields?.map((field) => {
@@ -44,6 +46,8 @@ export const ReadOnlyDynamicForm = ({
             return <ReadOnlyGrid key={id} children={children} />
           case 'group':
             return <ReadOnlyGroup key={id} children={children} />
+          case 'appliances':
+            return <ReadOnlyAppliances {...field} key={id} onEdit={onEdit} />
           default:
             return null
         }