@homefile/components-v2 1.2.2 → 1.4.0

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

@@ -189,3 +189,158 @@ export const formFieldsMock = [
         icon: 'book',
     },
 ];
+export const contactFieldsMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'basic-info',
+        value: '',
+        type: 'group',
+        canBeHidden: false,
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'name',
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'First Name',
+                        value: faker.person.firstName(),
+                        type: 'text',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Last Name',
+                        value: faker.person.lastName(),
+                        type: 'text',
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Email',
+                value: faker.internet.email(),
+                type: 'text',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Phone',
+                value: faker.phone.number(),
+                type: 'text',
+            },
+        ],
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Title',
+        value: faker.person.jobTitle(),
+        type: 'text',
+        icon: 'title',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Category',
+        value: 'Pest Control',
+        type: 'select',
+        options: [
+            'Pest Control',
+            'Maintenance',
+            'Construction',
+            'Misc',
+            'Electrical',
+            'Design',
+            'Finance',
+            'Plumbing',
+        ],
+        icon: 'book',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'company-info',
+        value: '',
+        type: 'group',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Company Name',
+                value: faker.company.name(),
+                type: 'text',
+                icon: 'company',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Company Address',
+                value: faker.location.streetAddress(),
+                type: 'text',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'company-location',
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Zip/Country',
+                        value: faker.location.zipCode(),
+                        type: 'text',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'City',
+                        value: faker.location.city(),
+                        type: 'text',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'State',
+                        value: faker.location.state(),
+                        type: 'text',
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'company-contact',
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Phone',
+                        value: faker.phone.number(),
+                        type: 'text',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Website URL',
+                        value: faker.internet.url(),
+                        type: 'text',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Notes',
+        value: faker.lorem.text(),
+        type: 'textarea',
+        icon: 'notes',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Rating',
+        value: faker.number.int({ min: 1, max: 4 }),
+        type: 'rating',
+        icon: 'rating',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Images',
+        value: [],
+        type: 'file',
+        icon: 'image',
+    },
+];

package/dist/proxies/contacts/contactForm.proxy.d.ts

@@ -0,0 +1,2 @@
+import { ContactFormProxyI } from '../../interfaces';
+export declare const contactFormProxy: ContactFormProxyI;

package/dist/proxies/contacts/contactForm.proxy.js

@@ -0,0 +1,7 @@
+import { proxy } from 'valtio';
+export const contactFormProxy = proxy({
+    fields: [],
+    setFields(fields = []) {
+        this.fields = fields;
+    },
+});

package/dist/proxies/contacts/index.d.ts

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

package/dist/proxies/contacts/index.js

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

package/dist/proxies/index.d.ts

@@ -1,3 +1,4 @@
+export * from './contacts';
 export * from './forms';
 export * from './homes';
 export * from './partner';

package/dist/proxies/index.js

@@ -1,3 +1,4 @@
+export * from './contacts';
 export * from './forms';
 export * from './homes';
 export * from './partner';

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, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, Cleaning, Closet, Co2, 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, 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, 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, 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, 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, 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 { 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: 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: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _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: 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: 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: 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: 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: 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/contacts/AddEditContactPanel.stories.d.ts

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

package/dist/stories/contacts/AddEditContactPanel.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AddEditContactPanel, DynamicForm, RightPanel, RolePermissionsTab, } from '../../components';
+import { contactFieldsMock, featuresSelectedMock } from '../../mocks';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'Components/Contacts',
+    component: AddEditContactPanel,
+    args: {
+        detailsComponent: (_jsx(DynamicForm, { form: contactFieldsMock, showTitle: false, onUpload: action('onUpload') })),
+        permissionsComponent: (_jsx(RolePermissionsTab, { selected: featuresSelectedMock, onSelect: action('onSelect') })),
+        isEditing: true,
+        menuItems: [
+            {
+                label: 'Edit',
+                handleClick: action('Edit'),
+            },
+        ],
+    },
+};
+export const AddEditContactPanelComponent = (args) => {
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(AddEditContactPanel, Object.assign({}, args)) }));
+};

package/dist/stories/contacts/ContactCardAddress.stories.d.ts

@@ -9,6 +9,7 @@ export declare const ContactCardAddressComponent: {
         category: string;
         city: string;
         company: string;
+        companyInfo?: import("../../interfaces").ContactCompanyInfoI;
         email: string;
         firstName: string;
         _id: string;
@@ -17,5 +18,6 @@ export declare const ContactCardAddressComponent: {
         state: string;
         title: string;
         zip: string;
+        notes?: string;
     };
 };

package/dist/stories/contacts/ContactCardInfo.stories.d.ts

@@ -9,6 +9,7 @@ export declare const ContactCardInfoComponent: {
         category: string;
         city: string;
         company: string;
+        companyInfo?: import("../../interfaces").ContactCompanyInfoI;
         email: string;
         firstName: string;
         _id: string;
@@ -17,5 +18,6 @@ export declare const ContactCardInfoComponent: {
         state: string;
         title: string;
         zip: string;
+        notes?: string;
     };
 };

package/dist/stories/contacts/ViewContactPanel.stories.d.ts

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

package/dist/stories/contacts/ViewContactPanel.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ViewContactPanel, RightPanel } from '../../components';
+import { ContactsMock } from '../../mocks';
+import { action } from '@storybook/addon-actions';
+import { homeRoleTypes } from '../../helpers';
+export default {
+    title: 'Components/Contacts',
+    component: ViewContactPanel,
+    argTypes: {
+        roleType: {
+            options: homeRoleTypes,
+            control: { type: 'radio' },
+        },
+    },
+    args: {
+        contact: ContactsMock[0],
+        roleType: 'member',
+        menuItems: [
+            {
+                label: 'Edit',
+                handleClick: action('Edit'),
+            },
+        ],
+    },
+};
+export const ViewContactPanelComponent = (args) => {
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ViewContactPanel, Object.assign({}, args)) }));
+};

package/dist/stories/homeAssistant/panel/ApplianceSteps.stories.d.ts

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

package/dist/stories/homeAssistant/panel/ApplianceSteps.stories.js

@@ -7,6 +7,7 @@ export default {
     component: ApplianceSteps,
     args: {
         onclick: action('clicked'),
+        addedAppliances: ['fridge', 'freezer', 'range', 'hood', 'microwave'],
     },
     decorators: [
         (Story) => (_jsx(Box, { w: ['full', 'fit-content'], p: "base", children: _jsx(Story, {}) })),

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -36,5 +36,5 @@ export const HomeAssistantPanelComponent = (args) => {
         return prev - 1;
     });
     const currentForm = forms[currentStep];
-    return (_jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack })));
+    return (_jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave') })));
 };

package/dist/stories/onboarding/pages/NewPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { NewPassword } from '../../../components';
+import { NewPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: NewPassword,
 };
 export const NewPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(NewPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
 };
 NewPasswordPage.args = {
     isLoading: true,

package/dist/stories/onboarding/pages/ResendResetPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { ResendResetPassword } from '../../../components';
+import { ResendResetPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: ResendResetPassword,
 };
 export const ResendResetPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(ResendResetPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(ResendResetPassword, Object.assign({}, args)) }));
 };
 ResendResetPasswordPage.args = {
     email: 'user@user.com.br',

package/dist/stories/onboarding/pages/ResetPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { ResetPassword } from '../../../components';
+import { ResetPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: ResetPassword,
 };
 export const ResetPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(ResetPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(ResetPassword, Object.assign({}, args)) }));
 };
 ResetPasswordPage.args = {
     isLoading: false,

package/dist/stories/onboarding/pages/SignIn.stories.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { SignIn } from '../../../components';
+import { SignIn, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: SignIn,
     decorators: [
-        (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) })),
+        (Story) => (_jsx(CloudsAnimation, { children: _jsx(Story, {}) })),
     ],
 };
 export const SignInPage = (args) => {

package/dist/stories/onboarding/pages/SignUp.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { SignUp } from '../../../components';
+import { CloudsAnimation, SignUp } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: SignUp,
 };
 export const SignUpPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(SignUp, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(SignUp, Object.assign({}, args)) }));
 };
 const valuesFilled = {
     email: 'user@user.com',

package/dist/stories/partner/customPartnerTiles/ShineTile.stories.d.ts

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

package/dist/stories/partner/customPartnerTiles/ShineTile.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShineTile } from '../../../components';
+import { menuMock } from '../../../mocks';
+import { Box } from '@chakra-ui/react';
+export default {
+    title: 'Components/Partner',
+    component: ShineTile,
+    args: {
+        menuItems: menuMock,
+    },
+    argTypes: {
+        menuItems: {
+            control: { disable: true },
+        },
+    },
+};
+export const ShineTileComponent = (args) => {
+    return (_jsx(Box, { maxW: "326px", children: _jsx(ShineTile, Object.assign({}, args)) }));
+};

package/package.json

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

package/src/assets/images/circle-face.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.292" height="27.295" viewBox="0 0 27.292 27.295">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_22561" data-name="Rectangle 22561" width="27.292" height="27.295" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_18754" data-name="Group 18754" clip-path="url(#clip-path)">
+    <path id="Path_14078" data-name="Path 14078" d="M35.441,22.423a6.682,6.682,0,0,1-6.651,6.154,6.713,6.713,0,0,1-1.73-.235,6.672,6.672,0,0,1,6.648-6.151c.186,0,.365.013.545.026a6.945,6.945,0,0,1,1.187.207" transform="translate(-20.064 -16.452)" fill="#40566b"/>
+    <path id="Path_14079" data-name="Path 14079" d="M57.189,25.353a6.625,6.625,0,0,0,.59-2.263,6.674,6.674,0,0,1,4.928,6.126,6.674,6.674,0,0,1-5.518-3.863" transform="translate(-42.401 -17.12)" fill="#323954"/>
+    <path id="Path_14080" data-name="Path 14080" d="M34.776,31.84A6.674,6.674,0,0,0,40.295,35.7c0,.106.015.209.015.315V38.49a6.675,6.675,0,0,1-13.35,0V36.019c0-.176.013-.349.026-.522a6.632,6.632,0,0,0,7.791-3.656" transform="translate(-19.989 -23.607)" fill="#daf1f3"/>
+    <path id="Path_14081" data-name="Path 14081" d="M26.045,83.189l.771,2.873A13.633,13.633,0,0,1,13,81.845l2.242-1.955a10.653,10.653,0,0,0,10.8,3.3" transform="translate(-9.639 -59.233)" fill="#e24c5d"/>
+    <path id="Path_14082" data-name="Path 14082" d="M61.877,3.486,59.891,5.7A10.626,10.626,0,0,0,52.77,2.974V0a13.589,13.589,0,0,1,9.107,3.486" transform="translate(-39.125)" fill="#f6cf76"/>
+    <path id="Path_14083" data-name="Path 14083" d="M86.837,23.642a13.574,13.574,0,0,1-.641,4.135L83.3,27.063a10.679,10.679,0,0,0-2.991-11.369L82.3,13.48a13.616,13.616,0,0,1,4.541,10.162" transform="translate(-59.545 -9.994)" fill="#e24c5d"/>
+    <path id="Path_14084" data-name="Path 14084" d="M7.183,68.746,4.941,70.7A13.61,13.61,0,0,1,2.13,65.576l2.891-.716a10.633,10.633,0,0,0,2.161,3.886" transform="translate(-1.579 -48.089)" fill="#f6cf76"/>
+    <path id="Path_14085" data-name="Path 14085" d="M73.776,66.642A13.668,13.668,0,0,1,64.3,75.689l-.771-2.873a10.694,10.694,0,0,0,7.351-6.888Z" transform="translate(-47.104 -48.881)" fill="#00c0b7"/>
+    <path id="Path_14086" data-name="Path 14086" d="M4,4.008a13.6,13.6,0,0,1,9.648-4V2.984a10.672,10.672,0,0,0-10.2,13.8L.551,17.5A13.65,13.65,0,0,1,4,4.008" transform="translate(0 -0.007)" fill="#00c0b7"/>
+    <path id="Path_14087" data-name="Path 14087" d="M48.382,68.16a2.9,2.9,0,0,1-1.5-.418l.4-.665a2.112,2.112,0,0,0,2.693-.424l.584.51a2.9,2.9,0,0,1-2.182,1" transform="translate(-34.763 -49.419)" fill="#40566b"/>
+    <path id="Path_14088" data-name="Path 14088" d="M41.266,52.4a.776.776,0,1,1-.776-.776.776.776,0,0,1,.776.776" transform="translate(-29.446 -38.272)" fill="#40566b"/>
+    <path id="Path_14089" data-name="Path 14089" d="M59.766,52.4a.776.776,0,1,1-.776-.776.776.776,0,0,1,.776.776" transform="translate(-43.162 -38.272)" fill="#40566b"/>
+  </g>
+</svg>

package/src/assets/images/company.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.2" height="21.5" viewBox="0 0 27.2 21.5">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_18088" data-name="Rectangle 18088" width="27.2" height="21.5" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_16616" data-name="Group 16616" transform="translate(-1127.558 -2313.81)">
+    <rect id="Rectangle_18076" data-name="Rectangle 18076" width="7.966" height="7.071" transform="translate(1144.598 2324.792)" fill="#00c0b7"/>
+    <rect id="Rectangle_18077" data-name="Rectangle 18077" width="7.966" height="3.146" transform="translate(1144.598 2331.864)" fill="#f6cf76"/>
+    <path id="Path_11902" data-name="Path 11902" d="M33.78,44.66v2.047H10.97V44.66Z" transform="translate(1118.783 2278.086)" fill="#40566b"/>
+    <path id="Path_11903" data-name="Path 11903" d="M33.78,29.95v2.943H10.97V29.95H33.78Z" transform="translate(1118.783 2289.852)" fill="#f6cf76"/>
+    <path id="Path_11904" data-name="Path 11904" d="M35.8,0V3.81H48.674V0Z" transform="translate(1098.921 2313.81)" fill="#e24c5d"/>
+    <path id="Path_11905" data-name="Path 11905" d="M71.41,61.961v3.146H67.97V54.889H71.41Z" transform="translate(1073.188 2269.903)" fill="#00a1aa"/>
+    <path id="Path_11906" data-name="Path 11906" d="M54.219,54.889V65.106H50.78V54.889Z" transform="translate(1086.939 2269.903)" fill="#00a1aa"/>
+    <rect id="Rectangle_18078" data-name="Rectangle 18078" width="7.965" height="3.146" transform="translate(1129.753 2331.864)" fill="#f6cf76"/>
+    <rect id="Rectangle_18079" data-name="Rectangle 18079" width="7.965" height="7.071" transform="translate(1129.753 2324.792)" fill="#00c0b7"/>
+    <rect id="Rectangle_18080" data-name="Rectangle 18080" width="0.4" height="10.217" transform="translate(1140.958 2324.792)" fill="#40566b"/>
+    <rect id="Rectangle_18081" data-name="Rectangle 18081" width="0.6" height="2.183" transform="translate(1137.056 2317.619)" fill="#40566b"/>
+    <rect id="Rectangle_18082" data-name="Rectangle 18082" width="0.6" height="2.183" transform="translate(1144.66 2317.619)" fill="#40566b"/>
+    <rect id="Rectangle_18083" data-name="Rectangle 18083" width="2.286" height="0.4" transform="translate(1146.845 2328.267) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18084" data-name="Rectangle 18084" width="4.741" height="0.4" transform="translate(1147.044 2330.002) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18085" data-name="Rectangle 18085" width="2.288" height="0.4" transform="translate(1132.034 2328.266) rotate(-44.939)" fill="#fff"/>
+    <rect id="Rectangle_18086" data-name="Rectangle 18086" width="4.74" height="0.4" transform="translate(1132.235 2330.001) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18087" data-name="Rectangle 18087" width="27.2" height="0.6" transform="translate(1127.558 2334.709)" fill="#40566b"/>
+    <g id="Group_16615" data-name="Group 16615" transform="translate(1127.558 2313.81)">
+      <g id="Group_16614" data-name="Group 16614" clip-path="url(#clip-path)">
+        <path id="Path_11907" data-name="Path 11907" d="M44.83,5.842c.008.179.2.255.395.255.174,0,.375-.042.375-.246,0-.224-.241-.241-.428-.258-.356-.028-.714-.151-.714-.557,0-.434.356-.616.745-.616.367,0,.748.154.748.593h-.392c-.023-.159-.188-.227-.356-.227s-.333.089-.333.241c0,.173.171.215.375.235.415.039.77.129.77.588s-.4.608-.787.61-.8-.19-.8-.619Z" transform="translate(-35.54 -3.536)" fill="#fff"/>
+        <path id="Path_11908" data-name="Path 11908" d="M58.048,6.59V5.762H57.3V6.59h-.417V4.631H57.3v.747h.75V4.631h.42V6.59Z" transform="translate(-45.5 -3.704)" fill="#fff"/>
+        <path id="Path_11909" data-name="Path 11909" d="M70.329,6.5a.958.958,0,0,1-1-1.01,1,1,0,1,1,2,0A.963.963,0,0,1,70.329,6.5m.006-.381a.57.57,0,0,0,.582-.63.582.582,0,1,0-1.162,0,.564.564,0,0,0,.579.63" transform="translate(-55.459 -3.581)" fill="#fff"/>
+        <path id="Path_11910" data-name="Path 11910" d="M83.842,6.57V4.611c.28,0,.557,0,.837,0a.676.676,0,0,1,.7.714.667.667,0,0,1-.7.692h-.417V6.57Zm.837-.913a.315.315,0,0,0,.3-.344.309.309,0,0,0-.3-.336h-.426v.68Z" transform="translate(-67.066 -3.687)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -20,10 +20,12 @@ import Check from './check.svg'
 import CheckInCircle from './check-in-circle.svg'
 import CheckPen from './check-pen.svg'
 import Chemistry from './chemistry.svg'
+import CircleFace from './circle-face.svg'
 import Cleaning from './cleaning.svg'
 import Closet from './closet.svg'
 import Clouds from './clouds.png'
 import Co2 from './co2.svg'
+import Company from './company.svg'
 import ComputerReport from './computer-report.svg'
 import Confirmation from './confirmation.svg'
 import Construction from './construction.svg'
@@ -76,6 +78,7 @@ import Laundry from './laundry.svg'
 import Light from './light.svg'
 import LivingRoom from './living-room.svg'
 import Loading from './loading.svg'
+import Location from './location.jpg'
 import LogoCompany from './logo-company.svg'
 import LogoSmall from './logo-small.svg'
 import MagnifyingGlassReport from './magnifying-glass-report.svg'
@@ -172,10 +175,12 @@ export {
   CheckInCircle,
   CheckPen,
   Chemistry,
+  CircleFace,
   Cleaning,
   Closet,
   Clouds,
   Co2,
+  Company,
   ComputerReport,
   Confirmation,
   Construction,
@@ -228,6 +233,7 @@ export {
   Light,
   LivingRoom,
   Loading,
+  Location,
   LogoCompany,
   LogoSmall,
   MagnifyingGlassReport,
@@ -308,3 +314,4 @@ export * from './form'
 export * from './logos'
 export * from './groups'
 export * from './placeholders'
+export * from './shine'