@homefile/components-v2 2.1.0 → 2.1.1

package/dist/assets/images/ia.svg

@@ -1,18 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.975" height="27.878" viewBox="0 0 24.975 27.878">
-  <g id="Group_21224" data-name="Group 21224" transform="translate(-761.466 -63.12)">
-    <path id="Subtraction_163" data-name="Subtraction 163" d="M13.736,23.975h-3.5a.857.857,0,0,1-.856-.856v-1.3A9.705,9.705,0,0,1,6.9,20.762l-.937.938a.855.855,0,0,1-1.21,0L2.276,19.229a.862.862,0,0,1,0-1.213l.992-.993a9.915,9.915,0,0,1-.951-2.432H.856A.861.861,0,0,1,0,13.756V10.219a.861.861,0,0,1,.856-.835H2.431a10.063,10.063,0,0,1,1-2.273L2.276,5.958a.858.858,0,0,1,0-1.21L4.749,2.275a.859.859,0,0,1,1.21,0l1.208,1.21a9.959,9.959,0,0,1,2.217-.9V.858A.862.862,0,0,1,10.219,0h3.537a.862.862,0,0,1,.836.858V2.588a9.887,9.887,0,0,1,2.217.9l1.207-1.21a.859.859,0,0,1,1.21,0L21.7,4.749a.859.859,0,0,1,0,1.21L20.548,7.11a9.911,9.911,0,0,1,1,2.273h1.576a.856.856,0,0,1,.856.856v3.5a.857.857,0,0,1-.856.856H21.658a9.917,9.917,0,0,1-.951,2.432l.993.993a.863.863,0,0,1,0,1.213L19.226,21.7a.844.844,0,0,1-.6.251.853.853,0,0,1-.606-.251l-.937-.937a9.686,9.686,0,0,1-2.488,1.054v1.3A.857.857,0,0,1,13.736,23.975ZM11.99,3.764a8.2,8.2,0,1,0,3.2.646A8.177,8.177,0,0,0,11.99,3.764Z" transform="translate(761.966 66.523)" fill="#00c0b7" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <g id="Group_21161" data-name="Group 21161" transform="translate(761.99 63.12)">
-      <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="1.967" cy="1.967" r="1.967" transform="translate(10.008)" fill="#bcd1d8"/>
-      <line id="Line_3403" data-name="Line 3403" y2="2.485" transform="translate(11.975 3.934)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
-      <rect id="Rectangle_24537" data-name="Rectangle 24537" width="9.835" height="3.934" rx="1.967" transform="translate(7.058 5.901)" fill="#00a1aa"/>
-      <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="2.95" cy="2.95" r="2.95" transform="translate(0 12.785)" fill="#00a1aa"/>
-      <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.459" cy="2.95" rx="2.459" ry="2.95" transform="translate(19.033 12.785)" fill="#00a1aa"/>
-      <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="2.95" cy="2.95" r="2.95" transform="translate(15.099 12.785)" fill="#00a1aa"/>
-      <rect id="Rectangle_24536" data-name="Rectangle 24536" width="18.05" height="15.736" rx="5" transform="translate(2.95 7.868)" fill="#02c0b7"/>
-      <rect id="Rectangle_24476" data-name="Rectangle 24476" width="13.769" height="5.901" rx="2.95" transform="translate(5.091 10.818)" fill="#324459"/>
-      <line id="Line_3401" data-name="Line 3401" x2="2.485" transform="translate(7.771 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <line id="Line_3402" data-name="Line 3402" x2="2.485" transform="translate(14.052 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.621,2.621,0,0,0,2.622,2.231,2.666,2.666,0,0,0,2.618-2.231" transform="translate(122.294 -1742.01)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="30.202" height="30.2" viewBox="0 0 30.202 30.2">
+  <g id="Group_21564" data-name="Group 21564" transform="translate(10417.861 8318.462)">
+    <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="2.157" cy="2.157" r="2.157" transform="translate(-10404.917 -8318.462)" fill="#bcd1d8"/>
+    <line id="Line_3403" data-name="Line 3403" y2="2.725" transform="translate(-10402.761 -8314.146)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
+    <rect id="Rectangle_24537" data-name="Rectangle 24537" width="10.786" height="4.314" rx="2.157" transform="translate(-10408.155 -8311.99)" fill="#00a1aa"/>
+    <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="3.236" cy="3.236" r="3.236" transform="translate(-10417.861 -8304.439)" fill="#00a1aa"/>
+    <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.696" cy="3.236" rx="2.696" ry="3.236" transform="translate(-10393.053 -8304.439)" fill="#00a1aa"/>
+    <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="3.236" cy="3.236" r="3.236" transform="translate(-10397.368 -8304.439)" fill="#00a1aa"/>
+    <rect id="Rectangle_24536" data-name="Rectangle 24536" width="23.729" height="21.572" rx="3" transform="translate(-10414.626 -8309.834)" fill="#02c0b7"/>
+    <rect id="Rectangle_24476" data-name="Rectangle 24476" width="15.1" height="6.472" rx="3" transform="translate(-10410.311 -8304.439)" fill="#324459"/>
+    <line id="Line_3401" data-name="Line 3401" x2="2.725" transform="translate(-10407.915 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <line id="Line_3402" data-name="Line 3402" x2="2.725" transform="translate(-10399.874 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.874,2.874,0,0,0,2.876,2.446,2.924,2.924,0,0,0,2.871-2.446" transform="translate(-10292.654 -10055.396)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
   </g>
 </svg>
+
+

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

@@ -399,8 +399,8 @@
       }
     },
     "details": "Provide details about your home’s",
-    "homeMonitor": "Home Monitor",
-    "homeMonitoring": "Homefile is monitoring your home.",
+    "homeMonitor": "Homie",
+    "homeMonitoring": "Homie is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",
@@ -418,10 +418,11 @@
       "smoke": "Smoke & CO2 detectors",
       "structure": "Structure"
     },
-    "title": "Home Assistant - Set Up",
+    "title": "Set Up Homie",
     "tutorialButton": "Start Quick Setup",
-    "tutorialDescription": "Our Home assistant helps you manage every aspect of your home. We’ve added a short overview to help you learn more about it.",
-    "tutorialTitle": "Let’s quickly configure your AI Home Assistant."
+    "tutorialDescription": "Homie helps you manage every aspect of your home. We've added a short overview to help you learn more about it.",
+    "tutorialTitle": "Let’s quickly set up Homie, your friendly AI home assistant.",
+    "tutorialNote": "Just a few set-up questions to help Homie get going."
   },
   "homeBoard": {
     "addRecords": "Add Property Records",
@@ -603,7 +604,7 @@
   "newPassword": {
     "confirm": "Confirm Password",
     "create": "Create Password",
-    "title": "Enter your password below."
+    "title": "Please enter your new password."
   },
   "partner": {
     "aphw": {
@@ -743,7 +744,7 @@
       "title": "Property Taxes"
     },
     "trending": {
-      "addMortgage": "Add Mortgage Info",
+      "addMortgage": "Mortgage Info",
       "estimated": "Estimated Market Value",
       "mortgage": "Mortgage Balance*",
       "public": "*Estimated from Public Data",

package/dist/components/contacts/ContactsContent.js

@@ -12,7 +12,7 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
     });
     const { windowDimensions: { width }, } = useWindowDimensions();
     const maxW = width > 413 ? '16rem' : '10rem';
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", children: [_jsxs(Stack, { spacing: "base", pt: "base", pb: "120px", pr: "base", bg: "lightBlue.5", minHeight: "full", children: [_jsxs(Flex, { gap: "3", pl: "base", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('subscription.select') })] }), _jsx(Box, { children: Object.keys(splittedContacts).map((letter, idx) => {
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", children: [_jsxs(Stack, { spacing: "base", pt: "base", pb: "120px", pr: "base", bg: "lightBlue.2", minHeight: "full", children: [_jsxs(Flex, { gap: "3", pl: "base", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('subscription.select') })] }), _jsx(Box, { children: Object.keys(splittedContacts).map((letter, idx) => {
                                     const showLetterDivider = idx !== 0;
                                     return (_jsxs(Stack, { spacing: "0", children: [showLetterDivider && _jsx(LetterDivider, { letter: letter }), _jsx(Stack, { spacing: "2px", children: splittedContacts[letter].map((contact, idx) => {
                                                     const selected = isItemSelected(contact._id);

package/dist/components/homeAssistant/HomeAssistantTutorial.js

@@ -6,5 +6,5 @@ import { ChevronRight, VideoPlayerModal, VideoPlayerTrigger, } from '..';
 import { colors } from '../../theme/colors';
 export const HomeAssistantTutorial = ({ onStart, videoUrl, }) => {
     const [url, setUrl] = useState();
-    return (_jsxs(Stack, { spacing: "base", align: "center", maxW: "483px", px: ['base', 0], zIndex: "2", children: [_jsx(Text, { fontSize: "30px", lineHeight: "32px", textAlign: "center", children: t('homeAssistant.tutorialTitle') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialDescription') }), _jsxs(Stack, { spacing: "base", w: "284px", children: [_jsx(Box, { boxShadow: "lg", children: _jsx(VideoPlayerTrigger, { url: videoUrl, value: videoUrl, ratio: 16 / 9, onPlay: (value) => setUrl(value) }) }), _jsx(Button, { onClick: onStart, textTransform: "capitalize", children: _jsxs(Flex, { align: "center", justify: "space-between", w: "100%", px: "base", children: [_jsx(Text, { color: "neutral.white", children: t('homeAssistant.tutorialButton') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) })] }), url && (_jsx(VideoPlayerModal, { url: url, onClose: () => setUrl(undefined), showOverlay: true }))] }));
+    return (_jsxs(Stack, { spacing: "base", align: "center", maxW: "483px", px: ['base', 0], zIndex: "2", children: [_jsx(Text, { fontSize: "30px", lineHeight: "32px", textAlign: "center", children: t('homeAssistant.tutorialTitle') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialDescription') }), _jsxs(Stack, { spacing: "base", w: "284px", children: [_jsx(Box, { boxShadow: "lg", children: _jsx(VideoPlayerTrigger, { url: videoUrl, value: videoUrl, ratio: 16 / 9, onPlay: (value) => setUrl(value) }) }), _jsx(Button, { onClick: onStart, textTransform: "capitalize", children: _jsxs(Flex, { align: "center", justify: "space-between", w: "100%", px: "base", children: [_jsx(Text, { color: "neutral.white", children: t('homeAssistant.tutorialButton') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) })] }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialNote') }), url && (_jsx(VideoPlayerModal, { url: url, onClose: () => setUrl(undefined), showOverlay: true }))] }));
 };

package/dist/components/homeAssistant/HomeAssistantWrapper.js

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

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

@@ -1,2 +1,2 @@
 import { HomeMonitorButtonI } from '../../interfaces';
-export declare const HomeMonitorButton: ({ currentStep, menuItems, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorButton: ({ currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { getIconAltText } from '../../utils';
-import { IconMenu, MoreHorizontal } from '..';
-export const HomeMonitorButton = ({ currentStep, menuItems, onStepClick, status = 'ok', step, }) => {
+export const HomeMonitorButton = ({ currentStep, onStepClick, status = 'ok', step, }) => {
+    const buttonId = `homeMonitorButton-${currentStep}`;
     const iconAltText = getIconAltText(step.icon);
-    const handleClick = () => {
-        if (status !== 'ok')
-            onStepClick(currentStep);
-    };
-    const isDisabled = Number(menuItems.length) === 0;
-    return (_jsxs(Box, { position: "relative", children: [_jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base" }, setStyles(status), { onClick: handleClick, children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "4", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: currentStep, menuItems: menuItems, disabled: isDisabled }) })] }));
+    return (_jsx(Box, { position: "relative", id: buttonId, children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
 };
 const setStyles = (status) => {
     switch (status) {

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -1,9 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex } from '@chakra-ui/react';
-import { HomeMonitorButton } from '..';
+import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
-export const HomeMonitorSteps = ({ menuItems, onStepClick, stepsWithAlerts, }) => {
-    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { flex: "auto", children: _jsx(HomeMonitorButton, { currentStep: index + 1, menuItems: menuItems, onStepClick: onStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }) }, step.title))) }));
+import { useComponentStyles } from '../../hooks';
+import { useState } from 'react';
+export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
+    const ids = [
+        'homeMonitorButton-1',
+        'homeMonitorButton-2',
+        'homeMonitorButton-3',
+        'homeMonitorButton-4',
+        'homeMonitorButton-5',
+        'homeMonitorButton-6',
+        'menuItems',
+    ];
+    const [selectedId, setSelectedId] = useState('');
+    const isDisabled = menuItems.length === 0;
+    useComponentStyles({ ids, selectedId, zIndex: '2' });
+    const handleStepClick = (step) => {
+        onStepClick(step);
+        setSelectedId(`homeMonitorButton-${step}`);
+    };
+    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", children: _jsxs(Box, { flex: "auto", children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId('menuItems') }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
 };
 const getStatus = (index, stepsWithAlerts) => {
     const hasAlert = stepsWithAlerts.includes(index);

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

@@ -3,9 +3,12 @@ import { t } from 'i18next';
 import { Center, SimpleGrid, Stack, Text } from '@chakra-ui/react';
 import { ApplianceButton } from '../..';
 import { Fridge, Freezer, Washer, Dryer, Dishwasher, CookTop, Oven, Hood, Microwave, Range, } from '../../../assets/images';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 export const ApplianceSteps = ({ addedAppliances = [], onClick, }) => {
     const [appliances, setAppliances] = useState(addedAppliances);
+    useEffect(() => {
+        setAppliances(addedAppliances);
+    }, [addedAppliances]);
     const handleClick = (id) => {
         if (appliances.includes(id)) {
             const newAppliances = appliances.filter((appliance) => appliance !== id);

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerContent, DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
@@ -7,13 +8,25 @@ import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelSte
 import { homeAssistantSteps } from '../../../helpers';
 import { useSimpleDynamicForm } from '../../../hooks';
 export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, }) => {
+    const [addedAppliances, updateAddedAppliances] = useState([]);
     const { title } = homeAssistantSteps[currentStep - 1];
     const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`;
     const isAppliances = currentStep === 4;
+    useEffect(() => {
+        var _a;
+        if (isAppliances) {
+            const targetAppliances = (_a = currentForm.find((field) => {
+                var _a;
+                return ((_a = field.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === 'appliances list' &&
+                    field.type === 'hidden';
+            })) === null || _a === void 0 ? void 0 : _a.value;
+            updateAddedAppliances(targetAppliances);
+        }
+    }, [currentForm, isAppliances]);
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && _jsx(ApplianceSteps, { onClick: onApplianceClick }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
                         buttonStyle: 'secondaryFooter',
                         label: t('buttons.back'),
                         onClick: onBack,

package/dist/components/homeBoard/HomeBoard.js

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

package/dist/components/inputs/SelectButton.js

@@ -16,5 +16,5 @@ export const SelectButton = ({ height = 'sm', isDisabled, variant = 'primary', w
     return (_jsx(MenuButton, Object.assign({ disabled: isDisabled }, triggerVariants[variant], { _disabled: {
             bg: 'lightBlue.1',
             cursor: 'not-allowed',
-        }, children: _jsxs(Flex, { align: "center", gap: "4", justify: "space-between", children: [_jsx(Text, Object.assign({}, textVariants[variant], { children: selectedValue })), _jsx(ChevronDown, Object.assign({}, iconVariants[variant]))] }) })));
+        }, children: _jsxs(Flex, { align: "center", gap: "4", justify: "space-between", children: [_jsx(Text, Object.assign({}, textVariants[variant], { children: selectedValue })), _jsx(Flex, { flexShrink: 0, children: _jsx(ChevronDown, Object.assign({}, iconVariants[variant])) })] }) })));
 };

package/dist/components/launchpad/IconMenu.d.ts

@@ -1,2 +1,2 @@
 import { IconMenuI } from '../../interfaces';
-export declare const IconMenu: <T extends unknown>({ disabled, icon, itemForm, menuItems, variant, width, }: IconMenuI<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const IconMenu: <T extends unknown>({ disabled, icon, itemForm, menuItems, onClick, variant, width, zIndex, }: IconMenuI<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/launchpad/IconMenu.js

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

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,5 +1,5 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
+type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
 type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
 export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home';

package/dist/interfaces/homeAssistant/ApplianceSteps.interface.d.ts

@@ -2,5 +2,4 @@ export interface ApplianceStepsI {
     addedAppliances?: AppliancesType[];
     onClick: (selectedSteps: string[]) => void;
 }
-type AppliancesType = 'fridge' | 'freezer' | 'washer' | 'dryer' | 'dish-washer' | 'cook-top' | 'oven' | 'range' | 'hood' | 'microwave';
-export {};
+export type AppliancesType = 'fridge' | 'freezer' | 'washer' | 'dryer' | 'dish-washer' | 'cook-top' | 'oven' | 'range' | 'hood' | 'microwave';

package/dist/interfaces/homeAssistant/HomeMonitorSteps.interface.d.ts

@@ -6,7 +6,6 @@ export interface HomeMonitortStepsI {
 }
 export interface HomeMonitorButtonI {
     currentStep: number;
-    menuItems: HomeMonitortStepsI['menuItems'];
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;

package/dist/interfaces/launchpad/IconMenu.interface.d.ts

@@ -7,6 +7,8 @@ export interface IconMenuI<T> {
     icon?: JSX.Element;
     itemForm?: T;
     menuItems?: MenuItemI[];
+    onClick?: () => void;
     variant?: string;
     width?: string;
+    zIndex?: string;
 }

package/dist/mocks/homeAssistant/homeAssistantForms.js

@@ -158,6 +158,12 @@ export const homeAssitantStep3FormMock = [
     },
 ];
 export const homeAssitantStep4FormMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Appliances List',
+        value: ['fridge', 'dish-washer', 'hood', 'oven'],
+        type: 'hidden',
+    },
     {
         id: faker.database.mongodbObjectId(),
         name: 'Heater',

package/package.json

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

package/src/assets/images/ia.svg

@@ -1,18 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.975" height="27.878" viewBox="0 0 24.975 27.878">
-  <g id="Group_21224" data-name="Group 21224" transform="translate(-761.466 -63.12)">
-    <path id="Subtraction_163" data-name="Subtraction 163" d="M13.736,23.975h-3.5a.857.857,0,0,1-.856-.856v-1.3A9.705,9.705,0,0,1,6.9,20.762l-.937.938a.855.855,0,0,1-1.21,0L2.276,19.229a.862.862,0,0,1,0-1.213l.992-.993a9.915,9.915,0,0,1-.951-2.432H.856A.861.861,0,0,1,0,13.756V10.219a.861.861,0,0,1,.856-.835H2.431a10.063,10.063,0,0,1,1-2.273L2.276,5.958a.858.858,0,0,1,0-1.21L4.749,2.275a.859.859,0,0,1,1.21,0l1.208,1.21a9.959,9.959,0,0,1,2.217-.9V.858A.862.862,0,0,1,10.219,0h3.537a.862.862,0,0,1,.836.858V2.588a9.887,9.887,0,0,1,2.217.9l1.207-1.21a.859.859,0,0,1,1.21,0L21.7,4.749a.859.859,0,0,1,0,1.21L20.548,7.11a9.911,9.911,0,0,1,1,2.273h1.576a.856.856,0,0,1,.856.856v3.5a.857.857,0,0,1-.856.856H21.658a9.917,9.917,0,0,1-.951,2.432l.993.993a.863.863,0,0,1,0,1.213L19.226,21.7a.844.844,0,0,1-.6.251.853.853,0,0,1-.606-.251l-.937-.937a9.686,9.686,0,0,1-2.488,1.054v1.3A.857.857,0,0,1,13.736,23.975ZM11.99,3.764a8.2,8.2,0,1,0,3.2.646A8.177,8.177,0,0,0,11.99,3.764Z" transform="translate(761.966 66.523)" fill="#00c0b7" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <g id="Group_21161" data-name="Group 21161" transform="translate(761.99 63.12)">
-      <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="1.967" cy="1.967" r="1.967" transform="translate(10.008)" fill="#bcd1d8"/>
-      <line id="Line_3403" data-name="Line 3403" y2="2.485" transform="translate(11.975 3.934)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
-      <rect id="Rectangle_24537" data-name="Rectangle 24537" width="9.835" height="3.934" rx="1.967" transform="translate(7.058 5.901)" fill="#00a1aa"/>
-      <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="2.95" cy="2.95" r="2.95" transform="translate(0 12.785)" fill="#00a1aa"/>
-      <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.459" cy="2.95" rx="2.459" ry="2.95" transform="translate(19.033 12.785)" fill="#00a1aa"/>
-      <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="2.95" cy="2.95" r="2.95" transform="translate(15.099 12.785)" fill="#00a1aa"/>
-      <rect id="Rectangle_24536" data-name="Rectangle 24536" width="18.05" height="15.736" rx="5" transform="translate(2.95 7.868)" fill="#02c0b7"/>
-      <rect id="Rectangle_24476" data-name="Rectangle 24476" width="13.769" height="5.901" rx="2.95" transform="translate(5.091 10.818)" fill="#324459"/>
-      <line id="Line_3401" data-name="Line 3401" x2="2.485" transform="translate(7.771 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <line id="Line_3402" data-name="Line 3402" x2="2.485" transform="translate(14.052 14.039)" fill="none" stroke="#fff" stroke-width="2"/>
-      <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.621,2.621,0,0,0,2.622,2.231,2.666,2.666,0,0,0,2.618-2.231" transform="translate(122.294 -1742.01)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="30.202" height="30.2" viewBox="0 0 30.202 30.2">
+  <g id="Group_21564" data-name="Group 21564" transform="translate(10417.861 8318.462)">
+    <circle id="Ellipse_1093" data-name="Ellipse 1093" cx="2.157" cy="2.157" r="2.157" transform="translate(-10404.917 -8318.462)" fill="#bcd1d8"/>
+    <line id="Line_3403" data-name="Line 3403" y2="2.725" transform="translate(-10402.761 -8314.146)" fill="none" stroke="#bcd1d8" stroke-width="1"/>
+    <rect id="Rectangle_24537" data-name="Rectangle 24537" width="10.786" height="4.314" rx="2.157" transform="translate(-10408.155 -8311.99)" fill="#00a1aa"/>
+    <circle id="Ellipse_1090" data-name="Ellipse 1090" cx="3.236" cy="3.236" r="3.236" transform="translate(-10417.861 -8304.439)" fill="#00a1aa"/>
+    <ellipse id="Ellipse_1092" data-name="Ellipse 1092" cx="2.696" cy="3.236" rx="2.696" ry="3.236" transform="translate(-10393.053 -8304.439)" fill="#00a1aa"/>
+    <circle id="Ellipse_1091" data-name="Ellipse 1091" cx="3.236" cy="3.236" r="3.236" transform="translate(-10397.368 -8304.439)" fill="#00a1aa"/>
+    <rect id="Rectangle_24536" data-name="Rectangle 24536" width="23.729" height="21.572" rx="3" transform="translate(-10414.626 -8309.834)" fill="#02c0b7"/>
+    <rect id="Rectangle_24476" data-name="Rectangle 24476" width="15.1" height="6.472" rx="3" transform="translate(-10410.311 -8304.439)" fill="#324459"/>
+    <line id="Line_3401" data-name="Line 3401" x2="2.725" transform="translate(-10407.915 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <line id="Line_3402" data-name="Line 3402" x2="2.725" transform="translate(-10399.874 -8300.908)" fill="none" stroke="#fff" stroke-width="2"/>
+    <path id="Path_15024" data-name="Path 15024" d="M-112.806,1761.029a2.874,2.874,0,0,0,2.876,2.446,2.924,2.924,0,0,0,2.871-2.446" transform="translate(-10292.654 -10055.396)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1"/>
   </g>
 </svg>
+
+

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

@@ -399,8 +399,8 @@
       }
     },
     "details": "Provide details about your home’s",
-    "homeMonitor": "Home Monitor",
-    "homeMonitoring": "Homefile is monitoring your home.",
+    "homeMonitor": "Homie",
+    "homeMonitoring": "Homie is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",
@@ -418,10 +418,11 @@
       "smoke": "Smoke & CO2 detectors",
       "structure": "Structure"
     },
-    "title": "Home Assistant - Set Up",
+    "title": "Set Up Homie",
     "tutorialButton": "Start Quick Setup",
-    "tutorialDescription": "Our Home assistant helps you manage every aspect of your home. We’ve added a short overview to help you learn more about it.",
-    "tutorialTitle": "Let’s quickly configure your AI Home Assistant."
+    "tutorialDescription": "Homie helps you manage every aspect of your home. We've added a short overview to help you learn more about it.",
+    "tutorialTitle": "Let’s quickly set up Homie, your friendly AI home assistant.",
+    "tutorialNote": "Just a few set-up questions to help Homie get going."
   },
   "homeBoard": {
     "addRecords": "Add Property Records",
@@ -603,7 +604,7 @@
   "newPassword": {
     "confirm": "Confirm Password",
     "create": "Create Password",
-    "title": "Enter your password below."
+    "title": "Please enter your new password."
   },
   "partner": {
     "aphw": {
@@ -743,7 +744,7 @@
       "title": "Property Taxes"
     },
     "trending": {
-      "addMortgage": "Add Mortgage Info",
+      "addMortgage": "Mortgage Info",
       "estimated": "Estimated Market Value",
       "mortgage": "Mortgage Balance*",
       "public": "*Estimated from Public Data",

package/src/components/contacts/ContactsContent.tsx

@@ -96,7 +96,7 @@ export const ContactsContent = ({
           pt="base"
           pb="120px"
           pr="base"
-          bg="lightBlue.5"
+          bg="lightBlue.2"
           minHeight="full"
         >
           <Flex gap="3" pl="base">

package/src/components/homeAssistant/HomeAssistantTutorial.tsx

@@ -48,6 +48,9 @@ export const HomeAssistantTutorial = ({
           </Flex>
         </Button>
       </Stack>
+      <Text fontFamily="secondary" textAlign="center">
+        {t('homeAssistant.tutorialNote')}
+      </Text>
       {url && (
         <VideoPlayerModal
           url={url}

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -48,7 +48,6 @@ export const HomeAssistantWrapper = ({
             h="80px"
             top="80px"
             animation={`${moveRightToLeftWithFade} 400s linear infinite`}
-            zIndex="1"
           />
           <Image
             src={Cloud2}
@@ -57,7 +56,6 @@ export const HomeAssistantWrapper = ({
             h="112px"
             top="150px"
             animation={`${moveRightToLeft} 200s linear infinite`}
-            zIndex="1"
           />
           <Image
             src={Cloud3}
@@ -66,7 +64,6 @@ export const HomeAssistantWrapper = ({
             h="160px"
             top="200px"
             animation={`${moveRightToLeft} 130s linear infinite`}
-            zIndex="1"
           />
           {showAirplane && (
             <Image
@@ -76,7 +73,6 @@ export const HomeAssistantWrapper = ({
               h="40px"
               top="85px"
               animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
-              zIndex="1"
             />
           )}
           <Image
@@ -87,7 +83,6 @@ export const HomeAssistantWrapper = ({
             right="2"
             w="auto"
             h="70px"
-            zIndex="1"
           />
         </Box>
       </TileTooltip>

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,24 +1,18 @@
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { HomeMonitorButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
-import { IconMenu, MoreHorizontal } from '@/components'
 
 export const HomeMonitorButton = ({
   currentStep,
-  menuItems,
   onStepClick,
   status = 'ok',
   step,
 }: HomeMonitorButtonI) => {
+  const buttonId = `homeMonitorButton-${currentStep}`
   const iconAltText = getIconAltText(step.icon)
-  const handleClick = () => {
-    if (status !== 'ok') onStepClick(currentStep)
-  }
-
-  const isDisabled = Number(menuItems.length) === 0
 
   return (
-    <Box position="relative">
+    <Box position="relative" id={buttonId}>
       <Box
         position="relative"
         bg="neutral.white"
@@ -47,7 +41,7 @@ export const HomeMonitorButton = ({
           h="96px"
           py="base"
           {...setStyles(status)}
-          onClick={handleClick}
+          onClick={() => onStepClick(currentStep)}
         >
           <Center h="60%" marginTop="2">
             <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
@@ -64,14 +58,6 @@ export const HomeMonitorButton = ({
           </Center>
         </Stack>
       </Box>
-      <Box position="absolute" top="-2px" right="4px" zIndex="4">
-        <IconMenu
-          icon={<MoreHorizontal size={26} />}
-          itemForm={currentStep}
-          menuItems={menuItems}
-          disabled={isDisabled}
-        />
-      </Box>
     </Box>
   )
 }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -1,24 +1,54 @@
 import { Box, Flex } from '@chakra-ui/react'
 import { HomeMonitortStepsI } from '@/interfaces'
-import { HomeMonitorButton } from '@/components'
+import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
+import { useComponentStyles } from '@/hooks'
+import { useState } from 'react'
 
 export const HomeMonitorSteps = ({
-  menuItems,
+  menuItems = [],
   onStepClick,
   stepsWithAlerts,
 }: HomeMonitortStepsI) => {
+  const ids = [
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+    'menuItems',
+  ]
+  const [selectedId, setSelectedId] = useState<string>('')
+  const isDisabled = menuItems.length === 0
+
+  useComponentStyles({ ids, selectedId, zIndex: '2' })
+  const handleStepClick = (step: number) => {
+    onStepClick(step)
+    setSelectedId(`homeMonitorButton-${step}`)
+  }
   return (
     <Flex gap="base">
       {homeAssistantSteps.map((step, index) => (
-        <Box key={step.title} flex="auto">
-          <HomeMonitorButton
-            currentStep={index + 1}
-            menuItems={menuItems}
-            onStepClick={onStepClick}
-            status={getStatus(index + 1, stepsWithAlerts)}
-            step={step}
-          />
+        <Box key={step?.title} position="relative">
+          <Box flex="auto">
+            <HomeMonitorButton
+              currentStep={index + 1}
+              onStepClick={handleStepClick}
+              status={getStatus(index + 1, stepsWithAlerts)}
+              step={step}
+            />
+            <Box position="absolute" top="-2px" right="4px" zIndex="1400">
+              <IconMenu
+                zIndex="2"
+                icon={<MoreHorizontal size={26} />}
+                itemForm={index + 1}
+                menuItems={menuItems}
+                disabled={isDisabled}
+                onClick={() => setSelectedId('menuItems')}
+              />
+            </Box>
+          </Box>
         </Box>
       ))}
     </Flex>

package/src/components/homeAssistant/panel/ApplianceSteps.tsx

@@ -14,13 +14,18 @@ import {
   Microwave,
   Range,
 } from '@/assets/images'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 export const ApplianceSteps = ({
   addedAppliances = [],
   onClick,
 }: ApplianceStepsI) => {
   const [appliances, setAppliances] = useState<string[]>(addedAppliances)
+  
+  useEffect(() => {
+    setAppliances(addedAppliances)
+  }, [addedAppliances])
+
   const handleClick = (id: string) => {
     if (appliances.includes(id)) {
       const newAppliances = appliances.filter((appliance) => appliance !== id)
@@ -31,6 +36,7 @@ export const ApplianceSteps = ({
     setAppliances([...appliances, id])
     onClick([...appliances, id])
   }
+
   return (
     <Stack spacing="base" bg="lightBlue.2" p="base">
       <Text fontFamily="secondary" fontSize="sm">

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useState, useEffect } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
@@ -17,7 +17,7 @@ import {
   HomeAssistantPanelStep,
   PanelHeader,
 } from '@/components'
-import { HomeAssistantPanelI } from '@/interfaces'
+import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
 import { useSimpleDynamicForm } from '@/hooks'
 
@@ -33,9 +33,22 @@ export const HomeAssistantPanel = ({
   backDisabled,
   nextDisabled,
 }: PropsWithChildren<HomeAssistantPanelI>) => {
+  const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>([])
   const { title } = homeAssistantSteps[currentStep - 1]
   const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`
   const isAppliances = currentStep === 4
+
+  useEffect(() => {
+    if (isAppliances) {
+      const targetAppliances = currentForm.find(
+        (field) =>
+          field.name?.toLocaleLowerCase() === 'appliances list' &&
+          field.type === 'hidden'
+      )?.value as AppliancesType[]
+      updateAddedAppliances(targetAppliances)
+    }
+  }, [currentForm, isAppliances])
+
   const { form, updatedFields } = useSimpleDynamicForm({
     fields: currentForm,
   })
@@ -52,7 +65,12 @@ export const HomeAssistantPanel = ({
       <DrawerBody p="0">
         <HomeAssistantPanelStep currentStep={currentStep} />
         {children}
-        {isAppliances && <ApplianceSteps onClick={onApplianceClick} />}
+        {isAppliances && (
+          <ApplianceSteps
+            onClick={onApplianceClick}
+            addedAppliances={addedAppliances}
+          />
+        )}
         <Stack spacing="base" p="base">
           <Text fontFamily="secondary" fontSize="sm">
             {text}

package/src/components/homeBoard/HomeBoard.tsx

@@ -51,6 +51,10 @@ import {
   EditHomeFooter,
   HomeAssistant,
   HomeAssistantPanel,
+  HomeMonitor,
+  HomefileMonitoring,
+  Notifications,
+  HomeMonitorSteps,
 } from '@/components'
 import {
   HomeCards,
@@ -329,6 +333,20 @@ export const HomeBoard = () => {
                 taxes={taxesMock}
                 title="Travis County Property Taxes"
               />
+              <HomeMonitor>
+                <Stack spacing="base">
+                  <Flex gap="base">
+                    <HomefileMonitoring />
+                    <Notifications date="10-10-24" local="TX - Houston" />
+                  </Flex>
+                  <HomeMonitorSteps
+                    menuItems={menuMock}
+                    stepsWithAlerts={[]}
+                    onStepClick={handleHomeAssistantClick}
+                  />
+                </Stack>
+              </HomeMonitor>
+
               <Stack spacing="base">
                 <ReceiptAutofiler
                   onClick={() => null}

package/src/components/inputs/SelectButton.tsx

@@ -64,7 +64,9 @@ export const SelectButton = ({
     >
       <Flex align="center" gap="4" justify="space-between">
         <Text {...textVariants[variant]}>{selectedValue}</Text>
-        <ChevronDown {...iconVariants[variant]} />
+        <Flex flexShrink={0}>
+          <ChevronDown {...iconVariants[variant]} />
+        </Flex>
       </Flex>
     </MenuButton>
   )

package/src/components/launchpad/IconMenu.tsx

@@ -13,8 +13,10 @@ export const IconMenu = <T extends unknown>({
   icon,
   itemForm,
   menuItems,
+  onClick,
   variant = 'menuIcon',
   width = 'fit-content',
+  zIndex,
 }: IconMenuI<T>) => {
   return (
     <Menu isLazy>
@@ -24,7 +26,7 @@ export const IconMenu = <T extends unknown>({
             bg="overlay"
             showOverlay={isOpen}
             position="fixed"
-            zIndex="4"
+            zIndex={zIndex}
           />
           <MenuButton
             as={IconButton}
@@ -34,6 +36,7 @@ export const IconMenu = <T extends unknown>({
             w={width}
             disabled={disabled}
             marginTop="0 !important"
+            onClick={onClick}
           />
           <MenuList zIndex="5">
             {menuItems?.map(({ handleClick, label }) => (

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -8,6 +8,7 @@ type KindTypes =
   | 'file'
   | 'grid'
   | 'group'
+  | 'hidden'
   | 'number'
   | 'radio'
   | 'rating'

package/src/interfaces/homeAssistant/ApplianceSteps.interface.ts

@@ -3,7 +3,7 @@ export interface ApplianceStepsI {
   onClick: (selectedSteps: string[]) => void
 }
 
-type AppliancesType =
+export type AppliancesType =
   | 'fridge'
   | 'freezer'
   | 'washer'

package/src/interfaces/homeAssistant/HomeMonitorSteps.interface.ts

@@ -8,7 +8,6 @@ export interface HomeMonitortStepsI {
 
 export interface HomeMonitorButtonI {
   currentStep: number
-  menuItems: HomeMonitortStepsI['menuItems']
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'
   step: HomeAssistantStepI

package/src/interfaces/launchpad/IconMenu.interface.ts

@@ -8,6 +8,8 @@ export interface IconMenuI<T> {
   icon?: JSX.Element
   itemForm?: T
   menuItems?: MenuItemI[]
+  onClick?: () => void
   variant?: string
   width?: string
+  zIndex?: string
 }

package/src/mocks/homeAssistant/homeAssistantForms.ts

@@ -164,6 +164,12 @@ export const homeAssitantStep3FormMock: ReportI[] = [
 ]
 
 export const homeAssitantStep4FormMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Appliances List',
+    value: ['fridge', 'dish-washer', 'hood', 'oven'],
+    type: 'hidden',
+  },
   {
     id: faker.database.mongodbObjectId(),
     name: 'Heater',