@homefile/components-v2 1.0.2 → 1.0.3

package/dist/components/sendDocument/CreateDocumentContent.js

@@ -1,29 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreateDocumentContent = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var images_1 = require("../../assets/images");
-var helpers_1 = require("../../helpers");
-var CreateDocumentContent = function (_a) {
-    var handleDateRange = _a.handleDateRange, handleSelectHome = _a.handleSelectHome, _b = _a.homes, homes = _b === void 0 ? null : _b, _c = _a.initialHome, initialHome = _c === void 0 ? null : _c, onCloseButton = _a.onCloseButton;
-    var _d = (0, react_1.useState)('Progress Report  - Jan 12-16 2022'), projectName = _d[0], setProjectName = _d[1];
-    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
-    var button3 = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, useDisclosure, } from '@chakra-ui/react';
+import { CreateDocumentHeader, DocumentNameHeader, DocumentPreview, PanelHeader, TabsHeader, FooterDrawer, FooterButtons, RightPanel, } from '..';
+import { ProgressReport } from '../../assets/images';
+import { createDocList, ButtonsFooter, documentDB } from '../../helpers';
+export const CreateDocumentContent = ({ handleDateRange, handleSelectHome, homes = null, initialHome = null, onCloseButton, }) => {
+    const [projectName, setProjectName] = useState('Progress Report  - Jan 12-16 2022');
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const button3 = {
         buttonStyle: 'secondaryFooter',
-        label: (0, i18next_1.t)('createDocument.buttons.preview'),
+        label: t('createDocument.buttons.preview'),
         onClick: onOpen,
     };
-    var companyInfo = helpers_1.documentDB.companyInfo, date = helpers_1.documentDB.date, document = helpers_1.documentDB.document, form = helpers_1.documentDB.form, home = helpers_1.documentDB.home, images = helpers_1.documentDB.images, userInfo = helpers_1.documentDB.userInfo;
-    return ((0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { bg: "lightBlue.1", children: [(0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { p: "0", children: (0, jsx_runtime_1.jsx)(components_1.PanelHeader, { handleCloseButton: onCloseButton, icon: images_1.ProgressReport, title: (0, i18next_1.t)('createDocument.title') }) }), (0, jsx_runtime_1.jsxs)(react_2.DrawerBody, { p: "0", children: [(0, jsx_runtime_1.jsx)(components_1.CreateDocumentHeader, { handleDateRange: function (dateRange) {
-                            return handleDateRange && handleDateRange(dateRange);
-                        }, handleSelectHome: function (homeForm) {
-                            return handleSelectHome && handleSelectHome(homeForm);
-                        }, homes: homes, initialHome: initialHome }), (0, jsx_runtime_1.jsx)(components_1.DocumentNameHeader, { handleChange: function (event) {
+    const { companyInfo, date, document, form, home, images, userInfo } = documentDB;
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onCloseButton, icon: ProgressReport, title: t('createDocument.title') }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(CreateDocumentHeader, { handleDateRange: (dateRange) => handleDateRange && handleDateRange(dateRange), handleSelectHome: (homeForm) => handleSelectHome && handleSelectHome(homeForm), homes: homes, initialHome: initialHome }), _jsx(DocumentNameHeader, { handleChange: (event) => {
                             setProjectName(event.target.value);
-                        }, value: projectName }), (0, jsx_runtime_1.jsx)(components_1.TabsHeader, { tabList: helpers_1.createDocList })] }), (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { p: "0", zIndex: "dropdown", children: (0, jsx_runtime_1.jsx)(components_1.FooterDrawer, { children: (0, jsx_runtime_1.jsx)(components_1.FooterButtons, { button1: helpers_1.ButtonsFooter.button1, button3: button3 }), isOpen: true }) }), (0, jsx_runtime_1.jsx)(components_1.RightPanel, { children: (0, jsx_runtime_1.jsx)(components_1.DocumentPreview, { companyInfo: companyInfo, date: date, document: document, form: form, handleClose: onClose, handleSend: function () { return null; }, home: home, images: images, userInfo: userInfo }), isOpen: isOpen, onClose: onClose, size: "lg" })] }));
+                        }, value: projectName }), _jsx(TabsHeader, { tabList: createDocList })] }), _jsx(DrawerFooter, { p: "0", zIndex: "dropdown", children: _jsx(FooterDrawer, { children: _jsx(FooterButtons, { button1: ButtonsFooter.button1, button3: button3 }), isOpen: true }) }), _jsx(RightPanel, { children: _jsx(DocumentPreview, { companyInfo: companyInfo, date: date, document: document, form: form, handleClose: onClose, handleSend: () => null, home: home, images: images, userInfo: userInfo }), isOpen: isOpen, onClose: onClose, size: "lg" })] }));
 };
-exports.CreateDocumentContent = CreateDocumentContent;

package/dist/components/sendDocument/CreateDocumentHeader.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreateDocumentHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var utils_1 = require("../../utils");
-var CreateDocumentHeader = function (_a) {
-    var _b = _a.initialHome, initialHome = _b === void 0 ? null : _b, handleDateRange = _a.handleDateRange, _c = _a.handleSelectHome, handleSelectHome = _c === void 0 ? function () { return null; } : _c, _d = _a.homes, homes = _d === void 0 ? null : _d;
-    var width = (0, hooks_1.useWindowDimensions)().windowDimensions.width;
-    var isMobile = width < utils_1.MOBILE_WIDTH;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "lightBlue.1", py: "2", pl: "base", w: "100%", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: "center", gap: "base", children: [homes && initialHome ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Show, { breakpoint: "(min-width: 500px)", children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: (0, i18next_1.t)('sendDocument.headers.selectHome') }) }), (0, jsx_runtime_1.jsx)(components_1.SelectInput, { handleClick: handleSelectHome, initialValue: initialHome, items: homes, width: isMobile ? '7rem' : '10rem' })] })) : ((0, jsx_runtime_1.jsx)(react_1.Box, {})), (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Show, { breakpoint: "(min-width: 400px)", children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: (0, i18next_1.t)('sendDocument.headers.dateRange') }) }), (0, jsx_runtime_1.jsx)(components_1.DateRangePicker, { handleClick: handleDateRange })] })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Show, Text } from '@chakra-ui/react';
+import { DateRangePicker, SelectInput } from '..';
+import { useWindowDimensions } from '../../hooks';
+import { MOBILE_WIDTH } from '../../utils';
+export const CreateDocumentHeader = ({ initialHome = null, handleDateRange, handleSelectHome = () => null, homes = null, }) => {
+    const { windowDimensions: { width }, } = useWindowDimensions();
+    const isMobile = width < MOBILE_WIDTH;
+    return (_jsx(Box, { bg: "lightBlue.1", py: "2", pl: "base", w: "100%", children: _jsxs(Flex, { justify: "space-between", align: "center", gap: "base", children: [homes && initialHome ? (_jsxs(Flex, { gap: "2", align: "center", children: [_jsx(Show, { breakpoint: "(min-width: 500px)", children: _jsx(Text, { variant: "info", children: t('sendDocument.headers.selectHome') }) }), _jsx(SelectInput, { handleClick: handleSelectHome, initialValue: initialHome, items: homes, width: isMobile ? '7rem' : '10rem' })] })) : (_jsx(Box, {})), _jsxs(Flex, { gap: "2", align: "center", children: [_jsx(Show, { breakpoint: "(min-width: 400px)", children: _jsx(Text, { variant: "info", children: t('sendDocument.headers.dateRange') }) }), _jsx(DateRangePicker, { handleClick: handleDateRange })] })] }) }));
 };
-exports.CreateDocumentHeader = CreateDocumentHeader;

package/dist/components/sendDocument/DocumentDetailsTab.js

@@ -1,30 +1,11 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DocumentDetailsTab = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var helpers_1 = require("../../helpers");
-var DocumentDetailsTab = function () {
-    var _a = (0, react_1.useState)(helpers_1.TemplateFields), inputs = _a[0], setInputs = _a[1];
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: "base", w: "full", h: "100vh", bg: "neutral.white", children: helpers_1.templateForm === null || helpers_1.templateForm === void 0 ? void 0 : helpers_1.templateForm.map(function (_a, index) {
-            var label = _a.label, id = _a.id;
-            return ((0, jsx_runtime_1.jsxs)(react_2.Stack, { mt: index === 0 ? '' : '6', children: [(0, jsx_runtime_1.jsx)(react_2.Text, { children: label }), (0, jsx_runtime_1.jsx)(components_1.TextInput, { handleChange: function (event) {
-                            var _a;
-                            return setInputs(__assign(__assign({}, inputs), (_a = {}, _a[event.target.id] = event.target.value, _a)));
-                        }, id: id, placeholder: "Enter Content", value: inputs[id] })] }, id));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Stack, Text } from '@chakra-ui/react';
+import { TextInput } from '..';
+import { templateForm, TemplateFields } from '../../helpers';
+export const DocumentDetailsTab = () => {
+    const [inputs, setInputs] = useState(TemplateFields);
+    return (_jsx(Box, { p: "base", w: "full", h: "100vh", bg: "neutral.white", children: templateForm === null || templateForm === void 0 ? void 0 : templateForm.map(({ label, id }, index) => {
+            return (_jsxs(Stack, { mt: index === 0 ? '' : '6', children: [_jsx(Text, { children: label }), _jsx(TextInput, { handleChange: (event) => setInputs(Object.assign(Object.assign({}, inputs), { [event.target.id]: event.target.value })), id: id, placeholder: "Enter Content", value: inputs[id] })] }, id));
         }) }));
 };
-exports.DocumentDetailsTab = DocumentDetailsTab;

package/dist/components/sendDocument/DocumentNameHeader.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DocumentNameHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var utils_1 = require("../../utils");
-var DocumentNameHeader = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? '' : _b, handleChange = _a.handleChange, _c = _a.value, value = _c === void 0 ? '' : _c;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "lightBlue.2", py: "2", px: "base", w: "100%", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", minW: "fit-content", children: (0, i18next_1.t)('sendDocument.headers.documentName') }), (0, jsx_runtime_1.jsx)(components_1.TextInput, { errorMessage: "".concat((0, i18next_1.t)('sendDocument.headers.documentName'), " ").concat((0, i18next_1.t)('forms.required')), hasError: (0, utils_1.isEmptyField)(value), id: id, handleChange: handleChange, placeholder: (0, i18next_1.t)('sendDocument.placeholder'), value: value })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { TextInput } from '..';
+import { isEmptyField } from '../../utils';
+export const DocumentNameHeader = ({ id = '', handleChange, value = '', }) => {
+    return (_jsx(Box, { bg: "lightBlue.2", py: "2", px: "base", w: "100%", children: _jsxs(Flex, { gap: "2", align: "center", children: [_jsx(Text, { variant: "info", minW: "fit-content", children: t('sendDocument.headers.documentName') }), _jsx(TextInput, { errorMessage: `${t('sendDocument.headers.documentName')} ${t('forms.required')}`, hasError: isEmptyField(value), id: id, handleChange: handleChange, placeholder: t('sendDocument.placeholder'), value: value })] }) }));
 };
-exports.DocumentNameHeader = DocumentNameHeader;

package/dist/components/sendDocument/DocumentPreview.js

@@ -1,24 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DocumentPreview = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var react_spinners_1 = require("react-spinners");
-var components_1 = require("..");
-var images_1 = require("../../assets/images");
-var hooks_1 = require("../../hooks");
-var storageUrl = process.env.STORAGE_URL;
-var DocumentPreview = function (_a) {
-    var companyInfo = _a.companyInfo, date = _a.date, document = _a.document, form = _a.form, handleClose = _a.handleClose, handleSend = _a.handleSend, home = _a.home, images = _a.images, _b = _a.loading, loading = _b === void 0 ? false : _b, userInfo = _a.userInfo;
-    var _c = (0, hooks_1.useDocumentPreview)({ handleClose: handleClose, handleSend: handleSend }), ButtonsFooter = _c.ButtonsFooter, columnsDesktop = _c.columnsDesktop, columnsMobile = _c.columnsMobile, columnWidth = _c.columnWidth, contentRef = _c.contentRef;
-    return ((0, jsx_runtime_1.jsxs)(react_1.DrawerContent, { bg: "lightBlue.1", children: [(0, jsx_runtime_1.jsxs)(react_1.DrawerHeader, { p: "0", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { w: "full", ref: contentRef }), (0, jsx_runtime_1.jsx)(components_1.PanelHeader, { handleCloseButton: handleClose, icon: images_1.ProgressReport, title: (0, i18next_1.t)('createDocument.preview.title') })] }), (0, jsx_runtime_1.jsx)(react_1.DrawerBody, { p: "base", children: loading ? ((0, jsx_runtime_1.jsx)(react_1.Center, { h: "full", pb: "8rem", children: (0, jsx_runtime_1.jsx)(react_spinners_1.BeatLoader, { color: "gray", size: 8 }) })) : ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "base", mb: "8rem", children: [(0, jsx_runtime_1.jsx)(components_1.BackCircleButton, { onClick: handleClose }), (0, jsx_runtime_1.jsx)(react_1.Container, { minW: "full", p: "base", children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "8", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: "center", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [document && (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "semibold", children: document }), home && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: home })] }), (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.logoUrl) && ((0, jsx_runtime_1.jsx)(react_1.Image, { src: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.logoUrl, maxH: "80px", alt: (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.name) || '' }))] }), date && ((0, jsx_runtime_1.jsx)(react_1.Center, { h: "2.5rem", w: "full", bg: "green.1", children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: "neutral.white", fontWeight: "semibold", children: date }) })), form === null || form === void 0 ? void 0 : form.map(function (item) {
-                                        return (item.type === 'string' || 'text') && ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "semibold", children: item.name }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", lineHeight: "1.2rem", children: item.value })] }, item.name));
-                                    }), (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: [columnsMobile, columnsDesktop], spacing: "base", children: images === null || images === void 0 ? void 0 : images.map(function (_a) {
-                                            var bucketName = _a.bucketName, description = _a.description, extension = _a.extension, fileName = _a.fileName, _id = _a._id;
-                                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: bucketName
-                                                    ? "".concat(storageUrl, "/").concat(bucketName, "/").concat(fileName, ".").concat(extension)
-                                                    : '', alt: description, boxSize: columnWidth, objectFit: "cover" }, _id));
-                                        }) }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "base", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: (0, i18next_1.t)('createDocument.preview.message') }), ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone)) && ((0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: (0, i18next_1.t)('createDocument.preview.message2') }))] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", mb: "4", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.email })] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: ['column', 'row'], gap: "base", justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.name }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.address }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.phone }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: (0, jsx_runtime_1.jsx)("a", { target: "_blank", href: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.website, children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.website }) })] }), (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.facebook) && ((0, jsx_runtime_1.jsx)(react_1.Center, { children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "menuIcon", "aria-label": "Facebook", maxW: "fit-content", onClick: function () { return window.open(companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.facebook, '_blank'); }, icon: (0, jsx_runtime_1.jsx)(components_1.FacebookLogo, { size: 28 }) }) }))] })) }), (0, jsx_runtime_1.jsx)(react_1.DrawerFooter, { p: "0", zIndex: "dropdown", children: (0, jsx_runtime_1.jsx)(components_1.FooterDrawer, { children: (0, jsx_runtime_1.jsx)(components_1.FooterButtons, { button1: ButtonsFooter.send }), isOpen: true }) })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Container, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Flex, Text, Image, Stack, Center, SimpleGrid, IconButton, } from '@chakra-ui/react';
+import { BeatLoader } from 'react-spinners';
+import { FooterButtons, FooterDrawer, PanelHeader, FacebookLogo, BackCircleButton, } from '..';
+import { ProgressReport } from '../../assets/images';
+import { useDocumentPreview } from '../../hooks';
+const storageUrl = import.meta.env.VITE_STORAGE_URL;
+export const DocumentPreview = ({ companyInfo, date, document, form, handleClose, handleSend, home, images, loading = false, userInfo, }) => {
+    const { ButtonsFooter, columnsDesktop, columnsMobile, columnWidth, contentRef, } = useDocumentPreview({ handleClose, handleSend });
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(Box, { w: "full", ref: contentRef }), _jsx(PanelHeader, { handleCloseButton: handleClose, icon: ProgressReport, title: t('createDocument.preview.title') })] }), _jsx(DrawerBody, { p: "base", children: loading ? (_jsx(Center, { h: "full", pb: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsxs(Stack, { spacing: "base", mb: "8rem", children: [_jsx(BackCircleButton, { onClick: handleClose }), _jsx(Container, { minW: "full", p: "base", children: _jsxs(Stack, { spacing: "8", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Box, { children: [document && _jsx(Text, { fontWeight: "semibold", children: document }), home && _jsx(Text, { fontSize: "sm", children: home })] }), (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.logoUrl) && (_jsx(Image, { src: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.logoUrl, maxH: "80px", alt: (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.name) || '' }))] }), date && (_jsx(Center, { h: "2.5rem", w: "full", bg: "green.1", children: _jsx(Text, { color: "neutral.white", fontWeight: "semibold", children: date }) })), form === null || form === void 0 ? void 0 : form.map((item) => (item.type === 'string' || 'text') && (_jsxs(Stack, { spacing: "1", children: [_jsx(Text, { fontWeight: "semibold", children: item.name }), _jsx(Text, { variant: "info", lineHeight: "1.2rem", children: item.value })] }, item.name))), _jsx(SimpleGrid, { columns: [columnsMobile, columnsDesktop], spacing: "base", children: images === null || images === void 0 ? void 0 : images.map(({ bucketName, description, extension, fileName, _id }) => (_jsx(Image, { src: bucketName
+                                                ? `${storageUrl}/${bucketName}/${fileName}.${extension}`
+                                                : '', alt: description, boxSize: columnWidth, objectFit: "cover" }, _id))) }), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { variant: "info", children: t('createDocument.preview.message') }), ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone)) && (_jsx(Text, { variant: "info", children: t('createDocument.preview.message2') }))] }), _jsxs(Box, { children: [_jsx(Text, { variant: "info", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name }), _jsx(Text, { variant: "info", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone }), _jsx(Text, { variant: "info", mb: "4", children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.email })] })] }) }), _jsxs(Flex, { direction: ['column', 'row'], gap: "base", justifyContent: "center", alignItems: "center", children: [_jsx(Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.name }), _jsx(Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.address }), _jsx(Text, { variant: "label", children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.phone }), _jsx(Text, { variant: "label", children: _jsx("a", { target: "_blank", href: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.website, children: companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.website }) })] }), (companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.facebook) && (_jsx(Center, { children: _jsx(IconButton, { variant: "menuIcon", "aria-label": "Facebook", maxW: "fit-content", onClick: () => window.open(companyInfo === null || companyInfo === void 0 ? void 0 : companyInfo.facebook, '_blank'), icon: _jsx(FacebookLogo, { size: 28 }) }) }))] })) }), _jsx(DrawerFooter, { p: "0", zIndex: "dropdown", children: _jsx(FooterDrawer, { children: _jsx(FooterButtons, { button1: ButtonsFooter.send }), isOpen: true }) })] }));
 };
-exports.DocumentPreview = DocumentPreview;

package/dist/components/sendDocument/InputOrText.js

@@ -1,12 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputOrText = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var InputOrText = function (_a) {
-    var handleChange = _a.handleChange, id = _a.id, _b = _a.isEditing, isEditing = _b === void 0 ? false : _b, value = _a.value;
-    return isEditing ? ((0, jsx_runtime_1.jsx)(components_1.TextInput, { handleChange: handleChange, id: id, placeholder: (0, i18next_1.t)('addMedia.description'), value: value })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { w: "100%", children: value }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Text } from '@chakra-ui/react';
+import { TextInput } from '..';
+export const InputOrText = ({ handleChange, id, isEditing = false, value, }) => {
+    return isEditing ? (_jsx(TextInput, { handleChange: handleChange, id: id, placeholder: t('addMedia.description'), value: value })) : (_jsx(Text, { w: "100%", children: value }));
 };
-exports.InputOrText = InputOrText;

package/dist/components/sendDocument/RecipientCard.js

@@ -1,36 +1,17 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var RecipientCard = function (_a) {
-    var _b;
-    var _c = _a.hasTitle, hasTitle = _c === void 0 ? true : _c, header = _a.header, index = _a.index, _d = _a.isDocument, isDocument = _d === void 0 ? false : _d, isEditDisabled = _a.isEditDisabled, menu = _a.menu, onEdit = _a.onEdit, _e = _a.recipient, accountTypes = _e.accountTypes, user = _e.user;
-    var types = (0, i18next_1.t)('shareHome.accountTypes').split(',');
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { p: "2", position: "relative", children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "4", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: "center", children: [hasTitle && ((0, jsx_runtime_1.jsx)(Header, { header: header, recipient: { accountTypes: accountTypes, user: user }, isDocument: isDocument })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "1", align: "center", children: [!isEditDisabled && ((0, jsx_runtime_1.jsx)(components_1.SelectInput, { handleClick: function (accountType) {
-                                        return onEdit === null || onEdit === void 0 ? void 0 : onEdit({ accountType: accountType, user: user });
-                                    }, initialValue: accountTypes[0], variant: "accountType", items: types })), !!menu && ((0, jsx_runtime_1.jsx)(components_1.IconMenu, { icon: (0, jsx_runtime_1.jsx)(components_1.MoreHorizontal, { size: 32 }), menuItems: menu, itemForm: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Flex, Stack } from '@chakra-ui/react';
+import { RecipientContent, RecipientHeader, IconMenu, MoreHorizontal, SelectInput, } from '..';
+export const RecipientCard = ({ hasTitle = true, header, index, isDocument = false, isEditDisabled, menu, onEdit, recipient: { accountTypes, user }, }) => {
+    var _a;
+    const types = t('shareHome.accountTypes').split(',');
+    return (_jsx(Container, { p: "2", position: "relative", children: _jsxs(Stack, { spacing: "4", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [hasTitle && (_jsx(Header, { header: header, recipient: { accountTypes, user }, isDocument: isDocument })), _jsxs(Flex, { gap: "1", align: "center", children: [!isEditDisabled && (_jsx(SelectInput, { handleClick: (accountType) => onEdit === null || onEdit === void 0 ? void 0 : onEdit({ accountType: accountType, user }), initialValue: accountTypes[0], variant: "accountType", items: types })), !!menu && (_jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), menuItems: menu, itemForm: {
                                         _id: user.email,
-                                        name: (_b = user.firstName) !== null && _b !== void 0 ? _b : '',
-                                    } }))] })] }), user && (0, jsx_runtime_1.jsx)(components_1.RecipientContent, __assign({ index: index }, user))] }) }));
+                                        name: (_a = user.firstName) !== null && _a !== void 0 ? _a : '',
+                                    } }))] })] }), user && _jsx(RecipientContent, Object.assign({ index: index }, user))] }) }));
 };
-exports.RecipientCard = RecipientCard;
-var Header = function (_a) {
-    var header = _a.header, accountTypes = _a.recipient.accountTypes, isDocument = _a.isDocument;
+const Header = ({ header, recipient: { accountTypes }, isDocument, }) => {
     if (header)
         return header;
-    return ((0, jsx_runtime_1.jsx)(components_1.RecipientHeader, { accountType: accountTypes.join(', '), isDocument: isDocument }));
+    return (_jsx(RecipientHeader, { accountType: accountTypes.join(', '), isDocument: isDocument }));
 };

package/dist/components/sendDocument/RecipientContent.js

@@ -1,11 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientContent = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var utils_1 = require("../../utils");
-var RecipientContent = function (_a) {
-    var bgColor = _a.bgColor, _b = _a.firstName, firstName = _b === void 0 ? '' : _b, _c = _a.index, index = _c === void 0 ? 0 : _c, _d = _a.lastName, lastName = _d === void 0 ? '' : _d, _e = _a.phone, phone = _e === void 0 ? '' : _e, _f = _a.email, email = _f === void 0 ? '' : _f;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", align: firstName ? 'start' : 'center', children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", bg: bgColor !== null && bgColor !== void 0 ? bgColor : (0, utils_1.randomColor)(index), fontWeight: "bold", color: "neutral.white", name: firstName ? "".concat(firstName, " ").concat(lastName) : '' }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { w: "full", spacing: "-2", minH: "3rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [firstName && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "medium", textTransform: "capitalize", children: "".concat(firstName, " ").concat(lastName) })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xxs", children: phone })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "email", alignSelf: "flex-end", children: email })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Avatar, Stack, Box, Text } from '@chakra-ui/react';
+import { randomColor } from '../../utils';
+export const RecipientContent = ({ bgColor, firstName = '', index = 0, lastName = '', phone = '', email = '', }) => {
+    return (_jsxs(Flex, { gap: "2", align: firstName ? 'start' : 'center', children: [_jsx(Avatar, { size: "sm", bg: bgColor !== null && bgColor !== void 0 ? bgColor : randomColor(index), fontWeight: "bold", color: "neutral.white", name: firstName ? `${firstName} ${lastName}` : '' }), _jsxs(Stack, { w: "full", spacing: "-2", minH: "3rem", justify: "space-between", children: [_jsxs(Box, { children: [firstName && (_jsx(Text, { fontWeight: "medium", textTransform: "capitalize", children: `${firstName} ${lastName}` })), _jsx(Text, { fontSize: "xxs", children: phone })] }), _jsx(Text, { variant: "email", alignSelf: "flex-end", children: email })] })] }));
 };
-exports.RecipientContent = RecipientContent;

package/dist/components/sendDocument/RecipientDocForm.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientDocForm = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var RecipientDocForm = function (_a) {
-    var onAdd = _a.onAdd, recipients = _a.recipients;
-    var _b = (0, hooks_1.useAddRecipient)({ onAdd: onAdd, recipients: recipients }), email = _b.email, errorMessage = _b.errorMessage, handleAddRecipient = _b.handleAddRecipient, handleChange = _b.handleChange, hasError = _b.hasError;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "100%", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: errorMessage !== null && errorMessage !== void 0 ? errorMessage : (0, i18next_1.t)('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: (0, i18next_1.t)('addRecipient.placeholder'), value: email }), email && ((0, jsx_runtime_1.jsx)(react_1.Button, { variant: "tertiary", onClick: handleAddRecipient, h: "input.md", children: (0, i18next_1.t)('addRecipient.addBtn') }))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Button } from '@chakra-ui/react';
+import { TextInput } from '..';
+import { useAddRecipient } from '../../hooks';
+export const RecipientDocForm = ({ onAdd, recipients }) => {
+    const { email, errorMessage, handleAddRecipient, handleChange, hasError } = useAddRecipient({ onAdd, recipients });
+    return (_jsxs(Flex, { w: "100%", gap: "base", children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: errorMessage !== null && errorMessage !== void 0 ? errorMessage : t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('addRecipient.placeholder'), value: email }), email && (_jsx(Button, { variant: "tertiary", onClick: handleAddRecipient, h: "input.md", children: t('addRecipient.addBtn') }))] }));
 };
-exports.RecipientDocForm = RecipientDocForm;

package/dist/components/sendDocument/RecipientForm.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientForm = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var RecipientForm = function (_a) {
-    var onAdd = _a.onAdd;
-    var _b = (0, hooks_1.useAddRecipient)({ onAdd: onAdd }), accountTypes = _b.accountTypes, email = _b.email, errorMessage = _b.errorMessage, handleAddRecipient = _b.handleAddRecipient, handleChange = _b.handleChange, handleHelpClick = _b.handleHelpClick, hasError = _b.hasError, handleSelect = _b.handleSelect, openHelp = _b.openHelp, types = _b.types;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "base", children: [(0, jsx_runtime_1.jsx)(components_1.TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: errorMessage !== null && errorMessage !== void 0 ? errorMessage : (0, i18next_1.t)('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: (0, i18next_1.t)('shareHome.placeholder'), value: email }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "100%", gap: "base", position: "relative", children: [(0, jsx_runtime_1.jsx)(components_1.HelpButton, { onClick: handleHelpClick, children: openHelp && ((0, jsx_runtime_1.jsx)(components_1.RolesHelpModal, { onClose: handleHelpClick, left: "-410px", top: "-10px", arrowRight: "right-top" })) }), (0, jsx_runtime_1.jsx)(components_1.SelectInputWithBadge, { handleClick: function (form) { return handleSelect(form); }, initialValue: accountTypes[0], items: types, width: "100%", height: "md" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "tertiary", onClick: handleAddRecipient, disabled: !email, children: (0, i18next_1.t)('shareHome.btInvite') })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Button, Stack } from '@chakra-ui/react';
+import { TextInput, SelectInputWithBadge, RolesHelpModal, HelpButton, } from '..';
+import { useAddRecipient } from '../../hooks';
+export const RecipientForm = ({ onAdd }) => {
+    const { accountTypes, email, errorMessage, handleAddRecipient, handleChange, handleHelpClick, hasError, handleSelect, openHelp, types, } = useAddRecipient({ onAdd });
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: errorMessage !== null && errorMessage !== void 0 ? errorMessage : t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('shareHome.placeholder'), value: email }), _jsxs(Flex, { w: "100%", gap: "base", position: "relative", children: [_jsx(HelpButton, { onClick: handleHelpClick, children: openHelp && (_jsx(RolesHelpModal, { onClose: handleHelpClick, left: "-410px", top: "-10px", arrowRight: "right-top" })) }), _jsx(SelectInputWithBadge, { handleClick: (form) => handleSelect(form), initialValue: accountTypes[0], items: types, width: "100%", height: "md" }), _jsx(Button, { variant: "tertiary", onClick: handleAddRecipient, disabled: !email, children: t('shareHome.btInvite') })] })] }));
 };
-exports.RecipientForm = RecipientForm;

package/dist/components/sendDocument/RecipientHeader.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../assets/images");
-var components_1 = require("..");
-var helpers_1 = require("../../helpers");
-var RecipientHeader = function (_a) {
-    var accountType = _a.accountType, isDocument = _a.isDocument;
-    var firstAccountType = accountType.split(', ')[0];
-    var type = firstAccountType.toLowerCase();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", w: "full", align: "center", children: [isDocument && (0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Recipient, alt: "", w: "auto", h: "10px" }), !isDocument && ((0, jsx_runtime_1.jsx)(components_1.LetterBadge, { bgColor: helpers_1.homeRoles[type].bg, letter: firstAccountType[0] })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", textTransform: "uppercase", children: isDocument ? (0, i18next_1.t)('addRecipient.title') : accountType })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { Recipient } from '../../assets/images';
+import { LetterBadge } from '..';
+import { homeRoles } from '../../helpers';
+export const RecipientHeader = ({ accountType, isDocument, }) => {
+    const firstAccountType = accountType.split(', ')[0];
+    const type = firstAccountType.toLowerCase();
+    return (_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [isDocument && _jsx(Image, { src: Recipient, alt: "", w: "auto", h: "10px" }), !isDocument && (_jsx(LetterBadge, { bgColor: homeRoles[type].bg, letter: firstAccountType[0] })), _jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: isDocument ? t('addRecipient.title') : accountType })] }));
 };
-exports.RecipientHeader = RecipientHeader;

package/dist/components/sendDocument/RecipientHeaderShared.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientHeaderShared = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../assets/images");
-var RecipientHeaderShared = function () {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "2", w: "full", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.ShareWith, alt: "", w: "auto", h: "22px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", textTransform: "uppercase", fontWeight: "semibold", children: (0, i18next_1.t)('addRecipient.shared') })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { ShareWith } from '../../assets/images';
+export const RecipientHeaderShared = () => {
+    return (_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [_jsx(Image, { src: ShareWith, alt: "", w: "auto", h: "22px" }), _jsx(Text, { fontSize: "xs", textTransform: "uppercase", fontWeight: "semibold", children: t('addRecipient.shared') })] }));
 };
-exports.RecipientHeaderShared = RecipientHeaderShared;

package/dist/components/sendDocument/RecipientTab.js

@@ -1,33 +1,15 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecipientTab = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var react_spinners_1 = require("react-spinners");
-var components_1 = require("..");
-var utils_1 = require("../../utils");
-var hooks_1 = require("../../hooks");
-var RecipientTab = function (_a) {
-    var handleAdd = _a.handleAdd, handleRemove = _a.handleRemove, handleSubmit = _a.handleSubmit, hasTitle = _a.hasTitle, isDocument = _a.isDocument, loading = _a.loading, _b = _a.panelSize, panelSize = _b === void 0 ? 'md' : _b, recipients = _a.recipients, listPadding = _a.listPadding, disabled = _a.disabled;
-    var _c = (0, hooks_1.useRecipientTab)(), editingAccountType = _c.editingAccountType, handleEdit = _c.handleEdit, handleSubmitFromProxy = _c.handleSubmitFromProxy, isLoadingProxy = _c.isLoadingProxy, isRightOpen = _c.isRightOpen, onRightClose = _c.onRightClose, panelSizeProxy = _c.panelSizeProxy;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [!disabled && ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: "lightBlue.1", p: "base", children: [isDocument && ((0, jsx_runtime_1.jsx)(components_1.RecipientDocForm, { onAdd: function (recipient) { return handleAdd(recipient); }, recipients: recipients || [] })), !isDocument && ((0, jsx_runtime_1.jsx)(components_1.RecipientForm, { onAdd: function (recipient) { return handleAdd(recipient); } }))] })), loading ? ((0, jsx_runtime_1.jsx)(react_1.Center, { h: "full", pb: "8rem", children: (0, jsx_runtime_1.jsx)(react_spinners_1.BeatLoader, { color: "gray", size: 8 }) })) : ((0, jsx_runtime_1.jsx)(react_1.Stack, { p: "base", minH: "full", w: "100%", spacing: "base", pb: listPadding, children: recipients === null || recipients === void 0 ? void 0 : recipients.map(function (recipient, index) {
-                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "2", children: [(0, jsx_runtime_1.jsx)(components_1.RecipientCard, { onEdit: function (form) {
-                                    return handleEdit(__assign(__assign({}, form), { accountTypes: [form.accountType] }));
-                                }, hasTitle: hasTitle, index: index, isDocument: isDocument, recipient: recipient, isEditDisabled: disabled }), (0, jsx_runtime_1.jsx)(react_1.Center, { children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { w: "2rem", h: "2rem", "aria-label": (0, i18next_1.t)('ariaLabels.delete'), variant: "iconOutlined", isDisabled: (0, utils_1.isHomeowner)(recipient.accountTypes) || disabled, icon: (0, jsx_runtime_1.jsx)(components_1.Minus, {}), onClick: function () {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Center, Flex, IconButton, Stack } from '@chakra-ui/react';
+import { BeatLoader } from 'react-spinners';
+import { RecipientCard, RecipientForm, RecipientDocForm, EditAccountType, RightPanel, Minus, } from '..';
+import { isHomeowner } from '../../utils';
+import { useRecipientTab } from '../../hooks';
+export const RecipientTab = ({ handleAdd, handleRemove, handleSubmit, hasTitle, isDocument, loading, panelSize = 'md', recipients, listPadding, disabled, }) => {
+    const { editingAccountType, handleEdit, handleSubmitFromProxy, isLoadingProxy, isRightOpen, onRightClose, panelSizeProxy, } = useRecipientTab();
+    return (_jsxs(Box, { children: [!disabled && (_jsxs(Box, { bg: "lightBlue.1", p: "base", children: [isDocument && (_jsx(RecipientDocForm, { onAdd: (recipient) => handleAdd(recipient), recipients: recipients || [] })), !isDocument && (_jsx(RecipientForm, { onAdd: (recipient) => handleAdd(recipient) }))] })), loading ? (_jsx(Center, { h: "full", pb: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(Stack, { p: "base", minH: "full", w: "100%", spacing: "base", pb: listPadding, children: recipients === null || recipients === void 0 ? void 0 : recipients.map((recipient, index) => {
+                    return (_jsxs(Flex, { align: "center", gap: "2", children: [_jsx(RecipientCard, { onEdit: (form) => handleEdit(Object.assign(Object.assign({}, form), { accountTypes: [form.accountType] })), hasTitle: hasTitle, index: index, isDocument: isDocument, recipient: recipient, isEditDisabled: disabled }), _jsx(Center, { children: _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": t('ariaLabels.delete'), variant: "iconOutlined", isDisabled: isHomeowner(recipient.accountTypes) || disabled, icon: _jsx(Minus, {}), onClick: () => {
                                         handleRemove(recipient.user.email);
                                     } }) })] }, recipient.user.email));
-                }) })), (0, jsx_runtime_1.jsx)(components_1.RightPanel, { overlay: false, children: (0, jsx_runtime_1.jsx)(components_1.EditAccountType, { associateAccount: editingAccountType, handleClose: onRightClose, handleDelete: handleRemove, handleSubmit: handleSubmit || handleSubmitFromProxy, isLoading: loading || isLoadingProxy }), isOpen: isRightOpen, onClose: onRightClose, size: panelSize || panelSizeProxy })] }));
+                }) })), _jsx(RightPanel, { overlay: false, children: _jsx(EditAccountType, { associateAccount: editingAccountType, handleClose: onRightClose, handleDelete: handleRemove, handleSubmit: handleSubmit || handleSubmitFromProxy, isLoading: loading || isLoadingProxy }), isOpen: isRightOpen, onClose: onRightClose, size: panelSize || panelSizeProxy })] }));
 };
-exports.RecipientTab = RecipientTab;

package/dist/components/sendDocument/SendCommunication.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SendCommunication = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var images_1 = require("../../assets/images");
-var SendCommunication = function (_a) {
-    var documentList = _a.documentList, headerList = _a.headerList, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b;
-    return ((0, jsx_runtime_1.jsx)(components_1.TileTooltip, { label: "documentHome", children: (0, jsx_runtime_1.jsxs)(react_1.Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], children: [(0, jsx_runtime_1.jsx)(components_1.ContainerHeader, { title: (0, i18next_1.t)('sendDocument.title'), titleIcon: images_1.HandPencil, menuItems: headerList, icon: (0, jsx_runtime_1.jsx)(components_1.MoreHorizontal, { size: 38 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { w: "full", p: "4", children: (0, jsx_runtime_1.jsx)(components_1.DocumentMenu, { documents: documentList, isDisabled: isDisabled, title: (0, i18next_1.t)('sendDocument.btLabel') }) })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Container } from '@chakra-ui/react';
+import { ContainerHeader, DocumentMenu, MoreHorizontal, TileTooltip, } from '..';
+import { HandPencil } from '../../assets/images';
+export const SendCommunication = ({ documentList, headerList, isDisabled = false, }) => {
+    return (_jsx(TileTooltip, { label: "documentHome", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], children: [_jsx(ContainerHeader, { title: t('sendDocument.title'), titleIcon: HandPencil, menuItems: headerList, icon: _jsx(MoreHorizontal, { size: 38 }) }), _jsx(Box, { w: "full", p: "4", children: _jsx(DocumentMenu, { documents: documentList, isDisabled: isDisabled, title: t('sendDocument.btLabel') }) })] }) }));
 };
-exports.SendCommunication = SendCommunication;

package/dist/components/sendDocument/ThumbCard.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThumbCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var utils_1 = require("../../utils");
-var ThumbCard = function (_a) {
-    var btnLabel = _a.btnLabel, description = _a.description, _b = _a.editing, editing = _b === void 0 ? false : _b, handleChange = _a.handleChange, handleCloseButton = _a.handleCloseButton, handleImageClick = _a.handleImageClick, handleInputDescription = _a.handleInputDescription, _id = _a._id, imageUrl = _a.imageUrl, _c = _a.uploaded, uploaded = _c === void 0 ? false : _c, uploading = _a.uploading;
-    var showProgress = !uploaded && uploading;
-    var alt = (0, utils_1.getImageAltText)(imageUrl);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "8rem", children: [(0, jsx_runtime_1.jsx)(react_1.CloseButton, { onClick: handleCloseButton, disabled: uploading, size: "sm", zIndex: "docked", position: "absolute", bg: "lightBlue.1", borderRadius: "full", right: "-2", top: "-2", _hover: {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Box, CloseButton, Button, Stack, Progress, Image, VisuallyHidden, } from '@chakra-ui/react';
+import { InputOrText } from '..';
+import { getImageAltText } from '../../utils';
+export const ThumbCard = ({ btnLabel, description, editing = false, handleChange, handleCloseButton, handleImageClick, handleInputDescription, _id, imageUrl, uploaded = false, uploading, }) => {
+    const showProgress = !uploaded && uploading;
+    const alt = getImageAltText(imageUrl);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "relative", w: "8rem", children: [_jsx(CloseButton, { onClick: handleCloseButton, disabled: uploading, size: "sm", zIndex: "docked", position: "absolute", bg: "lightBlue.1", borderRadius: "full", right: "-2", top: "-2", _hover: {
                             bg: 'lightGreen.1',
-                        } }), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "ghost", onClick: handleImageClick, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "".concat((0, i18next_1.t)('addMedia.editBtn'), " ").concat(alt) }), (0, jsx_runtime_1.jsx)(react_1.Image, { src: imageUrl, boxSize: "6rem", objectFit: "cover", alt: alt })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "100%", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.InputOrText, { handleChange: handleChange, id: _id, isEditing: editing, value: description }), description && ((0, jsx_runtime_1.jsx)(react_1.Button, { disabled: !description || uploading, variant: "tertiary", h: "input.md", onClick: handleInputDescription, children: btnLabel }))] }), showProgress && (0, jsx_runtime_1.jsx)(react_1.Progress, { size: "xs", isIndeterminate: true })] })] }));
+                        } }), _jsxs(Button, { variant: "ghost", onClick: handleImageClick, children: [_jsx(VisuallyHidden, { children: `${t('addMedia.editBtn')} ${alt}` }), _jsx(Image, { src: imageUrl, boxSize: "6rem", objectFit: "cover", alt: alt })] })] }), _jsxs(Stack, { w: "100%", children: [_jsxs(Flex, { w: "100%", gap: "base", children: [_jsx(InputOrText, { handleChange: handleChange, id: _id, isEditing: editing, value: description }), description && (_jsx(Button, { disabled: !description || uploading, variant: "tertiary", h: "input.md", onClick: handleInputDescription, children: btnLabel }))] }), showProgress && _jsx(Progress, { size: "xs", isIndeterminate: true })] })] }));
 };
-exports.ThumbCard = ThumbCard;

package/dist/components/sendDocument/Thumbs.js

@@ -1,25 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thumbs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var Thumbs = function (_a) {
-    var file = _a.file, handleClick = _a.handleClick, handleDelete = _a.handleDelete, handleDescription = _a.handleDescription, handleEdit = _a.handleEdit, handleEditDescription = _a.handleEditDescription, handleOpen = _a.handleOpen, handleSaveDescription = _a.handleSaveDescription, index = _a.index, onOpen = _a.onOpen, removeFile = _a.removeFile, uploading = _a.uploading;
-    var _b = (0, hooks_1.useThumbs)({
-        file: file,
-        handleClick: handleClick,
-        handleDelete: handleDelete,
-        handleDescription: handleDescription,
-        handleEdit: handleEdit,
-        handleEditDescription: handleEditDescription,
-        handleOpen: handleOpen,
-        handleSaveDescription: handleSaveDescription,
-        index: index,
-        onOpen: onOpen,
-        removeFile: removeFile,
-    }), _id = _b._id, btnLabel = _b.btnLabel, description = _b.description, handleChange = _b.handleChange, handleCloseButton = _b.handleCloseButton, handleImageClick = _b.handleImageClick, handleInputDescription = _b.handleInputDescription, imageUrl = _b.imageUrl, name = _b.name, uploaded = _b.uploaded, url = _b.url;
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "base", align: "start", children: (0, jsx_runtime_1.jsx)(components_1.ThumbCard, { btnLabel: btnLabel, description: description, editing: file.editing, handleChange: handleChange, handleCloseButton: handleCloseButton, handleImageClick: handleImageClick, handleInputDescription: handleInputDescription, _id: name || _id, imageUrl: imageUrl || url, uploaded: uploaded, uploading: uploading }) }, name || _id || index));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@chakra-ui/react';
+import { ThumbCard } from '..';
+import { useThumbs } from '../../hooks';
+export const Thumbs = ({ file, handleClick, handleDelete, handleDescription, handleEdit, handleEditDescription, handleOpen, handleSaveDescription, index, onOpen, removeFile, uploading, }) => {
+    const { _id, btnLabel, description, handleChange, handleCloseButton, handleImageClick, handleInputDescription, imageUrl, name, uploaded, url, } = useThumbs({
+        file,
+        handleClick,
+        handleDelete,
+        handleDescription,
+        handleEdit,
+        handleEditDescription,
+        handleOpen,
+        handleSaveDescription,
+        index,
+        onOpen,
+        removeFile,
+    });
+    return (_jsx(Flex, { gap: "base", align: "start", children: _jsx(ThumbCard, { btnLabel: btnLabel, description: description, editing: file.editing, handleChange: handleChange, handleCloseButton: handleCloseButton, handleImageClick: handleImageClick, handleInputDescription: handleInputDescription, _id: name || _id, imageUrl: imageUrl || url, uploaded: uploaded, uploading: uploading }) }, name || _id || index));
 };
-exports.Thumbs = Thumbs;