@homefile/components-v2 2.36.29 → 2.37.1

package/dist/assets/images/blue-circle-plus.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Grupo_23448" data-name="Grupo 23448" transform="translate(-146.175 -235)">
+    <circle id="Elipse_1" data-name="Elipse 1" cx="12" cy="12" r="12" transform="translate(146.175 235)" fill="#2686c6"/>
+    <g id="Grupo_19" data-name="Grupo 19" transform="translate(150.92 239.35)">
+      <g id="App_Icon_Atom" transform="translate(0.179 0.179)">
+        <path id="Caminho_8841" data-name="Caminho 8841" d="M0,0H13.784V13.784H0Z" fill="none"/>
+      </g>
+      <g id="Add_Icon_Atom" transform="translate(1.258 1.258)">
+        <line id="Linha_2001" data-name="Linha 2001" y2="12.784" transform="translate(5.997)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
+        <line id="Linha_2002" data-name="Linha 2002" x2="11.993" transform="translate(0 6.392)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -9,6 +9,7 @@ import Bedroom from './bedroom.svg';
 import BgBlue from './bg-blue.png';
 import BgLogo from './bg-logo.png';
 import Billing from './billing.svg';
+import BlueCirclePlus from './blue-circle-plus.svg';
 import BillingAddress from './billing-address.svg';
 import BlueFolder from './blue-folder.svg';
 import BlueFolderShared from './blue-folder-shared.svg';
@@ -168,7 +169,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, 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, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, 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, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js

@@ -9,6 +9,7 @@ import Bedroom from './bedroom.svg';
 import BgBlue from './bg-blue.png';
 import BgLogo from './bg-logo.png';
 import Billing from './billing.svg';
+import BlueCirclePlus from './blue-circle-plus.svg';
 import BillingAddress from './billing-address.svg';
 import BlueFolder from './blue-folder.svg';
 import BlueFolderShared from './blue-folder-shared.svg';
@@ -168,7 +169,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, 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, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, 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, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

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

@@ -71,7 +71,7 @@
     "title": "Recipient"
   },
   "addToHomefile": {
-    "title": "Add to Homefile"
+    "title": "Add home stuff to Homefile"
   },
   "ariaLabels": {
     "add": "Add button",

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

@@ -4,7 +4,7 @@ import { Plus } from '../../../components';
 import { colors } from '../../../theme/colors';
 export const HiddenField = ({ disabled, h = '80px', icon, id, isActive, name, onClick, showPlusIcon = false, }) => {
     const handleClick = () => onClick(id);
-    return (_jsxs(Box, { position: "relative", children: [_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "md", w: "100%", h: h, boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
+    return (_jsxs(Box, { position: "relative", children: [_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "4px", w: "100%", h: h, boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
                     borderColor: 'blue.1',
                 }, _disabled: {
                     opacity: 0.5,
@@ -13,5 +13,5 @@ export const HiddenField = ({ disabled, h = '80px', icon, id, isActive, name, on
                     },
                 }, _active: {
                     boxShadow: 'md',
-                }, children: [_jsx(Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }), showPlusIcon && (_jsx(Box, { position: "absolute", top: "1", left: "1", children: _jsx(Plus, { size: 14, stroke: colors.blue[3] }) }))] }));
+                }, children: [_jsx(Image, { h: "22px", w: "auto", maxW: "28px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }), showPlusIcon && (_jsx(Box, { position: "absolute", top: "1", left: "1", children: _jsx(Plus, { size: 14, stroke: colors.blue[3] }) }))] }));
 };

package/dist/components/headers/ContainerHeader.js

@@ -3,5 +3,5 @@ import { Flex, Text, Image } from '@chakra-ui/react';
 import { HelpButton, IconMenu } from '../../components';
 export const ContainerHeader = ({ disabled, icon, iconSize, index, isThin, itemForm, menuItems = [], onHelpClick = () => { }, showHelp, title, titleIcon, }) => {
     const isDisabled = disabled !== null && disabled !== void 0 ? disabled : menuItems.length === 0;
-    return (_jsxs(Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", h: isThin ? '32px' : '60px', px: "base", children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [titleIcon && (_jsx(Image, { src: titleIcon, alt: titleIcon, h: iconSize, w: "auto" })), title && (_jsx(Text, { fontWeight: "medium", textTransform: "capitalize", children: title }))] }), _jsxs(Flex, { align: "center", gap: "2", minW: "fit-content", bg: "neutral.white", id: index === 0 ? 'removeHome' : '', children: [showHelp && _jsx(HelpButton, { onClick: onHelpClick }), icon && (_jsx(IconMenu, { icon: icon, itemForm: itemForm, menuItems: menuItems, disabled: isDisabled, zIndex: "1" }))] })] }));
+    return (_jsxs(Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", h: isThin ? '32px' : '60px', px: "base", children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [titleIcon && (_jsx(Image, { src: titleIcon, alt: titleIcon, h: iconSize, w: "auto" })), title && (_jsx(Text, { fontWeight: "medium", textTransform: "capitalize", children: title }))] }), _jsxs(Flex, { align: "center", gap: "2", minW: "fit-content", bg: "neutral.white", id: index === 0 ? 'removeHome' : '', children: [showHelp && _jsx(HelpButton, { onClick: onHelpClick }), icon && !isDisabled && (_jsx(IconMenu, { icon: icon, itemForm: itemForm, menuItems: menuItems, zIndex: "1" }))] })] }));
 };

package/dist/components/homeBoard/AddToHomefile.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Button, Circle, Container, Flex, Grid, Stack, } from '@chakra-ui/react';
-import { ChevronRight, ContainerHeader, HiddenField, IconAndText, MoreHorizontal, Plus, TileTooltip, } from '../../components';
-import { GuestBedroom } from '../../assets/images';
+import { Button, Circle, Container, Flex, Grid, Stack } from '@chakra-ui/react';
+import { ChevronRight, ContainerHeader, HiddenField, IconAndText, Plus, TileTooltip, } from '../../components';
+import { BlueCirclePlus } from '../../assets/images';
 import { colors } from '../../theme/colors';
 export const AddToHomefile = ({ documentList, onItemClick, headerList, isDisabled = false, }) => {
-    return (_jsx(TileTooltip, { label: "addToHomefile", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], children: [_jsx(ContainerHeader, { title: t('addToHomefile.title'), titleIcon: GuestBedroom, menuItems: headerList, icon: _jsx(MoreHorizontal, { size: 38 }) }), _jsxs(Stack, { spacing: "base", w: "full", p: "4", children: [_jsx(Button, { onClick: onItemClick, disabled: isDisabled, children: _jsxs(Flex, { w: "full", alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: t('addHomeItem.btnLabel'), icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", children: documentList.map((item) => {
+    return (_jsx(TileTooltip, { label: "addToHomefile", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], bg: "lightViolet.2", children: [_jsx(ContainerHeader, { title: t('addToHomefile.title'), titleIcon: BlueCirclePlus, menuItems: headerList }), _jsxs(Stack, { spacing: "base", w: "full", p: "4", children: [_jsx(Button, { onClick: onItemClick, disabled: isDisabled, children: _jsxs(Flex, { w: "full", alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: t('addHomeItem.btnLabel'), icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", children: documentList.map((item) => {
                                 return (_jsx(HiddenField, { h: "58px", id: item.label, name: item.label, icon: item.icon, disabled: isDisabled, onClick: item.onClick, showPlusIcon: true }, item.label));
                             }) })] })] }) }));
 };

package/dist/components/propertyTiles/charts/areaCharts/TrendindAreaChart.d.ts

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

package/dist/components/propertyTiles/charts/areaCharts/TrendindAreaChart.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Text } from '@chakra-ui/react';
+import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, } from 'recharts';
+import { cursorStyle, yAxisStyle, TrendingAreaChartHeader, } from '../../../../components';
+import { colors } from '../../../../theme/colors';
+export const TrendingAreaChart = ({ data = [] }) => {
+    return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingAreaChartHeader, {}), _jsxs(AreaChart, { width: 300, height: 200, data: data, margin: {
+                    left: -25,
+                    bottom: -10,
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "area-gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: colors.blue[3] }), _jsx("stop", { offset: "100%", stopColor: colors.lightBlue[3] })] }) }), _jsx(CartesianGrid, { horizontalCoordinatesGenerator: () => [100], verticalCoordinatesGenerator: (props) => {
+                            const w = props.width + 35;
+                            const step = w / 5;
+                            return [step, step * 2, step * 3, step * 4];
+                        }, stroke: colors.lightBlue[2] }), _jsx(XAxis, { dataKey: "month", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { content: CustomTooltip, cursor: cursorStyle }), _jsx(Area, { type: "monotone", dataKey: "value", fill: "url(#area-gradient)", strokeWidth: 1, strokeOpacity: 0.1 })] })] }));
+};
+const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+        return (_jsx(Box, { bg: "violet.1", p: "2", borderRadius: "md", boxShadow: "md", children: _jsx(Text, { color: "neutral.white", fontWeight: "bold", fontSize: "xs", children: `$ ${payload[0].value}k` }) }));
+    }
+    return null;
+};

package/dist/components/propertyTiles/charts/areaCharts/TrendingAreaChartHeader.d.ts

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

package/dist/components/propertyTiles/charts/areaCharts/TrendingAreaChartHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { ChartLegend } from '../../../../components';
+import { Flex, Text } from '@chakra-ui/react';
+export const TrendingAreaChartHeader = () => {
+    const now = new Date();
+    const month = now.toLocaleString('en-US', { month: 'short' }).toUpperCase();
+    const year = now.getFullYear();
+    return (_jsxs(Flex, { gap: "base", justify: "space-between", children: [_jsx(Text, { fontSize: "xs", children: `${month} ${year}` }), _jsx(ChartLegend, { color: "blue.3", label: t('propertyTiles.charts.value'), textTransform: "uppercase", fontSize: "xxs" })] }));
+};

package/dist/components/propertyTiles/charts/areaCharts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TrendindAreaChart';
+export * from './TrendingAreaChartHeader';

package/dist/components/propertyTiles/charts/areaCharts/index.js

@@ -0,0 +1,2 @@
+export * from './TrendindAreaChart';
+export * from './TrendingAreaChartHeader';

package/dist/components/propertyTiles/charts/index.d.ts

@@ -1 +1,2 @@
+export * from './areaCharts';
 export * from './lineCharts';

package/dist/components/propertyTiles/charts/index.js

@@ -1 +1,2 @@
+export * from './areaCharts';
 export * from './lineCharts';

package/dist/mocks/homeboard/documentList.mock.js

@@ -1,5 +1,17 @@
-import { Register } from '../../assets/images';
+import { CookTop, GuestBedroom, Register } from '../../assets/images';
 export const documentListMock = [
+    {
+        icon: CookTop,
+        active: true,
+        label: 'Appliance',
+        onClick: () => null,
+    },
+    {
+        icon: GuestBedroom,
+        active: true,
+        label: 'Furniture',
+        onClick: () => null,
+    },
     {
         icon: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='33.439'%20height='26.432'%20viewBox='0%200%2033.439%2026.432'%3e%3cg%20id='Grupo_14045'%20data-name='Grupo%2014045'%20transform='translate(-3080.373%201964.161)'%3e%3cpath%20id='Caminho_10681'%20data-name='Caminho%2010681'%20d='M3099.543-1912.748h-.029a3,3,0,0,0,1.153-2.367v-.047c0-.035,0-.073,0-.109a3.01,3.01,0,0,0-3.01-2.93,3.007,3.007,0,0,0-3.007,2.93c0,.035,0,.073,0,.109v.047a3,3,0,0,0,1.153,2.367h-.032a3.061,3.061,0,0,0-3.06,2.977c0,.053,0,.106,0,.158v.868h9.9v-.868c0-.053,0-.106,0-.158A3.058,3.058,0,0,0,3099.543-1912.748Z'%20transform='translate(-8.713%20-32.478)'%20fill='%231e393d'/%3e%3cpath%20id='Caminho_10682'%20data-name='Caminho%2010682'%20d='M3112.933-1943.991h-31.68a.883.883,0,0,0-.88.88v3.983h33.439v-3.983A.882.882,0,0,0,3112.933-1943.991Zm-12.408,3.147h-6.862a.716.716,0,0,1-.715-.716.716.716,0,0,1,.715-.716h6.862a.715.715,0,0,1,.713.716A.715.715,0,0,1,3100.525-1940.844Z'%20transform='translate(0%20-14.254)'%20fill='%2328b5a8'/%3e%3cpath%20id='Caminho_10683'%20data-name='Caminho%2010683'%20d='M3080.373-1927.411v14.772a.883.883,0,0,0,.88.88h31.68a.882.882,0,0,0,.88-.88v-14.772Z'%20transform='translate(0%20-25.97)'%20fill='%23d2edef'/%3e%3cpath%20id='Caminho_10684'%20data-name='Caminho%2010684'%20d='M3133.216-1958.152v2.059h-5.9v-8.067h5.9Zm-1.9-2.943a1.055,1.055,0,0,0-1.054-1.054,1.054,1.054,0,0,0-1.052,1.054,1.053,1.053,0,0,0,1.052,1.051A1.054,1.054,0,0,0,3131.319-1961.095Z'%20transform='translate(-33.172%200)'%20fill='%23d4334b'/%3e%3cpath%20id='Caminho_10685'%20data-name='Caminho%2010685'%20d='M3102.393-1909.955a3.205,3.205,0,0,0-2.927-3.032l.1-.085h-.1a3.162,3.162,0,0,0,.993-2.267l0-.116a3.159,3.159,0,0,0-3.156-3,3.159,3.159,0,0,0-3.153,3l0,.11a3.166,3.166,0,0,0,.992,2.266h-.1l.1.085a3.205,3.205,0,0,0-2.931,3.031c0,.055,0,.111,0,.166v.942H3102.4v-.942C3102.4-1909.845,3102.4-1909.9,3102.393-1909.955Z'%20transform='translate(-8.36%20-32.302)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15310'%20data-name='Retângulo%2015310'%20width='6.057'%20height='0.88'%20transform='translate(3097.436%20-1950.724)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15311'%20data-name='Retângulo%2015311'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1947.06)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15312'%20data-name='Retângulo%2015312'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1944.693)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15313'%20data-name='Retângulo%2015313'%20width='9.66'%20height='0.88'%20transform='translate(3097.436%20-1942.323)'%20fill='%23324459'/%3e%3c/g%3e%3c/svg%3e",
         active: true,

package/dist/mocks/propertyTiles/charts.d.ts

@@ -1 +1,2 @@
 export declare const lineChartData: Record<string, string | number>[];
+export declare const areaChartData: Record<string, string | number>[];

package/dist/mocks/propertyTiles/charts.js

@@ -24,3 +24,50 @@ export const lineChartData = [
         balance: 4000,
     },
 ];
+export const areaChartData = [
+    {
+        month: 'J',
+        value: 2000,
+    },
+    {
+        month: 'F',
+        value: 2100,
+    },
+    {
+        month: 'M',
+        value: 2000,
+    },
+    {
+        month: 'A',
+        value: 2300,
+    },
+    {
+        month: 'M',
+        value: 2400,
+    },
+    {
+        month: 'J',
+        value: 2200,
+    },
+    {
+        month: 'J',
+        value: 2200,
+    },
+    { month: 'A', value: 2500 },
+    {
+        month: 'S',
+        value: 2100,
+    },
+    {
+        month: 'O',
+        value: 2400,
+    },
+    {
+        month: 'N',
+        value: 2500,
+    },
+    {
+        month: 'D',
+        value: 2600,
+    },
+];

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

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

package/dist/stories/homeAssistant/HomeAssistant.stories.js

@@ -3,6 +3,7 @@ import { HomeAssistant } from '../../components';
 import { Box } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
 import { videoMock } from '../../mocks';
+import { homeAssistantWizardSteps } from '../../helpers';
 export default {
     title: 'Components/HomeAssistant',
     component: HomeAssistant,
@@ -11,6 +12,7 @@ export default {
         onStepClick: action('onStepClick'),
         showTutorial: true,
         tutorialUrl: videoMock,
+        steps: homeAssistantWizardSteps,
     },
     decorators: [
         (Story) => (_jsx(Box, { p: "base", w: ['full', '669px'], h: "477px", children: _jsx(Story, {}) })),

package/dist/stories/homeBoard/AddToHomefile.stories.js

@@ -12,5 +12,5 @@ export default {
     },
 };
 export const AddToHomefileComponent = (args) => {
-    return (_jsx(Box, { w: ['full', '355px'], children: _jsx(AddToHomefile, Object.assign({}, args)) }));
+    return (_jsx(Box, { w: ['full', '400px'], children: _jsx(AddToHomefile, Object.assign({}, args)) }));
 };

package/dist/stories/propertyTiles/TrendingAreaChart.stories.d.ts

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

package/dist/stories/propertyTiles/TrendingAreaChart.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { TrendingAreaChart } from '../../components';
+import { areaChartData as data } from '../../mocks';
+export default {
+    title: 'Components/PropertyTiles/Charts',
+    component: TrendingAreaChart,
+    args: {
+        data,
+    },
+};
+export const TrendingAreaChartComponent = (args) => {
+    return (_jsx(Box, { w: ['full', 'fit-content'], p: "base", bg: "lightGreen.1", children: _jsx(TrendingAreaChart, Object.assign({}, args)) }));
+};

package/package.json

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