@homefile/components-v2 2.5.0 → 2.6.0

package/dist/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/dist/assets/images/index.d.ts

@@ -29,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';
@@ -158,7 +159,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, 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 { 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, Company2, 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

@@ -29,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';
@@ -158,7 +159,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, 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 { 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, Company2, 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

@@ -29,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'
@@ -191,6 +192,7 @@ export {
   Clouds,
   Co2,
   Company,
+  Company2,
   ComputerReport,
   Confirmation,
   Construction,

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

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { Box, Stack, Text } from '@chakra-ui/react';
-import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
@@ -64,6 +64,8 @@ export const DynamicForm = (_a) => {
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':
                                 return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(CheckboxGroupField, { id: id, children: children, description: description, icon: baseProps.icon }, id) })));
+                            case 'checkbox-agreement':
+                                return (_jsx(CheckboxAgreement, { id: id, name: name, value: value, description: description }, id));
                             case 'tile-body':
                                 return (_createElement(TileBody, Object.assign({}, props, { key: id, callback: callback, fields: children, menuItems: menuItems })));
                             default:

package/dist/components/forms/dynamicForm/fields/CheckboxAgreement.d.ts

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

package/dist/components/forms/dynamicForm/fields/CheckboxAgreement.js

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

package/dist/components/forms/dynamicForm/fields/index.d.ts

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

package/dist/components/forms/dynamicForm/fields/index.js

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

package/dist/components/inboxTile/panel/MessageCard.js

@@ -5,10 +5,14 @@ import { ChatBubble } from '../../../assets/images';
 import { TextBadge } from '../..';
 import { formatDateWithAt } from '../../../utils';
 export const MessageCard = ({ message, onClick, variant = 'inbox', }) => {
-    const { currentUser, from, subject, date, isNew, chatReplies, description } = message;
+    const { currentUser, from, subject, date, isNew, chatReplies, description = '', } = message;
     const formattedDate = formatDateWithAt({ date });
     const showChatBubble = Number(chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length) > 0;
     const isInbox = variant === 'inbox';
     const isCurrentUser = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userName) === from;
-    return (_jsxs(Flex, { gap: "base", children: [!isCurrentUser && !isInbox && (_jsx(Avatar, { size: "sm", name: from, bg: "blue.4", fontWeight: "bold", color: "neutral.white" })), _jsx(Container, { as: isInbox ? 'button' : 'div', bg: isCurrentUser ? 'yellow.6' : 'neutral.white', transition: "background-color 0.3s", textAlign: "left", _hover: isInbox ? { bg: 'lightGreen.1' } : {}, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(message), children: _jsxs(Box, { children: [!isCurrentUser && (_jsxs(Flex, { justify: "space-between", align: "center", py: "1", pr: "base", pl: isNew ? '' : 'base', children: [_jsxs(Flex, { gap: "base", align: "center", position: "relative", left: isNew ? '-13px' : '', children: [isNew && isInbox && (_jsx(TextBadge, { text: "New", showAnimation: false, bgColor: "violet.1" })), _jsxs(Text, { variant: "home", color: "gray.1", children: [t('inbox.from'), _jsx(chakra.span, { color: "gray.4", children: from })] })] }), _jsx(Text, { variant: "home", fontSize: "xs", children: formattedDate })] })), isInbox && _jsx(Divider, {}), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { variant: "home", fontWeight: "bold", children: subject }), showChatBubble && isInbox && (_jsx(Center, { backgroundImage: `url(${ChatBubble})`, backgroundRepeat: "no-repeat", backgroundSize: "contain", backgroundPosition: "bottom", w: "20px", h: "24px", children: _jsx(Text, { fontSize: "10px", color: "blue.2", fontWeight: "bold", children: chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length }) }))] }), isInbox && (_jsx(Text, { variant: "home", noOfLines: 3, textOverflow: "ellipsis", children: description })), !isInbox && _jsx(Text, { variant: "home", children: description })] })] }) })] }));
+    return (_jsxs(Flex, { gap: "base", children: [!isCurrentUser && !isInbox && (_jsx(Avatar, { size: "sm", name: from, bg: "blue.4", fontWeight: "bold", color: "neutral.white" })), _jsx(Container, { as: isInbox ? 'button' : 'div', bg: isCurrentUser ? 'yellow.6' : 'neutral.white', transition: "background-color 0.3s", textAlign: "left", _hover: isInbox ? { bg: 'lightGreen.1' } : {}, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(message), children: _jsxs(Box, { children: [!isCurrentUser && (_jsxs(Flex, { justify: "space-between", align: "center", py: "1", pr: "base", pl: isNew ? '' : 'base', children: [_jsxs(Flex, { gap: "base", align: "center", position: "relative", left: isNew ? '-13px' : '', children: [isNew && isInbox && (_jsx(TextBadge, { text: "New", showAnimation: false, bgColor: "violet.1" })), _jsxs(Text, { variant: "home", color: "gray.1", children: [t('inbox.from'), _jsx(chakra.span, { color: "gray.4", children: from })] })] }), _jsx(Text, { variant: "home", fontSize: "xs", children: formattedDate })] })), isInbox && _jsx(Divider, {}), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { variant: "home", fontWeight: "bold", children: subject }), showChatBubble && isInbox && (_jsx(Center, { backgroundImage: `url(${ChatBubble})`, backgroundRepeat: "no-repeat", backgroundSize: "contain", backgroundPosition: "bottom", w: "20px", h: "24px", children: _jsx(Text, { fontSize: "10px", color: "blue.2", fontWeight: "bold", children: chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length }) }))] }), isInbox && (_jsx(Text, { variant: "home", noOfLines: 3, textOverflow: "ellipsis", dangerouslySetInnerHTML: {
+                                        __html: description,
+                                    } })), !isInbox && (_jsx(Text, { variant: "home", dangerouslySetInnerHTML: {
+                                        __html: description,
+                                    } }))] })] }) })] }));
 };

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

@@ -1,4 +1,4 @@
-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';
+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, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -45,7 +45,7 @@ export const fieldIcons = {
     house: Structure,
     target: Target,
     title: CircleFace,
-    company: Company,
+    company: Company2,
     'sh-gutter': GutterCleaning,
     'sh-home': HomeCleaning,
     'sh-house': HouseWashing,

package/dist/hooks/inbox/useMessagePanel.js

@@ -1,8 +1,11 @@
 import { t } from 'i18next';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 export const useMessagePanel = (messages) => {
     const [sortedMessages, setSortedMessages] = useState(messages);
     const [currentSort, setCurrentSort] = useState(t('forms.sortBy'));
+    useEffect(() => {
+        setSortedMessages(messages);
+    }, [messages]);
     const handleSelectItem = (item) => {
         if (typeof item !== 'string')
             return;

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

@@ -1,5 +1,5 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-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 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' | '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;

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

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,
@@ -37,6 +37,7 @@ export const messagesMock = [
             userName: currentUserName,
         },
         date: faker.date.recent(),
+        description: `<span>${faker.lorem.paragraphs()}</span>`,
         from: faker.person.fullName(),
         isNew: true,
         subject: faker.lorem.words(),

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, BookOpened, } 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: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    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/package.json

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

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

@@ -29,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'
@@ -191,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/inboxTile/panel/MessageCard.tsx

@@ -20,8 +20,15 @@ export const MessageCard = ({
   onClick,
   variant = 'inbox',
 }: MessageCardI) => {
-  const { currentUser, from, subject, date, isNew, chatReplies, description } =
-    message
+  const {
+    currentUser,
+    from,
+    subject,
+    date,
+    isNew,
+    chatReplies,
+    description = '',
+  } = message
   const formattedDate = formatDateWithAt({ date })
   const showChatBubble = Number(chatReplies?.length) > 0
   const isInbox = variant === 'inbox'
@@ -99,11 +106,23 @@ export const MessageCard = ({
               )}
             </Flex>
             {isInbox && (
-              <Text variant="home" noOfLines={3} textOverflow="ellipsis">
-                {description}
-              </Text>
+              <Text
+                variant="home"
+                noOfLines={3}
+                textOverflow="ellipsis"
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            )}
+            {!isInbox && (
+              <Text
+                variant="home"
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
             )}
-            {!isInbox && <Text variant="home">{description}</Text>}
           </Stack>
         </Box>
       </Container>

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

@@ -41,7 +41,6 @@ import {
   Roof2,
   Target,
   CircleFace,
-  Company,
   Pressure,
   WindowCleaning,
   RoofCleaning,
@@ -51,6 +50,7 @@ import {
   HouseWashing,
   PressureWasher,
   BookOpened,
+  Company2,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -100,7 +100,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   house: Structure,
   target: Target,
   title: CircleFace,
-  company: Company,
+  company: Company2,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
   'sh-house': HouseWashing,

package/src/hooks/inbox/useMessagePanel.ts

@@ -1,11 +1,15 @@
 import { t } from 'i18next'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { InboxMessageI, SelectItemI } from '@/interfaces'
 
 export const useMessagePanel = (messages: InboxMessageI[]) => {
   const [sortedMessages, setSortedMessages] = useState(messages)
   const [currentSort, setCurrentSort] = useState<string>(t('forms.sortBy'))
 
+  useEffect(() => {
+    setSortedMessages(messages)
+  }, [messages])
+
   const handleSelectItem = (item: string | SelectItemI<string>) => {
     if (typeof item !== 'string') return
     setCurrentSort(item)

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

@@ -2,6 +2,7 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
+  | 'checkbox-agreement'
   | 'checkbox-group'
   | 'currency'
   | 'date'

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

@@ -3,6 +3,35 @@ import { ReportI } from '@/interfaces'
 import { faker } from '@faker-js/faker'
 
 export const formFieldsMock: ReportI[] = [
+  {
+    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',
@@ -69,17 +98,6 @@ export const formFieldsMock: ReportI[] = [
       },
     ],
   },
-  {
-    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',

package/src/mocks/inbox/messages.ts

@@ -29,7 +29,7 @@ export const messagesMock: InboxMessageI[] = [
             subject: faker.lorem.words(),
           },
         ],
-        description: faker.lorem.paragraphs(),
+        description: `<p>${faker.lorem.paragraphs()}</p>`,
         date: faker.date.recent(),
         from: currentUserName,
         isNew: false,
@@ -40,6 +40,7 @@ export const messagesMock: InboxMessageI[] = [
       userName: currentUserName,
     },
     date: faker.date.recent(),
+    description: `<span>${faker.lorem.paragraphs()}</span>`,
     from: faker.person.fullName(),
     isNew: true,
     subject: faker.lorem.words(),

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

@@ -188,6 +188,7 @@ import {
   YellowFolder,
   YellowFolderUnshared,
   BookOpened,
+  Company2,
 } from '@/assets/images'
 
 import {
@@ -295,6 +296,7 @@ export const Illustrations = () => {
       <IconWrapper icon={Closet} name="Closet" />
       <IconWrapper icon={Co2} name="Co2" />
       <IconWrapper icon={Company} name="Company" />
+      <IconWrapper icon={Company2} name="Company2" />
       <IconWrapper icon={ComputerReport} name="ComputerReport" />
       <IconWrapper icon={Confirmation} name="Confirmation" />
       <IconWrapper icon={Construction} name="Construction" />