@homefile/components-v2 2.4.0 → 2.5.0

package/dist/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/dist/assets/images/index.d.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';
@@ -157,7 +158,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js

@@ -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';
@@ -157,7 +158,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/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/dist/components/forms/dynamicForm/fields/uiFields/TileCta.js

@@ -14,5 +14,5 @@ import { Button } from '@chakra-ui/react';
 export const TileCta = (_a) => {
     var { callback } = _a, props = __rest(_a, ["callback"]);
     const { type, value } = props;
-    return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({}, props)), variant: type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter', fontSize: "sm", maxW: "full", children: value }));
+    return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({}, props)), variant: type === 'primary-cta' ? 'primary' : 'secondary', fontSize: "sm", textTransform: "capitalize", px: "none", bg: type === 'primary-cta' ? '' : 'neutral.white', children: value }));
 };

package/dist/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/dist/components/forms/readOnly/ReadOnlyDynamicForm.d.ts

@@ -1,2 +1,2 @@
 import { ReadOnlyDynamicFormI } from '../../../interfaces';
-export declare const ReadOnlyDynamicForm: ({ form: fields, onEdit, }: ReadOnlyDynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReadOnlyDynamicForm: ({ form: fields, onClick, onEdit, }: ReadOnlyDynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js

@@ -1,10 +1,10 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
-import { ReadOnlyAppliances, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
+import { ReadOnlyAppliances, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyNotes, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
 import { fieldIcons } from '../../../helpers';
-export const ReadOnlyDynamicForm = ({ form: fields, onEdit = () => { }, }) => {
-    return (_jsx(Box, { bg: "lightBlue.1", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit = () => { }, }) => {
+    return (_jsx(Box, { bg: "lightBlue.1", overflow: "scroll", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { children = [], icon, id, name, type, value } = field;
             const baseProps = {
                 key: `${id}-${name}-${value}-${type}`,
@@ -29,11 +29,13 @@ export const ReadOnlyDynamicForm = ({ form: fields, onEdit = () => { }, }) => {
                 case 'textarea':
                     return _jsx(ReadOnlyTextArea, Object.assign({}, baseProps));
                 case 'grid':
-                    return _jsx(ReadOnlyGrid, { children: children }, id);
+                    return (_jsx(ReadOnlyGrid, { children: children, onClick: onClick }, id));
                 case 'group':
                     return _jsx(ReadOnlyGroup, { children: children }, id);
                 case 'appliances':
                     return _createElement(ReadOnlyAppliances, Object.assign({}, field, { key: id, onEdit: onEdit }));
+                case 'notes':
+                    return _createElement(ReadOnlyNotes, Object.assign({}, field, { key: id }));
                 default:
                     return null;
             }

package/dist/components/forms/readOnly/fields/ReadOnlyGrid.d.ts

@@ -1,2 +1,2 @@
 import { ReadOnlyGridI } from '../../../../interfaces';
-export declare const ReadOnlyGrid: ({ children, ...props }: ReadOnlyGridI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReadOnlyGrid: ({ children, onClick, ...props }: ReadOnlyGridI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/ReadOnlyGrid.js

@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '@chakra-ui/react';
-import { ReadOnlyDate, ReadOnlyInput } from '../../..';
+import { ReadOnlyDate, ReadOnlyGuidelines, ReadOnlyInput, ReadOnlyItemRelated, } from '../../..';
 import { fieldIcons } from '../../../../helpers';
 export const ReadOnlyGrid = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (_jsx(Flex, Object.assign({ align: "stretch", gap: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", p: "base" }, props, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type, icon }) => {
+    var { children, onClick } = _a, props = __rest(_a, ["children", "onClick"]);
+    return (_jsx(Flex, Object.assign({ align: "stretch", gap: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", p: "base" }, props, { children: children === null || children === void 0 ? void 0 : children.map(({ children, id, name, value, type, icon }) => {
             const baseProps = {
                 key: `${id}-${name}-${value}-${type}`,
                 id,
@@ -34,6 +34,10 @@ export const ReadOnlyGrid = (_a) => {
                     return (_jsx(ReadOnlyInput, Object.assign({}, baseProps, { border: "none", flex: "auto", p: "0" })));
                 case 'date':
                     return _jsx(ReadOnlyDate, Object.assign({}, baseProps, { name: name, p: "0" }));
+                case 'guidelines':
+                    return (_jsx(ReadOnlyGuidelines, { name: name, children: children, onClick: onClick }, id));
+                case 'item-related':
+                    return (_jsx(ReadOnlyItemRelated, { name: name, children: children, onClick: onClick }, id));
                 default:
                     return null;
             }

package/dist/components/forms/readOnly/fields/ReadOnlyNotes.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../interfaces';
+export declare const ReadOnlyNotes: ({ name, value, }: Pick<ReportI, "name" | "value">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/ReadOnlyNotes.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+export const ReadOnlyNotes = ({ name, value, }) => {
+    return (_jsxs(Stack, { p: "base", spacing: "base", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Text, { fontFamily: "secondary", children: value })] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.js

@@ -5,7 +5,7 @@ import { colors } from '../../../../../theme/colors';
 export const ReadOnlyAppliances = ({ description, id, name, children, onEdit, value, }) => {
     const rating = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'rating');
     const images = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'images');
-    return (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) })] }), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) })] }), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
                                     const baseProps = {
                                         key: `${id}-${name}-${value}-${type}`,
                                         id,

package/dist/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/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyGuidelinesI } from '../../../../../interfaces';
+export declare const ReadOnlyGuidelines: ({ name, children, onClick, }: ReadOnlyGuidelinesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Stack, Grid } from '@chakra-ui/react';
+import { HiddenField } from '../../../..';
+import { fieldIcons } from '../../../../../helpers';
+export const ReadOnlyGuidelines = ({ name, children, onClick, }) => {
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Grid, { templateColumns: "repeat(2, minmax(80px, 1fr))", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
+                    const { id, icon, value } = child;
+                    const btnIcon = icon ? fieldIcons[icon] : '';
+                    return (_jsx(HiddenField, { id: id, icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }, id));
+                }) })] }));
+};

package/dist/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/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.js

@@ -6,5 +6,5 @@ export const ReadOnlyHomeItemImages = (props) => {
     const [mainImage, setMainImage] = useState(images === null || images === void 0 ? void 0 : images[0]);
     if (!images)
         return null;
-    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px" }), _jsx(SimpleGrid, { columns: 4, spacing: "base", children: images === null || images === void 0 ? void 0 : images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setMainImage(image) }))) })] }));
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px" }), _jsx(SimpleGrid, { columns: 4, spacing: "base", children: images === null || images === void 0 ? void 0 : images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setMainImage(image) }, image))) })] }));
 };

package/dist/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/dist/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyGuidelinesI } from '../../../../../interfaces';
+export declare const ReadOnlyItemRelated: ({ name, children, onClick, }: ReadOnlyGuidelinesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.js

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

package/dist/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/dist/components/forms/readOnly/fields/homeItem/index.d.ts

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

package/dist/components/forms/readOnly/fields/homeItem/index.js

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

package/dist/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/dist/components/forms/readOnly/fields/index.d.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/dist/components/forms/readOnly/fields/index.js

@@ -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/dist/components/homeItems/ViewingHomeItemPanel.d.ts

@@ -1,2 +1,2 @@
 import { ViewingHomeItemPanelI } from '../../interfaces';
-export declare const ViewingHomeItemPanel: ({ form, onClose, onEdit, }: ViewingHomeItemPanelI) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewingHomeItemPanel: ({ form, onClick, onClose, onEdit, }: ViewingHomeItemPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeItems/ViewingHomeItemPanel.js

@@ -3,7 +3,7 @@ import { t } from 'i18next';
 import { Box, Divider, DrawerContent, DrawerHeader } from '@chakra-ui/react';
 import { PanelHeader, ReadOnlyDynamicForm, TabsHeader } from '..';
 import { Painting } from '../../assets/images';
-export const ViewingHomeItemPanel = ({ form, onClose, onEdit, }) => {
+export const ViewingHomeItemPanel = ({ form, onClick, onClose, onEdit, }) => {
     const tabs = [
         {
             label: t('contacts.details'),
@@ -20,5 +20,5 @@ export const ViewingHomeItemPanel = ({ form, onClose, onEdit, }) => {
             component: _jsx("div", {}),
         },
     ];
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeItems.title'), icon: Painting }), _jsx(Divider, {}), _jsx(Box, { pt: "1", bg: "neutral.white", children: _jsx(TabsHeader, { tabList: tabs, rightTabList: rightTabs }) })] }), _jsx(ReadOnlyDynamicForm, { form: form, onEdit: onEdit })] }));
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeItems.title'), icon: Painting }), _jsx(Divider, {}), _jsx(Box, { pt: "1", bg: "neutral.white", children: _jsx(TabsHeader, { tabList: tabs, rightTabList: rightTabs }) })] }), _jsx(ReadOnlyDynamicForm, { form: form, onClick: onClick, onEdit: onEdit })] }));
 };

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,8 +1,9 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
     book: Book,
+    'book-opened': BookOpened,
     calc: Calc,
     check: CheckPen,
     contact: Contacts,

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-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

@@ -637,4 +637,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

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