@homefile/components-v2 2.0.0 → 2.1.1

package/dist/assets/images/ia.svg

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

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

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

package/dist/components/contacts/ContactsContent.js

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

package/dist/components/customToast/CustomToast.js

@@ -8,5 +8,5 @@ export const CustomToast = ({ description, onClose, status = 'success', title, }
         success: '#5E42B2',
         error: '#CF3593',
     };
-    return (_jsxs(Box, { bg: bgColors[status], borderRadius: "lg", boxShadow: "lg", position: "relative", py: "base", children: [_jsxs(Flex, { gap: "base", p: "base", align: "center", children: [_jsx(StatusIllustration, { status: status }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "25px", fontWeight: "medium", color: "neutral.white", lineHeight: "1.1", children: title }), _jsx(Text, { color: "neutral.white", children: description })] })] }), _jsx(Box, { as: "button", "aria-label": t('ariaLabels.close'), onClick: onClose, position: "absolute", top: "8px", right: "8px", children: _jsx(Close, { stroke: colors.neutral.white, size: 20 }) })] }));
+    return (_jsxs(Box, { paddingTop: 0, paddingBottom: 0, bg: bgColors[status], borderRadius: "lg", boxShadow: "lg", position: "relative", children: [_jsxs(Flex, { gap: "base", p: "base", align: "center", position: "relative", left: "-26px", children: [_jsx(StatusIllustration, { status: status }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "22px", fontWeight: "medium", color: "neutral.white", lineHeight: "1.1", children: title }), _jsx(Text, { color: "neutral.white", children: description })] })] }), _jsx(Box, { as: "button", "aria-label": t('ariaLabels.close'), onClick: onClose, position: "absolute", top: "8px", right: "8px", children: _jsx(Close, { stroke: colors.neutral.white, size: 20 }) })] }));
 };

package/dist/components/customToast/StatusIllustration.js

@@ -8,15 +8,15 @@ export const StatusIllustration = ({ status = 'success', }) => {
             src: Check,
             alt: t('ariaLabels.success'),
             bg: '#28B5A8',
-            height: '26px',
+            height: '21px',
         },
         error: {
             src: Exclamation,
             alt: t('ariaLabels.error'),
             bg: '#991365',
-            height: '33px',
+            height: '28px',
         },
     };
     const { alt, bg, height, src } = props[status];
-    return (_jsx(Center, { borderRadius: "full", bg: bg, boxShadow: "xl", w: "60px", h: "60px", children: _jsx(Image, { src: src, alt: alt, h: height, w: "auto" }) }));
+    return (_jsx(Center, { borderRadius: "full", bg: bg, boxShadow: "xl", w: "43px", h: "43px", children: _jsx(Image, { src: src, alt: alt, h: height, w: "auto" }) }));
 };

package/dist/components/forms/dynamicForm/DynamicForm.d.ts

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '../../../interfaces';
-export declare const DynamicForm: ({ form: fields, onUpload, showTitle, uploadingFieldId, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicForm: ({ callback, form: fields, menuItems, onUpload, showTitle, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { Stack, Text } from '@chakra-ui/react';
-import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
-export const DynamicForm = ({ form: fields, onUpload, showTitle = true, uploadingFieldId, }) => {
+export const DynamicForm = (_a) => {
+    var { callback, form: fields, menuItems, onUpload, showTitle = true, uploadingFieldId } = _a, props = __rest(_a, ["callback", "form", "menuItems", "onUpload", "showTitle", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
     return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", children: [showTitle && (_jsx(Text, { fontFamily: "secondary", px: "base", pt: "4", pb: "2", children: t('forms.itemDetails') })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
                         const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
@@ -49,6 +61,8 @@ export const DynamicForm = ({ form: fields, onUpload, showTitle = true, uploadin
                                 return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(FileField, { icon: baseProps.icon, description: description, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id }) })));
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
+                            case 'tile-body':
+                                return (_jsx(TileBody, Object.assign({ callback: callback, fields: children, menuItems: menuItems }, props), id));
                             default:
                                 return null;
                         }

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

@@ -1,5 +1,2 @@
-import { DynamicFormI } from '../../../../interfaces';
-export interface FieldTypesI {
-    fields?: DynamicFormI['form'];
-}
-export declare const SingleFields: ({ fields }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;
+import { FieldTypesI } from '../../../../interfaces';
+export declare const SingleFields: ({ callback, fields, menuItems }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { fieldIcons } from '../../../../helpers';
-import { GridField, RatingField, TextAreaField, TextField, SelectField, SwitchField, NumberField, DateField, CurrencyField, } from '../../..';
-export const SingleFields = ({ fields }) => {
+import { GridField, RatingField, TextAreaField, TextField, SelectField, SwitchField, NumberField, DateField, CurrencyField, TileBodyHeader, TileBodyLogo, VerticalIcon, TileBodySectionGrid, TileBodyAction, TileCta, } from '../../..';
+export const SingleFields = ({ callback, fields, menuItems }) => {
     return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, name, type, value, icon, options = [], }) => {
             const baseProps = {
                 key: id,
@@ -34,6 +34,20 @@ export const SingleFields = ({ fields }) => {
                     return _jsx(TextField, Object.assign({}, baseProps, { type: "tel" }));
                 case 'textarea':
                     return _jsx(TextAreaField, Object.assign({}, baseProps));
+                case 'tile-body-section-grid':
+                    return _jsx(TileBodySectionGrid, { fields: children }, id);
+                case 'tile-body-header':
+                    return (_jsx(TileBodyHeader, { value: String(baseProps.value) }, baseProps.key));
+                case 'tile-body-logo':
+                    return (_jsx(TileBodyLogo, { name: name, value: String(baseProps.value), menuItems: menuItems }, baseProps.key));
+                case 'vertical-icon':
+                    return (_jsx(VerticalIcon, { icon: baseProps.icon, value: String(baseProps.value) }, id));
+                case 'tile-body-action':
+                    return (_jsx(TileBodyAction, { fields: children, callback: callback }, id));
+                case 'primary-cta':
+                    return (_jsx(TileCta, { type: type, value: String(baseProps.value), callback: callback }, id));
+                case 'secondary-cta':
+                    return (_jsx(TileCta, { type: type, value: String(baseProps.value), callback: callback }, id));
                 default:
                     return null;
             }

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

@@ -13,3 +13,4 @@ export * from './SelectField';
 export * from './SingleFields';
 export * from './TextAreaField';
 export * from './TextField';
+export * from './uiFields';

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

@@ -13,3 +13,4 @@ export * from './SelectField';
 export * from './SingleFields';
 export * from './TextAreaField';
 export * from './TextField';
+export * from './uiFields';

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.d.ts

@@ -0,0 +1,2 @@
+import { TileBodyI } from '../../../../../interfaces';
+export declare const TileBody: ({ callback, fields, websiteUrl, menuItems, ...props }: TileBodyI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }))] }) }));
+};

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

@@ -0,0 +1,24 @@
+import { Box, Stack } from '@chakra-ui/react'
+import { TileBodyI } from '@/interfaces'
+import { PartnerFooter, SingleFields } from '@/components'
+
+export const TileBody = ({
+  callback,
+  fields,
+  websiteUrl = '',
+  menuItems,
+  ...props
+}: TileBodyI) => {
+  return (
+    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+      <Stack spacing="0" flex="1">
+        <SingleFields
+          callback={callback}
+          fields={fields}
+          menuItems={menuItems}
+        />
+        <PartnerFooter {...props} websiteUrl={websiteUrl} />
+      </Stack>
+    </Box>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyAction.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+import { Flex } from '@chakra-ui/react'
+import { SingleFields } from '@/components'
+import { TileBodyI } from '@/interfaces'
+
+export const TileBodyAction = ({ fields }: TileBodyI) => {
+  return (
+    <Flex p="base" align="center" gap="base">
+      <SingleFields fields={fields} />
+    </Flex>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const TileBodyHeader: ({ value }: {
+    value?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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 }) }));
+};

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

@@ -0,0 +1,9 @@
+import { Box, Text } from '@chakra-ui/react'
+
+export const TileBodyHeader = ({ value = '' }) => {
+  return (
+    <Box p="base">
+      <Text fontWeight="semibold">{value}</Text>
+    </Box>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyLogo.d.ts

@@ -0,0 +1,2 @@
+import { TileBodyLogoI } from '../../../../../interfaces';
+export declare const TileBodyLogo: ({ menuItems, name, value, }: TileBodyLogoI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PartnerHeader } from '../../../..';
+export const TileBodyLogo = ({ menuItems, name = '', value, }) => {
+    return _jsx(PartnerHeader, { logo: value, partnerName: name, menuItems: menuItems });
+};

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

@@ -0,0 +1,10 @@
+import { PartnerHeader } from '@/components'
+import { TileBodyLogoI } from '@/interfaces'
+
+export const TileBodyLogo = ({
+  menuItems,
+  name = '',
+  value,
+}: TileBodyLogoI) => {
+  return <PartnerHeader logo={value} partnerName={name} menuItems={menuItems} />
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.d.ts

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

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

@@ -0,0 +1,6 @@
+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 }) }));
+};

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

@@ -0,0 +1,11 @@
+import { SimpleGrid } from '@chakra-ui/react'
+import { SingleFields } from '@/components'
+import { TileBodyI } from '@/interfaces'
+
+export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
+  return (
+    <SimpleGrid columns={3} spacing="base" p="base">
+      <SingleFields fields={fields} />
+    </SimpleGrid>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileCta.d.ts

@@ -0,0 +1,2 @@
+import { TileCtaI } from '../../../../../interfaces';
+export declare const TileCta: ({ callback, type, value }: TileCtaI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@chakra-ui/react';
+export const TileCta = ({ callback, type, value }) => {
+    return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(value), variant: type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter', fontSize: "sm", children: value }));
+};

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

@@ -0,0 +1,14 @@
+import { Button } from '@chakra-ui/react'
+import { TileCtaI } from '@/interfaces'
+
+export const TileCta = ({ callback, type, value }: TileCtaI) => {
+  return (
+    <Button
+      onClick={() => callback?.(value)}
+      variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
+      fontSize="sm"
+    >
+      {value}
+    </Button>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/VerticalIcon.d.ts

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Image, Text } from '@chakra-ui/react';
+export const VerticalIcon = ({ icon, value }) => {
+    return (_jsxs(Box, { bg: "neutral.white", borderRadius: "md", border: "1px solid", borderColor: "lightBlue.6", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", children: [_jsx(Box, { h: "46px", display: "flex", alignItems: "center", children: _jsx(Image, { src: icon, alt: value, w: "auto", h: "80%" }) }), _jsx(Box, { pb: "2", children: _jsx(Text, { fontWeight: "semibold", textAlign: "center", fontSize: "13px", lineHeight: "14px", children: value }) })] }));
+};

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

@@ -0,0 +1,31 @@
+import { Box, Image, Text } from '@chakra-ui/react'
+import { VerticalIconI } from '@/interfaces'
+
+export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
+  return (
+    <Box
+      bg="neutral.white"
+      borderRadius="md"
+      border="1px solid"
+      borderColor="lightBlue.6"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Box h="46px" display="flex" alignItems="center">
+        <Image src={icon} alt={value} w="auto" h="80%" />
+      </Box>
+      <Box pb="2">
+        <Text
+          fontWeight="semibold"
+          textAlign="center"
+          fontSize="13px"
+          lineHeight="14px"
+        >
+          {value}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/index.d.ts

@@ -0,0 +1,7 @@
+export * from './TileBody';
+export * from './TileBodyAction';
+export * from './TileBodyHeader';
+export * from './TileBodyLogo';
+export * from './TileBodySectionGrid';
+export * from './TileCta';
+export * from './VerticalIcon';

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

@@ -0,0 +1,7 @@
+export * from './TileBody';
+export * from './TileBodyAction';
+export * from './TileBodyHeader';
+export * from './TileBodyLogo';
+export * from './TileBodySectionGrid';
+export * from './TileCta';
+export * from './VerticalIcon';

package/dist/components/forms/dynamicForm/fields/uiFields/index.ts

@@ -0,0 +1,7 @@
+export * from './TileBody'
+export * from './TileBodyAction'
+export * from './TileBodyHeader'
+export * from './TileBodyLogo'
+export * from './TileBodySectionGrid'
+export * from './TileCta'
+export * from './VerticalIcon'

package/dist/components/homeAssistant/HomeAssistantTutorial.js

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

package/dist/components/homeAssistant/HomeAssistantWrapper.js

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

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

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

package/dist/components/homeAssistant/HomeMonitorButton.js

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

package/dist/components/homeAssistant/HomeMonitorSteps.js

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

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

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