@homefile/components-v2 2.2.4 → 2.3.0

package/dist/components/headers/TabsHeader.d.ts

@@ -1,2 +1,2 @@
 import { TabsHeaderI } from '../../interfaces';
-export declare const TabsHeader: ({ onChange, tabList, tabIndex, defaultIndex, rightButton, }: TabsHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsHeader: ({ onChange, tabList, tabIndex, defaultIndex, rightButton, rightTabList, }: TabsHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/headers/TabsHeader.js

@@ -1,9 +1,12 @@
 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, 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',
-                                }, children: label }, label))) }), rightButton] }) }), _jsx(TabPanels, { h: "100%", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
+export const TabsHeader = ({ onChange, tabList, tabIndex, defaultIndex, rightButton, rightTabList, }) => {
+    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(CustomTab, { label: label }, label))) }), _jsxs(Flex, { children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: rightTabList === null || rightTabList === void 0 ? void 0 : rightTabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), rightButton] })] }) }), _jsx(TabPanels, { h: "100%", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
+};
+const CustomTab = ({ label = '' }) => {
+    return (_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',
+        }, children: label }));
 };

package/dist/components/homeAssistant/HomeAssistant.d.ts

@@ -1,2 +1,2 @@
 import { HomeAssistantStepsI } from '../../interfaces';
-export declare const HomeAssistant: ({ showTutorial, tutorialUrl, onStart, ...props }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistant: ({ showTutorial, tutorialUrl, onStart, zIndex, ...props }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeAssistant.js

@@ -13,9 +13,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { t } from 'i18next';
 import { HomeAssistantSteps, HomeAssistantTutorial, HomeAssistantWrapper, } from '..';
+import { Center } from '@chakra-ui/react';
 export const HomeAssistant = (_a) => {
-    var { showTutorial = false, tutorialUrl = '', onStart } = _a, props = __rest(_a, ["showTutorial", "tutorialUrl", "onStart"]);
+    var { showTutorial = false, tutorialUrl = '', onStart, zIndex } = _a, props = __rest(_a, ["showTutorial", "tutorialUrl", "onStart", "zIndex"]);
     const [startSetup, setStartSetup] = useState(false);
     const showAirplane = props.currentStep === 6 && (!showTutorial || startSetup);
-    return (_jsxs(HomeAssistantWrapper, { showAirplane: showAirplane, title: t('homeAssistant.title'), children: [!startSetup && showTutorial && (_jsx(HomeAssistantTutorial, { onStart: onStart ? onStart : () => setStartSetup(true), videoUrl: tutorialUrl })), (startSetup || !showTutorial) && _jsx(HomeAssistantSteps, Object.assign({}, props))] }));
+    return (_jsx(HomeAssistantWrapper, { showAirplane: showAirplane, title: t('homeAssistant.title'), zIndex: zIndex, children: _jsxs(Center, { minH: "477px", children: [!startSetup && showTutorial && (_jsx(HomeAssistantTutorial, { onStart: onStart !== null && onStart !== void 0 ? onStart : (() => setStartSetup(true)), videoUrl: tutorialUrl })), (startSetup || !showTutorial) && _jsx(HomeAssistantSteps, Object.assign({}, props))] }) }));
 };

package/dist/components/homeAssistant/HomeAssistantWrapper.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
-export declare const HomeAssistantWrapper: ({ children, showAirplane, title, }: PropsWithChildren<{
+export declare const HomeAssistantWrapper: ({ children, showAirplane, title, zIndex }: PropsWithChildren<{
     showAirplane?: boolean;
     title: string;
+    zIndex?: string;
 }>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeAssistantWrapper.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Center, GridItem, Image } from '@chakra-ui/react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, GridItem, Image } from '@chakra-ui/react';
 import { ContainerHeader, TileTooltip, moveRightToLeftWithFade, moveRightToLeft, moveLeftToRightAirplane, } from '..';
 import { Airplane, Cloud1, Cloud2, Cloud3, IA, TreesCrop, } from '../../assets/images';
 import { getImageAltText } from '../../utils';
 import { colors } from '../../theme/colors';
-export const HomeAssistantWrapper = ({ children, showAirplane, title, }) => {
+export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex }) => {
     const treesAlt = getImageAltText(TreesCrop);
-    return (_jsx(GridItem, { colSpan: [1, 2], children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Box, { bgGradient: colors.skyGradient, boxShadow: "base", h: "full", position: "relative", overflowX: "hidden", children: [_jsx(ContainerHeader, { title: title, titleIcon: IA }), _jsx(Center, { minH: "477px", children: children }), _jsx(Image, { src: Cloud1, position: "absolute", w: "auto", h: "80px", top: "80px", animation: `${moveRightToLeftWithFade} 400s linear infinite` }), _jsx(Image, { src: Cloud2, position: "absolute", w: "auto", h: "112px", top: "150px", animation: `${moveRightToLeft} 200s linear infinite` }), _jsx(Image, { src: Cloud3, position: "absolute", w: "auto", h: "160px", top: "200px", animation: `${moveRightToLeft} 130s linear infinite` }), showAirplane && (_jsx(Image, { src: Airplane, position: "absolute", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite` })), _jsx(Image, { src: TreesCrop, alt: treesAlt, position: "absolute", bottom: "0", right: "2", w: "auto", h: "70px" })] }) }) }));
+    return (_jsx(GridItem, { colSpan: [1, 2], zIndex: zIndex, children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Box, { bgGradient: colors.skyGradient, boxShadow: "base", h: "full", position: "relative", overflow: "hidden", children: [_jsx(ContainerHeader, { title: title, titleIcon: IA }), _jsx(_Fragment, { children: children }), _jsx(Image, { src: Cloud1, position: "absolute", w: "auto", h: "80px", top: "80px", animation: `${moveRightToLeftWithFade} 400s linear infinite` }), _jsx(Image, { src: Cloud2, position: "absolute", w: "auto", h: "112px", top: "150px", animation: `${moveRightToLeft} 200s linear infinite` }), _jsx(Image, { src: Cloud3, position: "absolute", w: "auto", h: "160px", top: "200px", animation: `${moveRightToLeft} 130s linear infinite` }), showAirplane && (_jsx(Image, { src: Airplane, position: "absolute", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite` })), _jsx(Image, { src: TreesCrop, alt: treesAlt, position: "absolute", bottom: "0", right: "2", w: "auto", h: "70px" })] }) }) }));
 };

package/dist/components/homeAssistant/HomeMonitor.d.ts

@@ -1,2 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const HomeMonitor: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitor: ({ children, zIndex }: PropsWithChildren<{
+    zIndex?: string;
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { HomeAssistantWrapper } from '..';
-export const HomeMonitor = ({ children }) => {
-    return (_jsx(HomeAssistantWrapper, { showAirplane: true, title: t('homeAssistant.homeMonitor'), children: children }));
+export const HomeMonitor = ({ children, zIndex }) => {
+    return (_jsx(HomeAssistantWrapper, { zIndex: zIndex, showAirplane: true, title: t('homeAssistant.homeMonitor'), children: children }));
 };

package/dist/components/homeAssistant/monitorAlerts/Notifications.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Flex, Center, Text } from '@chakra-ui/react';
 import { t } from 'i18next';
+import { Stack, Flex, Center, Text } from '@chakra-ui/react';
 export const Notifications = ({ date = '', local = '' }) => {
-    return (_jsxs(Stack, { spacing: "base", minH: "full", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(CustomText, { children: date }), _jsx(CustomText, { children: local })] }), _jsx(Center, { w: "188px", h: "243px", border: "1px dashed", borderColor: "blue.1", borderRadius: "sm", children: _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: t('homeAssistant.notifications') }) })] }));
+    return (_jsxs(Stack, { spacing: "base", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(CustomText, { children: date }), _jsx(CustomText, { children: local })] }), _jsx(Center, { w: "188px", h: "300px", border: "1px dashed", borderColor: "blue.1", borderRadius: "sm", children: _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: t('homeAssistant.notifications') }) })] }));
 };
 const CustomText = ({ children = '' }) => {
     return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: children }));

package/dist/components/homeBoard/HomeBoard.d.ts

@@ -1,4 +1,5 @@
 export declare const HomeBoard: () => import("react/jsx-runtime").JSX.Element;
-export declare const AppBarComponent: ({ setActiveTour }: {
+export declare const AppBarComponent: ({ setActiveTour, onClick, }: {
     setActiveTour?: ((value: boolean) => void) | undefined;
+    onClick?: ((panel: string) => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeBoard/HomeBoard.js

@@ -9,9 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, DrawerBody, DrawerContent, DrawerHeader, Flex, Stack, } from '@chakra-ui/react';
-import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, AddHomeItem, SendCommunication, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, HomeMonitor, HomefileMonitoring, Notifications, HomeMonitorSteps, } from '..';
+import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, AddHomeItem, SendCommunication, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, HomeMonitor, HomefileMonitoring, Notifications, HomeMonitorSteps, NotificationsReminder, NotificationsPanel, } from '..';
 import { HomeCards, recipientsDb, FoldersDB, selectOptions, RoomsList, RoomsToAdd, } from '../../helpers';
-import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, tileUIMock, socialLinksMock, } from '../../mocks';
+import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, tileUIMock, socialLinksMock, notificationsMock, } from '../../mocks';
 import { useHomeBoard, useWindowDimensions } from '../../hooks';
 import { Painting } from '../../assets/images';
 const forms = {
@@ -23,7 +23,7 @@ const forms = {
     6: homeAssitantStep6FormMock,
 };
 export const HomeBoard = () => {
-    const { currentStep, activeTour, currentComponent, form, handleClose, handleEditHomeClick, handleFolderClick, handleNewFolder, handleStep, homeName, isRightOpen, onRightClose, setActiveTour, setShowFooter, showFooter, showOverlay, handleHomeAssistantFormChange, handleHomeAssistantBack, homeAssistantCurrentStep, handleHomeAssistantClick, } = useHomeBoard();
+    const { currentStep, activeTour, currentComponent, form, handleAppBarClick, handleClose, handleEditHomeClick, handleFolderClick, handleNewFolder, handleStep, homeName, isRightOpen, onRightClose, setActiveTour, setShowFooter, showFooter, showOverlay, handleHomeAssistantFormChange, handleHomeAssistantBack, homeAssistantCurrentStep, handleHomeAssistantClick, } = useHomeBoard();
     const currentHomeAssistantForm = forms[homeAssistantCurrentStep];
     const rightPanelComponents = {
         AddFolder: (_jsx(AddFolder, { handleClose: onRightClose, handleSubmit: (_) => {
@@ -49,20 +49,21 @@ export const HomeBoard = () => {
         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, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true })),
+        Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';
-    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", px: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: [
+    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour, onClick: handleAppBarClick }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", px: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: [
                                                                 {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,
                                                                 },
-                                                            ], stepsWithAlerts: [], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
+                                                            ], stepsWithAlerts: [], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
-export const AppBarComponent = ({ setActiveTour = (value) => { } }) => {
+export const AppBarComponent = ({ setActiveTour = (value) => { }, onClick = (panel) => { }, }) => {
     const handleTour = () => {
         setActiveTour(true);
     };
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width <= 768;
-    return (_jsxs(AppBar, { onLogoClick: () => null, user: userMock, children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx(TourButton, { onClick: handleTour, label: "Show tour" }), _jsx(BarDivider, {})] })), _jsx(PeopleConnected, { onClick: () => null, total: 12 }), _jsx(BarDivider, {}), _jsx(ContactList, { onClick: () => null, total: 2 }), _jsx(BarDivider, {}), _jsx(TutorialsButton, { onClick: () => null }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(BarDivider, {}), _jsxs(Flex, { align: "center", gap: "1", children: [_jsx(StorageUsed, { totalUsed: 2, totalStorage: 10, state: "trial", onClick: () => null }), _jsx(Trash, { onClick: () => null, total: 2 })] })] }))] }));
+    return (_jsxs(AppBar, { onLogoClick: () => null, user: userMock, children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx(TourButton, { onClick: handleTour, label: "Show tour" }), _jsx(BarDivider, {})] })), _jsx(NotificationsReminder, { onClick: () => onClick('Notifications'), total: 2 }), _jsx(BarDivider, {}), _jsx(PeopleConnected, { onClick: () => null, total: 12 }), _jsx(BarDivider, {}), _jsx(ContactList, { onClick: () => null, total: 2 }), _jsx(BarDivider, {}), _jsx(TutorialsButton, { onClick: () => null }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(BarDivider, {}), _jsxs(Flex, { align: "center", gap: "1", children: [_jsx(StorageUsed, { totalUsed: 2, totalStorage: 10, state: "trial", onClick: () => null }), _jsx(Trash, { onClick: () => null, total: 2 })] })] }))] }));
 };

package/dist/components/homeItems/ViewingHomeItemPanel.d.ts

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

package/dist/components/homeItems/ViewingHomeItemPanel.js

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

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

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

package/dist/components/homeItems/index.js

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

package/dist/components/inboxTile/InboxCard.d.ts

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

package/dist/components/inboxTile/InboxCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { AspectRatio, Flex, Image, Text } from '@chakra-ui/react';
+import { TextBadge } from '..';
+export const InboxCard = ({ box, onClick }) => {
+    const { image, name, newMessages = 0, totalMessages } = box;
+    const hasNewMessages = newMessages > 0;
+    const message = `${newMessages} ${t('badges.new')}`;
+    return (_jsxs(Flex, { as: "button", align: "center", justify: "space-between", px: "base", py: "6", bg: "neutral.white", transition: "background-color 0.2s", _hover: { bg: 'lightGreen.1' }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(name), children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(AspectRatio, { ratio: 1, w: "34px", h: "auto", children: _jsx(Image, { src: image, alt: name }) }), _jsx(Text, { children: name })] }), _jsxs(Flex, { align: "center", gap: "6", children: [hasNewMessages && (_jsx(TextBadge, { text: message, showAnimation: false, bgColor: "violet.1" })), _jsx(Text, { fontSize: "30px", fontWeight: "medium", color: "blue.2", children: totalMessages })] })] }));
+};

package/dist/components/inboxTile/InboxForwardBanner.d.ts

@@ -0,0 +1 @@
+export declare const InboxForwardBanner: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inboxTile/InboxForwardBanner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { AspectRatio, Flex, Text, Image } from '@chakra-ui/react';
+import { IA } from '../../assets/images';
+export const InboxForwardBanner = () => {
+    return (_jsxs(Flex, { p: "base", gap: "base", align: "center", bg: "lightBlue.2", children: [_jsx(AspectRatio, { ratio: 1, minW: "35px", h: "auto", children: _jsx(Image, { src: IA, alt: "IA" }) }), _jsxs(Text, { variant: "home", lineHeight: "1", children: [t('inbox.forwardTo'), _jsx(Text, { variant: "home", lineHeight: "1", color: "neutral.black", fontWeight: "bold", display: "inline", children: "homefileit@homefile.com." })] })] }));
+};

package/dist/components/inboxTile/InboxTile.d.ts

@@ -0,0 +1,2 @@
+import { InboxTileI } from '../../interfaces';
+export declare const InboxTile: ({ banner, boxes, menuItems, onClick, }: InboxTileI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inboxTile/InboxTile.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Stack } from '@chakra-ui/react';
+import { ContainerHeader, InboxCard, MoreHorizontal, TileTooltip, } from '..';
+import { Inbox } from '../../assets/images';
+export const InboxTile = ({ banner, boxes, menuItems, onClick, }) => {
+    var _a;
+    return (_jsx(TileTooltip, { label: "inbox", children: _jsx(Container, { variant: "launchpad", h: "full", position: "relative", m: "0", children: _jsxs(Stack, { spacing: "2px", children: [_jsx(ContainerHeader, { menuItems: menuItems, title: (_a = t('partner.tiles.inbox')) !== null && _a !== void 0 ? _a : '', icon: _jsx(MoreHorizontal, { size: 38 }), titleIcon: Inbox }), banner, boxes.map((box) => (_jsx(InboxCard, { box: box, onClick: onClick }, box.name)))] }) }) }));
+};

package/dist/components/{partner/adminTiles/inboxTile → inboxTile}/index.d.ts

@@ -1,2 +1,3 @@
 export * from './InboxCard';
+export * from './InboxForwardBanner';
 export * from './InboxTile';

package/dist/components/{partner/adminTiles/inboxTile → inboxTile}/index.js

@@ -1,2 +1,3 @@
 export * from './InboxCard';
+export * from './InboxForwardBanner';
 export * from './InboxTile';

package/dist/components/index.d.ts

@@ -16,13 +16,16 @@ export * from './headers';
 export * from './help';
 export * from './homeAssistant';
 export * from './homeBoard';
+export * from './homeItems';
 export * from './homeSummary';
 export * from './icons';
+export * from './inboxTile';
 export * from './inputs';
 export * from './launchpad';
 export * from './loaders';
 export * from './myHomes';
 export * from './myProfile';
+export * from './notifications';
 export * from './onboarding';
 export * from './overlay/Overlay';
 export * from './partner';

package/dist/components/index.js

@@ -16,13 +16,16 @@ export * from './headers';
 export * from './help';
 export * from './homeAssistant';
 export * from './homeBoard';
+export * from './homeItems';
 export * from './homeSummary';
 export * from './icons';
+export * from './inboxTile';
 export * from './inputs';
 export * from './launchpad';
 export * from './loaders';
 export * from './myHomes';
 export * from './myProfile';
+export * from './notifications';
 export * from './onboarding';
 export * from './overlay/Overlay';
 export * from './partner';

package/dist/components/notifications/NotificationCard.d.ts

@@ -0,0 +1,2 @@
+import { NotificationCardI, NotificationsPanelI } from '../../interfaces';
+export declare const NotificationCard: ({ _id, createdAt, message, onDismiss, status, type, }: NotificationCardI & Pick<NotificationsPanelI, "onDismiss">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/notifications/NotificationCard.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Flex, IconButton, Stack, Text } from '@chakra-ui/react';
+import { Close } from '..';
+import { formatDateWithAt } from '../../utils';
+export const NotificationCard = ({ _id, createdAt, message, onDismiss, status, type, }) => {
+    const actionLabels = {
+        contact: {
+            added: `${t('notifications.types.contact')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.contact')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.contact')}`,
+            updated: `${t('notifications.types.contact')} ${t('notifications.status.updated')}`,
+        },
+        file: {
+            added: `${t('notifications.types.file')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.file')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.file')}`,
+            updated: `${t('notifications.types.file')} ${t('notifications.status.updated')}`,
+        },
+        folder: {
+            added: `${t('notifications.types.folder')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.folder')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.folder')}`,
+            updated: `${t('notifications.types.folder')} ${t('notifications.status.updated')}`,
+        },
+        payment: {
+            added: `${t('notifications.types.payment')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.payment')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.payment')}`,
+            updated: `${t('notifications.types.payment')} ${t('notifications.status.updated')}`,
+        },
+        receipt: {
+            added: `${t('notifications.types.receipt')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.receipt')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.receipt')}`,
+            updated: `${t('notifications.types.receipt')} ${t('notifications.status.updated')}`,
+        },
+        tile: {
+            added: `${t('notifications.types.tile')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.tile')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.tile')}`,
+            updated: `${t('notifications.types.tile')} ${t('notifications.status.updated')}`,
+        },
+        user: {
+            added: `${t('notifications.types.user')} ${t('notifications.status.added')}`,
+            removed: `${t('notifications.types.user')} ${t('notifications.status.removed')}`,
+            shared: `${t('notifications.status.shared')} ${t('notifications.types.user')}`,
+            updated: `${t('notifications.types.user')} ${t('notifications.status.updated')}`,
+        },
+    };
+    const bgColors = {
+        added: 'lightGreen.3',
+        removed: 'error.1',
+        shared: 'yellow.6',
+        updated: 'lightBlue.10',
+    };
+    const colors = {
+        added: 'green.8',
+        removed: 'error.2',
+        shared: 'yellow.1',
+        updated: 'lightBlue.9',
+    };
+    return (_jsx(Container, { p: "2", bg: bgColors[status], children: _jsxs(Stack, { spacing: "3", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "10px", fontWeight: "semibold", textTransform: "uppercase", color: colors[status], children: actionLabels[type][status] }), _jsxs(Flex, { gap: "1", align: "center", children: [_jsx(Text, { variant: "date", children: formatDateWithAt({ date: createdAt }) }), _jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onDismiss(_id), icon: _jsx(Close, { size: 11 }) })] })] }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: message })] }) }));
+};

package/dist/components/notifications/NotificationsPanel.d.ts

@@ -0,0 +1,2 @@
+import { NotificationsPanelI } from '../../interfaces';
+export declare const NotificationsPanel: ({ notifications, onClose, onDismiss, }: NotificationsPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/notifications/NotificationsPanel.js

@@ -0,0 +1,14 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { DrawerBody, DrawerContent, DrawerHeader, Stack, } from '@chakra-ui/react';
+import { PanelHeader, NotificationCard, SelectInput } from '..';
+import { Speaker } from '../../assets/images';
+import { useNotificationsPanel } from '../../hooks';
+export const NotificationsPanel = ({ notifications = [], onClose, onDismiss, }) => {
+    const count = notifications.length;
+    const { currentSort, items, handleSelectItem, sortedNotifications } = useNotificationsPanel({
+        notifications,
+    });
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: `${t('notifications.title')} ${count && `(${count})`}`, icon: Speaker }) }), _jsx(DrawerBody, { p: "base", children: _jsxs(Stack, { spacing: "base", children: [_jsx(SelectInput, { handleClick: handleSelectItem, initialValue: currentSort, items: items }), _jsx(Stack, { spacing: "1", children: sortedNotifications.map((notification) => (_createElement(NotificationCard, Object.assign({}, notification, { key: notification._id, onDismiss: onDismiss })))) })] }) })] }));
+};

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

@@ -0,0 +1,2 @@
+export * from './NotificationCard';
+export * from './NotificationsPanel';

package/dist/components/notifications/index.js

@@ -0,0 +1,2 @@
+export * from './NotificationCard';
+export * from './NotificationsPanel';

package/dist/components/partner/adminTiles/index.d.ts

@@ -1,4 +1,3 @@
 export * from './customersTile';
-export * from './inboxTile';
 export * from './satisfactionTile';
 export * from './ytdTile';

package/dist/components/partner/adminTiles/index.js

@@ -1,4 +1,3 @@
 export * from './customersTile';
-export * from './inboxTile';
 export * from './satisfactionTile';
 export * from './ytdTile';

package/dist/components/tour/Bubble.js

@@ -5,5 +5,5 @@ import { useBubble } from '../../hooks';
 export const Bubble = ({ counter = 0, handleClose, handleStep, position = 'fixed', setCounter = () => { }, steps, width = 'fit-content', }) => {
     const { currentStep, handleNext, handlePosition, handlePrev, stepsOrder } = useBubble({ counter, handleStep, setCounter, steps });
     const hasMoreSteps = stepsOrder.length > 1;
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { bgGradient: "linear(to-b, lightGreen.1, neutral.white)", w: width, position: position, top: handlePosition(steps[currentStep].topRef), left: handlePosition(steps[currentStep].leftRef), zIndex: "popover", boxShadow: "lg", borderRadius: "md", children: [_jsx(BubbleArrow, { arrowBottom: steps[currentStep].arrowBottom, arrowLeft: steps[currentStep].arrowLeft, arrowRight: steps[currentStep].arrowRight, arrowTop: steps[currentStep].arrowTop }), !steps[currentStep].hideHeader && _jsx(BubbleHead, { onClose: handleClose }), steps[currentStep].component, hasMoreSteps && !steps[currentStep].hideFooter && (_jsx(BubbleFooter, { currentStep: counter + 1, handleNext: handleNext, handlePrevious: handlePrev, totalSteps: stepsOrder.length }))] }), _jsx(BubbleOverlay, { onClick: handleClose })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { bgGradient: "linear(to-b, lightGreen.1, neutral.white)", w: width, position: position, top: handlePosition(steps[currentStep].topRef), left: handlePosition(steps[currentStep].leftRef), bottom: handlePosition(steps[currentStep].bottomRef), right: handlePosition(steps[currentStep].rightRef), zIndex: "popover", boxShadow: "lg", borderRadius: "md", children: [_jsx(BubbleArrow, { arrowBottom: steps[currentStep].arrowBottom, arrowLeft: steps[currentStep].arrowLeft, arrowRight: steps[currentStep].arrowRight, arrowTop: steps[currentStep].arrowTop }), !steps[currentStep].hideHeader && _jsx(BubbleHead, { onClose: handleClose }), steps[currentStep].component, hasMoreSteps && !steps[currentStep].hideFooter && (_jsx(BubbleFooter, { currentStep: counter + 1, handleNext: handleNext, handlePrevious: handlePrev, totalSteps: stepsOrder.length }))] }), _jsx(BubbleOverlay, { onClick: handleClose })] }));
 };

package/dist/components/tour/HomeBoardTour.js

@@ -5,7 +5,7 @@ import { Bubble, BubbleText, MeetStep } from '..';
 import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
 import { appBarHeight, arrowSize, distanceFromEdgeArrowToBorder, firstBubbleHeight, firstBubbleWidth, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, } from '../../utils';
 export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const [counter, setCounter] = useState(0);
     const componentIds = [
         'backToLaunchpad',
@@ -27,7 +27,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;
     const halfBubbleWidth = parsedBubbleWidth / 2;
-    const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 30;
+    const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10;
     const steps = {
         homeboard: {
             arrowBottom: 'bottom',
@@ -56,9 +56,9 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         },
         // Reference component id -> FolderSharing/FolderSharing
         addFolders: {
-            arrowRight: 'right-top',
+            arrowRight: 'right-bottom',
             leftRef: ((_e = coordinates.addFolders) === null || _e === void 0 ? void 0 : _e.x) - bubbleArrowWidth,
-            topRef: getYPosition((_f = coordinates.addFolders) === null || _f === void 0 ? void 0 : _f.y, distanceFromEdgeArrowToBorder),
+            bottomRef: 3,
             component: (_jsx(BubbleText, { title: t('tour.steps.addFolders.title'), description: t('tour.steps.addFolders.description') })),
         },
         nameFolder: {
@@ -82,36 +82,36 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         // Reference component id -> appBar/PeopleConnected
         shareWithOthers: {
             arrowTop: 'top',
-            leftRef: getXPosition(((_g = coordinates.shareWithOthers) === null || _g === void 0 ? void 0 : _g.x) + 25, halfBubbleWidth),
-            topRef: ((_h = coordinates.shareWithOthers) === null || _h === void 0 ? void 0 : _h.y) + appBarHeight,
+            leftRef: getXPosition(((_f = coordinates.shareWithOthers) === null || _f === void 0 ? void 0 : _f.x) + 25, halfBubbleWidth),
+            topRef: ((_g = coordinates.shareWithOthers) === null || _g === void 0 ? void 0 : _g.y) + appBarHeight,
             component: (_jsx(BubbleText, { title: t('tour.steps.shareWithOthers.title'), description: t('tour.steps.shareWithOthers.description') })),
         },
         // Reference component id -> appBar/ContactList
         viewContacts: {
             arrowTop: 'top',
-            leftRef: getXPosition(((_j = coordinates.viewContacts) === null || _j === void 0 ? void 0 : _j.x) + 28, halfBubbleWidth),
-            topRef: ((_k = coordinates.shareWithOthers) === null || _k === void 0 ? void 0 : _k.y) + appBarHeight,
+            leftRef: getXPosition(((_h = coordinates.viewContacts) === null || _h === void 0 ? void 0 : _h.x) + 28, halfBubbleWidth),
+            topRef: ((_j = coordinates.shareWithOthers) === null || _j === void 0 ? void 0 : _j.y) + appBarHeight,
             component: (_jsx(BubbleText, { title: t('tour.steps.viewContacts.title'), description: t('tour.steps.viewContacts.description') })),
         },
         // Reference component id -> appBar/TutorialsButton
         feedback: {
             arrowTop: 'top',
-            leftRef: getXPosition(((_l = coordinates.feedback) === null || _l === void 0 ? void 0 : _l.x) + 14, halfBubbleWidth),
-            topRef: ((_m = coordinates.feedback) === null || _m === void 0 ? void 0 : _m.y) + appBarHeight,
+            leftRef: getXPosition(((_k = coordinates.feedback) === null || _k === void 0 ? void 0 : _k.x) + 14, halfBubbleWidth),
+            topRef: ((_l = coordinates.feedback) === null || _l === void 0 ? void 0 : _l.y) + appBarHeight,
             component: (_jsx(BubbleText, { title: t('tour.steps.feedback.title'), description: t('tour.steps.feedback.description') })),
         },
         // Reference component id -> appBar/StorageUsed
         storageUsed: {
             arrowTop: 'top',
-            leftRef: getXPosition(((_o = coordinates.storageUsed) === null || _o === void 0 ? void 0 : _o.x) + 30, halfBubbleWidth),
-            topRef: ((_p = coordinates.shareWithOthers) === null || _p === void 0 ? void 0 : _p.y) + appBarHeight,
+            leftRef: getXPosition(((_m = coordinates.storageUsed) === null || _m === void 0 ? void 0 : _m.x) + 30, halfBubbleWidth),
+            topRef: ((_o = coordinates.shareWithOthers) === null || _o === void 0 ? void 0 : _o.y) + appBarHeight,
             component: (_jsx(BubbleText, { title: t('tour.steps.storageUsed.title'), description: t('tour.steps.storageUsed.description') })),
         },
         // Reference component id -> appBar/UserProfile
         profile: {
             arrowTop: 'top-right',
-            leftRef: getXPosition(((_q = coordinates.profile) === null || _q === void 0 ? void 0 : _q.x) + 20, parsedBubbleWidth),
-            topRef: ((_r = coordinates.shareWithOthers) === null || _r === void 0 ? void 0 : _r.y) + appBarHeight,
+            leftRef: getXPosition(((_p = coordinates.profile) === null || _p === void 0 ? void 0 : _p.x) + 20, parsedBubbleWidth),
+            topRef: ((_q = coordinates.shareWithOthers) === null || _q === void 0 ? void 0 : _q.y) + appBarHeight,
             component: (_jsx(BubbleText, { title: t('tour.steps.profile.title'), description: t('tour.steps.profile.description') })),
         },
         // Reference component id -> receipts/autofiler/AutofilerHeader
@@ -129,8 +129,8 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         // Reference component id -> appBar/ContactList
         addCatalog: {
             arrowRight: 'right-top',
-            leftRef: getXPosition(((_s = coordinates.viewContacts) === null || _s === void 0 ? void 0 : _s.x) + 28, halfBubbleWidth),
-            topRef: ((_t = coordinates.viewContacts) === null || _t === void 0 ? void 0 : _t.y) + 40,
+            leftRef: getXPosition(((_r = coordinates.viewContacts) === null || _r === void 0 ? void 0 : _r.x) + 28, halfBubbleWidth),
+            topRef: ((_s = coordinates.viewContacts) === null || _s === void 0 ? void 0 : _s.y) + 40,
             component: (_jsx(BubbleText, { title: t('tour.steps.addCatalog.title'), description: t('tour.steps.addCatalog.description') })),
         },
         partnerCatalog: {

package/dist/components/valueMonitor/ValueCard.js

@@ -4,5 +4,5 @@ import { Box, Flex, Text, Progress } from '@chakra-ui/react';
 import { useValueCard } from '../../hooks';
 export const ValueCard = ({ balance, totalValue, year, yearValue, }) => {
     const { balanceColor, formattedTotalValue, formattedYearValue, percentage, showBalance, } = useValueCard({ balance, totalValue, yearValue });
-    return (_jsxs(Box, { bg: "neutral.white", border: "1px solid", borderColor: "lightBlue.6", children: [_jsxs(Flex, { justify: "space-between", align: "center", p: "base", children: [_jsx(Text, { fontSize: "3xl", color: "lightBlue.6", children: "$" }), _jsxs(Flex, { gap: "base", align: "center", children: [_jsxs(Text, { fontSize: "3xl", children: [formattedTotalValue, "."] }), showBalance && (_jsx(Text, { fontSize: "small", fontWeight: "semibold", bg: balanceColor, py: "1", px: "2", height: "fit-content", borderRadius: "md", color: "neutral.white", children: balance }))] })] }), _jsxs(Flex, { gap: "base", align: "center", p: "base", borderTop: "1px dashed", borderColor: "lightBlue.6", children: [_jsx(Text, { fontSize: "sm", color: "gray.4", textTransform: "uppercase", children: `${t('valueMonitor.label')} ${year}` }), _jsx(Progress, { flex: "1", size: "md", value: percentage || 0, height: "13px" }), _jsxs(Text, { fontSize: "sm", children: [formattedYearValue, "."] })] })] }));
+    return (_jsxs(Box, { bg: "neutral.white", border: "1px solid", borderColor: "lightBlue.6", children: [_jsxs(Flex, { justify: "space-between", align: "center", p: "base", children: [_jsx(Text, { fontSize: "3xl", color: "lightBlue.6", children: "$" }), _jsxs(Flex, { gap: "base", align: "center", children: [_jsxs(Text, { fontSize: "3xl", children: [formattedTotalValue, "."] }), showBalance && (_jsx(Text, { fontSize: "small", fontWeight: "semibold", bg: balanceColor, py: "1", px: "2", height: "fit-content", borderRadius: "md", color: "neutral.white", children: balance }))] })] }), year && (_jsxs(Flex, { gap: "base", align: "center", p: "base", borderTop: "1px dashed", borderColor: "lightBlue.6", children: [_jsx(Text, { fontSize: "sm", color: "gray.4", textTransform: "uppercase", children: `${t('valueMonitor.label')} ${year}` }), _jsx(Progress, { flex: "1", size: "md", value: percentage || 0, height: "13px" }), _jsxs(Text, { fontSize: "sm", children: [formattedYearValue, "."] })] }))] }));
 };

package/dist/hooks/display/useMediaPreview.js

@@ -1,8 +1,6 @@
-import { useMemo, useState } from 'react';
-import { handleMapMedia } from '../../utils';
+import { useEffect, useState } from 'react';
 export const useMediaPreview = ({ images }) => {
     var _a, _b, _c;
-    const [dbImages, setDbImages] = useState([]);
     const [totalFiles, setTotalFiles] = useState([]);
     const [index, setIndex] = useState(0);
     const storageUrl = import.meta.env.VITE_STORAGE_URL;
@@ -36,10 +34,9 @@ export const useMediaPreview = ({ images }) => {
             setIndex(index - 1);
         }
     };
-    useMemo(() => {
-        setDbImages(handleMapMedia({ files: images, isLocal: false }));
-        setTotalFiles([...dbImages]);
-    }, [images.length]);
+    useEffect(() => {
+        setTotalFiles([...images]);
+    }, [JSON.stringify(images.map((image) => image._id))]);
     return {
         handleDescription,
         handleEditDescription,

package/dist/hooks/folderPanel/useFilesUploader.d.ts

@@ -2,11 +2,13 @@ import { FolderFileI } from '../../interfaces';
 interface FilesUploaderHookI {
     onUpload: (files: FolderFileI[]) => void;
     uploading: boolean;
+    displayImages?: string[];
 }
-export declare const useFilesUploader: ({ onUpload, uploading, }: FilesUploaderHookI) => {
+export declare const useFilesUploader: ({ onUpload, uploading, displayImages, }: FilesUploaderHookI) => {
     acceptedFiles: FolderFileI[];
     errorMessage: string;
     getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T) => T;
     getInputProps: <T extends import("react-dropzone").DropzoneInputProps>(props?: T) => T;
+    thumbnails: string[];
 };
 export {};