@homefile/components-v2 1.0.15 → 1.2.0

package/dist/assets/images/index.d.ts

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

package/dist/assets/images/index.js

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

package/dist/assets/images/index.ts

@@ -119,6 +119,8 @@ import Send from './send.svg'
 import ShareHome from './share-home.svg'
 import ShareWith from './share-with.svg'
 import SixtyEight from './sixty-eight.svg'
+import SMS from './sms.svg'
+import Social from './social.svg'
 import SolarPanel from './solar-panel.svg'
 import Sprinkler from './sprinkler.svg'
 import Structure from './structure.svg'
@@ -269,6 +271,8 @@ export {
   ShareHome,
   ShareWith,
   SixtyEight,
+  SMS,
+  Social,
   SolarPanel,
   Sprinkler,
   Structure,

package/dist/assets/images/sms.svg

@@ -0,0 +1,21 @@
+<svg id="Group_18906" data-name="Group 18906" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.228" height="24" viewBox="0 0 20.228 24">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_22680" data-name="Rectangle 22680" width="20.227" height="24" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_18894" data-name="Group 18894" clip-path="url(#clip-path)">
+    <path id="Path_14256" data-name="Path 14256" d="M7.713,26.082H8.926l1.288,1.469L11.5,26.082h1.815v5.3H0V14.26H13.316v3.114h-5.6a.762.762,0,0,0-.76.76v7.188a.762.762,0,0,0,.76.76" transform="translate(0 -11.033)" fill="#40566b"/>
+    <path id="Path_14257" data-name="Path 14257" d="M15.3,26.083v5.3H3.618V14.26H15.3V26.083Z" transform="translate(-2.799 -11.033)" fill="#daf1f3"/>
+    <rect id="Rectangle_22678" data-name="Rectangle 22678" width="6.635" height="0.453" transform="matrix(0.707, -0.707, 0.707, 0.707, 3.174, 12.446)" fill="#fff"/>
+    <rect id="Rectangle_22679" data-name="Rectangle 22679" width="6.593" height="0.453" transform="matrix(0.707, -0.707, 0.707, 0.707, 3.174, 15.761)" fill="#fff"/>
+    <path id="Path_14258" data-name="Path 14258" d="M44,28.781v7.188a.762.762,0,0,1-.758.76H35.27L33.982,38.2l-1.287-1.469H31.481a.762.762,0,0,1-.76-.76V28.781a.762.762,0,0,1,.76-.76H43.238a.761.761,0,0,1,.758.76" transform="translate(-23.769 -21.68)" fill="#e24c5d"/>
+    <path id="Path_14259" data-name="Path 14259" d="M70.756,41.351a1.026,1.026,0,1,1-1.025,1.025,1.026,1.026,0,0,1,1.025-1.025" transform="translate(-53.95 -31.993)" fill="#fff"/>
+    <path id="Path_14260" data-name="Path 14260" d="M56.147,41.351a1.026,1.026,0,1,1-1.028,1.025,1.026,1.026,0,0,1,1.028-1.025" transform="translate(-42.645 -31.993)" fill="#fff"/>
+    <path id="Path_14261" data-name="Path 14261" d="M41.548,41.351a1.026,1.026,0,1,1-1.027,1.025,1.025,1.025,0,0,1,1.027-1.025" transform="translate(-31.351 -31.993)" fill="#fff"/>
+    <path id="Path_14262" data-name="Path 14262" d="M13.316,89.931v2.385a1.268,1.268,0,0,1-1.265,1.263H1.263A1.268,1.268,0,0,1,0,92.316V89.931Z" transform="translate(0 -69.579)" fill="#40566b"/>
+    <path id="Path_14263" data-name="Path 14263" d="M13.316,1.263V3.227H0V1.263A1.268,1.268,0,0,1,1.263,0H12.051a1.268,1.268,0,0,1,1.265,1.263" fill="#40566b"/>
+    <path id="Path_14264" data-name="Path 14264" d="M25.614,6.309h-2.34a.339.339,0,1,1,0-.679h2.34a.339.339,0,0,1,0,.679" transform="translate(-17.745 -4.356)" fill="#18252f"/>
+    <path id="Path_14265" data-name="Path 14265" d="M27.057,94.069a.977.977,0,1,1-.977-.977.977.977,0,0,1,.977.977" transform="translate(-19.422 -72.025)" fill="#323954"/>
+  </g>
+</svg>

package/dist/assets/images/social.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.558" height="17.29" viewBox="0 0 22.558 17.29">
+  <g id="Group_18914" data-name="Group 18914" transform="translate(-2445.885 -801.401)">
+    <g id="Group_18893" data-name="Group 18893" transform="translate(2445.885 801.401)">
+      <g id="Group_18913" data-name="Group 18913" transform="translate(0 0)">
+        <path id="Path_14254" data-name="Path 14254" d="M22.558,13.5A1.3,1.3,0,0,1,21.264,14.8H7.73L5.541,17.29,3.351,14.8H1.291A1.3,1.3,0,0,1,0,13.5V1.291A1.293,1.293,0,0,1,1.291,0H21.264a1.3,1.3,0,0,1,1.294,1.291Zm-4.34-6.51-5.272,0-5.274,0" transform="translate(0 0)" fill="#e24c5d"/>
+      </g>
+    </g>
+    <text id="_" data-name="#" transform="translate(2450.934 812.401)" fill="#fff" font-size="10" font-family="Poppins-Medium, Poppins" font-weight="500"><tspan x="0" y="0">#</tspan></text>
+  </g>
+</svg>

package/dist/assets/locales/en/index.json

@@ -108,6 +108,7 @@
     "next": "Next",
     "previous": "Previous",
     "save": "Save",
+    "send": "Send",
     "skip": "Skip for now"
   },
   "createDocument": {
@@ -138,6 +139,11 @@
   },
   "contacts": {
     "addBtn": "Contact",
+    "error": "Email should be from a valid Homefile account",
+    "shareContact": "Share Contact",
+    "placeholders": {
+      "email": "Enter Email"
+    },
     "title": "Contacts"
   },
   "daysOfWeek": {
@@ -448,6 +454,13 @@
     "title": "My Homes"
   },
   "myProfile": {
+    "actions": {
+      "add": "Add",
+      "can": "Can",
+      "edit": "Edit",
+      "delete": "Delete",
+      "view": "View"
+    },
     "account": {
       "cancel": "Cancel Account",
       "cancelInfo": "To cancel your Homefile account, please contact Homefile below.",
@@ -477,6 +490,20 @@
       "receiptsTitle": "Receipts",
       "toDelete": "To delete a card, you must first add a new card."
     },
+    "permissions": {
+      "contributor": {
+        "description": "Can view, add, and edit the information when you share a home.",
+        "title": "Contributor Permissions"
+      },
+      "manager": {
+        "description": "Can view, add, and edit all home information within a home.",
+        "title": "Manager Permissions"
+      },
+      "member": {
+        "description": "Can only view information when you share a home.",
+        "title": "Member Permissions"
+      }
+    },
     "placeholders": {
       "cardHolder": "Name on card",
       "cardNumber": "Card number",
@@ -491,7 +518,8 @@
       "tab2": "Subscription",
       "tab3": "Payment",
       "tab4": "Email",
-      "tab5": "Sharing"
+      "tab5": "Sharing",
+      "tab6": "Role Permissions"
     }
   },
   "newPassword": {

package/dist/components/contacts/ContactCard.d.ts

@@ -1,2 +1,2 @@
 import { ContactCardI } from '../../interfaces';
-export declare const ContactCard: ({ contact, index, menuItems }: ContactCardI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCard: ({ apiError, contact, index, menuItems, onShare, }: ContactCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Flex, Stack } from '@chakra-ui/react';
 import { ContactCardHeader, ContactCardInfo, ContactCardAddress, } from '..';
 import { colors } from '../../theme/colors';
-export const ContactCard = ({ contact, index, menuItems }) => {
+export const ContactCard = ({ apiError, contact, index, menuItems, onShare, }) => {
     const { address, city, state, zip, company, email, firstName, lastName, phone, } = contact;
-    return (_jsx(Container, { maxW: 'none', children: _jsxs(Stack, { pb: "base", px: "base", children: [_jsx(ContactCardHeader, { contact: contact, menuItems: menuItems }), _jsxs(Flex, { justify: "space-between", align: "stretch", gap: "base", children: [_jsx(ContactCardInfo, { company, email, firstName, lastName, phone, index }), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, { company, address, city, state, zip }) })] })] }) }));
+    return (_jsx(Container, { maxW: 'none', children: _jsxs(Stack, { pb: "base", px: "base", children: [_jsx(ContactCardHeader, { apiError: apiError, contact: contact, menuItems: menuItems, onShare: onShare }), _jsxs(Flex, { justify: "space-between", align: "stretch", gap: "base", children: [_jsx(ContactCardInfo, { company, email, firstName, lastName, phone, index }), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, { company, address, city, state, zip }) })] })] }) }));
 };

package/dist/components/contacts/ContactCardHeader.d.ts

@@ -1,2 +1,2 @@
 import { ContactCardHeaderI } from '../../interfaces';
-export declare const ContactCardHeader: ({ contact, menuItems, }: ContactCardHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCardHeader: ({ apiError, contact, menuItems, onShare, }: ContactCardHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactCardHeader.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Flex, Image, Text } from '@chakra-ui/react';
+import { Flex, IconButton, Image, Text, useDisclosure } from '@chakra-ui/react';
 import { Contacts } from '../../assets/images';
-import { IconMenu, MoreHorizontal } from '..';
-export const ContactCardHeader = ({ contact, menuItems, }) => {
+import { IconMenu, MoreHorizontal, ShareContactPopover, ShareIcon, } from '..';
+export const ContactCardHeader = ({ apiError, contact, menuItems, onShare, }) => {
     var _a;
     const { category, title } = contact;
-    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: !menuItems })] }));
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), _jsxs(Flex, { align: "center", position: "relative", gap: "base", py: "base", children: [_jsx(IconButton, { "aria-label": "share", variant: "menuIcon", icon: _jsx(ShareIcon, { size: 18 }), onClick: onOpen, w: "fit-content" }), _jsx(ShareContactPopover, { apiError: apiError, contact: contact, isOpen: isOpen, onClose: onClose, onShare: onShare }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: menuItems.length < 1 })] })] }));
 };

package/dist/components/contacts/ContactsContent.d.ts

@@ -1,2 +1,2 @@
 import { ContactsContentI } from '../../interfaces';
-export declare const ContactsContent: ({ contacts, menuItems, handleClose, children, handleAdd, disabled, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onShare, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactsContent.js

@@ -4,9 +4,9 @@ import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, } from '@chakra-u
 import { Contacts } from '../../assets/images';
 import { ContactCard, LeftButtonAnimated, PanelHeader, SearchInput, } from '..';
 import { useContactsContent, useWindowDimensions } from '../../hooks';
-export const ContactsContent = ({ contacts, menuItems, handleClose, children, handleAdd, disabled, }) => {
+export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onShare, }) => {
     const { filteredContacts, handleChange, search } = useContactsContent(contacts);
     const { windowDimensions: { width }, } = useWindowDimensions();
     const maxW = width > 413 ? '16rem' : '10rem';
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", children: [_jsx(Stack, { spacing: "2", p: "base", bg: "lightBlue.2", minHeight: "full", children: filteredContacts.map((contact, idx) => (_jsx(ContactCard, { contact: contact, menuItems: menuItems, index: idx }, contact._id))) }), children] })] }));
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", children: [_jsx(Stack, { spacing: "2", p: "base", bg: "lightBlue.2", minHeight: "full", children: filteredContacts.map((contact, idx) => (_jsx(ContactCard, { apiError: apiError, contact: contact, menuItems: menuItems, onShare: onShare, index: idx }, contact._id))) }), children] })] }));
 };

package/dist/components/contacts/ShareContactPopover.d.ts

@@ -0,0 +1,2 @@
+import { ShareContactPopoverI } from '../../interfaces';
+export declare const ShareContactPopover: ({ apiError, contact, isOpen, onClose, onShare, }: ShareContactPopoverI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/contacts/ShareContactPopover.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { t } from 'i18next';
+import { Text, Box, Flex, IconButton, Grid } from '@chakra-ui/react';
+import { HiddenField, Close, Overlay, ShareContactByEmail } from '..';
+import { Feedback, ShareWith, SMS, Social } from '../../assets/images';
+export const ShareContactPopover = ({ apiError, contact, isOpen, onClose, onShare, }) => {
+    const [activeField, setActiveField] = useState('email');
+    if (!isOpen)
+        return null;
+    const forms = {
+        email: (_jsx(ShareContactByEmail, { apiError: apiError, contact: contact, onShare: onShare })),
+        sms: _jsx(Fragment, {}),
+        social: _jsx(Fragment, {}),
+        homefile: _jsx(Fragment, {}),
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "absolute", top: "0px", right: ['0px', '50px'], bg: "lightBlue.1", zIndex: "modal", w: "367px", borderRadius: "md", boxShadow: "xl", overflow: "hidden", children: [_jsxs(Flex, { justify: "space-between", align: "center", h: "34px", bg: "neutral.white", px: "base", children: [_jsx(Text, { fontSize: "sm", children: t('contacts.shareContact') }), _jsx(IconButton, { variant: "menuIcon", "aria-label": "Close", icon: _jsx(Close, {}), onClick: onClose, w: "fit-content" })] }), _jsxs(Box, { children: [forms[activeField], _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", p: "base", children: fields.map(({ disabled, icon = 'email', id, name = '' }) => {
+                                    return (_jsx(HiddenField, { disabled: disabled, id: id, name: name, icon: fieldIcons[icon], onClick: () => setActiveField(id), isActive: id === activeField }, id));
+                                }) })] })] }), _jsx(Overlay, { onClick: onClose, bg: "overlay", showOverlay: true, position: "fixed", zIndex: "4" })] }));
+};
+const fields = [
+    { disabled: true, icon: 'homefile', id: 'homefile', name: 'Homefile' },
+    { disabled: true, icon: 'social', id: 'social', name: 'Social' },
+    { disabled: true, icon: 'sms', id: 'sms', name: 'SMS' },
+    { disabled: false, icon: 'email', id: 'email', name: 'Email' },
+];
+const fieldIcons = {
+    homefile: ShareWith,
+    social: Social,
+    sms: SMS,
+    email: Feedback,
+};

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

@@ -1,5 +1,7 @@
+export * from './shareContactForms';
 export * from './ContactCard';
 export * from './ContactCardAddress';
 export * from './ContactCardHeader';
 export * from './ContactCardInfo';
 export * from './ContactsContent';
+export * from './ShareContactPopover';

package/dist/components/contacts/index.js

@@ -1,5 +1,7 @@
+export * from './shareContactForms';
 export * from './ContactCard';
 export * from './ContactCardAddress';
 export * from './ContactCardHeader';
 export * from './ContactCardInfo';
 export * from './ContactsContent';
+export * from './ShareContactPopover';

package/dist/components/contacts/shareContactForms/ShareContactByEmail.d.ts

@@ -0,0 +1,2 @@
+import { ShareContactByEmailI } from '../../../interfaces';
+export declare const ShareContactByEmail: ({ apiError, contact, onShare, }: ShareContactByEmailI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/shareContactForms/ShareContactByEmail.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Box, Button, Flex } from '@chakra-ui/react';
+import { TextInput } from '../..';
+import { isValidEmail } from '../../../utils';
+export const ShareContactByEmail = ({ apiError, contact, onShare, }) => {
+    const [value, setValue] = useState('');
+    const [isDirty, setIsDirty] = useState(apiError !== null && apiError !== void 0 ? apiError : false);
+    const errorMessage = apiError
+        ? t('contacts.error')
+        : `${t('forms.email')} ${t('forms.required')}`;
+    return (_jsx(Box, { bg: "lightBlue.2", p: "base", w: "100%", children: _jsxs(Flex, { gap: "base", children: [_jsx(TextInput, { errorMessage: errorMessage, hasError: !isValidEmail(value) && isDirty, id: "shareContactByEmail", handleChange: (e) => setValue(e.target.value), placeholder: t('contacts.placeholders.email'), value: value, onBlur: () => setIsDirty(true) }), _jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => {
+                        onShare({
+                            contact,
+                            emailTo: value,
+                        });
+                        setValue('');
+                        setIsDirty(false);
+                    }, disabled: !isValidEmail(value), children: t('buttons.send') })] }) }));
+};

package/dist/components/contacts/shareContactForms/index.d.ts

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

package/dist/components/contacts/shareContactForms/index.js

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

package/dist/components/folderPanel/displayFiles/GridFile.js

@@ -24,5 +24,5 @@ export const GridFile = (_a) => {
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "46px", h: "49px", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
+    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "46px", h: "49px", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
 };

package/dist/components/folderPanel/displayFiles/IconMenuWithMove.js

@@ -4,7 +4,7 @@ import { MenuButton, IconButton, Menu, MenuItem, MenuList, MenuDivider, } from '
 import { ChevronRight, Overlay } from '../..';
 import { colors } from '../../../theme/colors';
 export const IconMenuWithMove = ({ disabled = false, icon, itemForm, menuItems, onMove, }) => {
-    return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "#00000040", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: "menuIcon", w: "fit-content", disabled: disabled }), _jsxs(MenuList, { zIndex: "5", children: [menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
+    return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: "menuIcon", w: "fit-content", disabled: disabled }), _jsxs(MenuList, { zIndex: "5", children: [menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
                                 bg: 'lightGreen.1',
                             }, _focus: {
                                 bg: 'lightGreen.1',

package/dist/components/folderPanel/displayFiles/ListFile.js

@@ -24,5 +24,5 @@ export const ListFile = (_a) => {
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, minW: "32px", h: "auto", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
+    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, minW: "32px", h: "auto", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
 };

package/dist/components/folderPanel/displayFiles/MoveModal.js

@@ -28,5 +28,5 @@ export const MoveModal = (_a) => {
             secondOption: secondFilter,
         });
     };
-    return (_jsxs(Box, { w: "inherit", h: "inherit", children: [_jsx(Overlay, { bg: "#00000040", showOverlay: true, position: "fixed", zIndex: "modal" }), _jsxs(Stack, Object.assign({ p: "base", boxShadow: "lg", w: "14rem", bg: "neutral.white", spacing: "base", zIndex: "modal", position: "absolute", top: "350px", left: "50%", transform: "translate(-50%, -50%)" }, props, { children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { children: t('folderSharing.move') }), _jsx(IconButton, { variant: "menuIconWithShadow", "aria-label": t('buttons.close'), maxW: "fit-content", onClick: onClose, icon: _jsx(Close, { size: 20 }) })] }), _jsx(SelectInput, { width: "100%", handleClick: handleFirstFilterClick, initialValue: firstInitialFilter, items: firstFilterItems }), _jsx(SelectInput, { width: "100%", handleClick: setSecondFilter, initialValue: secondInitialFilter, items: secondFilterItems }), _jsx(Button, { alignSelf: "flex-end", variant: "secondary", maxW: "fit-content", maxH: "input.sm", textTransform: "capitalize", onClick: handleSave, isLoading: loading, children: t('buttons.save') })] }))] }));
+    return (_jsxs(Box, { w: "inherit", h: "inherit", children: [_jsx(Overlay, { bg: "overlay", showOverlay: true, position: "fixed", zIndex: "modal" }), _jsxs(Stack, Object.assign({ p: "base", boxShadow: "lg", w: "14rem", bg: "neutral.white", spacing: "base", zIndex: "modal", position: "absolute", top: "350px", left: "50%", transform: "translate(-50%, -50%)" }, props, { children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { children: t('folderSharing.move') }), _jsx(IconButton, { variant: "menuIconWithShadow", "aria-label": t('buttons.close'), maxW: "fit-content", onClick: onClose, icon: _jsx(Close, { size: 20 }) })] }), _jsx(SelectInput, { width: "100%", handleClick: handleFirstFilterClick, initialValue: firstInitialFilter, items: firstFilterItems }), _jsx(SelectInput, { width: "100%", handleClick: setSecondFilter, initialValue: secondInitialFilter, items: secondFilterItems }), _jsx(Button, { alignSelf: "flex-end", variant: "secondary", maxW: "fit-content", maxH: "input.sm", textTransform: "capitalize", onClick: handleSave, isLoading: loading, children: t('buttons.save') })] }))] }));
 };

package/dist/components/forms/dynamicForm/HiddenField.d.ts

@@ -1,2 +1,2 @@
 import { HiddenFieldI } from '../../../interfaces';
-export declare const HiddenField: ({ icon, id, name, onClick }: HiddenFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenField: ({ disabled, icon, id, isActive, name, onClick, }: HiddenFieldI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Image, Text } from '@chakra-ui/react';
-export const HiddenField = ({ icon, id, name, onClick }) => {
+export const HiddenField = ({ disabled, icon, id, isActive, name, onClick, }) => {
     const handleClick = () => onClick(id);
-    return (_jsxs(Center, { as: "button", bg: "neutral.white", borderRadius: "md", w: "auto", h: "80px", boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: "transparent", _hover: {
+    return (_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "md", w: "auto", h: "80px", boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
             borderColor: 'blue.1',
+        }, _disabled: {
+            opacity: 0.5,
+            _hover: {
+                borderColor: 'transparent',
+            },
         }, _active: {
             boxShadow: 'md',
         }, children: [_jsx(Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }));

package/dist/components/headers/TabsHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, } from '@chakra-ui/react';
 export const TabsHeader = ({ onChange, tabList, tabIndex, defaultIndex, rightButton, }) => {
-    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(Tab, { minW: "1rem", px: "base", py: "0", lineHeight: "10", textTransform: "uppercase", fontWeight: "medium", fontSize: "sm", fontFamily: "primary", color: "blue.3", borderBottom: "3px solid transparent", _hover: { cursor: 'pointer' }, _focus: { outline: 'none' }, _selected: {
+    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, h: "100%", children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(Tab, { minW: "1rem", px: "base", py: "0", lineHeight: "10", textTransform: "uppercase", fontWeight: "medium", fontSize: "sm", fontFamily: "primary", color: "blue.3", borderBottom: "3px solid transparent", _hover: { cursor: 'pointer' }, _focus: { outline: 'none' }, _selected: {
                                     color: 'blue.8',
                                     fontWeight: 'bold',
                                     borderColor: 'blue.8',

package/dist/components/homeBoard/HomeBoard.js

@@ -45,7 +45,7 @@ export const HomeBoard = () => {
                     label: 'Edit Contact',
                     handleClick: () => null,
                 },
-            ] })),
+            ], onShare: () => null })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
         HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose })),

package/dist/components/homeBoard/HomeCard.js

@@ -29,5 +29,5 @@ export const HomeCard = (_a) => {
     };
     const { imageUrl } = useHomeCard(image);
     const hasImage = Boolean(imageUrl);
-    return (_jsx(TileTooltip, { label: "homeCard", children: _jsxs(Box, { children: [_jsxs(Center, { pos: "relative", h: "12rem", bg: "lightBlue.2", overflow: "hidden", children: [loading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !loading && (_jsxs(_Fragment, { children: [edit && (_jsx(EditFileUploader, { handleInputChange: addImage, "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1" })), _jsx(Image, { src: (hasImage && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, w: "full", objectFit: "cover" })] }))] }), !isEditMode && (_jsx(HomeCardReadOnly, Object.assign({ addImage: addImage, name: name, externalLink: externalLink }, props, address))), isEditMode && (_jsx(EditHomeDetails, { address: address, externalLink: externalLink, name: name, setIsDirty: setIsDirty }))] }) }));
+    return (_jsx(TileTooltip, { label: "homeCard", children: _jsxs(Box, { children: [_jsxs(Center, { pos: "relative", h: "12rem", bg: "lightBlue.2", overflow: "hidden", children: [loading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !loading && (_jsxs(_Fragment, { children: [edit && (_jsx(EditFileUploader, { handleInputChange: addImage, "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1" })), _jsx(Image, { src: (hasImage && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, w: "full", objectFit: "cover" })] }))] }), !isEditMode && (_jsx(HomeCardReadOnly, Object.assign({ addImage: addImage, name: name, externalLink: externalLink, edit: edit }, props, address))), isEditMode && (_jsx(EditHomeDetails, { address: address, externalLink: externalLink, name: name, setIsDirty: setIsDirty }))] }) }));
 };

package/dist/components/homeSummary/DocumentMenu.js

@@ -5,7 +5,7 @@ import { ChevronRight, IconAndText, Overlay, Plus } from '..';
 import { colors } from '../../theme/colors';
 export const DocumentMenu = ({ documents, isDisabled, title, }) => {
     const filteredDocuments = documents.filter((document) => document.active !== false);
-    return (_jsx(Menu, { gutter: 0, matchWidth: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "#00000040", showOverlay: isOpen, zIndex: "2", position: "fixed" }), _jsx(MenuButton, { as: Button, variant: "menu", disabled: isDisabled, zIndex: "3", children: _jsxs(Flex, { alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: title, icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)', transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(MenuList, { borderTopRadius: "0", boxShadow: "lg", zIndex: "3", children: documents &&
+    return (_jsx(Menu, { gutter: 0, matchWidth: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, zIndex: "2", position: "fixed" }), _jsx(MenuButton, { as: Button, variant: "menu", disabled: isDisabled, zIndex: "3", children: _jsxs(Flex, { alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: title, icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)', transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(MenuList, { borderTopRadius: "0", boxShadow: "lg", zIndex: "3", children: documents &&
                         filteredDocuments.map(({ onClick, icon, active = true, label }) => (_jsxs(MenuItem, { minH: "3rem", onClick: onClick, isDisabled: !active, _hover: {
                                 bg: 'lightGreen.1',
                             }, _focus: {

package/dist/components/icons/ShareIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ShareIcon: ({ stroke, size }: {
+    stroke?: string | undefined;
+    size?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/ShareIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors } from '../../theme/colors';
+export const ShareIcon = ({ stroke = colors.blue[3], size = 24 }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 19.5 21.5", children: _jsxs("g", { id: "Icon_feather-share-2", "data-name": "Icon feather-share-2", transform: "translate(-3.75 -2.25)", children: [_jsx("path", { id: "Path_14156", "data-name": "Path 14156", d: "M28.5,6a3,3,0,1,1-3-3,3,3,0,0,1,3,3Z", transform: "translate(-6 0)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Path_14157", "data-name": "Path 14157", d: "M10.5,16.5a3,3,0,1,1-3-3A3,3,0,0,1,10.5,16.5Z", transform: "translate(0 -3.5)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Path_14158", "data-name": "Path 14158", d: "M28.5,27a3,3,0,1,1-3-3A3,3,0,0,1,28.5,27Z", transform: "translate(-6 -7)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Path_14159", "data-name": "Path 14159", d: "M12.885,20.265l6.83,3.98", transform: "translate(-2.795 -5.755)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Path_14160", "data-name": "Path 14160", d: "M19.7,9.765l-6.82,3.98", transform: "translate(-2.795 -2.255)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }) }));
+};

package/dist/components/icons/index.d.ts

@@ -26,6 +26,7 @@ export * from './MoreHorizontal';
 export * from './OpenVideo';
 export * from './Plus';
 export * from './SearchIcon';
+export * from './ShareIcon';
 export * from './Star';
 export * from './TikTok';
 export * from './Trash';

package/dist/components/icons/index.js

@@ -26,6 +26,7 @@ export * from './MoreHorizontal';
 export * from './OpenVideo';
 export * from './Plus';
 export * from './SearchIcon';
+export * from './ShareIcon';
 export * from './Star';
 export * from './TikTok';
 export * from './Trash';

package/dist/components/launchpad/IconMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MenuButton, IconButton, Menu, MenuItem, MenuList, } from '@chakra-ui/react';
 import { Overlay } from '..';
 export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, variant = 'menuIcon', width = 'fit-content', }) => {
-    return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "#00000040", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: variant, w: width, disabled: disabled, marginTop: "0 !important" }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
+    return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: variant, w: width, disabled: disabled, marginTop: "0 !important" }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
                             bg: 'lightGreen.1',
                         }, _focus: {
                             bg: 'lightGreen.1',

package/dist/components/myHomes/MyHomeCard.js

@@ -11,5 +11,5 @@ export const MyHomeCard = ({ accountType, address: { city, state, street, number
         image,
     });
     const isLoading = loading && loadingId === _id;
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: "-1", top: "-1", id: index === 0 ? 'role' : '', children: type && (_jsx(TextBadge, { bgColor: type === null || type === void 0 ? void 0 : type.bg, text: accountType, width: type === null || type === void 0 ? void 0 : type.width })) }), _jsxs(Center, { pos: "relative", h: "8rem", bg: "lightBlue.2", overflow: "hidden", w: "full", children: [isLoading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(_Fragment, { children: [_jsx(EditFileUploader, { handleInputChange: (event) => addImage({ event, _id }), "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1", id: index === 0 ? 'homePicture' : '' }), _jsx(Image, { src: ((image === null || image === void 0 ? void 0 : image.bucketName) && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, objectFit: "cover", minH: minHeight, minW: minWidth, onClick: () => handleCardClick({ _id, name }), cursor: "pointer" })] }))] }), _jsx(Tooltip, { label: t('tooltips.viewHome'), children: _jsx(Stack, { children: _jsxs(Stack, { id: index === 0 ? 'viewHome' : '', bg: "neutral.white", px: "2", py: "4", children: [_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Box, { as: "button", onClick: () => handleCardClick({ _id, name }), children: _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, textAlign: "left", textTransform: "uppercase", children: name }) }), externalLink && (_jsx(Tooltip, { label: externalLink, fontSize: "small", children: _jsx(Center, { cursor: "pointer", children: _jsx(Link, { size: 22 }) }) }))] }), _jsxs(Box, { lineHeight: "1.2", as: "button", onClick: () => handleCardClick({ _id, name }), textAlign: "left", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${number} ${street}` }), _jsxs(Flex, { gap: "1", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${city},` }), _jsx(Text, { isTruncated: true, variant: "home", children: state })] }), _jsx(Text, { variant: "home", children: zip })] })] }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: "-1", top: "-1", id: index === 0 ? 'role' : '', children: type && (_jsx(TextBadge, { bgColor: type === null || type === void 0 ? void 0 : type.bg, text: accountType, width: type === null || type === void 0 ? void 0 : type.width })) }), _jsxs(Center, { pos: "relative", h: "8rem", bg: "lightBlue.2", overflow: "hidden", w: "full", children: [isLoading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(_Fragment, { children: [accountType !== "Member" && (_jsx(EditFileUploader, { handleInputChange: (event) => addImage({ event, _id }), "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1", id: index === 0 ? 'homePicture' : '' })), _jsx(Image, { src: ((image === null || image === void 0 ? void 0 : image.bucketName) && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, objectFit: "cover", minH: minHeight, minW: minWidth, onClick: () => handleCardClick({ _id, name }), cursor: "pointer" })] }))] }), _jsx(Tooltip, { label: t('tooltips.viewHome'), children: _jsx(Stack, { children: _jsxs(Stack, { id: index === 0 ? 'viewHome' : '', bg: "neutral.white", px: "2", py: "4", children: [_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Box, { as: "button", onClick: () => handleCardClick({ _id, name }), children: _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, textAlign: "left", textTransform: "uppercase", children: name }) }), externalLink && (_jsx(Tooltip, { label: externalLink, fontSize: "small", children: _jsx(Center, { cursor: "pointer", children: _jsx(Link, { size: 22 }) }) }))] }), _jsxs(Box, { lineHeight: "1.2", as: "button", onClick: () => handleCardClick({ _id, name }), textAlign: "left", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${number} ${street}` }), _jsxs(Flex, { gap: "1", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${city},` }), _jsx(Text, { isTruncated: true, variant: "home", children: state })] }), _jsx(Text, { variant: "home", children: zip })] })] }) }) })] }));
 };

package/dist/components/myHomes/MyHomes.js

@@ -10,5 +10,5 @@ export const MyHomes = ({ cardList = [], cardMenuItems = [], handleCardClick, ha
     return (_jsx(TileTooltip, { label: "myHomes", children: _jsxs(Container, { variant: "launchpad", maxW: "none", pb: "3rem", position: "relative", children: [showChildren && (_jsx(BaseStep, { top: "60px", right: "60px", onClose: handleHelpClick, children: _jsx(InviteRolesStep, {}) })), _jsx(ContainerHeader, { disabled: true, menuItems: headerMenuItems, title: t('myHomes.title'), icon: _jsx(MoreHorizontal, { size: 38 }), titleIcon: House, showHelp: true, onHelpClick: handleHelpClick }), _jsx(MyHomesHeader, { onFilterClick: handleFilterClick, onNewHomeClick: handleNewHomeClick }), _jsx(Wrap, { spacing: "base", px: "base", alignItems: "start", children: cardList.length > 0 &&
                         (cardList === null || cardList === void 0 ? void 0 : cardList.map(({ accountType, address, active, _id, image, name }, index) => (_jsx(WrapItem, { children: _jsxs(Container, { w: "179px", position: "relative", transition: "all 0.3s ease-in-out", _hover: {
                                     boxShadow: 'xl',
-                                }, id: index === 0 ? 'homeCard' : '', children: [_jsx(ContainerHeader, { menuItems: cardMenuItems, itemForm: { _id, name }, icon: _jsx(MoreHorizontal, {}), isThin: true, index: index }), _jsx(Box, { w: "179px", textAlign: "left", children: _jsx(MyHomeCard, { accountType: accountType, address: address, image: image, name: name, active: active, _id: _id, index: index, handleCardClick: handleCardClick, addImage: addImage, loading: loading, loadingId: loadingId }) })] }) }, _id)))) })] }) }));
+                                }, id: index === 0 ? 'homeCard' : '', children: [_jsx(ContainerHeader, { menuItems: accountType === "Member" ? [] : cardMenuItems, itemForm: { _id, name }, icon: _jsx(MoreHorizontal, {}), isThin: true, index: index }), _jsx(Box, { w: "179px", textAlign: "left", children: _jsx(MyHomeCard, { accountType: accountType, address: address, image: image, name: name, active: active, _id: _id, index: index, handleCardClick: handleCardClick, addImage: addImage, loading: loading, loadingId: loadingId }) })] }) }, _id)))) })] }) }));
 };

package/dist/components/myProfile/MyProfileBody.d.ts

@@ -1,2 +1,2 @@
 import { MyProfileBodyI } from '../../interfaces';
-export declare const MyProfileBody: ({ account, details, email, isLoading, payment, }: MyProfileBodyI) => import("react/jsx-runtime").JSX.Element;
+export declare const MyProfileBody: ({ account, details, email, isLoading, payment, rolePermissions, }: MyProfileBodyI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/MyProfileBody.js

@@ -3,7 +3,7 @@ import { t } from 'i18next';
 import { Center, DrawerBody } from '@chakra-ui/react';
 import { BeatLoader } from 'react-spinners';
 import { TabsHeader } from '../headers';
-export const MyProfileBody = ({ account, details, email, isLoading, payment, }) => {
+export const MyProfileBody = ({ account, details, email, isLoading, payment, rolePermissions, }) => {
     const tabs = [
         {
             label: t('myProfile.tabs.tab1'),
@@ -21,6 +21,10 @@ export const MyProfileBody = ({ account, details, email, isLoading, payment, })
             label: t('myProfile.tabs.tab4'),
             component: email,
         },
-    ];
+        {
+            label: t('myProfile.tabs.tab6'),
+            component: rolePermissions,
+        },
+    ].filter((tab) => tab.component);
     return (_jsx(DrawerBody, { p: "0", children: isLoading ? (_jsx(Center, { h: "4rem", bg: "neutral.white", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(TabsHeader, { tabList: tabs })) }));
 };

package/dist/components/myProfile/index.d.ts

@@ -1,6 +1,7 @@
 export * from './email';
 export * from './details';
 export * from './payment';
+export * from './permissions';
 export * from './AddCreditCard';
 export * from './BillingAddress';
 export * from './CancelAccount';

package/dist/components/myProfile/index.js

@@ -1,6 +1,7 @@
 export * from './email';
 export * from './details';
 export * from './payment';
+export * from './permissions';
 export * from './AddCreditCard';
 export * from './BillingAddress';
 export * from './CancelAccount';

package/dist/components/myProfile/permissions/ActionCheckbox.d.ts

@@ -0,0 +1,2 @@
+import { ActionCheckboxI } from '../../../interfaces';
+export declare const ActionCheckbox: ({ action, isChecked, isDisabled, label, onChange, }: ActionCheckboxI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/permissions/ActionCheckbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Checkbox } from '@chakra-ui/react';
+import { ActionLabel } from '../..';
+export const ActionCheckbox = ({ action, isChecked, isDisabled, label, onChange, }) => {
+    return (_jsxs(Stack, { spacing: "1", align: "center", w: "33px", children: [label && _jsx(ActionLabel, { label: label }), _jsx(Checkbox, { isChecked: isChecked, onChange: () => onChange(action), isDisabled: isDisabled })] }));
+};

package/dist/components/myProfile/permissions/ActionLabel.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '@chakra-ui/react';
+export interface ActionLabelI extends TextProps {
+    label: string;
+}
+export declare const ActionLabel: ({ label, ...props }: ActionLabelI) => import("react/jsx-runtime").JSX.Element;