@homefile/components-v2 2.3.0 → 2.4.0

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

@@ -0,0 +1,7 @@
+import TreesDay from './trees-day-summer.png';
+import TreesDayFall from './trees-day-fall.png';
+import TreesDayWinter from './trees-day-winter.png';
+import TreesEvening from './trees-evening.png';
+import TreesMorning from './trees-morning.png';
+import TreesNight from './trees-night.png';
+export { TreesDay, TreesDayFall, TreesDayWinter, TreesEvening, TreesMorning, TreesNight, };

package/dist/assets/images/animations/index.js

@@ -0,0 +1,7 @@
+import TreesDay from './trees-day-summer.png';
+import TreesDayFall from './trees-day-fall.png';
+import TreesDayWinter from './trees-day-winter.png';
+import TreesEvening from './trees-evening.png';
+import TreesMorning from './trees-morning.png';
+import TreesNight from './trees-night.png';
+export { TreesDay, TreesDayFall, TreesDayWinter, TreesEvening, TreesMorning, TreesNight, };

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

@@ -0,0 +1,15 @@
+import TreesDay from './trees-day-summer.png'
+import TreesDayFall from './trees-day-fall.png'
+import TreesDayWinter from './trees-day-winter.png'
+import TreesEvening from './trees-evening.png'
+import TreesMorning from './trees-morning.png'
+import TreesNight from './trees-night.png'
+
+export {
+  TreesDay,
+  TreesDayFall,
+  TreesDayWinter,
+  TreesEvening,
+  TreesMorning,
+  TreesNight,
+}

package/dist/assets/images/chat-bubble.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="Group_21874" data-name="Group 21874" transform="translate(-1764 -254)">
+    <g id="Union_41" data-name="Union 41" transform="translate(1764 254)" fill="#fff">
+      <path d="M 6.399946212768555 19.02802085876465 L 4.829119682312012 16.40986061096191 L 4.683469772338867 16.16709899902344 L 4.400369644165039 16.16709899902344 L 2.999699831008911 16.16709899902344 C 1.621359825134277 16.16709899902344 0.4999998509883881 15.04533958435059 0.4999998509883881 13.66650009155273 L 0.4999998509883881 2.999699831008911 C 0.4999998509883881 1.621359825134277 1.621359825134277 0.4999998509883881 2.999699831008911 0.4999998509883881 L 17.00009918212891 0.4999998509883881 C 18.37843894958496 0.4999998509883881 19.49979972839355 1.621359825134277 19.49979972839355 2.999699831008911 L 19.49979972839355 13.66650009155273 C 19.49979972839355 15.04533958435059 18.37843894958496 16.16709899902344 17.00009918212891 16.16709899902344 L 8.399879455566406 16.16709899902344 L 8.116809844970703 16.16709899902344 L 7.971149921417236 16.40982055664062 L 6.399946212768555 19.02802085876465 Z" stroke="none"/>
+      <path d="M 6.399997234344482 18.05625152587891 L 7.833739757537842 15.66709995269775 L 17.00009918212891 15.66709995269775 C 18.10273933410645 15.66709995269775 18.99979972839355 14.76962947845459 18.99979972839355 13.66650009155273 L 18.99979972839355 2.999699831008911 C 18.99979972839355 1.897059917449951 18.10273933410645 0.9999998807907104 17.00009918212891 0.9999998807907104 L 2.999699831008911 0.9999998807907104 C 1.897059917449951 0.9999998807907104 0.9999998807907104 1.897059917449951 0.9999998807907104 2.999699831008911 L 0.9999998807907104 13.66650009155273 C 0.9999998807907104 14.76962947845459 1.897059917449951 15.66709995269775 2.999699831008911 15.66709995269775 L 4.966569900512695 15.66709995269775 L 6.399997234344482 18.05625152587891 M 6.399899959564209 19.99979972839355 L 4.400369644165039 16.66709899902344 L 2.999699831008911 16.66709899902344 C 1.34279990196228 16.66709899902344 -1.358032193365943e-07 15.32339954376221 -1.358032193365943e-07 13.66650009155273 L -1.358032193365943e-07 2.999699831008911 C -1.358032193365943e-07 1.34279990196228 1.34279990196228 -1.358032193365943e-07 2.999699831008911 -1.358032193365943e-07 L 17.00009918212891 -1.358032193365943e-07 C 18.6569995880127 -1.358032193365943e-07 19.99979972839355 1.34279990196228 19.99979972839355 2.999699831008911 L 19.99979972839355 13.66650009155273 C 19.99979972839355 15.32339954376221 18.6569995880127 16.66709899902344 17.00009918212891 16.66709899902344 L 8.399879455566406 16.66709899902344 L 6.399899959564209 19.99979972839355 Z" stroke="none" fill="#1c7ab4"/>
+    </g>
+  </g>
+</svg>

package/dist/assets/images/document2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.852" height="21.158" viewBox="0 0 20.852 21.158">
+  <g id="Group_21880" data-name="Group 21880" transform="translate(-13.43 -0.001)">
+    <path id="Path_17605" data-name="Path 17605" d="M13.43,0V21.158H34.281V3.591L30.028,0Z" transform="translate(0 0)" fill="#d2edef"/>
+    <path id="Path_17606" data-name="Path 17606" d="M77.93,0V3.389h3.481Z" transform="translate(-47.13)" fill="#324458"/>
+    <path id="Path_17607" data-name="Path 17607" d="M13.43,94.821Z" transform="translate(0 -73.662)" fill="#28b5a8"/>
+    <rect id="Rectangle_25619" data-name="Rectangle 25619" width="5.587" height="0.632" transform="translate(15.576 3.073)" fill="#324458"/>
+    <rect id="Rectangle_25620" data-name="Rectangle 25620" width="16.429" height="0.632" transform="translate(15.641 7.362)" fill="#324458"/>
+    <rect id="Rectangle_25621" data-name="Rectangle 25621" width="16.429" height="0.632" transform="translate(15.641 9.314)" fill="#324458"/>
+    <rect id="Rectangle_25622" data-name="Rectangle 25622" width="16.429" height="0.632" transform="translate(15.641 11.268)" fill="#324458"/>
+    <rect id="Rectangle_25623" data-name="Rectangle 25623" width="16.429" height="0.632" transform="translate(15.641 13.223)" fill="#324458"/>
+    <rect id="Rectangle_25624" data-name="Rectangle 25624" width="16.429" height="0.632" transform="translate(15.641 15.177)" fill="#324458"/>
+    <rect id="Rectangle_25625" data-name="Rectangle 25625" width="7.453" height="0.632" transform="translate(15.641 17.328)" fill="#324458"/>
+  </g>
+</svg>

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

@@ -17,6 +17,7 @@ import Building from './building.svg';
 import Calc from './calc.svg';
 import Calendar2 from './calendar2.svg';
 import Catalog from './catalog.svg';
+import ChatBubble from './chat-bubble.svg';
 import Check from './check.svg';
 import CheckInCircle from './check-in-circle.svg';
 import CheckPen from './check-pen.svg';
@@ -39,6 +40,7 @@ import Diamond from './diamond.svg';
 import DiningRoom from './dining-room.svg';
 import DocIcon from './doc-icon.svg';
 import Document from './document.svg';
+import Document2 from './document2.svg';
 import Drop from './drop.svg';
 import DropCalendar from './drop-calendar.svg';
 import Electricity from './electricity.svg';
@@ -155,8 +157,9 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, 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, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
+export * from './animations';
 export * from './appliances';
 export * from './clouds-animation';
 export * from './form';

package/dist/assets/images/index.js

@@ -17,6 +17,7 @@ import Building from './building.svg';
 import Calc from './calc.svg';
 import Calendar2 from './calendar2.svg';
 import Catalog from './catalog.svg';
+import ChatBubble from './chat-bubble.svg';
 import Check from './check.svg';
 import CheckInCircle from './check-in-circle.svg';
 import CheckPen from './check-pen.svg';
@@ -39,6 +40,7 @@ import Diamond from './diamond.svg';
 import DiningRoom from './dining-room.svg';
 import DocIcon from './doc-icon.svg';
 import Document from './document.svg';
+import Document2 from './document2.svg';
 import Drop from './drop.svg';
 import DropCalendar from './drop-calendar.svg';
 import Electricity from './electricity.svg';
@@ -155,8 +157,9 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, 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, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
+export * from './animations';
 export * from './appliances';
 export * from './clouds-animation';
 export * from './form';

package/dist/assets/images/index.ts

@@ -17,6 +17,7 @@ import Building from './building.svg'
 import Calc from './calc.svg'
 import Calendar2 from './calendar2.svg'
 import Catalog from './catalog.svg'
+import ChatBubble from './chat-bubble.svg'
 import Check from './check.svg'
 import CheckInCircle from './check-in-circle.svg'
 import CheckPen from './check-pen.svg'
@@ -39,6 +40,7 @@ import Diamond from './diamond.svg'
 import DiningRoom from './dining-room.svg'
 import DocIcon from './doc-icon.svg'
 import Document from './document.svg'
+import Document2 from './document2.svg'
 import Drop from './drop.svg'
 import DropCalendar from './drop-calendar.svg'
 import Electricity from './electricity.svg'
@@ -176,6 +178,7 @@ export {
   Calc,
   Calendar2,
   Catalog,
+  ChatBubble,
   Check,
   CheckInCircle,
   CheckPen,
@@ -198,6 +201,7 @@ export {
   DiningRoom,
   DocIcon,
   Document,
+  Document2,
   Drop,
   DropCalendar,
   Electricity,
@@ -317,6 +321,7 @@ export {
 }
 
 export * from './alerts'
+export * from './animations'
 export * from './appliances'
 export * from './clouds-animation'
 export * from './form'

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

@@ -167,6 +167,10 @@
     "recipient": "recipient",
     "title": "Contacts"
   },
+  "counter": {
+    "of": "of",
+    "showing": "Showing"
+  },
   "daysOfWeek": {
     "1": "Monday",
     "2": "Tuesday",
@@ -288,6 +292,7 @@
   },
   "forms": {
     "addAll": "Add All",
+    "all": "All",
     "apartmentNumber": "Apartment, Suite, Unit, Building, Floor, etc.",
     "city": "City",
     "companyEmail": "Company email",
@@ -311,6 +316,7 @@
     "lastName": "Last name",
     "link": "Link",
     "message": "Message",
+    "new": "New",
     "moreDetails": "Add Optional Details",
     "obs": "Additional information",
     "password": "Password",
@@ -465,7 +471,11 @@
     "altImage": "image"
   },
   "inbox": {
-    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to "
+    "createReply": "Create Reply",
+    "enterContent": "Enter content",
+    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to ",
+    "from": "From: ",
+    "message": "Message"
   },
   "launchpad": {
     "menu": {
@@ -628,15 +638,6 @@
       "shared": "Shared",
       "updated": "Updated"
     },
-    "types": {
-      "contact": "Contact",
-      "file": "File",
-      "folder": "Folder",
-      "receipt": "Receipt",
-      "user": "User",
-      "tile": "Tile",
-      "payment": "Payment"
-    },
     "title": "Notifications"
   },
   "partner": {

package/dist/components/animations/CloudsAnimation.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Airplane, Cloud1, Cloud2, Cloud3, TreesCrop, TreesCrop2, } from '../../assets/images';
+import { Fragment, useEffect, useState } from 'react';
+import { Airplane, Cloud1, Cloud2, Cloud3 } from '../../assets/images';
 import { useWindowDimensions } from '../../hooks';
 import { colors } from '../../theme/colors';
+import { getTimeOfDay, getTimeOfDaySeason, } from '../../utils';
 import { Box, Image } from '@chakra-ui/react';
 import { keyframes } from '@emotion/react';
-import { Fragment } from 'react';
+import { WeatherTrees } from './WeatherTrees';
 export const moveLeftToRightAirplane = keyframes `
     0% {
       transform: translateX(-100%);
@@ -66,9 +68,23 @@ export const moveRightToLeftWithFade3 = keyframes `
     }
   `;
 export const CloudsAnimation = ({ children }) => {
+    const [timeOfDay, setTimeOfDay] = useState(getTimeOfDay());
+    const timeOfDaySeason = getTimeOfDaySeason();
+    const gradients = {
+        day: colors.dayGradient,
+        evening: colors.eveningGradient,
+        morning: colors.morningGradient,
+        night: colors.nightGradient,
+    };
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTimeOfDay(getTimeOfDay());
+        }, 60000);
+        return () => clearInterval(interval);
+    }, []);
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < 768;
     if (isMobile)
         return _jsx(Fragment, { children: "children" });
-    return (_jsxs(Box, { minH: "100vh", w: "full", position: "relative", bgGradient: colors.skyGradient, overflowX: "hidden", overflowY: "scroll", children: [children, _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Airplane, position: "fixed", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`, zIndex: "1" }), _jsx(Image, { src: TreesCrop, position: "fixed", bottom: "0", right: "2", w: "auto", h: "80px", zIndex: "1" }), _jsx(Image, { src: TreesCrop2, position: "fixed", bottom: "0", left: "2", w: "auto", h: "80px", zIndex: "1" })] }));
+    return (_jsxs(Box, { minH: "100vh", w: "full", position: "relative", bgGradient: gradients[timeOfDay], overflowX: "hidden", overflowY: "scroll", children: [children, _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Airplane, position: "fixed", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`, zIndex: "1" }), _jsx(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "fixed", bottom: "0", right: "0", w: "auto", h: "100px", zIndex: "1" }), _jsx(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "fixed", bottom: "0", left: "2", w: "auto", transform: "rotateY(180deg)", h: "100px", zIndex: "1" })] }));
 };

package/dist/components/animations/WeatherTrees.d.ts

@@ -0,0 +1,6 @@
+import { TimeOfDaySeason } from '../../utils';
+import { ImageProps } from '@chakra-ui/react';
+export interface WeatherTreesI extends ImageProps {
+    timeOfDaySeason: TimeOfDaySeason;
+}
+export declare const WeatherTrees: ({ timeOfDaySeason, ...props }: WeatherTreesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/WeatherTrees.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TreesDay, TreesDayFall, TreesDayWinter, TreesEvening, TreesMorning, TreesNight, } from '../../assets/images';
+import { Image } from '@chakra-ui/react';
+export const WeatherTrees = (_a) => {
+    var { timeOfDaySeason } = _a, props = __rest(_a, ["timeOfDaySeason"]);
+    const images = {
+        'day-summer': TreesDay,
+        'day-fall': TreesDayFall,
+        'day-winter': TreesDayWinter,
+        'day-spring': TreesDay,
+        'evening-summer': TreesEvening,
+        'evening-fall': TreesEvening,
+        'evening-winter': TreesDayWinter,
+        'evening-spring': TreesEvening,
+        'morning-summer': TreesMorning,
+        'morning-fall': TreesMorning,
+        'morning-winter': TreesDayWinter,
+        'morning-spring': TreesMorning,
+        'night-summer': TreesNight,
+        'night-fall': TreesNight,
+        'night-winter': TreesDayWinter,
+        'night-spring': TreesNight,
+    };
+    return _jsx(Image, Object.assign({}, props, { src: images[timeOfDaySeason], alt: "trees" }));
+};

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

@@ -1,2 +1,3 @@
 export * from './CloudsAnimation';
 export * from './HomieAnimation';
+export * from './WeatherTrees';

package/dist/components/animations/index.js

@@ -1,2 +1,3 @@
 export * from './CloudsAnimation';
 export * from './HomieAnimation';
+export * from './WeatherTrees';

package/dist/components/badge/TextBadge.js

@@ -5,6 +5,6 @@ import { useTextBadge } from '../../hooks';
 export const TextBadge = ({ bgColor = 'violet.1', showAnimation = true, text = t('badges.new'), width = '2.6rem', }) => {
     const { badgeWidth } = useTextBadge(width);
     return (_jsx(Box, { bg: bgColor, borderRadius: "base", w: showAnimation ? badgeWidth : 'fit-content', py: "0.1rem", px: "0.5rem", _hover: {
-            width,
+            width: showAnimation ? width : 'fit-content',
         }, transition: "all 0.2s ease-in-out", children: _jsx(Text, { noOfLines: 1, textColor: "neutral.white", textAlign: "center", fontSize: "0.625rem", fontWeight: "bold", textTransform: "uppercase", children: text }) }));
 };

package/dist/components/folderPanel/folderDetails/FilesCounter.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Flex, Text, chakra } from '@chakra-ui/react';
-import { BeatLoader } from 'react-spinners';
-import { colors } from '../../../theme/colors';
 import { pluralize } from '../../../utils';
+import { BaseCounter } from '../..';
 export const FilesCounter = ({ totalFiles, totalShowing, uploading, uploadingFiles, }) => {
     const files = pluralize(totalFiles, t('folderSharing.showing.part4'));
     const moreThanOne = `${t('folderSharing.showing.part1')} ${totalShowing} ${t('folderSharing.showing.part2')} ${totalFiles} ${t('folderSharing.showing.part3')}`;
     const one = `${t('folderSharing.showing.part1')} ${totalShowing} ${t('folderSharing.showing.part2')} ${totalFiles} ${files}`;
-    return (_jsx(Box, { w: "100%", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [!uploading && (_jsx(Text, { variant: "home", children: totalFiles > 1 ? moreThanOne : one })), uploading && (_jsxs(Text, { variant: "home", children: [_jsx(chakra.span, { fontWeight: "bold", children: t('folderSharing.uploading') }), ` ${uploadingFiles} ${files}`, _jsx(chakra.span, { ml: "2", children: _jsx(BeatLoader, { size: "4px", color: colors.blue[6] }) })] }))] }) }));
+    return (_jsx(BaseCounter, { text: totalFiles > 1 ? moreThanOne : one, uploading: uploading, uploadingText: ` ${uploadingFiles !== null && uploadingFiles !== void 0 ? uploadingFiles : ''} ${files}` }));
 };

package/dist/components/footers/FooterButtons.d.ts

@@ -1,2 +1,2 @@
 import { FooterButtonsI } from '../../interfaces';
-export declare const FooterButtons: ({ button1, button2, button3, }: FooterButtonsI) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterButtons: ({ button1, button2, button3, px, }: FooterButtonsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/footers/FooterButtons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Flex } from '@chakra-ui/react';
-export const FooterButtons = ({ button1, button2, button3, }) => {
-    return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: "base", children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
+export const FooterButtons = ({ button1, button2, button3, px = 'base', }) => {
+    return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: px, children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
 };

package/dist/components/forms/BaseCounter.d.ts

@@ -0,0 +1,2 @@
+import { BaseCounterI } from '../../interfaces';
+export declare const BaseCounter: ({ text, uploading, uploadingText, }: BaseCounterI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/BaseCounter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, chakra, Flex, Text } from '@chakra-ui/react';
+import { BeatLoader } from 'react-spinners';
+import { colors } from '../../theme/colors';
+export const BaseCounter = ({ text, uploading, uploadingText, }) => {
+    return (_jsx(Box, { w: "100%", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [!uploading && _jsx(Text, { variant: "home", children: text }), uploading && (_jsxs(Text, { variant: "home", children: [_jsx(chakra.span, { fontWeight: "bold", children: t('folderSharing.uploading') }), uploadingText, _jsx(chakra.span, { ml: "2", children: _jsx(BeatLoader, { size: "4px", color: colors.blue[6] }) })] }))] }) }));
+};

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

@@ -2,5 +2,6 @@ export * from './dynamicForm';
 export * from './readOnly';
 export * from './Address';
 export * from './AddressStored';
+export * from './BaseCounter';
 export * from './Collapsible';
 export * from './EditItemName';

package/dist/components/forms/index.js

@@ -2,5 +2,6 @@ export * from './dynamicForm';
 export * from './readOnly';
 export * from './Address';
 export * from './AddressStored';
+export * from './BaseCounter';
 export * from './Collapsible';
 export * from './EditItemName';

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const HomeAssistantWrapper: ({ children, showAirplane, title, zIndex }: PropsWithChildren<{
+export declare const HomeAssistantWrapper: ({ children, showAirplane, title, zIndex, }: PropsWithChildren<{
     showAirplane?: boolean;
     title: string;
     zIndex?: string;

package/dist/components/homeAssistant/HomeAssistantWrapper.js

@@ -1,10 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 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 { ContainerHeader, TileTooltip, moveRightToLeftWithFade, moveRightToLeft, moveLeftToRightAirplane, WeatherTrees, } from '..';
+import { Airplane, Cloud1, Cloud2, Cloud3, IA } from '../../assets/images';
+import { getTimeOfDay, getTimeOfDaySeason, } from '../../utils';
 import { colors } from '../../theme/colors';
-export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex }) => {
-    const treesAlt = getImageAltText(TreesCrop);
-    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" })] }) }) }));
+export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex, }) => {
+    const [timeOfDay, setTimeOfDay] = useState(getTimeOfDay());
+    const timeOfDaySeason = getTimeOfDaySeason();
+    const gradients = {
+        day: colors.dayGradient,
+        evening: colors.eveningGradient,
+        morning: colors.morningGradient,
+        night: colors.nightGradient,
+    };
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTimeOfDay(getTimeOfDay());
+        }, 60000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx(GridItem, { colSpan: [1, 2], zIndex: zIndex, children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Box, { bgGradient: gradients[timeOfDay], boxShadow: "base", h: "full", position: "relative", overflow: "hidden", transition: "background 1s ease-in-out", 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(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "absolute", bottom: "0", right: "2", w: "auto", h: "100px" })] }) }) }));
 };

package/dist/components/inboxTile/InboxForwardBanner.js

@@ -1,7 +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 { AspectRatio, Flex, Text, Image, chakra } 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." })] })] }));
+    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(chakra.span, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1", color: "neutral.black", fontWeight: "bold", display: "inline", children: "homefileit@homefile.com." })] })] }));
 };

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

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

package/dist/components/inboxTile/index.js

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

package/dist/components/inboxTile/panel/MessageCard.d.ts

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

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

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

package/dist/components/inboxTile/panel/MessageChatPanel.d.ts

@@ -0,0 +1,4 @@
+import { MessageChatPanelI } from '../../../interfaces';
+import 'react-quill/dist/quill.snow.css';
+import '../../../styles/quill.css';
+export declare const MessageChatPanel: ({ message, onBack, onClose, onReply, }: MessageChatPanelI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Box, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Stack, Text, } from '@chakra-ui/react';
+import QuillEditor from 'react-quill';
+import { Document2 } from '../../../assets/images';
+import { BackCircleButton, FooterButtons, MessageCard, PanelHeader, up, WrapperWithShadow, } from '../..';
+import 'react-quill/dist/quill.snow.css';
+import '../../../styles/quill.css';
+export const MessageChatPanel = ({ message, onBack, onClose, onReply, }) => {
+    var _a, _b;
+    const [value, setValue] = useState('');
+    const onChange = (content) => {
+        setValue(content);
+    };
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: (_a = message === null || message === void 0 ? void 0 : message.from) !== null && _a !== void 0 ? _a : '', icon: Document2 }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(Box, { bg: "lightBlue.2", py: "2", px: "base", children: _jsx(BackCircleButton, { onClick: onBack }) }), _jsx(Stack, { spacing: "base", p: "base", pb: "4", children: (_b = message === null || message === void 0 ? void 0 : message.chatReplies) === null || _b === void 0 ? void 0 : _b.map((reply) => (_jsx(MessageCard, { message: Object.assign(Object.assign({}, reply), { currentUser: message.currentUser }), variant: "chat" }, reply._id))) })] }), _jsx(DrawerFooter, { p: "0", maxH: "400px", children: _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { children: t('inbox.createReply') }), _jsx(QuillEditor, { theme: "snow", value: value, modules: { toolbar }, onChange: onChange, placeholder: t('inbox.enterContent') }), _jsx(FooterButtons, { px: "0", button1: {
+                                    buttonStyle: 'secondaryFooter',
+                                    label: t('buttons.send'),
+                                    isDisabled: Number(value.length) === 0,
+                                    onClick: () => {
+                                        var _a;
+                                        return onReply({
+                                            id: (_a = message === null || message === void 0 ? void 0 : message._id) !== null && _a !== void 0 ? _a : '',
+                                            message: value,
+                                        });
+                                    },
+                                } })] }) }) })] }));
+};
+const toolbar = [
+    ['bold', 'italic', 'underline', 'strike'],
+    ['blockquote', 'link', 'image'],
+    [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+    [{ script: 'sub' }, { script: 'super' }],
+    [{ indent: '-1' }, { indent: '+1' }],
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ color: [] }, { background: [] }],
+    ['clean'],
+];

package/dist/components/inboxTile/panel/MessagePanel.d.ts

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, DrawerBody, DrawerContent, DrawerHeader, Stack, } from '@chakra-ui/react';
+import { Inbox } from '../../../assets/images';
+import { BaseCounter, MessageCard, PanelHeader, SelectInput, } from '../..';
+import { useMessagePanel } from '../../../hooks';
+import { pluralize } from '../../../utils';
+export const MessagePanel = ({ messages, onClick, onClose }) => {
+    const { currentSort, sortedMessages, handleSelectItem, items } = useMessagePanel(messages);
+    const baseCounterText = `${t('counter.showing')} ${sortedMessages.length} ${t('counter.of')} ${messages.length} ${pluralize(sortedMessages.length, t('inbox.message').toLowerCase())} `;
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('inbox.message'), icon: Inbox }) }), _jsx(DrawerBody, { p: "0", children: _jsxs(Stack, { spacing: "base", pb: "4", children: [_jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(SelectInput, { handleClick: handleSelectItem, initialValue: currentSort, items: items }) }), _jsx(Box, { px: "base", children: _jsx(BaseCounter, { text: baseCounterText }) }), _jsx(Stack, { spacing: "1", pl: "26px", pr: "base", children: sortedMessages.map((message) => (_jsx(MessageCard, { message: message, onClick: onClick }, message._id))) })] }) })] }));
+};

package/dist/components/inboxTile/panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MessageCard';
+export * from './MessageChatPanel';
+export * from './MessagePanel';

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

@@ -0,0 +1,3 @@
+export * from './MessageCard';
+export * from './MessageChatPanel';
+export * from './MessagePanel';

package/dist/components/myHomes/WrapperWithShadow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Fade } from '@chakra-ui/react';
 export const WrapperWithShadow = ({ animation, children, fadeDelay = 0.3, }) => {
-    return (_jsx(Stack, { spacing: "base", p: "base", borderTopRadius: "xl", bg: "neutral.white", animation: animation, h: "full", overflowY: "scroll", pb: "3rem", children: _jsx(Fade, { delay: fadeDelay, in: true, children: children }) }));
+    return (_jsx(Stack, { w: "full", spacing: "base", p: "base", borderTopRadius: "xl", bg: "neutral.white", animation: animation, h: "full", overflowY: "scroll", pb: "3rem", children: _jsx(Fade, { delay: fadeDelay, in: true, children: children }) }));
 };

package/dist/components/myHomes/steps/MyHomeDetails.d.ts

@@ -1,2 +1,3 @@
 import { AddHomeContentI } from '../../../interfaces';
+export declare const up: string;
 export declare const MyHomeDetails: ({ handleCreateHomeClick, handleSkipClick, isFirstHome, showExternalLink, userFirstName, values, isLoading, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;