@homefile/components-v2 1.6.0 → 2.0.0

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

@@ -400,6 +400,7 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Home Monitor",
+    "homeMonitoring": "Homefile is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

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

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare const moveLeftToRightAirplane: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeft: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade2: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade3: import("@emotion/serialize").Keyframes;
+export declare const moveLeftToRightAirplane: import("@emotion/react").Keyframes;
+export declare const moveRightToLeft: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade2: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade3: import("@emotion/react").Keyframes;
 export declare const CloudsAnimation: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/CloudsAnimation.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Airplane, Cloud1, Cloud2, Cloud3, TreesCrop, TreesCrop2, } from '../../assets/images';
 import { useWindowDimensions } from '../../hooks';
 import { colors } from '../../theme/colors';
-import { Box, keyframes, Image } from '@chakra-ui/react';
+import { Box, Image } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { Fragment } from 'react';
 export const moveLeftToRightAirplane = keyframes `
     0% {

package/dist/components/animations/HomieAnimation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRive } from '@rive-app/react-canvas';
-const url = process.env.REACT_APP_RIVE_ASSETS;
+const url = import.meta.env.VITE_RIVE_ASSETS;
 export const HomieAnimation = () => {
     const { RiveComponent } = useRive({
         src: `${url}/homie-v2.riv`,

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

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

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,14 +1,15 @@
 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';
-export const HomeMonitorButton = ({ currentStep, onStepClick, status, step, }) => {
+import { IconMenu, MoreHorizontal } from '..';
+export const HomeMonitorButton = ({ currentStep, menuItems, onStepClick, status = 'ok', step, }) => {
     const iconAltText = getIconAltText(step.icon);
     const handleClick = () => {
-        console.log({ status });
         if (status !== 'ok')
             onStepClick(currentStep);
     };
-    return (_jsx(Box, { children: _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base", bg: "neutral.white" }, setStyles(status), { onClick: handleClick, children: [_jsx(Center, { h: "60%", 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 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 }) })] }));
 };
 const setStyles = (status) => {
     switch (status) {
@@ -24,7 +25,6 @@ const setStyles = (status) => {
             };
         case 'ok':
             return {
-                cursor: 'not-allowed',
                 filter: 'grayscale(1) opacity(0.6)',
             };
     }

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

@@ -1,2 +1,2 @@
 import { HomeMonitortStepsI } from '../../interfaces';
-export declare const HomeMonitorSteps: ({ onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorSteps: ({ menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton } from '..';
 import { homeAssistantSteps } from '../../helpers';
-export const HomeMonitorSteps = ({ onStepClick, stepsWithAlerts, }) => {
-    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { flex: "auto", children: _jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }) }, step.title))) }));
+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))) }));
 };
 const getStatus = (index, stepsWithAlerts) => {
     const hasAlert = stepsWithAlerts.includes(index);

package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.d.ts

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { HomieAnimation } from '../..';
+export const HomefileMonitoring = () => {
+    return (_jsx(Box, { p: "base", borderRadius: "lg", bg: "#C5E9F4", h: "66px", zIndex: "2", flex: "1", children: _jsxs(Flex, { align: "center", children: [_jsx(Box, { boxSize: "47px", children: _jsx(HomieAnimation, {}) }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }));
+};

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

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

package/dist/components/homeAssistant/monitorAlerts/index.d.ts

@@ -3,5 +3,6 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

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

@@ -3,5 +3,6 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/components/homeBoard/ConfirmHomeAddress.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
-import { Box, Container, Stack, Center, Flex, Button, Text, keyframes, } from '@chakra-ui/react';
+import { Box, Container, Stack, Center, Flex, Button, Text, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { AddressStored, SectionHeader, RadioButton, IncludePublicRecords, WrapperWithShadow, } from '..';
 import { HomeAddress, MagnifyingGlassReport } from '../../assets/images';
 import { confirmAddressProxy } from '../../proxies';

package/dist/components/icons/DisplayGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { colors } from '../../theme/colors';
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 export const DisplayGrid = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.5 19.5", children: _jsxs("g", { fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", "data-name": "Group 14495", children: [_jsx("path", { d: "M.75.75h7.321v7.321H.75Z", "data-name": "Path 10064" }), _jsx("path", { d: "M11.429.75h7.321v7.321h-7.321Z", "data-name": "Path 10065" }), _jsx("path", { d: "M11.429 11.428h7.321v7.321h-7.321Z", "data-name": "Path 10066" }), _jsx("path", { d: "M.75 11.428h7.321v7.321H.75Z", "data-name": "Path 10067" })] }) }) }));
 };

package/dist/components/icons/DisplayItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const DisplayItem = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.79 17.374", children: _jsxs("g", { stroke: stroke, "data-name": "Group 14548", children: [_jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M.75.75h18.29v11.438H.75Z", "data-name": "Path 10082" }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16845", children: [_jsx("path", { stroke: "none", d: "M.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M1.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16846", children: [_jsx("path", { stroke: "none", d: "M5.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M6.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16847", children: [_jsx("path", { stroke: "none", d: "M10.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M11.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16848", children: [_jsx("path", { stroke: "none", d: "M15.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M16.333 14.874h2v2h-2z" })] })] }) }) }));

package/dist/components/icons/DisplayList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const DisplayList = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 14", children: _jsxs("g", { fill: stroke, "data-name": "Group 14455", children: [_jsx("path", { d: "M5 0h13v2H5z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M5 6h13v2H5z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M5 12h13v2H5z", "data-name": "Rectangle 14124" }), _jsx("path", { d: "M0 0h3v2H0z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M0 6h3v2H0z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M0 12h3v2H0z", "data-name": "Rectangle 14124" })] }) }) }));

package/dist/components/icons/Upload.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const Upload = ({ stroke = colors.blue[6], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.878 19.878", children: _jsxs("g", { fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", "data-name": "Icon feather-upload", children: [_jsx("path", { d: "M18.878 12.919v3.973a1.986 1.986 0 0 1-1.986 1.986H2.986A1.986 1.986 0 0 1 1 16.892v-3.973", "data-name": "Path 10078" }), _jsx("path", { d: "M14.905 5.966 9.939 1 4.973 5.966", "data-name": "Path 10079" }), _jsx("path", { d: "M9.939 1v11.919", "data-name": "Path 10080" })] }) }) }));

package/dist/components/inputs/SelectInputWithBadge.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { Box, Flex, Menu, MenuButton, MenuItem, MenuList, useDimensions, } from '@chakra-ui/react';
+import { Box, Flex, Menu, MenuButton, MenuItem, MenuList, useSize, } from '@chakra-ui/react';
 import { ChevronDown, SelectTextDisplay } from '..';
 export const SelectInputWithBadge = ({ handleClick, height = 'md', initialValue, isDisabled, items, width = '10rem', displaySelectedValue = false, }) => {
     const [selectedValue, setSelectedValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : 'All');
     const isLargeWidth = width < '100px';
     const elementRef = useRef(null);
-    const dimensions = useDimensions(elementRef);
+    const dimensions = useSize(elementRef);
     return (_jsx(Menu, { children: _jsxs(Box, { w: width, ref: elementRef, children: [_jsx(MenuButton, { w: "full", disabled: isDisabled, bg: "neutral.white", h: `input.${height}`, px: "2", border: "1px", borderRadius: "sm", borderColor: "lightBlue.6", _hover: { borderColor: 'blue.1' }, _focus: { borderColor: 'blue.3' }, _disabled: {
                         bg: 'container.transparent',
                         color: 'gray.1',
                         pointerEvents: 'none',
                         svg: { fill: 'gray.1' },
-                    }, children: _jsxs(Flex, { align: "center", gap: "2", justify: "space-between", children: [_jsx(SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), _jsx(ChevronDown, {})] }) }), _jsx(MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.contentBox.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map((item) => {
+                    }, children: _jsxs(Flex, { align: "center", gap: "2", justify: "space-between", children: [_jsx(SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), _jsx(ChevronDown, {})] }) }), _jsx(MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map((item) => {
                         const isSelectItem = typeof item === 'object';
                         const id = isSelectItem ? item._id : item;
                         const name = isSelectItem ? item.name : item;

package/dist/components/myHomes/steps/MyHomeDetails.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
-import { Box, Container, Stack, Center, Flex, Button, Text, keyframes, } from '@chakra-ui/react';
+import { Box, Container, Stack, Center, Flex, Button, Text, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { AddressStored, FirstHomeHeader, SectionHeader, TextInput, RadioButton, IncludePublicRecords, WrapperWithShadow, } from '../..';
 import { HomeAddress, RelationshipHome, MagnifyingGlassReport, } from '../../../assets/images';
 import { firstHomeProxy } from '../../../proxies';

package/dist/components/myHomes/steps/SearchRecords.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Center, CircularProgress, Flex, Image, keyframes, Stack, } from '@chakra-ui/react';
+import { Box, Center, CircularProgress, Flex, Image, Stack, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { useSnapshot } from 'valtio';
 import { AnimatedText, MyHomesStepBody, MyHomesStepWrapper } from '../..';
 import { addressProxy } from '../../../proxies';

package/dist/components/overlay/Overlay.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, keyframes } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 export const Overlay = (_a) => {
     var { bg = '#fdfdfdca', showOverlay = true, onClick } = _a, props = __rest(_a, ["bg", "showOverlay", "onClick"]);
     if (!showOverlay)

package/dist/components/partner/adminTiles/satisfactionTile/SatisfactionProgress.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Flex, keyframes, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { Mark, SatisfactionBar } from '../../..';
 export const SatisfactionProgress = ({ satisfactionPercentage, }) => {
     const sentiments = ['great', 'good', 'ok', 'poor'];

package/dist/hooks/homeBoard/useConfirmHomeAddress.d.ts

@@ -4,22 +4,7 @@ export declare const useConfirmHomeAddress: (values: ConfirmAddressFormI | undef
     handleSelectRecords: (event: ChangeEvent<HTMLInputElement>) => void;
     handleSubmit: () => void;
     isOwner: boolean;
-    group: import("react").AriaAttributes & import("react").DOMAttributes<import("@chakra-ui/react-types").DOMElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    ownRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    rentRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    group: import("@chakra-ui/utils").DOMAttributes<import("@chakra-ui/utils").DOMElement> & import("react").RefAttributes<any>;
+    ownRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
+    rentRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
 };

package/dist/hooks/myHomes/useAddHomeContent.d.ts

@@ -8,22 +8,7 @@ export declare const useAddHouseContent: (values: HomeFormI | undefined, callbac
     handleSelectRecords: (event: ChangeEvent<HTMLInputElement>) => void;
     handleSubmit: () => void;
     isOwner: boolean;
-    group: import("react").AriaAttributes & import("react").DOMAttributes<import("@chakra-ui/react-types").DOMElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    ownRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    rentRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    group: import("@chakra-ui/utils").DOMAttributes<import("@chakra-ui/utils").DOMElement> & import("react").RefAttributes<any>;
+    ownRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
+    rentRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
 };

package/dist/hooks/myProfile/useTwoFactorSetting.d.ts

@@ -6,18 +6,8 @@ export declare const useTwoFactorSetting: ({ defaultValue, email, onChange, sms,
         sms: string | undefined;
         '2fa': boolean;
     }, any>;
-    emailRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    group: import("react").AriaAttributes & import("react").DOMAttributes<import("@chakra-ui/react-types").DOMElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    emailRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
+    group: import("@chakra-ui/utils").DOMAttributes<import("@chakra-ui/utils").DOMElement> & import("react").RefAttributes<any>;
     handleEmailValidation: (value?: string) => boolean;
     handlePhoneValidation: (value?: string) => boolean;
     handleSubmit: import("react-hook-form").UseFormHandleSubmit<{
@@ -28,10 +18,5 @@ export declare const useTwoFactorSetting: ({ defaultValue, email, onChange, sms,
     is2faEnabled: boolean;
     radioValue: string | number;
     showButtons: boolean;
-    smsRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    smsRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
 };

package/dist/hooks/partner/preview/usePartnerTilePreview.d.ts

@@ -6,9 +6,9 @@ export declare const usePartnerTilePreview: () => {
     };
     company: {
         readonly address: {
-            readonly apartmentNumber?: string;
+            readonly apartmentNumber?: string | undefined;
             readonly city: string;
-            readonly obs?: string;
+            readonly obs?: string | undefined;
             readonly state: string;
             readonly street: string;
             readonly number: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

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

@@ -1,10 +1,12 @@
-import { HomeAssistantStepI } from '..';
+import { HomeAssistantStepI, MenuItemI } from '..';
 export interface HomeMonitortStepsI {
+    menuItems: MenuItemI[];
     stepsWithAlerts: number[];
     onStepClick: (step: number) => void;
 }
 export interface HomeMonitorButtonI {
     currentStep: number;
+    menuItems: HomeMonitortStepsI['menuItems'];
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;

package/dist/interfaces/icons/CustomIcon.interface.d.ts

@@ -1,8 +1,7 @@
-import { As } from '@chakra-ui/react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ElementType } from 'react';
 export interface IconsI {
     color?: string;
     size?: number | string;
     style?: CSSProperties;
-    type: As | undefined;
+    type?: ElementType;
 }

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HomeMonitor, HomeMonitorSteps, MonitorAlerts, Notifications, } from '../../components';
+import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, Notifications, } from '../../components';
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
+import { menuMock } from '../../mocks';
 export default {
     title: 'Components/HomeAssistant',
     component: HomeMonitor,
@@ -11,15 +11,8 @@ export default {
     ],
 };
 export const HomeMonitorComponent = () => {
-    const [alertId, setAlertId] = useState('smoke-detector-battery');
     const handleAlertClick = (step) => {
-        setAlertId(stepAlerts[step]);
         action('onStepClick')(step);
     };
-    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(MonitorAlerts, { alertId: alertId }), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { stepsWithAlerts: [2, 3, 5], onStepClick: handleAlertClick })] }) }));
-};
-const stepAlerts = {
-    2: 'smoke-detector-expired',
-    3: 'change-air-filter',
-    5: 'smoke-detector-battery',
+    return (_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: handleAlertClick })] }) }));
 };

package/dist/stories/tour/Bubble.stories.d.ts

@@ -5,7 +5,7 @@ export default _default;
 export declare const BubbleComponent: {
     (args: BubbleI): import("react/jsx-runtime").JSX.Element;
     args: {
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
         steps: {
             homeboard: {
                 topRef: number;

package/dist/stories/tour/HomeBoardTour.stories.d.ts

@@ -6,6 +6,6 @@ export declare const HomeBoardTourComponent: {
     (args: TourI): import("react/jsx-runtime").JSX.Element;
     args: {
         isActive: boolean;
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };

package/dist/stories/tour/LaunchpadTour.stories.d.ts

@@ -6,6 +6,6 @@ export declare const LaunchpadTourComponent: {
     (args: TourI): import("react/jsx-runtime").JSX.Element;
     args: {
         isActive: boolean;
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -22,66 +22,67 @@
     "src"
   ],
   "devDependencies": {
-    "@chakra-ui/storybook-addon": "^5.1.0",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@faker-js/faker": "^8.1.0",
-    "@storybook/addon-a11y": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-onboarding": "^8.2.4",
-    "@storybook/addon-viewport": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/builder-vite": "^8.2.4",
+    "@chakra-ui/storybook-addon": "^5.2.5",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@faker-js/faker": "^9.0.3",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/addon-viewport": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/builder-vite": "^8.3.5",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
-    "@storybook/test": "^8.2.4",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "axe-playwright": "^2.0.1",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@types/node": "^22.7.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "axe-playwright": "^2.0.3",
     "copyfiles": "^2.4.1",
     "git-commit-msg-linter": "^5.0.4",
-    "husky": "^9.1.0",
+    "husky": "^9.1.6",
     "jest": "^29.7.0",
     "json-loader": "^0.5.7",
-    "rimraf": "^5.0.1",
-    "semantic-release": "^24.0.0",
-    "storybook": "^8.2.4",
-    "storybook-react-i18next": "^3.1.1",
+    "rimraf": "^6.0.1",
+    "semantic-release": "^24.1.2",
+    "storybook": "^8.3.5",
+    "storybook-react-i18next": "^3.1.7",
     "tsconfig-replace-paths": "^0.0.14",
     "tscpaths": "^0.0.9",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/assistant": "^5.0.18",
-    "@fontsource/poppins": "^5.0.14",
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.3",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/assistant": "^5.1.0",
+    "@fontsource/poppins": "^5.1.0",
     "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "@hookform/resolvers": "^3.3.1",
     "@rive-app/react-canvas": "^4.14.5",
-    "axios": "^1.7.2",
-    "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.6",
-    "i18next": "^23.12.1",
+    "axios": "^1.7.7",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.11.9",
+    "i18next": "^23.16.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.2.2",
+    "i18next-http-backend": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.46.2",
-    "react-i18next": "^15.0.0",
-    "react-icons": "^5.2.1",
+    "react-dropzone": "^14.2.9",
+    "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.0.3",
+    "react-icons": "^5.3.0",
     "react-modern-calendar-datepicker": "^3.1.6",
     "react-quill": "^2.0.0",
     "react-spinners": "^0.14.1",
-    "recharts": "^2.10.1",
-    "valtio": "^1.11.2",
+    "recharts": "^2.13.0",
+    "valtio": "^2.1.0",
     "yup": "^1.2.0"
   },
   "scripts": {

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

@@ -400,6 +400,7 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Home Monitor",
+    "homeMonitoring": "Homefile is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

package/src/components/animations/CloudsAnimation.tsx

@@ -8,7 +8,8 @@ import {
 } from '@/assets/images'
 import { useWindowDimensions } from '@/hooks'
 import { colors } from '@/theme/colors'
-import { Box, keyframes, Image } from '@chakra-ui/react'
+import { Box, Image } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { Fragment, PropsWithChildren } from 'react'
 
 export const moveLeftToRightAirplane = keyframes`

package/src/components/animations/HomieAnimation.tsx

@@ -1,5 +1,5 @@
 import { useRive } from '@rive-app/react-canvas'
-const url = process.env.REACT_APP_RIVE_ASSETS
+const url = import.meta.env.VITE_RIVE_ASSETS
 
 export const HomieAnimation = () => {
   const { RiveComponent } = useRive({

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,49 +1,77 @@
 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,
+  status = 'ok',
   step,
 }: HomeMonitorButtonI) => {
   const iconAltText = getIconAltText(step.icon)
   const handleClick = () => {
-    console.log({ status })
     if (status !== 'ok') onStepClick(currentStep)
   }
 
+  const isDisabled = Number(menuItems.length) === 0
+
   return (
-    <Box>
-      <Stack
-        as="button"
-        spacing="2"
+    <Box position="relative">
+      <Box
+        position="relative"
+        bg="neutral.white"
         borderRadius="lg"
         boxShadow="lg"
-        border="1px solid transparent"
-        w="90px"
-        align="center"
-        h="96px"
-        py="base"
-        bg="neutral.white"
-        {...setStyles(status)}
-        onClick={handleClick}
+        zIndex="2"
       >
-        <Center h="60%">
-          <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
-        </Center>
-        <Center h="40%">
-          <Text
-            fontSize="xs"
-            textTransform="uppercase"
-            textAlign="center"
-            lineHeight="14px"
-          >
-            {step.title}
-          </Text>
-        </Center>
-      </Stack>
+        <Box
+          bg={status === 'alert' ? 'error.2' : 'green.1'}
+          boxSize="10px"
+          borderRadius="full"
+          position="absolute"
+          top="6px"
+          left="6px"
+          zIndex="8"
+        />
+
+        <Stack
+          position="relative"
+          zIndex="2"
+          as="button"
+          spacing="2"
+          border="1px solid transparent"
+          w="90px"
+          align="center"
+          h="96px"
+          py="base"
+          {...setStyles(status)}
+          onClick={handleClick}
+        >
+          <Center h="60%" marginTop="2">
+            <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+          </Center>
+          <Center h="40%">
+            <Text
+              fontSize="xs"
+              textTransform="uppercase"
+              textAlign="center"
+              lineHeight="14px"
+            >
+              {step.title}
+            </Text>
+          </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>
   )
 }
@@ -62,7 +90,6 @@ const setStyles = (status: HomeMonitorButtonI['status']) => {
       }
     case 'ok':
       return {
-        cursor: 'not-allowed',
         filter: 'grayscale(1) opacity(0.6)',
       }
   }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -4,6 +4,7 @@ import { HomeMonitorButton } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 
 export const HomeMonitorSteps = ({
+  menuItems,
   onStepClick,
   stepsWithAlerts,
 }: HomeMonitortStepsI) => {
@@ -13,6 +14,7 @@ export const HomeMonitorSteps = ({
         <Box key={step.title} flex="auto">
           <HomeMonitorButton
             currentStep={index + 1}
+            menuItems={menuItems}
             onStepClick={onStepClick}
             status={getStatus(index + 1, stepsWithAlerts)}
             step={step}

package/src/components/homeAssistant/monitorAlerts/HomefileMonitoring.tsx

@@ -0,0 +1,16 @@
+import { t } from 'i18next'
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { HomieAnimation } from '@/components'
+
+export const HomefileMonitoring = () => {
+  return (
+    <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
+      <Flex align="center">
+        <Box boxSize="47px">
+          <HomieAnimation />
+        </Box>
+        <Text>{t('homeAssistant.homeMonitoring')}</Text>
+      </Flex>
+    </Box>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/Notifications.tsx

@@ -10,7 +10,7 @@ export const Notifications = ({ date = '', local = '' }) => {
       </Flex>
       <Center
         w="188px"
-        h="full"
+        h="243px"
         border="1px dashed"
         borderColor="blue.1"
         borderRadius="sm"

package/src/components/homeAssistant/monitorAlerts/index.ts

@@ -3,5 +3,6 @@ export * from './AlertHeader'
 export * from './AlertTemplate'
 export * from './AlertTitle'
 export * from './BaseAlertCard'
+export * from './HomefileMonitoring'
 export * from './MonitorAlerts'
 export * from './Notifications'

package/src/components/homeBoard/ConfirmHomeAddress.tsx

@@ -8,8 +8,8 @@ import {
   Flex,
   Button,
   Text,
-  keyframes,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import {
   AddressStored,
   SectionHeader,

package/src/components/icons/DisplayGrid.tsx

@@ -1,5 +1,5 @@
 import { colors } from '@/theme/colors'
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 
 export const DisplayGrid = ({
   stroke = colors.blue[3],

package/src/components/icons/DisplayItem.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const DisplayItem = ({

package/src/components/icons/DisplayList.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const DisplayList = ({

package/src/components/icons/Upload.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const Upload = ({

package/src/components/inputs/SelectInputWithBadge.tsx

@@ -6,7 +6,7 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  useDimensions,
+  useSize,
 } from '@chakra-ui/react'
 import { ChevronDown, SelectTextDisplay } from '@/components'
 import { SelectI } from '@/interfaces'
@@ -20,10 +20,12 @@ export const SelectInputWithBadge = ({
   width = '10rem',
   displaySelectedValue = false,
 }: SelectI) => {
-  const [selectedValue, setSelectedValue] = useState<string>(initialValue ?? 'All')
+  const [selectedValue, setSelectedValue] = useState<string>(
+    initialValue ?? 'All'
+  )
   const isLargeWidth = width < '100px'
   const elementRef = useRef<HTMLDivElement>(null)
-  const dimensions = useDimensions(elementRef)
+  const dimensions = useSize(elementRef)
 
   return (
     <Menu>
@@ -59,7 +61,7 @@ export const SelectInputWithBadge = ({
           minH="fit-content"
           maxH="30rem"
           overflow="scroll"
-          w={isLargeWidth ? dimensions?.contentBox.width : 'fit-content'}
+          w={isLargeWidth ? dimensions?.width : 'fit-content'}
         >
           {items?.map((item) => {
             const isSelectItem = typeof item === 'object'

package/src/components/myHomes/steps/MyHomeDetails.tsx

@@ -8,8 +8,8 @@ import {
   Flex,
   Button,
   Text,
-  keyframes,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import {
   AddressStored,
   FirstHomeHeader,

package/src/components/myHomes/steps/SearchRecords.tsx

@@ -5,9 +5,9 @@ import {
   CircularProgress,
   Flex,
   Image,
-  keyframes,
   Stack,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { useSnapshot } from 'valtio'
 import { AnimatedText, MyHomesStepBody, MyHomesStepWrapper } from '@/components'
 import { addressProxy } from '@/proxies'

package/src/components/overlay/Overlay.tsx

@@ -1,4 +1,5 @@
-import { Box, keyframes } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { OverlayI } from '@/interfaces'
 
 export const Overlay = ({

package/src/components/partner/adminTiles/satisfactionTile/SatisfactionProgress.tsx

@@ -1,5 +1,6 @@
 import { t } from 'i18next'
-import { Box, Flex, keyframes, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { Mark, SatisfactionBar } from '@/components'
 import { SatisfactionProgressI, SatisfactionTypes } from '@/interfaces'
 

package/src/index.ts

@@ -71,6 +71,7 @@ export {
   HomeBoardTour,
   HomeCard,
   HomeCardWithRecipent,
+  HomefileMonitoring,
   HomeHeader,
   HomeMonitor,
   HomeMonitorSteps,

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

@@ -1,12 +1,14 @@
-import { HomeAssistantStepI } from '@/interfaces'
+import { HomeAssistantStepI, MenuItemI } from '@/interfaces'
 
 export interface HomeMonitortStepsI {
+  menuItems: MenuItemI[]
   stepsWithAlerts: number[]
   onStepClick: (step: number) => void
 }
 
 export interface HomeMonitorButtonI {
   currentStep: number
+  menuItems: HomeMonitortStepsI['menuItems']
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'
   step: HomeAssistantStepI

package/src/interfaces/icons/CustomIcon.interface.ts

@@ -1,9 +1,8 @@
-import { As } from '@chakra-ui/react'
-import { CSSProperties } from 'react'
+import { CSSProperties, ElementType } from 'react'
 
 export interface IconsI {
   color?: string
   size?: number | string
   style?: CSSProperties
-  type: As | undefined
+  type?: ElementType
 }

package/src/stories/homeAssistant/HomeMonitor.stories.tsx

@@ -1,14 +1,13 @@
 import { Meta } from '@storybook/react'
 import {
+  HomefileMonitoring,
   HomeMonitor,
   HomeMonitorSteps,
-  MonitorAlerts,
   Notifications,
 } from '@/components'
 import { Box, Flex, Stack } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
-import { MonitorAlertsType } from '@/interfaces'
-import { useState } from 'react'
+import { menuMock } from '@/mocks'
 
 export default {
   title: 'Components/HomeAssistant',
@@ -23,32 +22,22 @@ export default {
 } as Meta
 
 export const HomeMonitorComponent = () => {
-  const [alertId, setAlertId] = useState<MonitorAlertsType>(
-    'smoke-detector-battery'
-  )
-
   const handleAlertClick = (step: number) => {
-    setAlertId(stepAlerts[step])
     action('onStepClick')(step)
   }
   return (
     <HomeMonitor>
       <Stack spacing="base">
         <Flex gap="base">
-          <MonitorAlerts alertId={alertId} />
+          <HomefileMonitoring />
           <Notifications date="10-10-24" local="TX - Houston" />
         </Flex>
         <HomeMonitorSteps
-          stepsWithAlerts={[2, 3, 5]}
+          menuItems={menuMock}
+          stepsWithAlerts={[]}
           onStepClick={handleAlertClick}
         />
       </Stack>
     </HomeMonitor>
   )
 }
-
-const stepAlerts: Record<number, MonitorAlertsType> = {
-  2: 'smoke-detector-expired',
-  3: 'change-air-filter',
-  5: 'smoke-detector-battery',
-}