@homefile/components-v2 2.3.1 → 2.5.0

package/dist/interfaces/footers/FooterButtons.interface.d.ts

@@ -11,5 +11,6 @@ export interface FooterButtonsI {
     button1?: FooterButtonI;
     button2?: FooterButtonI | null;
     button3?: FooterButtonI;
+    px?: string;
 }
 export {};

package/dist/interfaces/forms/BaseCounter.interface.d.ts

@@ -0,0 +1,5 @@
+export interface BaseCounterI {
+    text: string;
+    uploading?: boolean;
+    uploadingText?: string;
+}

package/dist/interfaces/forms/BaseCounter.interface.js

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

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/index.d.ts

@@ -1,6 +1,7 @@
 export * from './dynamicForm';
 export * from './readOnly';
 export * from './Address.interface';
+export * from './BaseCounter.interface';
 export * from './Collapsible.interface';
 export * from './EditItemName.interface';
 export * from './Input.interface';

package/dist/interfaces/forms/index.js

@@ -1,6 +1,7 @@
 export * from './dynamicForm';
 export * from './readOnly';
 export * from './Address.interface';
+export * from './BaseCounter.interface';
 export * from './Collapsible.interface';
 export * from './EditItemName.interface';
 export * from './Input.interface';

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

@@ -0,0 +1,16 @@
+import { UserProfileI } from '..';
+export interface InboxMessageI {
+    _id: string;
+    currentUser?: Partial<UserProfileI>;
+    chatReplies?: InboxMessageI[];
+    description?: string;
+    date: Date;
+    from: string;
+    isNew?: boolean;
+    subject?: string;
+}
+export interface MessageCardI {
+    message: InboxMessageI;
+    onClick?: (message: InboxMessageI) => void;
+    variant?: 'inbox' | 'chat';
+}

package/dist/interfaces/inboxTile/MessageCard.interface.js

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

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

@@ -0,0 +1,12 @@
+import { InboxMessageI } from '..';
+interface InboxMessageReplyI {
+    id: string;
+    message: string;
+}
+export interface MessageChatPanelI {
+    message?: InboxMessageI;
+    onReply: (props: InboxMessageReplyI) => void;
+    onClose: () => void;
+    onBack: () => void;
+}
+export {};

package/dist/interfaces/inboxTile/MessageChatPanel.interface.js

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

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

@@ -0,0 +1,6 @@
+import { InboxMessageI } from '..';
+export interface MessagePanelI {
+    messages: InboxMessageI[];
+    onClick: (message: InboxMessageI) => void;
+    onClose: () => void;
+}

package/dist/interfaces/inboxTile/MessagePanel.interface.js

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

package/dist/interfaces/inboxTile/index.d.ts

@@ -1,2 +1,5 @@
 export * from './InboxCard.interface';
 export * from './InboxTile.interface';
+export * from './MessageCard.interface';
+export * from './MessageChatPanel.interface';
+export * from './MessagePanel.interface';

package/dist/interfaces/inboxTile/index.js

@@ -1,2 +1,5 @@
 export * from './InboxCard.interface';
 export * from './InboxTile.interface';
+export * from './MessageCard.interface';
+export * from './MessageChatPanel.interface';
+export * from './MessagePanel.interface';

package/dist/interfaces/notifications/NotificationsPanel.interface.d.ts

@@ -1,12 +1,13 @@
-type NotificationType = 'file' | 'folder' | 'contact' | 'receipt' | 'user' | 'tile' | 'payment';
+type NotificationType = 'simple';
 type NotificationStatus = 'added' | 'removed' | 'updated' | 'shared';
 export interface NotificationCardI {
     active: boolean;
     createdAt: Date;
     _id: string;
+    label: string;
     message: string;
     status: NotificationStatus;
-    type: NotificationType;
+    type?: NotificationType;
 }
 export interface NotificationsPanelI {
     notifications: NotificationCardI[];

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/index.d.ts

@@ -0,0 +1 @@
+export * from './messages';

package/dist/mocks/inbox/index.js

@@ -0,0 +1 @@
+export * from './messages';

package/dist/mocks/inbox/messages.d.ts

@@ -0,0 +1,2 @@
+import { InboxMessageI } from '../../interfaces';
+export declare const messagesMock: InboxMessageI[];

package/dist/mocks/inbox/messages.js

@@ -0,0 +1,136 @@
+import { faker } from '@faker-js/faker';
+const currentUserName = faker.internet.userName();
+export const messagesMock = [
+    {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: faker.person.fullName(),
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [
+                    {
+                        _id: faker.database.mongodbObjectId(),
+                        chatReplies: [],
+                        description: faker.lorem.paragraphs(),
+                        date: faker.date.recent(),
+                        from: faker.person.fullName(),
+                        isNew: false,
+                        subject: faker.lorem.words(),
+                    },
+                ],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: currentUserName,
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+        ],
+        currentUser: {
+            userName: currentUserName,
+        },
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: true,
+        subject: faker.lorem.words(),
+    },
+    {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: faker.person.fullName(),
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: currentUserName,
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: faker.person.fullName(),
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+        ],
+        currentUser: {
+            userName: currentUserName,
+        },
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+    },
+    {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: faker.person.fullName(),
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+        ],
+        currentUser: {
+            userName: currentUserName,
+        },
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: true,
+        subject: faker.lorem.words(),
+    },
+    {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: currentUserName,
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+            {
+                _id: faker.database.mongodbObjectId(),
+                chatReplies: [],
+                description: faker.lorem.paragraphs(),
+                date: faker.date.recent(),
+                from: faker.person.fullName(),
+                isNew: false,
+                subject: faker.lorem.words(),
+            },
+        ],
+        currentUser: {
+            userName: currentUserName,
+        },
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+    },
+];

package/dist/mocks/index.d.ts

@@ -3,6 +3,7 @@ export * from './contacts';
 export * from './folderPanel';
 export * from './forms';
 export * from './homeAssistant';
+export * from './inbox';
 export * from './myHomes';
 export * from './myProfile';
 export * from './notifications';

package/dist/mocks/index.js

@@ -3,6 +3,7 @@ export * from './contacts';
 export * from './folderPanel';
 export * from './forms';
 export * from './homeAssistant';
+export * from './inbox';
 export * from './myHomes';
 export * from './myProfile';
 export * from './notifications';

package/dist/mocks/notifications/notifications.mock.js

@@ -6,7 +6,7 @@ export const notificationsMock = [
         createdAt: new Date(),
         message: faker.lorem.sentence(),
         status: 'added',
-        type: 'contact',
+        label: 'contact added',
     },
     {
         active: true,
@@ -14,7 +14,7 @@ export const notificationsMock = [
         createdAt: new Date(),
         message: faker.lorem.sentence(),
         status: 'removed',
-        type: 'file',
+        label: 'file removed',
     },
     {
         active: true,
@@ -22,7 +22,7 @@ export const notificationsMock = [
         createdAt: new Date(),
         message: faker.lorem.sentence(),
         status: 'shared',
-        type: 'folder',
+        label: 'folder shared',
     },
     {
         active: true,
@@ -30,6 +30,6 @@ export const notificationsMock = [
         createdAt: new Date(),
         message: faker.lorem.sentence(),
         status: 'updated',
-        type: 'payment',
+        label: 'updated payment',
     },
 ];

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

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

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

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

package/dist/stories/inboxTile/MessagePanel.stories.d.ts

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageChatPanel, MessagePanel, RightPanel } from '../../components';
+import { action } from '@storybook/addon-actions';
+import { messagesMock } from '../../mocks';
+import { Fragment, useState } from 'react';
+export default {
+    title: 'Components/Inbox',
+    component: MessagePanel,
+    args: {
+        messages: messagesMock,
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),
+    ],
+};
+export const MessagePanelComponent = (args) => {
+    const [showMessageChat, setShowMessageChat] = useState(false);
+    const [selectedMessage, setSelectedMessage] = useState(undefined);
+    const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat);
+    return (_jsxs(Fragment, { children: [_jsx(MessagePanel, Object.assign({}, args, { onClick: (message) => {
+                    setSelectedMessage(message);
+                    handleMessageChatToggle();
+                } })), _jsx(RightPanel, { isOpen: showMessageChat, onClose: handleMessageChatToggle, children: _jsx(MessageChatPanel, { message: selectedMessage, onReply: action('onReply'), onClose: action('onCloseChatPanel'), onBack: handleMessageChatToggle }) })] }));
+};

package/dist/theme/colors.d.ts

@@ -113,7 +113,10 @@ export declare const colors: {
         1: string;
         2: string;
     };
-    skyGradient: string;
+    dayGradient: string;
+    morningGradient: string;
+    eveningGradient: string;
+    nightGradient: string;
     overlay: string;
     overlayWhite: string;
 };

package/dist/theme/colors.js

@@ -113,7 +113,10 @@ export const colors = {
         1: '#f5ddf4',
         2: '#F544DA',
     },
-    skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+    dayGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+    morningGradient: 'linear(to-b, #d2abf1, #f7dcac)',
+    eveningGradient: 'linear(to-b, #bcc5f2, #ee91f3)',
+    nightGradient: 'linear(to-b, #7a7bcf, #a4b0d7)',
     overlay: '#00000040',
     overlayWhite: '#FFFFFF80',
 };

package/dist/utils/Animations.utils.d.ts

@@ -0,0 +1,6 @@
+export type TimeOfDay = 'morning' | 'day' | 'evening' | 'night';
+export type Season = 'spring' | 'summer' | 'fall' | 'winter';
+export type TimeOfDaySeason = `${TimeOfDay}-${Season}`;
+export declare const getTimeOfDay: () => TimeOfDay;
+export declare const getSeason: () => Season;
+export declare const getTimeOfDaySeason: () => TimeOfDaySeason;

package/dist/utils/Animations.utils.js

@@ -0,0 +1,31 @@
+export const getTimeOfDay = () => {
+    const currentHour = new Date().getHours();
+    switch (true) {
+        case currentHour >= 6 && currentHour < 12:
+            return 'morning';
+        case currentHour >= 12 && currentHour < 18:
+            return 'day';
+        case currentHour >= 18 && currentHour < 21:
+            return 'evening';
+        default:
+            return 'night';
+    }
+};
+export const getSeason = () => {
+    const currentMonth = new Date().getMonth();
+    switch (true) {
+        case currentMonth >= 2 && currentMonth < 5:
+            return 'spring';
+        case currentMonth >= 5 && currentMonth < 8:
+            return 'summer';
+        case currentMonth >= 8 && currentMonth < 11:
+            return 'fall';
+        default:
+            return 'winter';
+    }
+};
+export const getTimeOfDaySeason = () => {
+    const timeOfDay = getTimeOfDay();
+    const season = getSeason();
+    return `${timeOfDay}-${season}`;
+};

package/dist/utils/Avatars.utils.d.ts

@@ -1 +1 @@
-export declare const randomColor: (index: number) => string;
+export declare const randomColor: (index?: number) => string;