@homefile/components-v2 2.2.1 → 2.2.2

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

@@ -1,7 +1,8 @@
 import GutterCleaning from './gutter-cleaning.png';
 import HomeCleaning from './home-cleaning.png';
+import HouseWashing from './house-washing.png';
 import HolidayLights from './holiday-lights.png';
 import Pressure from './pressure.png';
 import RoofCleaning from './roof-cleaning.png';
 import WindowCleaning from './window.png';
-export { GutterCleaning, HomeCleaning, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };
+export { GutterCleaning, HomeCleaning, HouseWashing, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };

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

@@ -1,7 +1,8 @@
 import GutterCleaning from './gutter-cleaning.png';
 import HomeCleaning from './home-cleaning.png';
+import HouseWashing from './house-washing.png';
 import HolidayLights from './holiday-lights.png';
 import Pressure from './pressure.png';
 import RoofCleaning from './roof-cleaning.png';
 import WindowCleaning from './window.png';
-export { GutterCleaning, HomeCleaning, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };
+export { GutterCleaning, HomeCleaning, HouseWashing, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };

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

@@ -1,5 +1,6 @@
 import GutterCleaning from './gutter-cleaning.png'
 import HomeCleaning from './home-cleaning.png'
+import HouseWashing from './house-washing.png'
 import HolidayLights from './holiday-lights.png'
 import Pressure from './pressure.png'
 import RoofCleaning from './roof-cleaning.png'
@@ -8,6 +9,7 @@ import WindowCleaning from './window.png'
 export {
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   HolidayLights,
   Pressure,
   RoofCleaning,

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

@@ -63,7 +63,7 @@ export const DynamicForm = (_a) => {
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':
-                                return (_jsx(CheckboxGroupField, { id: id, children: children, value: value, icon: baseProps.icon }, id));
+                                return (_jsx(CheckboxGroupField, { id: id, children: children, value: value, description: description, icon: baseProps.icon }, id));
                             case 'tile-body':
                                 return (_createElement(TileBody, Object.assign({}, props, { key: id, callback: callback, fields: children, menuItems: menuItems })));
                             default:

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

@@ -1,2 +1,2 @@
 import { ReportI } from '../../../../interfaces';
-export declare const CheckboxGroupField: ({ children, icon, id, value, }: Pick<ReportI, "children" | "icon" | "id" | "value">) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroupField: ({ children, icon, id, value, description }: Pick<ReportI, "children" | "icon" | "id" | "value" | "description">) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox, CheckboxGroup, Flex, SimpleGrid, Text, } from '@chakra-ui/react';
 import { FormIcon } from '../../..';
 import { Controller, useFormContext } from 'react-hook-form';
-export const CheckboxGroupField = ({ children, icon, id, value, }) => {
+export const CheckboxGroupField = ({ children, icon, id, value, description }) => {
     const { control } = useFormContext();
     const defaultValues = children === null || children === void 0 ? void 0 : children.map((child) => {
         if (child.value) {
             return child.name;
         }
     }).filter((value) => value);
-    return (_jsxs(Box, { children: [_jsx(Box, { p: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: value }) }), _jsxs(Flex, { p: "base", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: defaultValues, render: ({ field: { onChange } }) => {
+    return (_jsxs(Box, { children: [_jsx(Box, { p: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description }) }), _jsxs(Flex, { p: "base", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: defaultValues, render: ({ field: { onChange } }) => {
                             return (_jsx(CheckboxGroup, { defaultValue: defaultValues, onChange: onChange, children: _jsx(SimpleGrid, { columns: 2, spacing: "base", w: "full", children: children === null || children === void 0 ? void 0 : children.map((child) => {
                                         const { id, name, value } = child;
                                         return (_jsx(Checkbox, { value: String(name), isChecked: Boolean(value), children: _jsx(Text, { fontSize: "sm", children: name }) }, id));

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.js

@@ -14,5 +14,5 @@ import { Box, Stack } from '@chakra-ui/react';
 import { PartnerFooter, SingleFields } from '../../../..';
 export const TileBody = (_a) => {
     var { callback, fields, websiteUrl = '', menuItems } = _a, props = __rest(_a, ["callback", "fields", "websiteUrl", "menuItems"]);
-    return (_jsx(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", children: [_jsx(SingleFields, { callback: callback, fields: fields, menuItems: menuItems }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] }) }));
+    return (_jsx(Box, { display: "flex", flexGrow: 1, flexDir: "column", bg: "#f6f8f9", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", children: [_jsx(SingleFields, { callback: callback, fields: fields, menuItems: menuItems }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] }) }));
 };

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -10,7 +10,7 @@ export const TileBody = ({
   ...props
 }: TileBodyI) => {
   return (
-    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+    <Box display="flex" flexGrow={1} flexDir="column" bg="#f6f8f9" boxShadow="lg">
       <Stack spacing="0" flex="1">
         <SingleFields
           callback={callback}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyAction.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '@chakra-ui/react';
 import { SingleFields } from '../../../..';
 export const TileBodyAction = ({ callback, fields }) => {
-    return (_jsx(Flex, { p: "base", align: "center", gap: "base", children: _jsx(SingleFields, { fields: fields, callback: callback }) }));
+    return (_jsx(Flex, { p: "base", align: "center", gap: "base", background: "#f6f8f9", children: _jsx(SingleFields, { fields: fields, callback: callback }) }));
 };

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyAction.tsx

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
-    <Flex p="base" align="center" gap="base">
+    <Flex p="base" align="center" gap="base" background={"#f6f8f9"}>
       <SingleFields fields={fields} callback={callback} />
     </Flex>
   )

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from '@chakra-ui/react';
 export const TileBodyHeader = ({ value = '' }) => {
-    return (_jsx(Box, { p: "base", children: _jsx(Text, { fontWeight: "semibold", children: value }) }));
+    return (_jsx(Box, { borderTop: "1px solid #dbdbdb", p: "base", background: "#ffffff", children: _jsx(Text, { fontWeight: "semibold", children: value }) }));
 };

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 export const TileBodyHeader = ({ value = '' }) => {
   return (
-    <Box p="base">
+    <Box borderTop={"1px solid #dbdbdb"} p="base" background={"#ffffff"}>
       <Text fontWeight="semibold">{value}</Text>
     </Box>
   )

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SimpleGrid } from '@chakra-ui/react';
 import { SingleFields } from '../../../..';
 export const TileBodySectionGrid = ({ fields }) => {
-    return (_jsx(SimpleGrid, { columns: 3, spacing: "base", p: "base", children: _jsx(SingleFields, { fields: fields }) }));
+    return (_jsx(SimpleGrid, { columns: 3, spacing: "base", p: "base", background: "#ffffff", children: _jsx(SingleFields, { fields: fields }) }));
 };

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.tsx

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
   return (
-    <SimpleGrid columns={3} spacing="base" p="base">
+    <SimpleGrid columns={3} spacing="base" p="base" background={"#ffffff"}>
       <SingleFields fields={fields} />
     </SimpleGrid>
   )

package/dist/components/homeAssistant/HomeAssistantButton.js

@@ -11,7 +11,7 @@ export const HomeAssistantButton = ({ currentStep, onStepClick, status, step, })
             onStepClick(currentStep);
     };
     const buttonId = `homeAssistantButton-${currentStep}`;
-    return (_jsxs(Box, { position: "relative", id: buttonId, children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
+    return (_jsxs(Box, { position: "relative", id: buttonId, zIndex: "2", children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
 };
 const setStyles = (status) => {
     switch (status) {

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -4,7 +4,7 @@ import { getIconAltText } from '../../utils';
 export const HomeMonitorButton = ({ currentStep, onStepClick, status = 'ok', step, }) => {
     const buttonId = `homeMonitorButton-${currentStep}`;
     const iconAltText = getIconAltText(step.icon);
-    return (_jsx(Box, { position: "relative", id: buttonId, children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
+    return (_jsx(Box, { position: "relative", id: buttonId, zIndex: "2", 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", align: "center", h: "96px", w: "100%", p: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
 };
 const setStyles = (status) => {
     switch (status) {

package/dist/components/homeAssistant/HomeMonitorSteps.js

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

package/dist/components/homeBoard/HomeBoard.js

@@ -51,7 +51,7 @@ export const HomeBoard = () => {
         HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';
-    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _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: [
+    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", px: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: [
                                                                 {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,

package/dist/components/launchpad/IconMenu.js

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

package/dist/components/partner/PartnerFooter.js

@@ -10,5 +10,5 @@ export const PartnerFooter = ({ socialLinks = [], websiteUrl, urlText, }) => {
             return;
         window.open(url, '_blank');
     };
-    return (_jsxs(Flex, { align: "center", justify: "space-between", p: "base", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
+    return (_jsxs(Flex, { background: "#f6f8f9", align: "center", justify: "space-between", p: "base", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
 };

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, PressureWasher, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -46,6 +46,7 @@ export const fieldIcons = {
     company: Company,
     'sh-gutter': GutterCleaning,
     'sh-home': HomeCleaning,
+    'sh-house': HouseWashing,
     'sh-lights': HolidayLights,
     'sh-pressure': Pressure,
     'sh-roof': RoofCleaning,

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

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

package/dist/mocks/forms/dynamicForm.mock.js

@@ -491,6 +491,15 @@ export const tileUIMock = [
                         type: 'vertical-icon',
                         icon: 'sh-gutter',
                     },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'House Washing',
+                        type: 'vertical-icon',
+                        icon: 'sh-house',
+                    },
                 ],
             },
             {

package/package.json

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

package/src/assets/images/shine/index.ts

@@ -1,5 +1,6 @@
 import GutterCleaning from './gutter-cleaning.png'
 import HomeCleaning from './home-cleaning.png'
+import HouseWashing from './house-washing.png'
 import HolidayLights from './holiday-lights.png'
 import Pressure from './pressure.png'
 import RoofCleaning from './roof-cleaning.png'
@@ -8,6 +9,7 @@ import WindowCleaning from './window.png'
 export {
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   HolidayLights,
   Pressure,
   RoofCleaning,

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -172,6 +172,7 @@ export const DynamicForm = ({
                     id={id}
                     children={children}
                     value={value}
+                    description={description}
                     icon={baseProps.icon}
                   />
                 )

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

@@ -15,7 +15,8 @@ export const CheckboxGroupField = ({
   icon,
   id,
   value,
-}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value'>) => {
+  description
+}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value' | 'description'>) => {
   const { control } = useFormContext()
   const defaultValues = children
     ?.map((child) => {
@@ -29,7 +30,7 @@ export const CheckboxGroupField = ({
     <Box>
       <Box p="base" borderBottom="1px dashed" borderColor="lightBlue.6">
         <Text fontFamily="secondary" fontSize="sm">
-          {value}
+          {description}
         </Text>
       </Box>
       <Flex p="base" gap="base">

package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -10,7 +10,7 @@ export const TileBody = ({
   ...props
 }: TileBodyI) => {
   return (
-    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+    <Box display="flex" flexGrow={1} flexDir="column" bg="#f6f8f9" boxShadow="lg">
       <Stack spacing="0" flex="1">
         <SingleFields
           callback={callback}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyAction.tsx

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
-    <Flex p="base" align="center" gap="base">
+    <Flex p="base" align="center" gap="base" background={"#f6f8f9"}>
       <SingleFields fields={fields} callback={callback} />
     </Flex>
   )

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 export const TileBodyHeader = ({ value = '' }) => {
   return (
-    <Box p="base">
+    <Box borderTop={"1px solid #dbdbdb"} p="base" background={"#ffffff"}>
       <Text fontWeight="semibold">{value}</Text>
     </Box>
   )

package/src/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.tsx

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
   return (
-    <SimpleGrid columns={3} spacing="base" p="base">
+    <SimpleGrid columns={3} spacing="base" p="base" background={"#ffffff"}>
       <SingleFields fields={fields} />
     </SimpleGrid>
   )

package/src/components/homeAssistant/HomeAssistantButton.tsx

@@ -17,7 +17,7 @@ export const HomeAssistantButton = ({
   }
   const buttonId = `homeAssistantButton-${currentStep}`
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       {isCompleted && (
         <Image
           src={CheckInCircle}

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -12,7 +12,7 @@ export const HomeMonitorButton = ({
   const iconAltText = getIconAltText(step.icon)
 
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       <Box
         position="relative"
         bg="neutral.white"
@@ -36,10 +36,10 @@ export const HomeMonitorButton = ({
           as="button"
           spacing="2"
           border="1px solid transparent"
-          w="90px"
           align="center"
           h="96px"
-          py="base"
+          w="100%"
+          p="base"
           {...setStyles(status)}
           onClick={() => onStepClick(currentStep)}
         >

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -3,7 +3,7 @@ import { HomeMonitortStepsI } from '@/interfaces'
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 import { useComponentStyles } from '@/hooks'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 
 export const HomeMonitorSteps = ({
   menuItems = [],
@@ -24,10 +24,10 @@ export const HomeMonitorSteps = ({
   useComponentStyles({ ids, selectedId, zIndex: '2' })
   const handleStepClick = (step: number) => onStepClick(step)
   return (
-    <Flex gap="base">
+    <Flex gap="base" justify="center">
       {homeAssistantSteps.map((step, index) => (
-        <Box key={step?.title} position="relative">
-          <Box flex="auto">
+        <Box key={step?.title} position="relative" flex="1">
+          <Fragment>
             <HomeMonitorButton
               currentStep={index + 1}
               onStepClick={handleStepClick}
@@ -44,7 +44,7 @@ export const HomeMonitorSteps = ({
                 onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
               />
             </Box>
-          </Box>
+          </Fragment>
         </Box>
       ))}
     </Flex>

package/src/components/homeBoard/HomeBoard.tsx

@@ -334,7 +334,7 @@ export const HomeBoard = () => {
                 title="Travis County Property Taxes"
               />
               <HomeMonitor>
-                <Stack spacing="base">
+                <Stack spacing="base" w="full" px="base">
                   <Flex gap="base">
                     <HomefileMonitoring />
                     <Notifications date="10-10-24" local="TX - Houston" />

package/src/components/launchpad/IconMenu.tsx

@@ -4,6 +4,7 @@ import {
   Menu,
   MenuItem,
   MenuList,
+  Box,
 } from '@chakra-ui/react'
 import { IconMenuI } from '@/interfaces'
 import { Overlay } from '@/components'
@@ -16,46 +17,43 @@ export const IconMenu = <T extends unknown>({
   onClick,
   variant = 'menuIcon',
   width = 'fit-content',
-  zIndex,
+  zIndex = '999',
 }: IconMenuI<T>) => {
   return (
-    <Menu isLazy>
-      {({ isOpen }) => (
-        <>
-          <Overlay
-            bg="overlay"
-            showOverlay={isOpen}
-            position="fixed"
-            zIndex={zIndex}
-          />
-          <MenuButton
-            as={IconButton}
-            aria-label="Options"
-            icon={icon}
-            variant={variant}
-            w={width}
-            disabled={disabled}
-            marginTop="0 !important"
-            onClick={onClick}
-          />
-          <MenuList zIndex="5">
-            {menuItems?.map(({ handleClick, label }) => (
-              <MenuItem
-                key={label}
-                onClick={() => handleClick(itemForm)}
-                _hover={{
-                  bg: 'lightGreen.1',
-                }}
-                _focus={{
-                  bg: 'lightGreen.1',
-                }}
-              >
-                {label}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </>
-      )}
-    </Menu>
+    <Box zIndex={zIndex}>
+      <Menu isLazy>
+        {({ isOpen }) => (
+          <>
+            <Overlay bg="overlay" showOverlay={isOpen} position="fixed" />
+            <MenuButton
+              as={IconButton}
+              aria-label="Options"
+              icon={icon}
+              variant={variant}
+              w={width}
+              disabled={disabled}
+              marginTop="0 !important"
+              onClick={onClick}
+            />
+            <MenuList zIndex="5">
+              {menuItems?.map(({ handleClick, label }) => (
+                <MenuItem
+                  key={label}
+                  onClick={() => handleClick(itemForm)}
+                  _hover={{
+                    bg: 'lightGreen.1',
+                  }}
+                  _focus={{
+                    bg: 'lightGreen.1',
+                  }}
+                >
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </>
+        )}
+      </Menu>
+    </Box>
   )
 }

package/src/components/partner/PartnerFooter.tsx

@@ -18,7 +18,7 @@ export const PartnerFooter = ({
   }
 
   return (
-    <Flex align="center" justify="space-between" p="base">
+    <Flex background={"#f6f8f9"} align="center" justify="space-between" p="base">
       <Link href={websiteUrl} isExternal>
         <Text fontSize="xs" color="blue.3">
           {urlText ?? cleanedWebsiteUrl}

package/src/helpers/forms/dynamicForm.helper.ts

@@ -47,6 +47,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
@@ -98,6 +99,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   company: Company,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
+  'sh-house': HouseWashing,
   'sh-lights': HolidayLights,
   'sh-pressure': Pressure,
   'sh-roof': RoofCleaning,

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

@@ -88,6 +88,7 @@ export type UIIconTypes =
   | 'sh-lights'
   | 'sh-gutter'
   | 'sh-home'
+  | 'sh-house'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

package/src/mocks/forms/dynamicForm.mock.ts

@@ -496,6 +496,15 @@ export const tileUIMock: ReportI[] = [
             type: 'vertical-icon',
             icon: 'sh-gutter',
           },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'House Washing',
+            type: 'vertical-icon',
+            icon: 'sh-house',
+          },
         ],
       },