@arquimedes.co/eureka-forms 1.2.0 → 1.4.2-test

package/dist/@Types/@Types.d.ts

@@ -1 +1,2 @@
 export type { Organization } from './Organization';
+export type { Form } from './Form';

package/dist/@Types/Form.d.ts

@@ -34,7 +34,7 @@ interface TermLink {
     type: 'LINK';
     url: string;
 }
-interface Classifier {
+export interface Classifier {
     _id: string;
     name: string;
 }

package/dist/@Types/FormStep.d.ts

@@ -1,4 +1,4 @@
-import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
+import Types, { ClassifierOptionTypes, OptionTypes } from '../constants/FormStepTypes';
 export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
 export interface Title {
     id: string;
@@ -34,7 +34,6 @@ export interface TextArea {
     description: string | null;
     required: boolean;
     hasTextEditor: boolean;
-    isPrimary: boolean;
 }
 export interface TextInput {
     id: string;
@@ -43,9 +42,6 @@ export interface TextInput {
     description: string | null;
     validation?: FormValidation;
     required: boolean;
-    isSubject: boolean;
-    isClientInfo: boolean;
-    clientInfoType?: ClientInfoTypes;
     size: 1 | 2 | 3 | 4;
 }
 export interface DatePicker {
@@ -55,7 +51,6 @@ export interface DatePicker {
     pickTime: boolean;
     description: string | null;
     required: boolean;
-    showIcon: boolean;
     size: 1 | 2 | 3 | 4;
 }
 declare type FormValidation = {

package/dist/@Types/index.d.ts

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/@Types/index.js

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/App.d.ts

@@ -19,6 +19,8 @@ export interface AppProps {
     valuesData?: Record<string, unknown>;
     /** Custom steps to display */
     customSteps?: Record<string, CustomStep>;
+    /** Custom function to call on send */
+    customSend?: (values: any, reload: Function) => Promise<void>;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
     /** Function to call after the confimation dialog has been closed */
@@ -28,7 +30,7 @@ export interface CustomStep {
     component: ReactNode;
     updateValue: (idStep: string, values: Record<string, any>, form: Form) => void;
 }
-declare function App({ apiKey, domain, preview, formData, postview, isWidget, internal, valuesData, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
+declare function App({ apiKey, domain, preview, formData, postview, isWidget, internal, valuesData, customSend, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
 export default App;
 export declare enum SIZES {
     SMALL = "SMALL",

package/dist/App.js

@@ -68,7 +68,7 @@ import widgetInstance from './AxiosWidget';
 function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;
-    var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSteps", "handleConfirmed"]);
+    var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSend = _a.customSend, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
     var _f = useState(undefined), form = _f[0], setForm = _f[1];
     var _g = useState({}), originalValues = _g[0], setOriginalValues = _g[1];
     var _h = useState(undefined), organizationInfo = _h[0], setOrganizationInfo = _h[1];
@@ -127,6 +127,7 @@ function App(_a) {
                     if (!(organizationInfo && form !== undefined)) return [3 /*break*/, 4];
                     if (!(process.env.NODE_ENV === 'production' &&
                         apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
+                        apiKey !== 'FORMSTEST' &&
                         !internal &&
                         !postview &&
                         !preview)) return [3 /*break*/, 4];
@@ -162,7 +163,7 @@ function App(_a) {
                 case 0:
                     _b.trys.push([0, 5, , 6]);
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=".concat(domain))];
+                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=" + domain)];
                 case 1:
                     _a = _b.sent();
                     return [3 /*break*/, 4];
@@ -205,8 +206,8 @@ function App(_a) {
                 case 0:
                     _a.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, (domain
-                            ? widgetInstance.get("/form/".concat(apiKey, "?idOrganization=").concat(domain))
-                            : axiosInstance.get("/form/".concat(apiKey)))];
+                            ? widgetInstance.get("/form/" + apiKey + "?idOrganization=" + domain)
+                            : axiosInstance.get("/form/" + apiKey))];
                 case 1:
                     response = _a.sent();
                     if (response) {
@@ -255,7 +256,7 @@ function App(_a) {
                     if (handleConfirmed) {
                         handleConfirmed();
                     }
-                }, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
+                }, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, customSend: customSend, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
     }
 }
 export default App;

package/dist/AxiosWidget.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 var headers = {};
 var widgetInstance = axios.create({
-    baseURL: "https://api.forms.".concat(process.env.REACT_APP_DOMAIN, "/api"),
+    baseURL: "https://api.forms." + process.env.REACT_APP_DOMAIN + "/api",
     timeout: 30000,
     headers: headers,
 });

package/dist/FormComponents/Form/ColumnForm/ColumnForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../Form';
-declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, originalValues, ...others }: FormComponentProps): JSX.Element;
+declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, customSend, originalValues, ...others }: FormComponentProps): JSX.Element;
 export default ColumnForm;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -70,7 +70,7 @@ import axiosInstance from '../../../AxiosAPI';
 import widgetInstance from '../../../AxiosWidget';
 function ColumnForm(_a) {
     var _this = this;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "originalValues"]);
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "customSend", "originalValues"]);
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
     var _c = useForm({
         defaultValues: mapOriginal(originalValues, form),
@@ -93,7 +93,7 @@ function ColumnForm(_a) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    if (!(apiKey || internal)) return [3 /*break*/, 8];
+                    if (!(apiKey || internal)) return [3 /*break*/, 11];
                     return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
                 case 1:
                     valid = _c.sent();
@@ -104,42 +104,46 @@ function ColumnForm(_a) {
                     setTimeout(function () {
                         setTempError(false);
                     }, 500);
-                    return [3 /*break*/, 8];
+                    return [3 /*break*/, 11];
                 case 2:
-                    _c.trys.push([2, 7, , 8]);
+                    _c.trys.push([2, 10, , 11]);
                     setLoading(true);
                     for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
                         idStep = _a[_i];
                         updateValue(idStep, values, form, customSteps);
                     }
-                    if (internal) {
-                        // eslint-disable-next-line no-console
-                        console.log('UPDATED:', values);
-                    }
+                    if (!customSend) return [3 /*break*/, 4];
+                    return [4 /*yield*/, customSend(values, reload)];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 4:
                     payload = {
                         formValues: { steps: values },
                     };
-                    url = "/ticket/".concat(internal ? form.apiKey : apiKey);
-                    if (!(domain || internal)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, widgetInstance.post("".concat(url, "?idOrganization=").concat(domain), payload)];
-                case 3:
-                    _b = _c.sent();
-                    return [3 /*break*/, 6];
-                case 4: return [4 /*yield*/, axiosInstance.post(url, payload)];
+                    url = "/ticket/" + (internal ? form.apiKey : apiKey);
+                    if (!(domain || internal)) return [3 /*break*/, 6];
+                    return [4 /*yield*/, widgetInstance.post(url + "?idOrganization=" + domain, payload)];
                 case 5:
                     _b = _c.sent();
-                    _c.label = 6;
-                case 6:
+                    return [3 /*break*/, 8];
+                case 6: return [4 /*yield*/, axiosInstance.post(url, payload)];
+                case 7:
+                    _b = _c.sent();
+                    _c.label = 8;
+                case 8:
                     resp = _b;
                     setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    _c.label = 9;
+                case 9:
                     setLoading(false);
-                    return [3 /*break*/, 8];
-                case 7:
+                    return [3 /*break*/, 11];
+                case 10:
                     error_1 = _c.sent();
                     console.error(error_1);
                     setLoading(false);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
+                    return [3 /*break*/, 11];
+                case 11: return [2 /*return*/];
             }
         });
     }); };
@@ -148,7 +152,7 @@ function ColumnForm(_a) {
                     setShowConfirmation(undefined);
                 } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, others), index)); }), form.terms &&
                 !internal &&
-                form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "login__submit", className: styles.submitBtn, onClick: function () {
+                form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () {
                         onSubmit();
                     }, style: {
                         background: formStyle.primaryColor,
@@ -196,38 +200,40 @@ var mapOriginal = function (values, form) {
 };
 var updateValue = function (idStep, values, form, customSteps) {
     var step = form.steps[idStep];
-    switch (step === null || step === void 0 ? void 0 : step.type) {
-        case Types.TEXTAREA: {
-            var value = values[step.id];
-            if (step.hasTextEditor) {
-                var currentContent = value.getCurrentContent();
-                values[step.id] = {
-                    value: currentContent.getPlainText(),
-                    draft: convertToRaw(currentContent),
-                };
+    var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
+    if (custom !== undefined) {
+        custom.updateValue(idStep, values, form);
+    }
+    else {
+        switch (step === null || step === void 0 ? void 0 : step.type) {
+            case Types.TEXTAREA: {
+                var value = values[step.id];
+                if (step.hasTextEditor) {
+                    var currentContent = value.getCurrentContent();
+                    values[step.id] = {
+                        value: currentContent.getPlainText(),
+                        draft: convertToRaw(currentContent),
+                    };
+                }
+                else {
+                    values[step.id] = {
+                        value: value,
+                        draft: stringToDraft(value),
+                    };
+                }
+                break;
             }
-            else {
-                values[step.id] = {
-                    value: value,
-                    draft: stringToDraft(value),
-                };
+            case Types.FILEUPLOAD: {
+                var value = values[step.id];
+                values[step.id] = value.map(function (val) { return ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }); });
+                break;
             }
-            break;
+            default:
+                break;
         }
-        case Types.FILEUPLOAD: {
-            var value = values[step.id];
-            values[step.id] = value.map(function (val) { return ({
-                fileName: val.fileName,
-                S3Key: val.S3Key,
-            }); });
-            break;
-        }
-        default:
-            var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
-            if (custom !== undefined) {
-                custom.updateValue(idStep, values, form);
-            }
-            break;
     }
 };
 function stringToDraft(text) {

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -24,10 +24,8 @@ function ConfirmationDialog(_a) {
             },
         }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("label", __assign({ className: styles.url, onClick: function () {
-                                var _a, _b, _c;
-                                (_c = (_b = (_a = window
-                                    .open) === null || _a === void 0 ? void 0 : _a.call(window, confirmation.url, '_blank')) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
+                                color: formStyle.textColor,
                             } }, { children: confirmation.url }), void 0)] }), void 0)] }), void 0) }), void 0));
 }
 export default ConfirmationDialog;

package/dist/FormComponents/Form/Form.d.ts

@@ -11,6 +11,7 @@ export interface FormComponentProps {
     form: Form;
     originalValues: Record<string, unknown>;
     customSteps: Record<string, CustomStep>;
+    customSend?: (values: any, reload: Function) => Promise<void>;
     widthStats: WidthStats;
     internal: boolean;
     reload: Function;

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -21,13 +21,13 @@ function CheckBoxStep(_a) {
                 ? '100%'
                 : calcStepWidth(step.size, form),
             minHeight: step.description || step.required ? '55px' : '43px',
-        } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }), void 0), _jsx(Controller, { name: step.id, control: control, defaultValue: false, rules: {
+        } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }), void 0)), _jsx(Controller, { name: step.id, control: control, defaultValue: false, rules: {
                             required: step.required
                                 ? 'Este campo es obligatorio'
                                 : undefined,
                         }, shouldUnregister: true, render: function (_a) {
                             var field = _a.field;
-                            return (_jsx(RoundedCheckBox, __assign({}, field, { inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
+                            return (_jsx(RoundedCheckBox, __assign({}, field, { "data-testid": step.id, inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
                         } }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
                     color: !!errors[step.id]
                         ? formStyle.errorColor

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -55,7 +55,7 @@ function ClassifierSelector(_a) {
             } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
-                }, inputRef: inputRef, helperText: errors[step.id]
+                }, "data-testid": step.id, inputRef: inputRef, helperText: errors[step.id]
                     ? errors[step.id].message
                     : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
                         .filter(function (classifier) {
@@ -63,7 +63,10 @@ function ClassifierSelector(_a) {
                         return ((_a = step.options[classifier._id]) === null || _a === void 0 ? void 0 : _a.type) !==
                             ClassifierOptionTypes.HIDE;
                     })
-                        .map(function (classifier) { return (_jsx(MenuItem, __assign({ value: classifier._id, style: { whiteSpace: 'normal' } }, { children: classifier.name }), classifier._id)); })] }), void 0) }), void 0));
+                        .map(function (classifier) {
+                        var _a;
+                        return typeof classifier === 'string' ? (_jsx(MenuItem, __assign({ value: classifier, style: { whiteSpace: 'normal' } }, { children: (_a = form.classifiers[classifier]) === null || _a === void 0 ? void 0 : _a.name }), classifier)) : (_jsx(MenuItem, __assign({ value: classifier._id, style: { whiteSpace: 'normal' } }, { children: classifier.name }), classifier._id));
+                    })] }), void 0) }), step.id));
     };
     var mapNestedOption = function () {
         if (value) {
@@ -85,7 +88,7 @@ function ClassifierSelector(_a) {
                     : 'fit-content',
             } }, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize < form.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
                         width: fillerSize,
-                    } }, void 0))] }), void 0));
+                    } }, "SEPARATOR"))] }), void 0));
     }
     else {
         return (_jsxs(React.Fragment, { children: [renderSelect(), mapNestedOption(), level === 0 && _jsx("div", { className: styles.separator }, void 0)] }, void 0));

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -190,7 +190,8 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+    return (_jsxs("div", __assign({ className: styles.container +
+            (error || !!errors[step.id] ? ' EF-error' : ''), "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -45,7 +45,7 @@ function Selector(_a) {
                     ? '100%'
                     : calcStepWidth(step.size, form),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
+            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
                 }, helperText: errors[step.id]

package/dist/FormComponents/Step/Step.js

@@ -33,6 +33,10 @@ import FileUploadStep from './FileUploadStep/FileUploadStep';
 import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 function StepComponent(_a) {
     var step = _a.step, props = __rest(_a, ["step"]);
+    var customStep = props.customSteps[step.type];
+    if (customStep) {
+        return customStep.component(__assign({ step: step }, props));
+    }
     switch (step.type) {
         case Types.TITLE: {
             return _jsx(TitleStep, __assign({ step: step }, props), void 0);
@@ -62,13 +66,7 @@ function StepComponent(_a) {
             return _jsx(FileUploadStep, __assign({ step: step }, props), void 0);
         }
         default:
-            var customStep = props.customSteps[step.type];
-            if (customStep) {
-                return customStep.component(__assign({ step: step }, props));
-            }
-            else {
-                return _jsx("div", {}, void 0);
-            }
+            return _jsx("div", {}, void 0);
     }
 }
 export default StepComponent;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,10 +20,9 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var _b;
     var step = _a.step, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
-    var _c = useState(false), hovering = _c[0], setHovering = _c[1];
-    var _d = useState(false), focus = _d[0], setFocus = _d[1];
+    var _b = useState(false), hovering = _b[0], setHovering = _b[1];
+    var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
         if (focus) {
             return {
@@ -42,6 +41,23 @@ function TextAreaStep(_a) {
             };
         }
     };
+    var calcDefaultStringValue = function (defaultValue) {
+        var _a;
+        if (typeof defaultValue === 'string') {
+            return defaultValue;
+        }
+        else {
+            return (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    var calcDefaultDraftValue = function (defaultValue) {
+        if (typeof defaultValue === 'string') {
+            return EditorState.createWithContent(convertFromRaw(stringToDraft(defaultValue)));
+        }
+        else {
+            return EditorState.createWithContent(convertFromRaw(getRawText(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.draft, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text)));
+        }
+    };
     if (step.hasTextEditor) {
         return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
                 '--eureka-outline': formStyle.outlineColor,
@@ -54,7 +70,7 @@ function TextAreaStep(_a) {
                         if (!postview) {
                             setFocus(false);
                         }
-                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
                             if (!postview) {
                                 setHovering(true);
                             }
@@ -67,7 +83,7 @@ function TextAreaStep(_a) {
                                 setFocus(true);
                             }
                         } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
-                                ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
+                                ? calcDefaultDraftValue(originalValues[step.id])
                                 : EditorState.createEmpty(), rules: step.required
                                 ? {
                                     validate: function (editorState) {
@@ -123,13 +139,13 @@ function TextAreaStep(_a) {
     else {
         return (_jsx("div", __assign({ className: styles.container, style: {
                 paddingBottom: step.description || !!errors[step.id] ? '0px' : '23px',
-            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : '', rules: {
+            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: calcDefaultStringValue(originalValues[step.id]), rules: {
                     required: step.required
                         ? 'Este campo es obligatorio'
                         : undefined,
                 }, shouldUnregister: true, render: function (_a) {
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : step.description, error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -27,7 +27,7 @@
 
 .editor {
     margin: -5px 10px 0 10px;
-    height: calc(100% - 46px) !important;
+    height: calc(100% - 22px) !important;
 }
 
 .wrapper {

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -35,7 +35,7 @@ function TextInputStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id] }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -13,6 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialTitleStep.module.css';
 function TitleStep(_a) {
     var step = _a.step, formStyle = _a.formStyle;
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl }, { children: step.title }), void 0), step.description && (_jsx("p", __assign({ className: styles.descriptionPar }, { children: step.description }), void 0))] }), void 0));
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl }, { children: step.title }), void 0), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    marginTop: step.title ? '15px' : '0px',
+                } }, { children: step.description }), void 0))] }), void 0));
 }
 export default TitleStep;

package/dist/constants/FormStepTypes.d.ts

@@ -25,10 +25,4 @@ export declare enum ClassifierOptionTypes {
     HIDE = "CLASSIFIER_HIDE",
     NESTED = "CLASSIFIER_NESTED"
 }
-export declare enum ClientInfoTypes {
-    NAME = "NAME",
-    LASTNAME = "LASTNAME",
-    EMAIL = "EMAIL",
-    OTHER = "OTHER"
-}
 export default TYPES;

package/dist/constants/FormStepTypes.js

@@ -30,11 +30,4 @@ export var ClassifierOptionTypes;
     ClassifierOptionTypes["HIDE"] = "CLASSIFIER_HIDE";
     ClassifierOptionTypes["NESTED"] = "CLASSIFIER_NESTED";
 })(ClassifierOptionTypes || (ClassifierOptionTypes = {}));
-export var ClientInfoTypes;
-(function (ClientInfoTypes) {
-    ClientInfoTypes["NAME"] = "NAME";
-    ClientInfoTypes["LASTNAME"] = "LASTNAME";
-    ClientInfoTypes["EMAIL"] = "EMAIL";
-    ClientInfoTypes["OTHER"] = "OTHER";
-})(ClientInfoTypes || (ClientInfoTypes = {}));
 export default TYPES;

package/dist/controllers/FileService.js

@@ -49,7 +49,7 @@ export function getUploadUrls(files, domain) {
                         extension: file.name.split('.').pop(),
                     }); });
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=".concat(domain), filesArray)];
+                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=" + domain, filesArray)];
                 case 1:
                     response = _b.sent();
                     return [3 /*break*/, 4];

package/dist/shared/RoundedCheckBox/RoundedCheckBox.d.ts

@@ -12,7 +12,7 @@ interface StyleProps {
     cantEdit?: boolean;
 }
 interface ComponentProps extends StyleProps {
-    onChange: Function;
+    onChange?: Function;
     checked: boolean;
 }
 /**

package/dist/shared/RoundedCheckBox/RoundedCheckBox.js

@@ -71,7 +71,7 @@ var useCheckBoxStyles = function (props) {
  * Generic rounded checkbox
  */
 function CustomCheckBox(_a) {
-    var _b = _a.padding, padding = _b === void 0 ? '9px' : _b, onChange = _a.onChange, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? '1.5rem' : _d, _e = _a.uncheckedColor, uncheckedColor = _e === void 0 ? '#787878' : _e, _f = _a.checkedColor, checkedColor = _f === void 0 ? '#3d5a7f' : _f, _g = _a.disabledColor, disabledColor = _g === void 0 ? '#A0A0A0' : _g, _h = _a.errorColor, errorColor = _h === void 0 ? '#cc2936' : _h, _j = _a.cantEdit, cantEdit = _j === void 0 ? false : _j, checked = _a.checked, others = __rest(_a, ["padding", "onChange", "error", "size", "uncheckedColor", "checkedColor", "disabledColor", "errorColor", "cantEdit", "checked"]);
+    var _b = _a.padding, padding = _b === void 0 ? '9px' : _b, onChange = _a.onChange, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? '1.5rem' : _d, _e = _a.checkedColor, checkedColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.uncheckedColor, uncheckedColor = _f === void 0 ? '#787878' : _f, _g = _a.disabledColor, disabledColor = _g === void 0 ? '#A0A0A0' : _g, _h = _a.errorColor, errorColor = _h === void 0 ? '#cc2936' : _h, _j = _a.cantEdit, cantEdit = _j === void 0 ? false : _j, checked = _a.checked, others = __rest(_a, ["padding", "onChange", "error", "size", "checkedColor", "uncheckedColor", "disabledColor", "errorColor", "cantEdit", "checked"]);
     var classes = useCheckBoxStyles({
         size: size,
         error: error,

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import { DatePickerProps } from '@material-ui/pickers';
 interface StyleProps {
     /** The color of the text */
     textColor?: string;
@@ -38,13 +38,11 @@ interface StyleProps {
     helperTextColor?: string;
 }
 interface RoundedDatePickerProps extends StyleProps {
-    /** If the calendar icon should be shown */
-    showIcon?: boolean;
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & KeyboardDatePickerProps> {
+declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & DatePickerProps> {
     render(): JSX.Element;
 }
 export default RoundedDatePicker;

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { KeyboardDatePicker, KeyboardDateTimePicker, } from '@material-ui/pickers';
+import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
@@ -47,8 +47,9 @@ var useDatePickerStyles = function (props) {
         root: {
             borderRadius: props.borderRadius,
             backgroundColor: props.backgroundColor,
+            cursor: props.cantEdit ? 'default' : 'pointer',
             '& input, textarea': {
-                cursor: props.cantEdit ? 'default' : 'text',
+                cursor: props.cantEdit ? 'default' : 'pointer',
                 padding: props.padding,
                 fontWeight: props.fontWeight,
                 color: props.textColor,
@@ -100,8 +101,8 @@ var useDatePickerLabelStyles = function (props) {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             maxWidth: 'calc(100% - 50px)',
-            textOverflow: 'ellipsis',
             marginTop: '-4px',
+            textOverflow: 'ellipsis',
             fontSize: props.fontSize,
             '&.Mui-focused': {
                 color: props.focusColor,
@@ -210,7 +211,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.showIcon, showIcon = _r === void 0 ? true : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "pickTime", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.cantEdit, cantEdit = _r === void 0 ? false : _r, _s = _a.pickTime, pickTime = _s === void 0 ? false : _s, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -277,7 +278,7 @@ function CustomDatePicker(_a) {
         helperTextColor: helperTextColor,
     })();
     if (pickTime) {
-        return (_jsx(KeyboardDateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -286,6 +287,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
@@ -298,7 +300,7 @@ function CustomDatePicker(_a) {
             }, variant: "dialog" }), void 0));
     }
     else {
-        return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -307,6 +309,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {

package/dist/shared/RoundedSelect/RoundedSelect.d.ts

@@ -15,6 +15,8 @@ interface ColorProps {
     height?: string;
     /** The color of the text in the form */
     color?: string;
+    /** If custom iconComponent exists */
+    showIcon?: boolean;
 }
 interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     /** children to display in the options */
@@ -22,7 +24,7 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     /** Currently selected value */
     value: any;
     /** function called when value changes */
-    handleUpdate: (event: React.ChangeEvent<{
+    handleUpdate?: (event: React.ChangeEvent<{
         name?: string | undefined;
         value: any;
     }>, child?: React.ReactNode) => void;
@@ -38,6 +40,8 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     helperText?: string;
     /** the margin around the selector */
     containerMargin?: string;
+    /** The icon to display */
+    iconComponent?: any;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -85,6 +85,9 @@ var useOutlinedInputStyles = function (props) {
             '& .EF-MuiSelect-icon.Mui-disabled': {
                 color: props.outlineColor,
             },
+            '& .EF-MuiSelect-iconOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
             borderRadius: 10,
             color: props.color,
         },
@@ -127,7 +130,7 @@ var useHelperTextStyles = function (props) {
     }); });
 };
 function CustomSelect(_a) {
-    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.outlineColor, outlineColor = _e === void 0 ? '#0000003b' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.cantEdit, cantEdit = _g === void 0 ? false : _g, _h = _a.containerMargin, containerMargin = _h === void 0 ? '8px' : _h, _j = _a.height, height = _j === void 0 ? '40px' : _j, required = _a.required, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "cantEdit", "containerMargin", "height", "required", "error"]);
+    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.outlineColor, outlineColor = _e === void 0 ? '#0000003b' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.cantEdit, cantEdit = _g === void 0 ? false : _g, _h = _a.showIcon, showIcon = _h === void 0 ? true : _h, _j = _a.containerMargin, containerMargin = _j === void 0 ? '8px' : _j, _k = _a.height, height = _k === void 0 ? '40px' : _k, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
     var classes = useStyles();
     var outlinedInputClasses = useOutlinedInputStyles({
         helperTextColor: helperTextColor,
@@ -137,6 +140,7 @@ function CustomSelect(_a) {
         cantEdit: cantEdit,
         height: height,
         color: color,
+        showIcon: showIcon && iconComponent !== undefined,
     })();
     var labelClasses = useLabelInputStyles({
         helperTextColor: helperTextColor,
@@ -160,7 +164,9 @@ function CustomSelect(_a) {
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label + (required ? ' *' : ''), classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
+            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
+                ? { IconComponent: iconComponent }
+                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label + (required ? ' *' : ''), classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TextFieldProps } from '@material-ui/core';
+interface StyleProps {
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** If the style should change on hover */
+    cantEdit?: boolean;
+    /** The hight of the container */
+    height?: string;
+    /** The color of the text in the form */
+    color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The color of the inner input */
+    innerBackgroundColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** If custom iconComponent exists */
+    showIcon?: boolean;
+}
+export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color'>, StyleProps {
+    /** Currently selected value */
+    value: any;
+    /** The array of options to display */
+    options?: any[];
+    /** If the input is loading */
+    loading?: boolean;
+    /** Function to call to fetch data if none is found */
+    fetchData?: () => Promise<void>;
+    /** function called when value changes */
+    handleUpdate?: (event: React.ChangeEvent<{
+        name?: string | undefined;
+        value: any;
+    }>, child?: React.ReactNode) => void;
+    /** Strig to place in the label */
+    label: string;
+    /** Minimum width in px of the component */
+    minWidth?: number;
+    /** The helper Text to display */
+    helperText?: string;
+    /** The margin around the selector */
+    containerMargin?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** The iconComponent to display in the selector */
+    iconComponent?: any;
+    /** If the options are searchable */
+    searchable?: boolean;
+}
+export default function RoundedSmartSelect({ options, value, handleUpdate, label, fetchData, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, error, innerBackgroundColor, helperText, readOnly, borderRadius, fontWeight, icon, iconComponent, searchable, containerMargin, showIcon, }: RoundedSmartSelectProps): JSX.Element;
+export {};

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -0,0 +1,182 @@
+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);
+};
+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 Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { Popper } from '@material-ui/core';
+import RoundedSelect from '../RoundedSelect/RoundedSelect';
+var filter = createFilterOptions();
+var useStyles = makeStyles(function (theme) { return ({
+    root: {
+        '& > * + *': {
+            marginTop: theme.spacing(3),
+        },
+    },
+}); });
+var useTextfieldStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                padding: '6px 12px',
+                fontWeight: props.fontWeight,
+                color: props.color,
+                fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.innerBackgroundColor,
+                borderRadius: props.borderRadius,
+                height: props.height,
+            },
+            '& label': {
+                marginTop: '-4px',
+                fontSize: props.fontSize,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                },
+                height: props.height,
+                '& .EF-MuiAutocomplete-input': {
+                    height: props.height,
+                    marginTop: -10,
+                },
+                '& .EF-MuiAutocomplete-input::placeholder': {
+                    color: 'var(--greyFont)',
+                    opacity: 1,
+                },
+            },
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+            },
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: '#0000003b',
+            },
+            '.EF-MuiAutocomplete-popupIndicator': {
+                padding: 0,
+            },
+            '& .EF-MuiAutocomplete-popupIndicatorOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+        },
+    }); });
+};
+export default function RoundedSmartSelect(_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, fetchData = _a.fetchData, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.outlineColor, outlineColor = _g === void 0 ? '#b8b8b8' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.cantEdit, cantEdit = _j === void 0 ? false : _j, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.height, height = _l === void 0 ? '31px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, required = _a.required, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, helperText = _a.helperText, _o = _a.readOnly, readOnly = _o === void 0 ? false : _o, _p = _a.borderRadius, borderRadius = _p === void 0 ? 10 : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '400' : _q, icon = _a.icon, iconComponent = _a.iconComponent, _r = _a.searchable, searchable = _r === void 0 ? false : _r, _s = _a.containerMargin, containerMargin = _s === void 0 ? '0px' : _s, _t = _a.showIcon, showIcon = _t === void 0 ? true : _t;
+    var props = {
+        color: color,
+        height: height,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        cantEdit: cantEdit,
+        showIcon: showIcon && icon !== undefined,
+    };
+    // const fetchAreas = async (): Promise<void> => {
+    //     const response = await axiosInstance.get('agents/areas');
+    //     setLoading(false);
+    //     setOptions(response.data.map((option: string) => ({ label: option })));
+    // };
+    var classes = useStyles();
+    var textFieldClasses = useTextfieldStyles(props)();
+    if (searchable) {
+        return (_jsx("div", __assign({ className: classes.root }, { children: _jsx(Autocomplete, { size: "small", fullWidth: true, popupIcon: showIcon && icon ? icon : undefined, onOpen: function () {
+                    if (options.length === 0 && fetchData) {
+                        fetchData();
+                    }
+                }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: function (option) {
+                    // Value selected with enter, right from the input
+                    if (typeof option === 'string') {
+                        return option;
+                    }
+                    else if (option.inputValue) {
+                        return option.inputValue;
+                    }
+                    else {
+                        // Regular option
+                        return option.label;
+                    }
+                }, PopperComponent: function (_a) {
+                    var style = _a.style, props = __rest(_a, ["style"]);
+                    return (_jsx(Popper, __assign({}, props, { style: __assign(__assign({}, style), { zIndex: 1305 }) }), void 0));
+                }, value: value !== null && value !== void 0 ? value : '', onChange: function (event, newValue) {
+                    if (typeof newValue === 'string') {
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
+                    }
+                    else {
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                    }
+                }, filterOptions: function (options, params) {
+                    var filtered = filter(options, params);
+                    return filtered;
+                }, renderOption: function (option) { return option.label; }, renderInput: function (params) { return (_jsx(TextField, __assign({ classes: textFieldClasses }, params, { variant: "outlined", label: label, required: required, error: error, helperText: helperText }), void 0)); }, noOptionsText: "No hay opciones" }, void 0) }), void 0));
+    }
+    else {
+        return (_jsx(RoundedSelect, { fullWidth: true, handleUpdate: handleUpdate, onOpen: function () {
+                if (options.length === 0 && fetchData) {
+                    fetchData();
+                }
+            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, void 0));
+    }
+}

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -102,7 +102,7 @@ var useTextfieldStyles = function (props) {
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.shrunkenFontSize, shrunkenFontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "errorColor", "fontWeight", "multiline", "cantEdit"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.shrunkenFontSize, shrunkenFontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, inputProps = _a.inputProps, value = _a.value, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "inputProps", "value"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
@@ -120,9 +120,10 @@ function CustomTextfield(_a) {
         multiline: multiline,
         cantEdit: cantEdit,
     })();
-    return (_jsx(TextField, __assign({ classes: classes }, others, { multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
+    return (_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
             readOnly: readOnly,
             disabled: cantEdit,
+            inputProps: inputProps,
         } }), void 0));
 }
 /**

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.2.0",
+    "version":"1.4.2-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
+        "e2e": "percy exec -- cypress run",
         "lint": "eslint 'src/**/*.ts'",
         "tsc-build": "tsc --noEmit false --outDir ./dist"
     },
@@ -17,11 +18,11 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
-        "axios": "^0.21.1",
-        "date-fns": "^2.23.0",
-        "draft-js": "^0.11.7",
-        "react-draft-wysiwyg": "^1.14.7",
-        "react-hook-form": "7.18.1",
+        "axios": "^0.21.x",
+        "date-fns": "^2.23.x",
+        "draft-js": "^0.11.x",
+        "react-draft-wysiwyg": "^1.14.x",
+        "react-hook-form": "^7.6.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.0-next.37",
         "typescript": "^4.4.3"
@@ -46,35 +47,37 @@
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
+        "@percy/cli": "^1.0.0-beta.76",
+        "@percy/cypress": "^3.1.1",
         "@types/draft-js": "^0.11.5",
         "@types/jest": "^26.0.24",
-        "@types/node": "^12.20.25",
         "@types/react": "^17.0.21",
         "@types/react-dom": "^17.0.9",
         "@types/react-draft-wysiwyg": "^1.13.3",
         "@types/react-router-dom": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^4.24.0",
         "@typescript-eslint/parser": "^4.24.0",
+        "cypress": "^9.5.2",
         "eslint": "^7.27.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^3.4.0",
         "jest-junit": "^12.2.0",
+        "local-web-server": "^5.2.0",
         "postcss-normalize": "^10.0.1",
         "prettier": "^2.3.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },
     "peerDependencies": {
-        "react": "^17.x.x",
-        "react-dom": "^17.x.x",
         "axios": "^0.21.x",
+        "babel-plugin-add-react-displayname": "0.0.x",
         "date-fns": "^2.23.x",
         "draft-js": "^0.11.x",
+        "logrocket": "^2.x.x",
+        "react": "^17.x.x",
+        "react-dom": "^17.x.x",
         "react-draft-wysiwyg": "^1.14.x",
-        "react-hook-form": "^7.6.4",
-        "react-router-dom": "^5.2.0",
-        "babel-plugin-add-react-displayname": "0.0.x",
-        "logrocket": "^2.x.x"
+        "react-hook-form": "^7.6.4"
     },
     "publishConfig": {
         "access": "public"