@homefile/components-v2 2.4.0 → 2.5.0

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

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

@@ -8,6 +8,7 @@ export default {
     args: {
         form: viewingHomeItemMock,
         onEdit: action('onEdit'),
+        onClick: action('onClick'),
     },
     decorators: [
         (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),

package/package.json

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

package/src/assets/images/book.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.229" height="25.49" viewBox="0 0 36.229 25.49">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_24874" data-name="Rectangle 24874" width="36.229" height="25.49" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_20984" data-name="Group 20984" transform="translate(0 0)">
+    <g id="Group_20983" data-name="Group 20983" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Path_15109" data-name="Path 15109" d="M23.19,0V23.3A2.195,2.195,0,0,0,21,21.1H7.4V0Z" transform="translate(-5.076 0)" fill="#d2edef"/>
+      <path id="Path_15110" data-name="Path 15110" d="M59.866,21.1a2.194,2.194,0,0,0-2.191,2.2V0H73.461V21.1Z" transform="translate(-39.561 0)" fill="#d2edef"/>
+      <path id="Path_15111" data-name="Path 15111" d="M15.919,24.116H2.324V4.392H0V26.311H15.919A2.192,2.192,0,0,0,18.114,28.5V26.311a2.195,2.195,0,0,0-2.195-2.2" transform="translate(0 -3.013)" fill="#e24c5d"/>
+      <path id="Path_15112" data-name="Path 15112" d="M73.461,4.393V24.117H59.866a2.194,2.194,0,0,0-2.191,2.2V28.5a2.191,2.191,0,0,0,2.191-2.192H75.789V4.393Z" transform="translate(-39.561 -3.013)" fill="#cd4160"/>
+      <rect id="Rectangle_24864" data-name="Rectangle 24864" width="5.916" height="0.942" transform="translate(7.209 2.445)" fill="#40566b"/>
+      <rect id="Rectangle_24865" data-name="Rectangle 24865" width="10.4" height="0.942" transform="translate(4.965 7.581)" fill="#40566b"/>
+      <rect id="Rectangle_24866" data-name="Rectangle 24866" width="10.4" height="0.942" transform="translate(4.965 10.636)" fill="#40566b"/>
+      <rect id="Rectangle_24867" data-name="Rectangle 24867" width="10.4" height="0.942" transform="translate(4.965 13.689)" fill="#40566b"/>
+      <rect id="Rectangle_24868" data-name="Rectangle 24868" width="10.4" height="0.942" transform="translate(4.965 16.744)" fill="#40566b"/>
+      <rect id="Rectangle_24869" data-name="Rectangle 24869" width="10.4" height="0.942" transform="translate(20.807 7.581)" fill="#40566b"/>
+      <rect id="Rectangle_24870" data-name="Rectangle 24870" width="10.4" height="0.942" transform="translate(20.807 4.4)" fill="#40566b"/>
+      <rect id="Rectangle_24871" data-name="Rectangle 24871" width="10.4" height="0.942" transform="translate(20.807 10.636)" fill="#40566b"/>
+      <rect id="Rectangle_24872" data-name="Rectangle 24872" width="10.4" height="0.942" transform="translate(20.807 13.689)" fill="#40566b"/>
+      <rect id="Rectangle_24873" data-name="Rectangle 24873" width="10.4" height="0.942" transform="translate(20.807 16.744)" fill="#40566b"/>
+    </g>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -12,6 +12,7 @@ import Billing from './billing.svg'
 import BillingAddress from './billing-address.svg'
 import BlueFolder from './blue-folder.svg'
 import BlueFolderShared from './blue-folder-shared.svg'
+import BookOpened from './book.svg'
 import Box from './box.svg'
 import Building from './building.svg'
 import Calc from './calc.svg'
@@ -173,6 +174,7 @@ export {
   BillingAddress,
   BlueFolder,
   BlueFolderShared,
+  BookOpened,
   Box,
   Building,
   Calc,

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

@@ -6,9 +6,11 @@ export const TileCta = ({ callback, ...props }: TileCtaI) => {
   return (
     <Button
       onClick={() => callback?.({ ...props })}
-      variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
+      variant={type === 'primary-cta' ? 'primary' : 'secondary'}
       fontSize="sm"
-      maxW="full"
+      textTransform="capitalize"
+      px="none"
+      bg={type === 'primary-cta' ? '' : 'neutral.white'}
     >
       {value}
     </Button>

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

@@ -6,6 +6,7 @@ import {
   ReadOnlyGrid,
   ReadOnlyGroup,
   ReadOnlyInput,
+  ReadOnlyNotes,
   ReadOnlyRating,
   ReadOnlyTextArea,
 } from '@/components'
@@ -13,10 +14,11 @@ import { fieldIcons } from '@/helpers'
 
 export const ReadOnlyDynamicForm = ({
   form: fields,
+  onClick,
   onEdit = () => {},
 }: ReadOnlyDynamicFormI) => {
   return (
-    <Box bg="lightBlue.1">
+    <Box bg="lightBlue.1" overflow="scroll">
       {fields?.map((field) => {
         const { children = [], icon, id, name, type, value } = field
         const baseProps = {
@@ -43,11 +45,15 @@ export const ReadOnlyDynamicForm = ({
           case 'textarea':
             return <ReadOnlyTextArea {...baseProps} />
           case 'grid':
-            return <ReadOnlyGrid key={id} children={children} />
+            return (
+              <ReadOnlyGrid key={id} children={children} onClick={onClick} />
+            )
           case 'group':
             return <ReadOnlyGroup key={id} children={children} />
           case 'appliances':
             return <ReadOnlyAppliances {...field} key={id} onEdit={onEdit} />
+          case 'notes':
+            return <ReadOnlyNotes {...field} key={id} />
           default:
             return null
         }

package/src/components/forms/readOnly/fields/ReadOnlyGrid.tsx

@@ -1,9 +1,18 @@
 import { Flex } from '@chakra-ui/react'
 import { IconTypes, ReadOnlyGridI } from '@/interfaces'
-import { ReadOnlyDate, ReadOnlyInput } from '@/components'
+import {
+  ReadOnlyDate,
+  ReadOnlyGuidelines,
+  ReadOnlyInput,
+  ReadOnlyItemRelated,
+} from '@/components'
 import { fieldIcons } from '@/helpers'
 
-export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
+export const ReadOnlyGrid = ({
+  children,
+  onClick,
+  ...props
+}: ReadOnlyGridI) => {
   return (
     <Flex
       align="stretch"
@@ -13,7 +22,7 @@ export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
       p="base"
       {...props}
     >
-      {children?.map(({ id, name, value, type, icon }) => {
+      {children?.map(({ children, id, name, value, type, icon }) => {
         const baseProps = {
           key: `${id}-${name}-${value}-${type}`,
           id,
@@ -34,6 +43,26 @@ export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
             )
           case 'date':
             return <ReadOnlyDate {...baseProps} name={name} p="0" />
+
+          case 'guidelines':
+            return (
+              <ReadOnlyGuidelines
+                key={id}
+                name={name}
+                children={children}
+                onClick={onClick}
+              />
+            )
+
+          case 'item-related':
+            return (
+              <ReadOnlyItemRelated
+                key={id}
+                name={name}
+                children={children}
+                onClick={onClick}
+              />
+            )
           default:
             return null
         }

package/src/components/forms/readOnly/fields/ReadOnlyNotes.tsx

@@ -0,0 +1,16 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyNotes = ({
+  name,
+  value,
+}: Pick<ReportI, 'name' | 'value'>) => {
+  return (
+    <Stack p="base" spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Text fontFamily="secondary">{value}</Text>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -19,7 +19,7 @@ export const ReadOnlyAppliances = ({
   const rating = children?.find(({ type }) => type === 'rating')
   const images = children?.find(({ type }) => type === 'images')
   return (
-    <Stack spacing="base" p="base">
+    <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
       <Flex justify="space-between">
         <Text fontSize="xs" textTransform="uppercase">
           {name}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -0,0 +1,33 @@
+import { Text, Stack, Grid } from '@chakra-ui/react'
+import { HiddenField } from '@/components'
+import { ReadOnlyGuidelinesI } from '@/interfaces'
+import { fieldIcons } from '@/helpers'
+
+export const ReadOnlyGuidelines = ({
+  name,
+  children,
+  onClick,
+}: ReadOnlyGuidelinesI) => {
+  return (
+    <Stack spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+        {children?.map((child) => {
+          const { id, icon, value } = child
+          const btnIcon = icon ? fieldIcons[icon] : ''
+          return (
+            <HiddenField
+              key={id}
+              id={id}
+              icon={btnIcon}
+              name={value as string}
+              onClick={() => onClick?.(id)}
+            />
+          )
+        })}
+      </Grid>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.tsx

@@ -14,6 +14,7 @@ export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
       <SimpleGrid columns={4} spacing="base">
         {images?.map((image) => (
           <Box
+            key={image}
             as="button"
             backgroundImage={image}
             backgroundSize="cover"

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.tsx

@@ -0,0 +1,40 @@
+import { Text, Stack, Grid, Box } from '@chakra-ui/react'
+import { HiddenField } from '@/components'
+import { ReadOnlyGuidelinesI } from '@/interfaces'
+import { fieldIcons } from '@/helpers'
+
+export const ReadOnlyItemRelated = ({
+  name,
+  children,
+  onClick,
+}: ReadOnlyGuidelinesI) => {
+  return (
+    <Box
+      borderLeft="1px solid"
+      borderColor="lightBlue.6"
+      pl="4"
+      marginInlineStart="auto"
+    >
+      <Stack spacing="base">
+        <Text fontSize="xs" textTransform="uppercase">
+          {name}
+        </Text>
+        <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+          {children?.map((child) => {
+            const { id, icon, value } = child
+            const btnIcon = icon ? fieldIcons[icon] : ''
+            return (
+              <HiddenField
+                key={id}
+                id={id}
+                icon={btnIcon}
+                name={value as string}
+                onClick={() => onClick?.(id)}
+              />
+            )
+          })}
+        </Grid>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/index.ts

@@ -1,4 +1,6 @@
 export * from './ReadOnlyAppliances'
+export * from './ReadOnlyGuidelines'
 export * from './ReadOnlyHomeItemImages'
 export * from './ReadOnlyHomeItemRating'
 export * from './ReadOnlyHomeItemText'
+export * from './ReadOnlyItemRelated'

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

@@ -4,6 +4,7 @@ export * from './ReadOnlyImage'
 export * from './ReadOnlyGrid'
 export * from './ReadOnlyGroup'
 export * from './ReadOnlyInput'
+export * from './ReadOnlyNotes'
 export * from './ReadOnlyRating'
 export * from './ReadOnlyTextArea'
 export * from './ReadOnlyWrapper'

package/src/components/homeItems/ViewingHomeItemPanel.tsx

@@ -6,6 +6,7 @@ import { ViewingHomeItemPanelI } from '@/interfaces'
 
 export const ViewingHomeItemPanel = ({
   form,
+  onClick,
   onClose,
   onEdit,
 }: ViewingHomeItemPanelI) => {
@@ -38,7 +39,7 @@ export const ViewingHomeItemPanel = ({
           <TabsHeader tabList={tabs} rightTabList={rightTabs} />
         </Box>
       </DrawerHeader>
-      <ReadOnlyDynamicForm form={form} onEdit={onEdit} />
+      <ReadOnlyDynamicForm form={form} onClick={onClick} onEdit={onEdit} />
     </DrawerContent>
   )
 }

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

@@ -50,6 +50,7 @@ import {
   HomeCleaning,
   HouseWashing,
   PressureWasher,
+  BookOpened,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -57,6 +58,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   barcode: Barcode,
   billing: Billing,
   book: Book,
+  'book-opened': BookOpened,
   calc: Calc,
   check: CheckPen,
   contact: Contacts,

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

@@ -10,6 +10,7 @@ type KindTypes =
   | 'grid'
   | 'group'
   | 'hidden'
+  | 'notes'
   | 'number'
   | 'radio'
   | 'rating'
@@ -35,13 +36,19 @@ type UIKindTypes =
   | 'primary-cta'
   | 'secondary-cta'
 
-type HomeItemTypes = 'appliances' | 'images'
+type HomeItemTypes =
+  | 'appliances'
+  | 'images'
+  | 'guidelines'
+  | 'item-related'
+  | 'item-icon-btn'
 
 export type IconTypes =
   | 'barcode'
   | 'battery'
   | 'billing'
   | 'book'
+  | 'book-opened'
   | 'calc'
   | 'calendar'
   | 'check'
@@ -131,4 +138,5 @@ export interface DynamicFormProxyI {
 
 export interface ReadOnlyDynamicFormI extends Pick<DynamicFormI, 'form'> {
   onEdit?: (id: string) => void
+  onClick?: (id: string) => void
 }

package/src/interfaces/forms/readOnly/ReadOnlyGrid.interface.ts

@@ -3,4 +3,6 @@ import { FlexProps } from '@chakra-ui/react'
 
 export interface ReadOnlyGridI
   extends Pick<ReportI, 'children'>,
-    Omit<FlexProps, 'children'> {}
+    Omit<FlexProps, 'children' | 'onClick'> {
+  onClick?: (id: string) => void
+}

package/src/interfaces/forms/readOnly/homeItem/ReadOnlyGuidelines.interface.ts

@@ -0,0 +1,6 @@
+import { ReportI } from '@/interfaces'
+
+export interface ReadOnlyGuidelinesI
+  extends Pick<ReportI, 'children' | 'name'> {
+  onClick?: (id: string) => void
+}

package/src/interfaces/forms/readOnly/homeItem/index.ts

@@ -1 +1,2 @@
 export * from './ReadOnlyAppliances.interface'
+export * from './ReadOnlyGuidelines.interface'

package/src/interfaces/homeItems/ViewingHomeItemPanel.interface.ts

@@ -4,4 +4,5 @@ export interface ViewingHomeItemPanelI {
   form: ReportI[]
   onClose: () => void
   onEdit: (id: string) => void
+  onClick?: (id: string) => void
 }

package/src/interfaces/inboxTile/MessageCard.interface.ts

@@ -4,11 +4,11 @@ export interface InboxMessageI {
   _id: string
   currentUser?: Partial<UserProfileI>
   chatReplies?: InboxMessageI[]
-  description: string
+  description?: string
   date: Date
   from: string
   isNew?: boolean
-  subject: string
+  subject?: string
 }
 
 export interface MessageCardI {

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

@@ -646,4 +646,64 @@ export const viewingHomeItemMock: ReportI[] = [
       },
     ],
   },
+  {
+    id: faker.database.mongodbObjectId(),
+    value: '',
+    type: 'grid',
+    visible: true,
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Care & Guidelines',
+        value: '',
+        type: 'guidelines',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'umbrella',
+            value: 'warranty',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'book-opened',
+            value: 'manual',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Related',
+        value: '',
+        type: 'item-related',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'drop',
+            value: 'filter',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Notes',
+    description: '',
+    comments: faker.lorem.sentence(),
+    value: faker.lorem.paragraphs(),
+    type: 'notes',
+    visible: true,
+    options: [],
+  },
 ]

package/src/mocks/inbox/messages.ts

@@ -39,7 +39,6 @@ export const messagesMock: InboxMessageI[] = [
     currentUser: {
       userName: currentUserName,
     },
-    description: faker.lorem.paragraphs(),
     date: faker.date.recent(),
     from: faker.person.fullName(),
     isNew: true,
@@ -83,7 +82,6 @@ export const messagesMock: InboxMessageI[] = [
     date: faker.date.recent(),
     from: faker.person.fullName(),
     isNew: false,
-    subject: faker.lorem.words(),
   },
   {
     _id: faker.database.mongodbObjectId(),

package/src/stories/assets/Illustrations.stories.tsx

@@ -187,6 +187,7 @@ import {
   WizardQuick,
   YellowFolder,
   YellowFolderUnshared,
+  BookOpened,
 } from '@/assets/images'
 
 import {
@@ -279,6 +280,7 @@ export const Illustrations = () => {
       <IconWrapper icon={BillingAddress} name="BillingAddress" />
       <IconWrapper icon={BlueFolder} name="BlueFolder" />
       <IconWrapper icon={BlueFolderShared} name="BlueFolderShared" />
+      <IconWrapper icon={BookOpened} name="BookOpened" />
       <IconWrapper icon={BoxIcon} name="Box" />
       <IconWrapper icon={Building} name="Building" />
       <IconWrapper icon={Calc} name="Calc" />

package/src/stories/homeItems/ViewingHomeItem.stories.tsx

@@ -10,6 +10,7 @@ export default {
   args: {
     form: viewingHomeItemMock,
     onEdit: action('onEdit'),
+    onClick: action('onClick'),
   },
   decorators: [
     (Story) => (