@homefile/components-v2 2.4.0 → 2.6.0

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,8 +1,8 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-type KindTypes = 'checkbox' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
+type KindTypes = 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
 type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
-type HomeItemTypes = 'appliances' | 'images';
-export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
+type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
+export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
 export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
@@ -37,5 +37,6 @@ export interface DynamicFormProxyI {
 }
 export interface ReadOnlyDynamicFormI extends Pick<DynamicFormI, 'form'> {
     onEdit?: (id: string) => void;
+    onClick?: (id: string) => void;
 }
 export {};

package/dist/interfaces/forms/readOnly/ReadOnlyGrid.interface.d.ts

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

package/dist/interfaces/forms/readOnly/homeItem/ReadOnlyGuidelines.interface.d.ts

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

package/dist/interfaces/forms/readOnly/homeItem/ReadOnlyGuidelines.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/forms/readOnly/homeItem/index.d.ts

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

package/dist/interfaces/forms/readOnly/homeItem/index.js

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

package/dist/interfaces/homeItems/ViewingHomeItemPanel.interface.d.ts

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

package/dist/interfaces/inboxTile/MessageCard.interface.d.ts

@@ -3,11 +3,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 {
     message: InboxMessageI;

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1,6 +1,34 @@
 import { Shine } from '../../assets/images';
 import { faker } from '@faker-js/faker';
 export const formFieldsMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Select to have Homefile find & add information on your item.',
+        description: 'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
+        value: false,
+        type: 'checkbox-agreement',
+        visible: true,
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Serial #',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'text',
+        visible: true,
+        icon: 'barcode',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Brand',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'text',
+        visible: true,
+        icon: 'company',
+    },
     {
         id: faker.database.mongodbObjectId(),
         name: 'Services',
@@ -67,16 +95,6 @@ export const formFieldsMock = [
             },
         ],
     },
-    {
-        id: faker.database.mongodbObjectId(),
-        name: 'Serial #',
-        description: faker.lorem.sentence(),
-        comments: faker.lorem.sentence(),
-        value: '',
-        type: 'default',
-        visible: false,
-        icon: 'barcode',
-    },
     {
         id: faker.database.mongodbObjectId(),
         name: 'Receipt',
@@ -637,4 +655,64 @@ export const viewingHomeItemMock = [
             },
         ],
     },
+    {
+        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/dist/mocks/inbox/messages.js

@@ -26,7 +26,7 @@ export const messagesMock = [
                         subject: faker.lorem.words(),
                     },
                 ],
-                description: faker.lorem.paragraphs(),
+                description: `<p>${faker.lorem.paragraphs()}</p>`,
                 date: faker.date.recent(),
                 from: currentUserName,
                 isNew: false,
@@ -36,8 +36,8 @@ export const messagesMock = [
         currentUser: {
             userName: currentUserName,
         },
-        description: faker.lorem.paragraphs(),
         date: faker.date.recent(),
+        description: `<span>${faker.lorem.paragraphs()}</span>`,
         from: faker.person.fullName(),
         isNew: true,
         subject: faker.lorem.words(),
@@ -80,7 +80,6 @@ export const messagesMock = [
         date: faker.date.recent(),
         from: faker.person.fullName(),
         isNew: false,
-        subject: faker.lorem.words(),
     },
     {
         _id: faker.database.mongodbObjectId(),

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, Company2, } from '../../assets/images';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, } from '../../assets/images/appliances';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: 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: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: 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.6.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/company2.svg

@@ -0,0 +1,29 @@
+<svg id="Group_22676" data-name="Group 22676" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.034" height="28.695" viewBox="0 0 31.034 28.695">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25833" data-name="Rectangle 25833" width="31.034" height="28.695" fill="none"/>
+    </clipPath>
+  </defs>
+  <rect id="Rectangle_25824" data-name="Rectangle 25824" width="1.715" height="1.79" transform="translate(21.445 8.853)" fill="#323954"/>
+  <rect id="Rectangle_25825" data-name="Rectangle 25825" width="3.14" height="15.1" transform="translate(21.875 13.595)" fill="#00c0b7"/>
+  <g id="Group_22672" data-name="Group 22672" transform="translate(0 0)">
+    <g id="Group_22671" data-name="Group 22671" clip-path="url(#clip-path)">
+      <path id="Path_17688" data-name="Path 17688" d="M71.515,21.209a1.5,1.5,0,0,1,.847.263,1.39,1.39,0,0,1,.28-.414v0a1.483,1.483,0,0,1,1.086-.47,1.522,1.522,0,0,1,.339.04,2.411,2.411,0,0,1,.29-.527,2.358,2.358,0,0,1,4.059.406,1.7,1.7,0,0,1,1.89.785A1.344,1.344,0,0,1,82.23,22.5a1.484,1.484,0,0,1-.043.328H70.023c0-.022,0-.04,0-.062v-.116a1.492,1.492,0,0,1,1.495-1.446" transform="translate(-51.196 -13.98)" fill="#d2edef"/>
+      <rect id="Rectangle_25826" data-name="Rectangle 25826" width="3.14" height="15.1" transform="translate(16.902 13.595)" fill="#00c0b7"/>
+      <path id="Path_17689" data-name="Path 17689" d="M72.362,23.147A1.495,1.495,0,0,0,70.02,24.33V21.41h2.621v1.323a1.389,1.389,0,0,0-.28.414" transform="translate(-51.196 -15.654)" fill="#00c0b7"/>
+      <path id="Path_17690" data-name="Path 17690" d="M54.55,0V3.678H53V1.624H50.386V3.678H48.84V0h5.71Z" transform="translate(-35.71 0)" fill="#40566b"/>
+      <path id="Path_17691" data-name="Path 17691" d="M70.023,32.762h2.618v1.79H70.02V32.7c0,.022,0,.04,0,.062" transform="translate(-51.196 -23.909)" fill="#00c0b7"/>
+      <path id="Path_17692" data-name="Path 17692" d="M42.785,18.793v1.852h-1.53V15.758H38.637v4.887h-1.53V15.758H34.486v4.887H32.771V13.68h14.35v2.441a2.376,2.376,0,0,0-.29.527,1.526,1.526,0,0,0-.339-.041,1.483,1.483,0,0,0-1.086.47v-1.32H42.785v2.92a.272.272,0,0,0,0,.051.433.433,0,0,0,0,.065" transform="translate(-23.961 -10.002)" fill="#323954"/>
+      <rect id="Rectangle_25827" data-name="Rectangle 25827" width="2.618" height="4.887" transform="translate(14.676 5.756)" fill="#00c0b7"/>
+      <rect id="Rectangle_25828" data-name="Rectangle 25828" width="2.618" height="2.054" transform="translate(14.676 1.623)" fill="#00c0b7"/>
+      <path id="Path_17693" data-name="Path 17693" d="M47.51,50.57v15.1H44.37V60.485H45.2a1.344,1.344,0,0,0,.046-.344,1.412,1.412,0,0,0-.876-1.307V50.57Z" transform="translate(-32.442 -36.975)" fill="#00c0b7"/>
+      <rect id="Rectangle_25829" data-name="Rectangle 25829" width="2.621" height="4.887" transform="translate(10.525 5.756)" fill="#00c0b7"/>
+      <rect id="Rectangle_25830" data-name="Rectangle 25830" width="1.833" height="5.186" transform="translate(10.095 23.509)" fill="#40566b"/>
+      <path id="Path_17694" data-name="Path 17694" d="M18.807,42.542V48.6a2.433,2.433,0,0,0-.4-.032,2.471,2.471,0,0,0-2.183,1.309l-.013-.005V39.59H39.464V57.642h-2.6v-15.1h-3.14v15.1H31.894v-15.1h-3.14v15.1H26.92v-15.1H23.78v8.264a1.41,1.41,0,0,0-1.14.032,1.8,1.8,0,0,0-.694-.669V42.542Z" transform="translate(-11.852 -28.947)" fill="#40566b"/>
+      <rect id="Rectangle_25831" data-name="Rectangle 25831" width="3.14" height="5.186" transform="translate(6.955 23.509)" fill="#00c0b7"/>
+      <path id="Path_17695" data-name="Path 17695" d="M28.166,57.984a1.731,1.731,0,0,0-.444.059,2.485,2.485,0,0,0-1.852-1.42V50.57h3.14V58.2a1.779,1.779,0,0,0-.844-.212" transform="translate(-18.915 -36.975)" fill="#00c0b7"/>
+      <rect id="Rectangle_25832" data-name="Rectangle 25832" width="2.597" height="5.186" transform="translate(4.358 23.509)" fill="#40566b"/>
+      <path id="Path_17696" data-name="Path 17696" d="M3.89,74.505a1.559,1.559,0,0,1,.355.043,2.054,2.054,0,0,1,.126-.269,2.474,2.474,0,0,1,4.436.142,1.743,1.743,0,0,1,.444-.059,1.779,1.779,0,0,1,.844.212,1.8,1.8,0,0,1,.694.669A1.41,1.41,0,0,1,12.8,76.518a1.332,1.332,0,0,1-.046.344H.006C0,76.817,0,76.774,0,76.728a1.57,1.57,0,0,1,2.457-1.293,1.571,1.571,0,0,1,1.433-.93" transform="translate(0 -53.353)" fill="#d2edef"/>
+    </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'
@@ -28,6 +29,7 @@ import Closet from './closet.svg'
 import Clouds from './clouds.png'
 import Co2 from './co2.svg'
 import Company from './company.svg'
+import Company2 from './company2.svg'
 import ComputerReport from './computer-report.svg'
 import Confirmation from './confirmation.svg'
 import Construction from './construction.svg'
@@ -173,6 +175,7 @@ export {
   BillingAddress,
   BlueFolder,
   BlueFolderShared,
+  BookOpened,
   Box,
   Building,
   Calc,
@@ -189,6 +192,7 @@ export {
   Clouds,
   Co2,
   Company,
+  Company2,
   ComputerReport,
   Confirmation,
   Construction,

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

@@ -18,6 +18,7 @@ import {
   CurrencyField,
   TileBody,
   CheckboxGroupField,
+  CheckboxAgreement,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -189,6 +190,16 @@ export const DynamicForm = ({
                     />
                   </FieldWithDelete>
                 )
+              case 'checkbox-agreement':
+                return (
+                  <CheckboxAgreement
+                    key={id}
+                    id={id}
+                    name={name}
+                    value={value}
+                    description={description}
+                  />
+                )
               case 'tile-body':
                 return (
                   <TileBody

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

@@ -0,0 +1,90 @@
+import { ChevronRight } from '@/components/icons'
+import { ReportI } from '@/interfaces'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  Flex,
+  Box,
+  AccordionPanel,
+  Checkbox,
+  Text,
+} from '@chakra-ui/react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+export const CheckboxAgreement = ({
+  description,
+  id,
+  name,
+  value,
+}: Pick<ReportI, 'name' | 'id' | 'description' | 'value'>) => {
+  const { control } = useFormContext()
+  return (
+    <Accordion flex="1" allowToggle defaultIndex={[0]}>
+      <AccordionItem border="none" bg="lightViolet.1">
+        {({ isExpanded }) => (
+          <>
+            <Flex p="base" justify="space-between">
+              <Controller
+                control={control}
+                name={id}
+                defaultValue={value}
+                render={({ field: { onChange, value } }) => {
+                  return (
+                    <Checkbox
+                      key={id}
+                      value={String(name)}
+                      isChecked={Boolean(value)}
+                      onChange={onChange}
+                    >
+                      <Text
+                        fontFamily="secondary"
+                        fontWeight="semibold"
+                        fontSize="sm"
+                        color="violet.1"
+                      >
+                        {name}
+                      </Text>
+                    </Checkbox>
+                  )
+                }}
+              />
+              <AccordionButton
+                w="fit-content"
+                p="0"
+                _hover={{
+                  bg: 'transparent',
+                }}
+                _focus={{
+                  outline: 'none',
+                }}
+              >
+                <Box
+                  rounded="full"
+                  border="1px solid"
+                  padding="1"
+                  borderColor="neutral.white"
+                  transition="all .2s ease-in-out"
+                  transform={isExpanded ? 'rotate(-90deg)' : 'rotate(0)'}
+                >
+                  <ChevronRight size={18} />
+                </Box>
+              </AccordionButton>
+            </Flex>
+            <AccordionPanel px="base" pb="base">
+              <Text
+                variant="home"
+                fontSize="xs"
+                marginInlineStart="8"
+                position="relative"
+                top="-10px"
+              >
+                {description}
+              </Text>
+            </AccordionPanel>
+          </>
+        )}
+      </AccordionItem>
+    </Accordion>
+  )
+}

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

@@ -1,3 +1,4 @@
+export * from './CheckboxAgreement'
 export * from './CheckboxGroupField'
 export * from './CurrencyField'
 export * from './DateField'

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
         }