@homefile/components-v2 2.2.4 → 2.3.0

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

@@ -127,6 +127,7 @@ import SixtyEight from './sixty-eight.svg';
 import SMS from './sms.svg';
 import Social from './social.svg';
 import SolarPanel from './solar-panel.svg';
+import Speaker from './speaker.svg';
 import Sprinkler from './sprinkler.svg';
 import Structure from './structure.svg';
 import Subscription from './subscription.svg';
@@ -154,7 +155,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, 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 { 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, Speaker, 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

@@ -127,6 +127,7 @@ import SixtyEight from './sixty-eight.svg';
 import SMS from './sms.svg';
 import Social from './social.svg';
 import SolarPanel from './solar-panel.svg';
+import Speaker from './speaker.svg';
 import Sprinkler from './sprinkler.svg';
 import Structure from './structure.svg';
 import Subscription from './subscription.svg';
@@ -154,7 +155,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, 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 { 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, Speaker, 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

@@ -127,6 +127,7 @@ import SixtyEight from './sixty-eight.svg'
 import SMS from './sms.svg'
 import Social from './social.svg'
 import SolarPanel from './solar-panel.svg'
+import Speaker from './speaker.svg'
 import Sprinkler from './sprinkler.svg'
 import Structure from './structure.svg'
 import Subscription from './subscription.svg'
@@ -285,6 +286,7 @@ export {
   SMS,
   Social,
   SolarPanel,
+  Speaker,
   Sprinkler,
   Structure,
   Subscription,

package/dist/assets/images/speaker.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.583" height="23.521" viewBox="0 0 31.583 23.521">
+  <g id="Group_23052" data-name="Group 23052" transform="translate(-2614.222 -2095.171)">
+    <g id="Group_23003" data-name="Group 23003" transform="translate(1755.841 2072.773)">
+      <rect id="Rectangle_2034" data-name="Rectangle 2034" width="4.205" height="0.863" transform="translate(885.758 33.849)" fill="#00c0b7"/>
+      <rect id="Rectangle_2035" data-name="Rectangle 2035" width="4.205" height="0.863" transform="matrix(0.707, -0.707, 0.707, 0.707, 884.549, 29.857)" fill="#00c0b7"/>
+      <rect id="Rectangle_2036" data-name="Rectangle 2036" width="0.863" height="4.205" transform="translate(884.549 38.708) rotate(-45)" fill="#00c0b7"/>
+    </g>
+    <g id="Group_23007" data-name="Group 23007" transform="translate(1755.8 2072.191)">
+      <path id="Path_18016" data-name="Path 18016" d="M24.851,50.454l-.768-.044.03-.451c.016-.236.031-.462.05-.674.268-3.138,1.771-6.043,3.83-7.4l.423.642c-1.87,1.231-3.238,3.91-3.487,6.823-.019.209-.034.429-.049.659Z" transform="translate(851.091 -10.419)" fill="#fff"/>
+      <path id="Path_4022" data-name="Path 4022" d="M5810.5-622.634a1.425,1.425,0,0,1-.474-.084l-5.457-1.9a2.08,2.08,0,0,1-1.318-1.856v-2h1.012v2a1.069,1.069,0,0,0,.641.9l5.458,1.9a.278.278,0,0,0,.234,0,.281.281,0,0,0,.074-.221v-2h1.012v2a1.252,1.252,0,0,1-.5,1.046A1.163,1.163,0,0,1,5810.5-622.634Z" transform="translate(-4939.069 668.243)" fill="#40566b"/>
+      <rect id="Rectangle_2033" data-name="Rectangle 2033" width="3.55" height="6.261" transform="translate(858.421 31.433)" fill="#40566b"/>
+      <path id="Path_4023" data-name="Path 4023" d="M5868.355-682.568v20.354a1.5,1.5,0,0,1-1.4,1.583,1.322,1.322,0,0,1-.99-.463,1.706,1.706,0,0,1-.409-1.12v-20.354a1.5,1.5,0,0,1,1.4-1.583,1.324,1.324,0,0,1,.991.463A1.684,1.684,0,0,1,5868.355-682.568Z" transform="translate(-4985.622 707.13)" fill="#40566b"/>
+      <path id="Path_4024" data-name="Path 4024" d="M5812.487-658.645v.276l-7.832-3.131-7.419-2.964-2.71-1.084v-7.179l17.961-6.843v20.926Z" transform="translate(-4932.554 703.709)" fill="#abe188"/>
+      <path id="Intersection_1" data-name="Intersection 1" d="M10.129,6.4,2.711,3.811,0,2.866V0H17.961V9.128Z" transform="translate(861.972 36.212)" fill="#8dc966" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    </g>
+  </g>
+</svg>

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

@@ -181,7 +181,8 @@
     "message2": "browse"
   },
   "dynamicForm": {
-    "item": "Name this item"
+    "item": "Name this item",
+    "myRating": "My Rating"
   },
   "feedback": {
     "alt": "Feedback sent",
@@ -321,6 +322,7 @@
     "required2": "*Required",
     "return": "Back",
     "search": "Find",
+    "sortBy": "Sort by",
     "street": "Street",
     "number": "Number",
     "submit": "Submit",
@@ -435,6 +437,9 @@
     },
     "viewDetails": "View All"
   },
+  "homeItems": {
+    "title": "Viewing Home Item"
+  },
   "homeHeader": {
     "backBtn": "Return to Launchpad"
   },
@@ -449,10 +454,19 @@
       "unopened": "Unopened"
     }
   },
+  "householdItems": {
+    "headers": {
+      "itemName": "An item name",
+      "placeholder": "Name this item"
+    }
+  },
   "images": {
     "altIcon": "icon",
     "altImage": "image"
   },
+  "inbox": {
+    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to "
+  },
   "launchpad": {
     "menu": {
       "profile": "My Account",
@@ -607,6 +621,24 @@
     "create": "Create Password",
     "title": "Please enter your new password."
   },
+  "notifications": {
+    "status": {
+      "added": "Added",
+      "removed": "Removed",
+      "shared": "Shared",
+      "updated": "Updated"
+    },
+    "types": {
+      "contact": "Contact",
+      "file": "File",
+      "folder": "Folder",
+      "receipt": "Receipt",
+      "user": "User",
+      "tile": "Tile",
+      "payment": "Payment"
+    },
+    "title": "Notifications"
+  },
   "partner": {
     "aphw": {
       "description": "APHW’s home warranty plans and cost cover your major home appliances and systems.",
@@ -859,12 +891,6 @@
     },
     "placeholder": "Insert document name"
   },
-  "householdItems": {
-    "headers": {
-      "itemName": "An item name",
-      "placeholder": "Name this item"
-    }
-  },
   "shareHome": {
     "accountTypes": "Member,Contributor,Manager",
     "btInvite": "Invite",
@@ -957,7 +983,9 @@
     "homeAssistant": "Home AI Assistant",
     "homeCard": "Home card",
     "homeItem": "Home item",
+    "inbox": "Inbox",
     "more": "More options",
+    "notifications": "Notifications",
     "myHomes": "My homes",
     "partner": "Partner",
     "propertyTaxes": "Property taxes",

package/dist/components/appBar/ContactList.d.ts

@@ -1,2 +1,2 @@
-import { PeopleConnectedI } from '../../interfaces';
-export declare const ContactList: ({ onClick, total }: PeopleConnectedI) => import("react/jsx-runtime").JSX.Element;
+import { AppBarIconI } from '../../interfaces';
+export declare const ContactList: ({ onClick, total }: AppBarIconI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/appBar/NotificationsReminder.d.ts

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

package/dist/components/appBar/NotificationsReminder.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Img, Tooltip } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
+import { Speaker } from '../../assets/images';
+import { NumberBadge } from '..';
+import { useWindowDimensions } from '../../hooks';
+import { MOBILE_WIDTH } from '../../utils';
+export const NotificationsReminder = ({ onClick, total }) => {
+    const { windowDimensions: { width }, } = useWindowDimensions();
+    const isMobile = width < MOBILE_WIDTH;
+    return (_jsx(Tooltip, { label: t('tooltips.notifications'), children: _jsx(Box, { id: "notificationsRemember", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Speaker, "aria-label": t('tooltips.notifications'), h: "26px", w: "auto" }), !isMobile && (_jsx(NumberBadge, { total: total, background: "linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)", backgroundSize: 100, animation: `${bgGradient} 6s linear infinite` }))] }) }) }));
+};
+const bgGradient = keyframes `
+ 0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;

package/dist/components/appBar/PeopleConnected.d.ts

@@ -1,2 +1,2 @@
-import { PeopleConnectedI } from '../../interfaces';
-export declare const PeopleConnected: ({ onClick, total }: PeopleConnectedI) => import("react/jsx-runtime").JSX.Element;
+import { AppBarIconI } from '../../interfaces';
+export declare const PeopleConnected: ({ onClick, total }: AppBarIconI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/appBar/Trash.d.ts

@@ -1,2 +1,2 @@
-import { PeopleConnectedI } from '../../interfaces';
-export declare const Trash: ({ onClick, total }: PeopleConnectedI) => import("react/jsx-runtime").JSX.Element;
+import { AppBarIconI } from '../../interfaces';
+export declare const Trash: ({ onClick, total }: AppBarIconI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/appBar/index.d.ts

@@ -2,6 +2,7 @@ export * from './AppBar';
 export * from './BarDivider';
 export * from './ContactList';
 export * from './HomefileLogo';
+export * from './NotificationsReminder';
 export * from './PeopleConnected';
 export * from './StorageUsed';
 export * from './TourButton';

package/dist/components/appBar/index.js

@@ -2,6 +2,7 @@ export * from './AppBar';
 export * from './BarDivider';
 export * from './ContactList';
 export * from './HomefileLogo';
+export * from './NotificationsReminder';
 export * from './PeopleConnected';
 export * from './StorageUsed';
 export * from './TourButton';

package/dist/components/badge/NumberBadge.d.ts

@@ -1,2 +1,2 @@
 import { NumberBadgeI } from '../../interfaces';
-export declare const NumberBadge: ({ color, bg, px, py, total, }: NumberBadgeI) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberBadge: ({ color, bg, px, py, total, ...props }: NumberBadgeI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/NumberBadge.js

@@ -1,6 +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 { Center, Text } from '@chakra-ui/react';
-export const NumberBadge = ({ color = 'neutral.white', bg, px = '1', py = '1', total, }) => {
+export const NumberBadge = (_a) => {
+    var { color = 'neutral.white', bg, px = '1', py = '1', total } = _a, props = __rest(_a, ["color", "bg", "px", "py", "total"]);
     const bgColor = bg !== null && bg !== void 0 ? bg : 'blue.4';
-    return (_jsx(Center, { bg: bgColor, px: px, py: py, borderRadius: "4px", h: "fit-content", minW: "1.3rem", children: _jsx(Text, { fontWeight: "semibold", color: color, fontSize: "xs", lineHeight: "1", children: total }) }));
+    return (_jsx(Center, Object.assign({ bg: bgColor, px: px, py: py, borderRadius: "4px", h: "fit-content", minW: "1.3rem" }, props, { children: _jsx(Text, { fontWeight: "semibold", color: color, fontSize: "xs", lineHeight: "1", children: total }) })));
 };

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

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

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

@@ -18,7 +18,7 @@ import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField,
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    var { callback, form: fields, menuItems, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "form", "menuItems", "onUpload", "showTitle", "title", "uploadingFieldId"]);
+    var { callback, displayImages, form: fields, menuItems, onRemoveImage, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onRemoveImage", "onUpload", "showTitle", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
     return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title ? title : 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;
@@ -59,7 +59,7 @@ export const DynamicForm = (_a) => {
                             case 'switch':
                                 return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(SwitchField, Object.assign({}, baseProps, { description: description })) })));
                             case 'file':
-                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(FileField, { icon: baseProps.icon, description: description, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id }) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(FileField, { icon: baseProps.icon, description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages }) })));
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':

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

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

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Image, Stack, Text } from '@chakra-ui/react';
-import { DragDropArea } from '../../..';
+import { AspectRatio, Box, Flex, Grid, IconButton, Image, Stack, Text, } from '@chakra-ui/react';
+import { Close, DragDropArea } from '../../..';
 import { useFilesUploader } from '../../../../hooks';
-export const FileField = ({ description, icon, onUpload, uploading = false, }) => {
-    const { errorMessage, getInputProps, getRootProps } = useFilesUploader({
+import { colors } from '../../../../theme/colors';
+export const FileField = ({ description, icon, onRemove, onUpload, uploading = false, displayImages = [], }) => {
+    const { errorMessage, getInputProps, getRootProps, thumbnails } = useFilesUploader({
         onUpload,
         uploading,
+        displayImages,
     });
-    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" })] })] }));
+    const isStringArray = Array.isArray(thumbnails) && typeof thumbnails[0] === 'string';
+    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" }), _jsx(Grid, { gridTemplateColumns: `repeat(auto-fill, minmax(22px, 1fr))`, gap: "base", children: isStringArray &&
+                            thumbnails.map((file, index) => (_jsxs(Box, { position: "relative", children: [_jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(file), icon: _jsx(Close, { size: 11, stroke: colors.error['2'] }), disabled: uploading, position: "absolute", bg: "neutral.white", p: "0.5", borderRadius: "full", top: "-2", right: "-2", zIndex: "1" }), _jsx(AspectRatio, { maxW: "100%", ratio: 1, children: _jsx(Image, { src: file, objectFit: "cover", alt: `file-${index}` }) })] }, file))) })] })] }));
 };

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.d.ts

@@ -1,2 +1,2 @@
-import { DynamicFormI } from '../../../interfaces';
-export declare const ReadOnlyDynamicForm: ({ form: fields, }: Pick<DynamicFormI, "form">) => import("react/jsx-runtime").JSX.Element;
+import { ReadOnlyDynamicFormI } from '../../../interfaces';
+export declare const ReadOnlyDynamicForm: ({ form: fields, onEdit, }: ReadOnlyDynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js

@@ -1,8 +1,9 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
-import { ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
+import { ReadOnlyAppliances, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
 import { fieldIcons } from '../../../helpers';
-export const ReadOnlyDynamicForm = ({ form: fields, }) => {
+export const ReadOnlyDynamicForm = ({ form: fields, onEdit = () => { }, }) => {
     return (_jsx(Box, { bg: "lightBlue.1", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { children = [], icon, id, name, type, value } = field;
             const baseProps = {
@@ -31,6 +32,8 @@ export const ReadOnlyDynamicForm = ({ form: fields, }) => {
                     return _jsx(ReadOnlyGrid, { children: children }, id);
                 case 'group':
                     return _jsx(ReadOnlyGroup, { children: children }, id);
+                case 'appliances':
+                    return _createElement(ReadOnlyAppliances, Object.assign({}, field, { key: id, onEdit: onEdit }));
                 default:
                     return null;
             }

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyAppliancesI } from '../../../../../interfaces';
+export declare const ReadOnlyAppliances: ({ description, id, name, children, onEdit, value, }: ReadOnlyAppliancesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Flex, Stack, IconButton, Box } from '@chakra-ui/react';
+import { ReadOnlyHomeItemRating, Edit, ReadOnlyHomeItemImages, ReadOnlyHomeItemText, } from '../../../..';
+import { colors } from '../../../../../theme/colors';
+export const ReadOnlyAppliances = ({ description, id, name, children, onEdit, value, }) => {
+    const rating = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'rating');
+    const images = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'images');
+    return (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) })] }), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
+                                    const baseProps = {
+                                        key: `${id}-${name}-${value}-${type}`,
+                                        id,
+                                        value,
+                                        type,
+                                        name,
+                                    };
+                                    switch (type) {
+                                        case 'text':
+                                            return _jsx(ReadOnlyHomeItemText, Object.assign({}, baseProps));
+                                        default:
+                                            return null;
+                                    }
+                                }) })] })] })] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -0,0 +1,74 @@
+import { Text, Flex, Stack, IconButton, Box } from '@chakra-ui/react'
+import {
+  ReadOnlyHomeItemRating,
+  Edit,
+  ReadOnlyHomeItemImages,
+  ReadOnlyHomeItemText,
+} from '@/components'
+import { ReadOnlyAppliancesI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+
+export const ReadOnlyAppliances = ({
+  description,
+  id,
+  name,
+  children,
+  onEdit,
+  value,
+}: ReadOnlyAppliancesI) => {
+  const rating = children?.find(({ type }) => type === 'rating')
+  const images = children?.find(({ type }) => type === 'images')
+  return (
+    <Stack spacing="base" p="base">
+      <Flex justify="space-between">
+        <Text fontSize="xs" textTransform="uppercase">
+          {name}
+        </Text>
+        <IconButton
+          aria-label="Edit appliance"
+          variant="ghost"
+          w="fit-content"
+          icon={<Edit size={18} stroke={colors.blue[3]} />}
+          onClick={() => onEdit(id)}
+        />
+      </Flex>
+      <Flex gap="base">
+        <ReadOnlyHomeItemImages {...images} />
+        <Stack spacing="4" flex="1">
+          <ReadOnlyHomeItemRating {...rating} />
+          <Stack spacing="base">
+            <Text fontSize="22px" fontWeight="semibold">
+              {value}
+            </Text>
+            <Text fontFamily="secondary" fontSize="sm">
+              {description}
+            </Text>
+          </Stack>
+          <Box
+            flex="1"
+            borderBottom="1px dashed"
+            borderColor="lightBlue.6"
+            h="1px"
+          />
+          <Box>
+            {children?.map(({ id, name, value, type }) => {
+              const baseProps = {
+                key: `${id}-${name}-${value}-${type}`,
+                id,
+                value,
+                type,
+                name,
+              }
+              switch (type) {
+                case 'text':
+                  return <ReadOnlyHomeItemText {...baseProps} />
+                default:
+                  return null
+              }
+            })}
+          </Box>
+        </Stack>
+      </Flex>
+    </Stack>
+  )
+}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../../interfaces';
+export declare const ReadOnlyHomeItemImages: (props: Partial<ReportI>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Image, SimpleGrid, Stack } from '@chakra-ui/react';
+import { useState } from 'react';
+export const ReadOnlyHomeItemImages = (props) => {
+    const images = props.value;
+    const [mainImage, setMainImage] = useState(images === null || images === void 0 ? void 0 : images[0]);
+    if (!images)
+        return null;
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px" }), _jsx(SimpleGrid, { columns: 4, spacing: "base", children: images === null || images === void 0 ? void 0 : images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setMainImage(image) }))) })] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.tsx

@@ -0,0 +1,28 @@
+import { ReportI } from '@/interfaces'
+import { Box, Image, SimpleGrid, Stack } from '@chakra-ui/react'
+import { useState } from 'react'
+
+export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
+  const images = props.value as string[]
+  const [mainImage, setMainImage] = useState(images?.[0])
+
+  if (!images) return null
+
+  return (
+    <Stack spacing="base">
+      <Image src={mainImage} alt="home item" boxSize="174px" />
+      <SimpleGrid columns={4} spacing="base">
+        {images?.map((image) => (
+          <Box
+            as="button"
+            backgroundImage={image}
+            backgroundSize="cover"
+            backgroundPosition="center"
+            boxSize="34px"
+            onClick={() => setMainImage(image)}
+          />
+        ))}
+      </SimpleGrid>
+    </Stack>
+  )
+}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemRating.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../../interfaces';
+export declare const ReadOnlyHomeItemRating: ({ id, value }: Partial<ReportI>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemRating.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { Star } from '../../../..';
+import { colors } from '../../../../../theme/colors';
+export const ReadOnlyHomeItemRating = ({ id, value }) => {
+    if (!value)
+        return null;
+    const count = Number(value) - 1;
+    return (_jsxs(Box, { children: [_jsx(Text, { fontSize: "10px", children: t('dynamicForm.myRating') }), _jsx(Flex, { gap: "1", children: Array.from({ length: 5 }).map((_, index) => {
+                    const starColor = count >= index ? colors.yellow['1'] : colors.gray['1'];
+                    return _jsx(Star, { size: 13, stroke: starColor }, `${id}-${index}`);
+                }) })] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemRating.tsx

@@ -0,0 +1,22 @@
+import { t } from 'i18next'
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { Star } from '@/components'
+import { ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+
+export const ReadOnlyHomeItemRating = ({ id, value }: Partial<ReportI>) => {
+  if (!value) return null
+  const count = Number(value) - 1
+  return (
+    <Box>
+      <Text fontSize="10px">{t('dynamicForm.myRating')}</Text>
+      <Flex gap="1">
+        {Array.from({ length: 5 }).map((_, index) => {
+          const starColor: string =
+            count >= index ? colors.yellow['1'] : colors.gray['1']
+          return <Star size={13} key={`${id}-${index}`} stroke={starColor} />
+        })}
+      </Flex>
+    </Box>
+  )
+}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../../interfaces';
+export declare const ReadOnlyHomeItemText: ({ name, value }: Partial<ReportI>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from '@chakra-ui/react';
+export const ReadOnlyHomeItemText = ({ name, value }) => {
+    if (!name)
+        return null;
+    return (_jsxs(Flex, { gap: "base", children: [_jsx(Box, { w: "20%", children: _jsx(CustomText, { children: `${name}:` }) }), _jsx(CustomText, { children: String(value) })] }));
+};
+const CustomText = ({ children = '' }) => {
+    return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: children }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.tsx

@@ -0,0 +1,22 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyHomeItemText = ({ name, value }: Partial<ReportI>) => {
+  if (!name) return null
+  return (
+    <Flex gap="base">
+      <Box w="20%">
+        <CustomText>{`${name}:`}</CustomText>
+      </Box>
+      <CustomText>{String(value)}</CustomText>
+    </Flex>
+  )
+}
+
+const CustomText = ({ children = '' }) => {
+  return (
+    <Text fontSize="sm" fontFamily="secondary">
+      {children}
+    </Text>
+  )
+}

package/dist/components/forms/readOnly/fields/homeItem/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ReadOnlyAppliances';
+export * from './ReadOnlyHomeItemImages';
+export * from './ReadOnlyHomeItemRating';
+export * from './ReadOnlyHomeItemText';

package/dist/components/forms/readOnly/fields/homeItem/index.js

@@ -0,0 +1,4 @@
+export * from './ReadOnlyAppliances';
+export * from './ReadOnlyHomeItemImages';
+export * from './ReadOnlyHomeItemRating';
+export * from './ReadOnlyHomeItemText';

package/dist/components/forms/readOnly/fields/homeItem/index.ts

@@ -0,0 +1,4 @@
+export * from './ReadOnlyAppliances'
+export * from './ReadOnlyHomeItemImages'
+export * from './ReadOnlyHomeItemRating'
+export * from './ReadOnlyHomeItemText'

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

@@ -1,3 +1,4 @@
+export * from './homeItem';
 export * from './ReadOnlyDate';
 export * from './ReadOnlyImage';
 export * from './ReadOnlyGrid';

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

@@ -1,3 +1,4 @@
+export * from './homeItem';
 export * from './ReadOnlyDate';
 export * from './ReadOnlyImage';
 export * from './ReadOnlyGrid';