@homefile/components-v2 2.14.29 → 2.14.31

package/dist/components/appBar/TourButton.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { Flag } from '../../assets/images';
+import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const TourButton = ({ label, onClick }) => {
-    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
+    const { setHighlight } = homeAssistantProxy;
+    useComponentStyles({});
+    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: () => {
+            setHighlight(true);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
 };

package/dist/components/forms/dynamicForm/fields/SingleImage.d.ts

@@ -1,2 +1,2 @@
-import { FileFieldI } from '../../../../interfaces';
-export declare const SingleImage: ({ onRemove, onUpload, uploading, value, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;
+import { SingleImageI } from '../../../../interfaces';
+export declare const SingleImage: ({ onRemove, onUpload, uploading, value, }: SingleImageI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/SingleImage.js

@@ -2,15 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AspectRatio, Box, Flex, IconButton, Image } from '@chakra-ui/react';
 import { colors } from '../../../../theme/colors';
 import { Close, MobileFileUploader } from '../../..';
-import { handleMapFile } from '../../../../utils';
 export const SingleImage = ({ onRemove, onUpload, uploading = false, value, }) => {
     const handleInputChange = (event) => {
         var _a;
         const fileList = (_a = event.target.files) !== null && _a !== void 0 ? _a : [];
         const files = Array.from(fileList);
         if (files.length > 0) {
-            const selectedFiles = handleMapFile({ files });
-            onUpload === null || onUpload === void 0 ? void 0 : onUpload(selectedFiles);
+            onUpload === null || onUpload === void 0 ? void 0 : onUpload(files);
         }
     };
     return (_jsxs(Flex, { gap: "2", align: "center", h: "input.md", children: [_jsx(MobileFileUploader, { handleInputChange: handleInputChange, "aria-label": "upload image", minW: "72px" }), value && (_jsxs(Box, { position: "relative", minW: "30px", children: [_jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(value), icon: _jsx(Close, { size: 11, stroke: colors.error['2'] }), disabled: uploading, position: "absolute", bg: "neutral.white", p: "0.5", borderRadius: "full", top: "-2", right: "-2", zIndex: "1" }), _jsx(AspectRatio, { maxW: "100%", ratio: 1, children: _jsx(Image, { src: value, objectFit: "cover", alt: "image" }) })] }))] }));

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -2,21 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, SimpleGrid, Stack } from '@chakra-ui/react';
 import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
-    const stepId = `homeAssistantButton-${currentPanel}`;
-    const componentIds = currentPanel
-        ? [
-            'homeAssistantButton-1',
-            'homeAssistantButton-2',
-            'homeAssistantButton-3',
-            'homeAssistantButton-4',
-            'homeAssistantButton-5',
-            'homeAssistantButton-6',
-        ]
-        : [];
-    useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' });
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
+    const { setSelectedId } = homeAssistantProxy;
+    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: (step) => {
+                            onStepClick(step);
+                            setSelectedId(`homeAssistantButton-${index + 1}`);
+                        }, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -1,21 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useComponentStyles } from '../../hooks';
-import { Fragment, useState } from 'react';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
-    const ids = [
-        'homeMonitorButton-1',
-        'homeMonitorButton-2',
-        'homeMonitorButton-3',
-        'homeMonitorButton-4',
-        'homeMonitorButton-5',
-        'homeMonitorButton-6',
-    ];
-    const [selectedId, setSelectedId] = useState('');
+    const { setSelectedId } = homeAssistantProxy;
     const isDisabled = menuItems.length === 0;
-    useComponentStyles({ ids, selectedId, zIndex: '2' });
     const handleStepClick = (step) => onStepClick(step);
     return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { 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(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
 };

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '../../../interfaces';
-export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,17 +4,20 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '../../../assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading } from '../..';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, } from '../..';
 import { homeAssistantSteps } from '../../../helpers';
 import { useSimpleDynamicForm } from '../../../hooks';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }) => {
+import { homeAssistantProxy } from '../../../proxies';
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
     var _a, _b;
     const [addedAppliances, updateAddedAppliances] = useState([]);
-    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : "";
+    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
     const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`;
     const isAppliances = currentStep === 4;
+    const { setHighlight } = homeAssistantProxy;
     useEffect(() => {
         var _a;
+        setHighlight(true);
         if (isAppliances) {
             const targetAppliances = (_a = currentForm.find((field) => {
                 var _a;
@@ -23,25 +26,36 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
             })) === null || _a === void 0 ? void 0 : _a.value;
             updateAddedAppliances(targetAppliances);
         }
+        return () => {
+            setHighlight(false);
+        };
     }, [currentForm, isAppliances]);
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
+    const handleClose = () => {
+        onClose();
+        setHighlight(false);
+    };
     if (isLoading)
         return _jsx(Loading, {});
-    return (_jsxs(_Fragment, { 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: {
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, 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,
                         isDisabled: backDisabled,
                     }, button2: {
                         buttonStyle: 'primaryFooter',
-                        label: !hasCompleted && currentStep === 6 ? t('buttons.finish') : t('buttons.saveStep'),
+                        label: !hasCompleted && currentStep === 6
+                            ? t('buttons.finish')
+                            : t('buttons.saveStep'),
                         onClick: () => onSave(updatedFields),
-                    }, button3: (!hasCompleted && currentStep === 6) ? undefined : {
-                        buttonStyle: 'primaryFooter',
-                        label: t('buttons.next'),
-                        onClick: onNext,
-                        isDisabled: nextDisabled,
-                    } }) })] }));
+                    }, button3: !hasCompleted && currentStep === 6
+                        ? undefined
+                        : {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.next'),
+                            onClick: onNext,
+                            isDisabled: nextDisabled,
+                        } }) })] }));
 };

package/dist/components/homeBoard/HomeBoard.js

@@ -48,7 +48,7 @@ export const HomeBoard = () => {
             ], onShareContacts: () => null, onDeleteContacts: () => null, handleLoadMore: () => null, showLoadMore: false, loadMoreDisabled: false })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
-        HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false })),
+        HomeAssistant: (_jsx(DrawerContent, { children: _jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false }) })),
         Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';

package/dist/components/tour/BubbleArrow.js

@@ -8,5 +8,5 @@ export const BubbleArrow = ({ arrowBottom = undefined, arrowLeft = undefined, ar
     const { posX: posXLeft, posY: posYLeft, rotation: rotationLeft, } = ArrowLocationMap[arrowLeft !== null && arrowLeft !== void 0 ? arrowLeft : 'left'];
     const { posX: posXRight, posY: posYRight, rotation: rotationRight, } = ArrowLocationMap[arrowRight !== null && arrowRight !== void 0 ? arrowRight : 'right'];
     const { posX: posXTop, posY: posYTop, rotation: rotationTop, } = ArrowLocationMap[arrowTop !== null && arrowTop !== void 0 ? arrowTop : 'top'];
-    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)` })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)` })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)` })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)` }))] }));
+    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)`, filter: "brightness(1.6) saturate(200%)" }))] }));
 };

package/dist/components/tour/HomeBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, arrowSize, distanceFromEdgeArrowToBorder, firstBubbleHeight, firstBubbleWidth, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const [counter, setCounter] = useState(0);
@@ -22,12 +23,19 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         'addCatalog',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;
     const halfBubbleWidth = parsedBubbleWidth / 2;
     const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         homeboard: {
             arrowBottom: 'bottom',
@@ -38,7 +46,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> HomeBoard/HomeCard
         editHomeIcon: {
@@ -154,5 +162,5 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/LaunchpadTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, HelpIconStep, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, firstBubbleHeight, firstBubbleWidth, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClose, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const [counter, setCounter] = useState(0);
@@ -20,9 +21,16 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
         'forwardReceipts',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const cardSize = 220;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         launchpad: {
             arrowBottom: 'bottom',
@@ -33,7 +41,7 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> myHomes/headers/MyHomesHeader
         addHomeButton: {
@@ -103,12 +111,12 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             leftRef: ((_s = coordinates.feedback) === null || _s === void 0 ? void 0 : _s.x) - 225,
             topRef: ((_t = coordinates.feedback) === null || _t === void 0 ? void 0 : _t.y) + appBarHeight,
             component: (_jsx(HelpIconStep, { handleClose: () => {
-                    handleClose();
+                    handleCloseAndHighlight();
                     setCounter(0);
                 } })),
         },
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/RoomsBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { getMiddleAnchorPosition, firstBubbleWidth, firstBubbleHeight, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const [counter, setCounter] = useState(0);
@@ -16,7 +17,10 @@ export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleSt
         'addingItems',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const steps = {
         addRooms: {

package/dist/helpers/tour/Highlights.helper.d.ts

@@ -0,0 +1 @@
+export declare const highlightIds: string[];

package/dist/helpers/tour/Highlights.helper.js

@@ -0,0 +1,42 @@
+export const highlightIds = Array.from(new Set([
+    'customizeRoomName',
+    'trackRoomValue',
+    'organizeByGroup',
+    'trackGroupValue',
+    'addItemToGroup',
+    'addingItems',
+    'addHomeButton',
+    'assignReceipts',
+    'homeCard',
+    'feedback',
+    'trackStorage',
+    'role',
+    'homePicture',
+    'removeHome',
+    'viewHome',
+    'forwardReceipts',
+    'backToLaunchpad',
+    'editHomeIcon',
+    'addFolders',
+    'folder',
+    'shareWithOthers',
+    'viewContacts',
+    'feedback',
+    'storageUsed',
+    'profile',
+    'forwardReceipts',
+    'viewReceipts',
+    'addCatalog',
+    'homeAssistantButton-1',
+    'homeAssistantButton-2',
+    'homeAssistantButton-3',
+    'homeAssistantButton-4',
+    'homeAssistantButton-5',
+    'homeAssistantButton-6',
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+]));

package/dist/helpers/tour/index.d.ts

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/helpers/tour/index.js

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/hooks/forms/useDynamicForm.d.ts

@@ -2,11 +2,11 @@ import { FieldValues } from 'react-hook-form';
 import { FolderFileI, ReportI } from '../../interfaces';
 interface FilesUploadI {
     id: string;
-    files: FolderFileI[];
+    files: FolderFileI[] | File[];
 }
 interface UseDynamicFormI {
     fields: ReportI[];
-    onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
+    onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void;
 }
 export declare const useDynamicForm: ({ fields, onUpload }: UseDynamicFormI) => {
     form: import("react-hook-form").UseFormReturn<FieldValues, any, undefined>;

package/dist/hooks/forms/useSimpleDynamicForm.js

@@ -17,7 +17,7 @@ export const useSimpleDynamicForm = ({ fields }) => {
         const parsedValue = isCurrency ? parseCurrenyValue(value) : value;
         return Object.assign(Object.assign({}, field), { value: parsedValue, children: (_a = field === null || field === void 0 ? void 0 : field.children) === null || _a === void 0 ? void 0 : _a.map((child) => handleUpdateFields(child, fieldValues)) });
     };
-    const updatedFields = fields.map((field) => {
+    const updatedFields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
         return handleUpdateFields(field, fieldValues);
     });
     const handleSetDefaultValues = (fields) => {

package/dist/hooks/homeBoard/useHomeBoard.js

@@ -66,6 +66,7 @@ export const useHomeBoard = () => {
         isPanelStep ? onRightOpen() : onRightClose();
     };
     const handleClose = () => {
+        setShowOverlay(true);
         setActiveTour(false);
     };
     const [form, setForm] = useState({

package/dist/hooks/useComponentStyles.d.ts

@@ -1,7 +1,6 @@
 interface UseComponentStyles {
-    ids: string[];
-    selectedId: string;
+    ids?: string[];
     zIndex?: string;
 }
-export declare const useComponentStyles: ({ ids, selectedId, zIndex, }: UseComponentStyles) => void;
+export declare const useComponentStyles: ({ ids, zIndex, }: UseComponentStyles) => void;
 export {};

package/dist/hooks/useComponentStyles.js

@@ -1,5 +1,9 @@
-export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
-    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0)
+import { highlightIds } from '../helpers/tour';
+import { homeAssistantProxy } from '../proxies';
+import { useSnapshot } from 'valtio';
+export const useComponentStyles = ({ ids = highlightIds, zIndex = '2', }) => {
+    const { highlight, selectedId } = useSnapshot(homeAssistantProxy);
+    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0 || !selectedId)
         return;
     ids.forEach((id) => {
         const component = document.getElementById(id);
@@ -8,7 +12,7 @@ export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
         }
     });
     const currentComponent = document.getElementById(selectedId);
-    if (currentComponent) {
+    if (currentComponent && highlight) {
         currentComponent.style.zIndex = '1400';
     }
 };

package/dist/interfaces/forms/ItemFormPanel/ItemFormTabs.interface.d.ts

@@ -3,5 +3,5 @@ export interface ItemFormTabsI extends ItemFormTabImageI {
     form?: ReportI[];
     onAISend?: AIGridFieldI['onAISend'];
     searching?: boolean;
-    formUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
+    formUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void;
 }

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

@@ -28,7 +28,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     menuItems?: MenuItemI[];
     onAISend?: AIGridFieldI['onAISend'];
     onRemoveImage?: (file: string) => void;
-    onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
+    onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void;
     searching?: boolean;
     showTitle?: boolean;
     title?: string;

package/dist/interfaces/forms/dynamicForm/fields/FileField.interface.d.ts

@@ -6,3 +6,6 @@ export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
     displayImages?: string[];
     value?: string;
 }
+export interface SingleImageI extends Omit<FileFieldI, 'onUpload'> {
+    onUpload?: (files: File[]) => void;
+}

package/dist/interfaces/forms/dynamicForm/fields/GridField.interface.d.ts

@@ -1,13 +1,13 @@
-import { FolderFileI, ReportI } from '../../..';
+import { ReportI } from '../../..';
 export interface GridFieldI {
     children: ReportI['children'];
     onRemove?: (file: string) => void;
-    onUpload?: (files: FolderFileI[]) => void;
+    onUpload?: (files: File[]) => void;
 }
 export interface AIGridFieldI extends GridFieldI {
     onAISend?: (form?: AIFormI) => void;
 }
 export interface AIFormI {
     model?: string;
-    file?: FolderFileI;
+    file?: File;
 }

package/dist/proxies/homes/homeAssistant.proxy.d.ts

@@ -0,0 +1,8 @@
+interface HomeAssistantProxyI {
+    highlight: boolean;
+    selectedId: string;
+    setHighlight: (highlight: boolean) => void;
+    setSelectedId: (selectedId: string) => void;
+}
+export declare const homeAssistantProxy: HomeAssistantProxyI;
+export {};

package/dist/proxies/homes/homeAssistant.proxy.js

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio';
+export const homeAssistantProxy = proxy({
+    highlight: false,
+    selectedId: '',
+    setHighlight: (highlight) => {
+        homeAssistantProxy.highlight = highlight;
+    },
+    setSelectedId: (selectedId) => (homeAssistantProxy.selectedId = selectedId),
+});

package/dist/proxies/homes/index.d.ts

@@ -1 +1,2 @@
+export * from './homeAssistant.proxy';
 export * from './homeCard.proxy';

package/dist/proxies/homes/index.js

@@ -1 +1,2 @@
+export * from './homeAssistant.proxy';
 export * from './homeCard.proxy';

package/package.json

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

package/src/components/appBar/TourButton.tsx

@@ -2,8 +2,12 @@ import { t } from 'i18next'
 import { Box, Flex, Image } from '@chakra-ui/react'
 import { TourButtonI } from '@/interfaces'
 import { Flag } from '@/assets/images'
+import { useComponentStyles } from '@/hooks'
+import { homeAssistantProxy } from '@/proxies'
 
 export const TourButton = ({ label, onClick }: TourButtonI) => {
+  const { setHighlight } = homeAssistantProxy
+  useComponentStyles({})
   return (
     <Box
       data-testid="tour-button"
@@ -14,7 +18,10 @@ export const TourButton = ({ label, onClick }: TourButtonI) => {
       fontFamily="secondary"
       transition="all 0.2s ease-in-out"
       _hover={{ bg: 'lightGreen.4' }}
-      onClick={onClick}
+      onClick={() => {
+        setHighlight(true)
+        onClick?.()
+      }}
       flexShrink={0}
       overflow="hidden"
     >

package/src/components/forms/dynamicForm/fields/AIGridField.tsx

@@ -12,7 +12,7 @@ export const AIGridField = ({
   onRemove,
   onUpload,
 }: AIGridFieldI) => {
-  const [file, setFile] = useState<FolderFileI | undefined>(undefined)
+  const [file, setFile] = useState<File | undefined>(undefined)
   const { watch } = useFormContext()
 
   const textChild = children?.find(
@@ -43,7 +43,7 @@ export const AIGridField = ({
 
   const model = watch(String(textChild?.id))
 
-  const handleUpload = (files: FolderFileI[]) => {
+  const handleUpload = (files: File[]) => {
     const file = files[0]
     setFile(file)
     onUpload?.(files)

package/src/components/forms/dynamicForm/fields/SingleImage.tsx

@@ -2,21 +2,19 @@ import { ChangeEvent } from 'react'
 import { AspectRatio, Box, Flex, IconButton, Image } from '@chakra-ui/react'
 import { colors } from '@/theme/colors'
 import { Close, MobileFileUploader } from '@/components'
-import { FileFieldI } from '@/interfaces'
-import { handleMapFile } from '@/utils'
+import { SingleImageI } from '@/interfaces'
 
 export const SingleImage = ({
   onRemove,
   onUpload,
   uploading = false,
   value,
-}: FileFieldI) => {
+}: SingleImageI) => {
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const fileList = event.target.files ?? []
     const files = Array.from(fileList)
     if (files.length > 0) {
-      const selectedFiles = handleMapFile({ files })
-      onUpload?.(selectedFiles)
+      onUpload?.(files)
     }
   }