@homefile/components-v2 2.1.1 → 2.2.0

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

@@ -102,6 +102,7 @@ import Play from './play.svg';
 import Plus from './plus.svg';
 import Pool from './pool.svg';
 import Pool2 from './pool2.svg';
+import PressureWasher from './pressure-washer.svg';
 import Price from './price.svg';
 import Profile from './profile.svg';
 import ProgressReport from './progress-report.svg';
@@ -153,7 +154,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './appliances';
 export * from './clouds-animation';

package/dist/assets/images/index.js

@@ -102,6 +102,7 @@ import Play from './play.svg';
 import Plus from './plus.svg';
 import Pool from './pool.svg';
 import Pool2 from './pool2.svg';
+import PressureWasher from './pressure-washer.svg';
 import Price from './price.svg';
 import Profile from './profile.svg';
 import ProgressReport from './progress-report.svg';
@@ -153,7 +154,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './appliances';
 export * from './clouds-animation';

package/dist/assets/images/index.ts

@@ -102,6 +102,7 @@ import Play from './play.svg'
 import Plus from './plus.svg'
 import Pool from './pool.svg'
 import Pool2 from './pool2.svg'
+import PressureWasher from './pressure-washer.svg'
 import Price from './price.svg'
 import Profile from './profile.svg'
 import ProgressReport from './progress-report.svg'
@@ -259,6 +260,7 @@ export {
   Plus,
   Pool,
   Pool2,
+  PressureWasher,
   Price,
   Profile,
   ProgressReport,

package/dist/assets/images/pressure-washer.svg

@@ -0,0 +1,16 @@
+<svg id="Group_22267" data-name="Group 22267" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.455" height="30.766" viewBox="0 0 28.455 30.766">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25649" data-name="Rectangle 25649" width="28.455" height="30.766" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_22266" data-name="Group 22266" clip-path="url(#clip-path)">
+    <path id="Path_17637" data-name="Path 17637" d="M2.623,97.179a2.624,2.624,0,1,1,2.392-3.7c.033.074.062.148.088.222l-.786.276c-.019-.054-.04-.107-.063-.158a1.79,1.79,0,1,0-.009,1.5,1.44,1.44,0,0,0,.067-.172c.014-.038.02-.052.024-.068s.011-.041.016-.057a.37.37,0,0,0,.014-.054c.01-.043.014-.064.018-.088l.821.14c-.007.043-.015.083-.025.126s-.021.09-.035.133-.026.087-.042.131A2.377,2.377,0,0,1,5,95.674a2.641,2.641,0,0,1-2.373,1.5" transform="translate(0 -66.413)" fill="#00c0b7"/>
+    <path id="Path_17638" data-name="Path 17638" d="M74.807,0V1.516H71.726V0Z" transform="translate(-51.817 0)" fill="#40566b"/>
+    <path id="Path_17639" data-name="Path 17639" d="M30.728,16.7v3.794h-2V16.7Z" transform="translate(-20.753 -12.064)" fill="#40566b"/>
+    <path id="Path_17640" data-name="Path 17640" d="M26.768,35.665a4,4,0,0,1,0,8.008H10.422V41.827H26.768a2.157,2.157,0,1,0,0-4.313H7.21a4.008,4.008,0,0,1-4.005-4V24.2A4.011,4.011,0,0,1,7.21,20.2h3.079v1.849H7.21A2.159,2.159,0,0,0,5.054,24.2v9.307A2.157,2.157,0,0,0,7.21,35.665Z" transform="translate(-2.315 -14.592)" fill="#00c0b7"/>
+    <path id="Path_17641" data-name="Path 17641" d="M18.926,98.119v1.846h-3.95a1.872,1.872,0,0,0,.086-.219.869.869,0,0,0,.036-.114.881.881,0,0,0,.031-.117c.009-.033.014-.064.02-.1a2.066,2.066,0,0,0,.036-.394,2.188,2.188,0,0,0-.12-.716c-.022-.064-.047-.128-.075-.189Z" transform="translate(-10.819 -70.884)" fill="#e24c5d"/>
+    <path id="Path_17642" data-name="Path 17642" d="M53.8,10.734V16.8a5.273,5.273,0,0,1-5.274,5.274H39.055a3.118,3.118,0,0,1-3.12-3.117V8.58a3.119,3.119,0,0,1,3.12-3.12h9.471A5.273,5.273,0,0,1,53.8,10.734m-4.158,7.594V9.4a.616.616,0,0,0-.616-.616H45.791a.618.618,0,0,0-.616.616v8.932a.617.617,0,0,0,.616.616h3.234a.615.615,0,0,0,.616-.616" transform="translate(-25.961 -3.944)" fill="#e24c5d"/>
+    <path id="Path_17643" data-name="Path 17643" d="M73.69,26.969a.615.615,0,0,1-.616.616H69.84a.617.617,0,0,1-.616-.616V18.037a.618.618,0,0,1,.616-.616h3.234a.616.616,0,0,1,.616.616Z" transform="translate(-50.01 -12.586)" fill="#ddeff2"/>
+  </g>
+</svg>

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

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

package/dist/components/animations/HomieAnimation.js

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

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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, TileBody, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
@@ -61,6 +61,8 @@ export const DynamicForm = (_a) => {
                                 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 'checkbox-group':
+                                return (_jsx(CheckboxGroupField, { id: id, children: children, value: value, icon: baseProps.icon }, id));
                             case 'tile-body':
                                 return (_jsx(TileBody, Object.assign({ callback: callback, fields: children, menuItems: menuItems }, props), id));
                             default:

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

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

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

@@ -0,0 +1,18 @@
+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, }) => {
+    const { control } = useFormContext();
+    const defaultValues = children === null || children === void 0 ? void 0 : children.map((child) => {
+        if (child.value) {
+            return child.id;
+        }
+    }).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 (_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(id), isChecked: Boolean(value), children: _jsx(Text, { fontSize: "sm", children: name }) }, id));
+                                    }) }) }));
+                        } })] })] }));
+};

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

@@ -2,7 +2,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, 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 = [], }) => {
+    return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, name, type, value, icon, link, options = [], }) => {
             const baseProps = {
                 key: id,
                 id,
@@ -45,9 +45,9 @@ export const SingleFields = ({ callback, fields, menuItems }) => {
                 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));
+                    return (_jsx(TileCta, { callback: callback, description: description, icon: icon, id: id, name: name, type: type, link: link, value: String(baseProps.value) }, id));
                 case 'secondary-cta':
-                    return (_jsx(TileCta, { type: type, value: String(baseProps.value), callback: callback }, id));
+                    return (_jsx(TileCta, { callback: callback, description: description, icon: icon, id: id, name: name, type: type, value: String(baseProps.value) }, id));
                 default:
                     return null;
             }

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

@@ -1,3 +1,4 @@
+export * from './CheckboxGroupField';
 export * from './CurrencyField';
 export * from './DateField';
 export * from './FieldDescription';

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

@@ -1,3 +1,4 @@
+export * from './CheckboxGroupField';
 export * from './CurrencyField';
 export * from './DateField';
 export * from './FieldDescription';

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

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

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

@@ -1,6 +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 }) }));
+export const TileBodyAction = ({ callback, fields }) => {
+    return (_jsx(Flex, { p: "base", align: "center", gap: "base", children: _jsx(SingleFields, { fields: fields, callback: callback }) }));
 };

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

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

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

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

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

@@ -1,5 +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 } 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 }));
+export const TileCta = (_a) => {
+    var { callback } = _a, props = __rest(_a, ["callback"]);
+    const { type, value } = props;
+    return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({}, props)), variant: type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter', fontSize: "sm", children: value }));
 };

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

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

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -12,16 +12,12 @@ export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts,
         '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 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))) }));
 };
 const getStatus = (index, stepsWithAlerts) => {
     const hasAlert = stepsWithAlerts.includes(index);

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

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

package/dist/components/homeBoard/HomeBoard.js

@@ -51,7 +51,12 @@ 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: menuMock, stepsWithAlerts: [], onStepClick: handleHomeAssistantClick })] }) }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
+    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: [
+                                                                {
+                                                                    label: 'Details',
+                                                                    handleClick: handleHomeAssistantClick,
+                                                                },
+                                                            ], stepsWithAlerts: [], onStepClick: () => null })] }) }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
 export const AppBarComponent = ({ setActiveTour = (value) => { } }) => {
     const handleTour = () => {

package/dist/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, } 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, PressureWasher, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -35,6 +35,7 @@ export const fieldIcons = {
     heater: Heater,
     light: Light,
     plate: Plate,
+    'pressure-washer': PressureWasher,
     pool: Pool2,
     roof: Roof2,
     umbrella: Closet,

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

@@ -1,7 +1,7 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
+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' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
+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 ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;

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

@@ -1,4 +1,4 @@
-import { DynamicFormI, MenuItemI, PartnerFooterI } from '../../..';
+import { DynamicFormI, MenuItemI, PartnerFooterI, ReportI } from '../../..';
 export interface TileBodyLogoI {
     menuItems?: MenuItemI[];
     name?: string;
@@ -13,8 +13,19 @@ export interface VerticalIconI {
     icon?: string;
     value: string;
 }
-export interface TileCtaI {
-    callback?: (value: string) => void;
+interface TileCtaCallbackI {
+    id: string;
+    value: string;
+    name?: string;
+    link?: string;
+    icon?: string;
+    description?: string;
+    canBeHidden?: boolean;
+    visible?: boolean;
+}
+export interface TileCtaI extends Pick<ReportI, 'id' | 'name' | 'link' | 'icon' | 'description' | 'canBeHidden' | 'visible'> {
+    callback?: (form: TileCtaCallbackI) => void;
     type: 'primary-cta' | 'secondary-cta';
     value: string;
 }
+export {};

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

@@ -189,6 +189,72 @@ export const formFieldsMock = [
         visible: false,
         icon: 'book',
     },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Services',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: 'Select the services you are requesting support for?',
+        type: 'checkbox-group',
+        visible: true,
+        icon: 'pressure-washer',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Pressure Washing',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Window Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: false,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Roof Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: false,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Holiday Lights',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Gutter Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Exterior Cleaning',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: true,
+                type: 'checkbox',
+                visible: false,
+            },
+        ],
+    },
 ];
 export const contactFieldsMock = [
     {

package/dist/stories/animations/HomieAnimation.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const Homie: () => import("react/jsx-runtime").JSX.Element;
+export declare const HomieLarge: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/animations/HomieAnimation.stories.js

@@ -9,3 +9,4 @@ export default {
     ],
 };
 export const Homie = () => _jsx(HomieAnimation, {});
+export const HomieLarge = () => _jsx(HomieAnimation, { animation: "homie-v3" });

package/dist/stories/assets/Illustrations.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Grid, Image, Text } from '@chakra-ui/react';
-import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } from '../../assets/images';
+import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } from '../../assets/images';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, } from '../../assets/images/appliances';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
 };
 const IconWrapper = ({ icon, name }) => {
     return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Image, { src: icon, boxSize: "30px", mb: "2" }), _jsx(Text, { variant: "home", children: name })] }));

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

@@ -7,8 +7,6 @@ export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
     args: {
-        callback: action('callback'),
-        onUpload: action('onUpload'),
         menuItems: menuMock,
         socialLinks: socialLinksMock,
         websiteUrl: 'http://www.audreyscheckdesign.com',
@@ -18,5 +16,5 @@ export const DynamicFormComponent = (args) => {
     return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock })) }));
 };
 export const DynamicUIFormComponent = (args) => {
-    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false })) }));
+    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false, callback: action('callback') })) }));
 };

package/package.json

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

package/src/assets/images/index.ts

@@ -102,6 +102,7 @@ import Play from './play.svg'
 import Plus from './plus.svg'
 import Pool from './pool.svg'
 import Pool2 from './pool2.svg'
+import PressureWasher from './pressure-washer.svg'
 import Price from './price.svg'
 import Profile from './profile.svg'
 import ProgressReport from './progress-report.svg'
@@ -259,6 +260,7 @@ export {
   Plus,
   Pool,
   Pool2,
+  PressureWasher,
   Price,
   Profile,
   ProgressReport,

package/src/assets/images/pressure-washer.svg

@@ -0,0 +1,16 @@
+<svg id="Group_22267" data-name="Group 22267" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.455" height="30.766" viewBox="0 0 28.455 30.766">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25649" data-name="Rectangle 25649" width="28.455" height="30.766" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_22266" data-name="Group 22266" clip-path="url(#clip-path)">
+    <path id="Path_17637" data-name="Path 17637" d="M2.623,97.179a2.624,2.624,0,1,1,2.392-3.7c.033.074.062.148.088.222l-.786.276c-.019-.054-.04-.107-.063-.158a1.79,1.79,0,1,0-.009,1.5,1.44,1.44,0,0,0,.067-.172c.014-.038.02-.052.024-.068s.011-.041.016-.057a.37.37,0,0,0,.014-.054c.01-.043.014-.064.018-.088l.821.14c-.007.043-.015.083-.025.126s-.021.09-.035.133-.026.087-.042.131A2.377,2.377,0,0,1,5,95.674a2.641,2.641,0,0,1-2.373,1.5" transform="translate(0 -66.413)" fill="#00c0b7"/>
+    <path id="Path_17638" data-name="Path 17638" d="M74.807,0V1.516H71.726V0Z" transform="translate(-51.817 0)" fill="#40566b"/>
+    <path id="Path_17639" data-name="Path 17639" d="M30.728,16.7v3.794h-2V16.7Z" transform="translate(-20.753 -12.064)" fill="#40566b"/>
+    <path id="Path_17640" data-name="Path 17640" d="M26.768,35.665a4,4,0,0,1,0,8.008H10.422V41.827H26.768a2.157,2.157,0,1,0,0-4.313H7.21a4.008,4.008,0,0,1-4.005-4V24.2A4.011,4.011,0,0,1,7.21,20.2h3.079v1.849H7.21A2.159,2.159,0,0,0,5.054,24.2v9.307A2.157,2.157,0,0,0,7.21,35.665Z" transform="translate(-2.315 -14.592)" fill="#00c0b7"/>
+    <path id="Path_17641" data-name="Path 17641" d="M18.926,98.119v1.846h-3.95a1.872,1.872,0,0,0,.086-.219.869.869,0,0,0,.036-.114.881.881,0,0,0,.031-.117c.009-.033.014-.064.02-.1a2.066,2.066,0,0,0,.036-.394,2.188,2.188,0,0,0-.12-.716c-.022-.064-.047-.128-.075-.189Z" transform="translate(-10.819 -70.884)" fill="#e24c5d"/>
+    <path id="Path_17642" data-name="Path 17642" d="M53.8,10.734V16.8a5.273,5.273,0,0,1-5.274,5.274H39.055a3.118,3.118,0,0,1-3.12-3.117V8.58a3.119,3.119,0,0,1,3.12-3.12h9.471A5.273,5.273,0,0,1,53.8,10.734m-4.158,7.594V9.4a.616.616,0,0,0-.616-.616H45.791a.618.618,0,0,0-.616.616v8.932a.617.617,0,0,0,.616.616h3.234a.615.615,0,0,0,.616-.616" transform="translate(-25.961 -3.944)" fill="#e24c5d"/>
+    <path id="Path_17643" data-name="Path 17643" d="M73.69,26.969a.615.615,0,0,1-.616.616H69.84a.617.617,0,0,1-.616-.616V18.037a.618.618,0,0,1,.616-.616h3.234a.616.616,0,0,1,.616.616Z" transform="translate(-50.01 -12.586)" fill="#ddeff2"/>
+  </g>
+</svg>

package/src/components/animations/HomieAnimation.tsx

@@ -1,9 +1,9 @@
 import { useRive } from '@rive-app/react-canvas'
 const url = import.meta.env.VITE_RIVE_ASSETS
 
-export const HomieAnimation = () => {
+export const HomieAnimation = ({ animation = 'homie-v2' }) => {
   const { RiveComponent } = useRive({
-    src: `${url}/homie-v2.riv`,
+    src: `${url}/${animation}.riv`,
     stateMachines: 'State Machine 1',
     autoplay: true,
   })

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

@@ -17,6 +17,7 @@ import {
   NumberField,
   CurrencyField,
   TileBody,
+  CheckboxGroupField,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -163,6 +164,16 @@ export const DynamicForm = ({
                     canBeHidden={canBeHidden}
                   />
                 )
+              case 'checkbox-group':
+                return (
+                  <CheckboxGroupField
+                    key={id}
+                    id={id}
+                    children={children}
+                    value={value}
+                    icon={baseProps.icon}
+                  />
+                )
               case 'tile-body':
                 return (
                   <TileBody

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

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

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

@@ -30,6 +30,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
           type,
           value,
           icon,
+          link,
           options = [],
         }) => {
           const baseProps = {
@@ -102,18 +103,27 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
               return (
                 <TileCta
                   key={id}
+                  callback={callback}
+                  description={description}
+                  icon={icon}
+                  id={id}
+                  name={name}
                   type={type}
+                  link={link}
                   value={String(baseProps.value)}
-                  callback={callback}
                 />
               )
             case 'secondary-cta':
               return (
                 <TileCta
                   key={id}
+                  callback={callback}
+                  description={description}
+                  icon={icon}
+                  id={id}
+                  name={name}
                   type={type}
                   value={String(baseProps.value)}
-                  callback={callback}
                 />
               )
 

package/src/components/forms/dynamicForm/fields/index.ts

@@ -1,3 +1,4 @@
+export * from './CheckboxGroupField'
 export * from './CurrencyField'
 export * from './DateField'
 export * from './FieldDescription'

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

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

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

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

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -17,16 +17,12 @@ export const HomeMonitorSteps = ({
     'homeMonitorButton-4',
     'homeMonitorButton-5',
     'homeMonitorButton-6',
-    'menuItems',
   ]
   const [selectedId, setSelectedId] = useState<string>('')
   const isDisabled = menuItems.length === 0
 
   useComponentStyles({ ids, selectedId, zIndex: '2' })
-  const handleStepClick = (step: number) => {
-    onStepClick(step)
-    setSelectedId(`homeMonitorButton-${step}`)
-  }
+  const handleStepClick = (step: number) => onStepClick(step)
   return (
     <Flex gap="base">
       {homeAssistantSteps.map((step, index) => (
@@ -45,7 +41,7 @@ export const HomeMonitorSteps = ({
                 itemForm={index + 1}
                 menuItems={menuItems}
                 disabled={isDisabled}
-                onClick={() => setSelectedId('menuItems')}
+                onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
               />
             </Box>
           </Box>

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

@@ -7,7 +7,7 @@ export const HomefileMonitoring = () => {
     <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
       <Flex align="center">
         <Box boxSize="47px">
-          <HomieAnimation />
+          <HomieAnimation animation="homie-v3" />
         </Box>
         <Text>{t('homeAssistant.homeMonitoring')}</Text>
       </Flex>

package/src/components/homeBoard/HomeBoard.tsx

@@ -340,9 +340,14 @@ export const HomeBoard = () => {
                     <Notifications date="10-10-24" local="TX - Houston" />
                   </Flex>
                   <HomeMonitorSteps
-                    menuItems={menuMock}
+                    menuItems={[
+                      {
+                        label: 'Details',
+                        handleClick: handleHomeAssistantClick,
+                      },
+                    ]}
                     stepsWithAlerts={[]}
-                    onStepClick={handleHomeAssistantClick}
+                    onStepClick={() => null}
                   />
                 </Stack>
               </HomeMonitor>

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

@@ -47,6 +47,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -86,6 +87,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   heater: Heater,
   light: Light,
   plate: Plate,
+  'pressure-washer': PressureWasher,
   pool: Pool2,
   roof: Roof2,
   umbrella: Closet,

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

@@ -2,6 +2,7 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
+  | 'checkbox-group'
   | 'currency'
   | 'date'
   | 'email'
@@ -73,6 +74,7 @@ export type IconTypes =
   | 'mobile-drop'
   | 'light'
   | 'plate'
+  | 'pressure-washer'
   | 'house'
   | 'target'
   | 'title'

package/src/interfaces/forms/dynamicForm/fields/UIFields.interface.ts

@@ -1,4 +1,4 @@
-import { DynamicFormI, MenuItemI, PartnerFooterI } from '@/interfaces'
+import { DynamicFormI, MenuItemI, PartnerFooterI, ReportI } from '@/interfaces'
 
 export interface TileBodyLogoI {
   menuItems?: MenuItemI[]
@@ -17,8 +17,23 @@ export interface VerticalIconI {
   value: string
 }
 
-export interface TileCtaI {
-  callback?: (value: string) => void
+interface TileCtaCallbackI {
+  id: string
+  value: string
+  name?: string
+  link?: string
+  icon?: string
+  description?: string
+  canBeHidden?: boolean
+  visible?: boolean
+}
+
+export interface TileCtaI
+  extends Pick<
+    ReportI,
+    'id' | 'name' | 'link' | 'icon' | 'description' | 'canBeHidden' | 'visible'
+  > {
+  callback?: (form: TileCtaCallbackI) => void
   type: 'primary-cta' | 'secondary-cta'
   value: string
 }

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

@@ -13,6 +13,7 @@ export const formFieldsMock: ReportI[] = [
     visible: false,
     icon: 'barcode',
   },
+
   {
     id: faker.database.mongodbObjectId(),
     name: 'Receipt',
@@ -191,6 +192,72 @@ export const formFieldsMock: ReportI[] = [
     visible: false,
     icon: 'book',
   },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Services',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: 'Select the services you are requesting support for?',
+    type: 'checkbox-group',
+    visible: true,
+    icon: 'pressure-washer',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Pressure Washing',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Window Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: false,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Roof Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: false,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Holiday Lights',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Gutter Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Exterior Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: false,
+      },
+    ],
+  },
 ]
 
 export const contactFieldsMock: ReportI[] = [

package/src/stories/animations/HomieAnimation.stories.tsx

@@ -15,3 +15,4 @@ export default {
 } as Meta
 
 export const Homie = () => <HomieAnimation />
+export const HomieLarge = () => <HomieAnimation animation="homie-v3" />

package/src/stories/assets/Illustrations.stories.tsx

@@ -121,6 +121,7 @@ import {
   Plus,
   Pool,
   Pool2,
+  PressureWasher,
   Porch,
   Price,
   Profile,
@@ -360,6 +361,7 @@ export const Illustrations = () => {
       <IconWrapper icon={Plus} name="Plus" />
       <IconWrapper icon={Pool} name="Pool" />
       <IconWrapper icon={Pool2} name="Pool2" />
+      <IconWrapper icon={PressureWasher} name="PressureWasher" />
       <IconWrapper icon={Price} name="Price" />
       <IconWrapper icon={Profile} name="Profile" />
       <IconWrapper icon={ProgressReport} name="ProgressReport" />

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

@@ -9,8 +9,6 @@ export default {
   title: 'Components/Forms/DynamicForm',
   component: DynamicForm,
   args: {
-    callback: action('callback'),
-    onUpload: action('onUpload'),
     menuItems: menuMock,
     socialLinks: socialLinksMock,
     websiteUrl: 'http://www.audreyscheckdesign.com',
@@ -28,7 +26,12 @@ export const DynamicFormComponent = (args: DynamicFormI) => {
 export const DynamicUIFormComponent = (args: DynamicFormI) => {
   return (
     <Box m="base" w={['full', '320px']}>
-      <DynamicForm {...args} form={tileUIMock} showTitle={false} />
+      <DynamicForm
+        {...args}
+        form={tileUIMock}
+        showTitle={false}
+        callback={action('callback')}
+      />
     </Box>
   )
 }