@arquimedes.co/eureka-forms 0.2.40 → 0.2.43

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

@@ -52,6 +52,7 @@ export interface MaterialStyle {
     textColor: string;
     outlineColor: string;
     stepBackgroundColor: string;
+    descriptionTextColor: string;
 }
 export interface Section {
     _id: string;

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

@@ -1,11 +1,19 @@
 import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
-export declare type FormStep = Title | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
+export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
 export interface Title {
     id: string;
     type: Types.TITLE;
     title: string;
     description: string | null;
 }
+export interface CheckBox {
+    label: string;
+    description: string | null;
+    id: string;
+    type: Types.CHECKBOX;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
 export interface FileUpload {
     id: string;
     type: Types.FILEUPLOAD;

package/dist/App.js

@@ -188,9 +188,9 @@ function App(_a) {
     }); };
     if (form === undefined || organizationInfo === undefined) {
         if (isWidget) {
-            return (_jsx("div", __assign({ className: styles.widgetContainer }, { children: _jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50 }, void 0) }), void 0) }), void 0));
+            return (_jsx("div", __assign({ className: styles.widgetContainer }, { children: _jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: 'var(--outlineGrey)' }, void 0) }), void 0) }), void 0));
         }
-        return (_jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50 }, void 0) }), void 0));
+        return (_jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: 'var(--outlineGrey)' }, void 0) }), void 0));
     }
     else if (form === null) {
         console.log('FORM IS NULL');

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

@@ -22,13 +22,12 @@ function ConfirmationDialog(_a) {
                 maxWidth: '100vw',
                 boxSizing: 'content-box',
             },
-        }, onClose: function () {
-            onClose();
         }, 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), _jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit" }, 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("div", __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: confirmation.url }), void 0)] }), void 0) }), void 0));
+                    } }, { 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: confirmation.url }), void 0)] }), void 0)] }), void 0) }), void 0));
 }
 export default ConfirmationDialog;

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.module.css

@@ -2,11 +2,18 @@
     display: flex;
     flex-direction: column;
     width: fit-content;
-    max-height: 60vh;
+    max-height: 80vh;
     max-width: 80vw;
     position: relative;
 }
 
+.container {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: scroll;
+}
 .confirmationContainer,
 .confirmationContainer *,
 .confirmationContainer *::after,
@@ -20,8 +27,7 @@
     margin-left: auto;
     margin-right: auto;
     padding-top: 30px;
-    font-size: 10rem;
-    height: 10rem;
+    height: fit-content;
     margin-bottom: 15px;
 }
 
@@ -36,17 +42,18 @@
 .linkContainer {
     margin-top: 20px;
     font-size: 1.2rem;
-    margin-right: auto;
     margin-left: 20px;
 }
 .url {
     font-weight: bolder;
     margin-left: 40px;
     margin-right: 40px;
-    margin-top: 5px;
+    margin-top: 10px;
     margin-bottom: 40px;
     cursor: pointer;
     font-size: 1rem;
+    max-width: calc(100% - 100px);
+    word-break: break-all;
 }
 .closeIcon {
     right: 15px;

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

@@ -2,6 +2,7 @@
 import { Organization } from '../../@Types/@Types';
 import { Form, FormStyle } from '../../@Types/Form';
 import { CustomStep } from '../../App';
+export declare const getLocale: () => any;
 export interface WidthStats {
     currentBreakPoint: number;
     isMobile: boolean;

package/dist/FormComponents/Form/Form.js

@@ -39,13 +39,13 @@ var localeMap = {
     'en-US': enLocale,
     es: esLocale,
 };
-var getNavigatorLanguage = function () {
-    return navigator.languages && navigator.languages.length
+export var getLocale = function () {
+    var _a;
+    return ((_a = localeMap[navigator.languages && navigator.languages.length
         ? navigator.languages[0]
         : navigator.userLanguage ||
             navigator.language ||
-            navigator.browserLanguage ||
-            'es';
+            navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
 };
 var blockSize = 210;
 var spacingSize = 20;
@@ -108,7 +108,6 @@ var generateClassName = createGenerateClassName({
     productionPrefix: 'efjss',
 });
 function FormTypeComponent(_a) {
-    var _b;
     var props = __rest(_a, []);
     var renderTypes = function () {
         switch (props.form.type) {
@@ -125,7 +124,7 @@ function FormTypeComponent(_a) {
     };
     switch (props.formStyle.type) {
         case FormStyleTypes.MATERIAL:
-            return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale: (_b = localeMap[getNavigatorLanguage()]) !== null && _b !== void 0 ? _b : localeMap.es }, { children: renderTypes() }), void 0) }), void 0) }), void 0));
+            return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale: getLocale() }, { children: renderTypes() }), void 0) }), void 0) }), void 0));
         default:
             return renderTypes();
     }

package/dist/FormComponents/Step/CheckBoxStep/CheckBoxStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckBox } from '../../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface CheckBoxStepProps extends StepProps {
+    /** The CheckboxStep to display */
+    step: CheckBox;
+}
+declare function CheckboxStep({ formStyle, ...others }: CheckBoxStepProps): JSX.Element;
+export default CheckboxStep;

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

@@ -0,0 +1,37 @@
+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 { FormStyleTypes } from '../../../constants/FormStepTypes';
+import MaterialCheckBoxStep from './MaterialCheckBoxStep/MaterialCheckBoxStep';
+function CheckboxStep(_a) {
+    var formStyle = _a.formStyle, others = __rest(_a, ["formStyle"]);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL: {
+            return _jsx(MaterialCheckBoxStep, __assign({ formStyle: formStyle }, others), void 0);
+        }
+        default: {
+            return _jsx(MaterialCheckBoxStep, __assign({ formStyle: formStyle }, others), void 0);
+        }
+    }
+}
+export default CheckboxStep;

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckBoxStepProps } from '../CheckBoxStep';
+declare function CheckBoxStep({ step, form, errors, control, postview, formStyle, widthStats, }: CheckBoxStepProps): JSX.Element;
+export default CheckBoxStep;

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

@@ -0,0 +1,40 @@
+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);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './MaterialCheckBoxStep.module.css';
+import { calcStepWidth } from '../../StepFunctions';
+import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
+import { Controller } from 'react-hook-form';
+function CheckBoxStep(_a) {
+    var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
+    return (_jsxs("div", __assign({ className: styles.container, style: {
+            width: widthStats.currentBreakPoint <= step.size
+                ? '100%'
+                : calcStepWidth(step.size, form),
+            maxWidth: '100%',
+            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: {
+                            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));
+                        } }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
+                    color: !!errors[step.id]
+                        ? formStyle.errorColor
+                        : formStyle.descriptionTextColor,
+                } }, { children: !!errors[step.id]
+                    ? 'Este campo es obligatorio'
+                    : step.description }), void 0))] }), void 0));
+}
+export default CheckBoxStep;

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -0,0 +1,37 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+    flex-direction: column;
+}
+
+.checkboxLbl {
+    font-size: 18px;
+    margin-right: 10px;
+    margin-left: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.labelCheckBoxContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    height: 31px;
+}
+
+.descriptionPar {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: 4px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

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

@@ -53,7 +53,7 @@ function ClassifierSelector(_a) {
                     : calcStepWidth(step.size, form),
                 maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, 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) {
+            } }, { 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]

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, { showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, 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,7 @@ 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 }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+    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) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -21,11 +21,18 @@
     -ms-user-select: none;
     user-select: none;
 }
+
 .stepDescriptionLabel {
-    font-size: 0.7rem;
+    font-size: 0.75rem;
+    margin-left: 14px;
     margin-top: -4px;
-    margin-left: 8px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
+
 .filesInput {
     display: none;
 }

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

@@ -44,9 +44,8 @@ function Selector(_a) {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form),
-                maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, 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, 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

@@ -30,6 +30,7 @@ import ClassifierSelectorStep from './ClassifierSelectorStep/ClassifierSelectorS
 import TextAreaStep from './TextAreaStep/TextAreaStep';
 import DatePickerStep from './DatePickerStep/DatePickerStep';
 import FileUploadStep from './FileUploadStep/FileUploadStep';
+import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 function StepComponent(_a) {
     var step = _a.step, props = __rest(_a, ["step"]);
     switch (step.type) {
@@ -39,6 +40,9 @@ function StepComponent(_a) {
         case Types.SELECTOR: {
             return _jsx(SelectorStep, __assign({ step: step }, props), void 0);
         }
+        case Types.CHECKBOX: {
+            return _jsx(CheckBoxStep, __assign({ step: step }, props), void 0);
+        }
         case Types.CLASSIFIER_SELECTOR: {
             return (_jsx(ClassifierSelectorStep, __assign({ step: step }, props), void 0));
         }

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

@@ -36,7 +36,10 @@ function TextAreaStep(_a) {
             return { border: '1px solid ' + formStyle.primaryColor };
         }
         else {
-            return { border: '1px solid ' + formStyle.outlineColor };
+            return {
+                border: '1px solid ' + formStyle.outlineColor,
+                pointerEvents: postview ? 'none' : 'all',
+            };
         }
     };
     if (step.hasTextEditor) {
@@ -51,7 +54,7 @@ function TextAreaStep(_a) {
                         if (!postview) {
                             setFocus(false);
                         }
-                    } }, { children: _jsxs("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
                             if (!postview) {
                                 setHovering(true);
                             }
@@ -63,51 +66,51 @@ function TextAreaStep(_a) {
                             if (!postview) {
                                 setFocus(true);
                             }
-                        } }, { children: [postview && (_jsx("div", { className: styles.disabledCurtain }, void 0)), _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
-                                    ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
-                                    : EditorState.createEmpty(), rules: step.required
-                                    ? {
-                                        validate: function (editorState) {
-                                            return editorState
-                                                .getCurrentContent()
-                                                .hasText();
-                                        },
-                                    }
-                                    : {}, shouldUnregister: true, render: function (_a) {
-                                    var _b;
-                                    var field = _a.field;
-                                    var editorClassName = styles.editor;
-                                    if (!field.value.getCurrentContent().hasText()) {
-                                        if (field.value
+                        } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
+                                ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
+                                : EditorState.createEmpty(), rules: step.required
+                                ? {
+                                    validate: function (editorState) {
+                                        return editorState
                                             .getCurrentContent()
-                                            .getBlockMap()
-                                            .first()
-                                            .getType() !== 'unstyled') {
-                                            editorClassName +=
-                                                ' RichEditor-hidePlaceholder';
-                                        }
+                                            .hasText();
+                                    },
+                                }
+                                : {}, shouldUnregister: true, render: function (_a) {
+                                var _b;
+                                var field = _a.field;
+                                var editorClassName = styles.editor;
+                                if (!field.value.getCurrentContent().hasText()) {
+                                    if (field.value
+                                        .getCurrentContent()
+                                        .getBlockMap()
+                                        .first()
+                                        .getType() !== 'unstyled') {
+                                        editorClassName +=
+                                            ' RichEditor-hidePlaceholder';
                                     }
-                                    return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
-                                            setFocus(true);
-                                        }, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                                }
+                                return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
+                                        setFocus(true);
+                                    }, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                                        options: [
+                                            'inline',
+                                            'list',
+                                            'history',
+                                        ],
+                                        inline: {
                                             options: [
-                                                'inline',
-                                                'list',
-                                                'history',
+                                                'bold',
+                                                'italic',
+                                                'underline',
+                                                'strikethrough',
                                             ],
-                                            inline: {
-                                                options: [
-                                                    'bold',
-                                                    'italic',
-                                                    'underline',
-                                                    'strikethrough',
-                                                ],
-                                            },
-                                            list: {
-                                                options: ['unordered'],
-                                            },
-                                        } }, void 0));
-                                } }, void 0)] }), void 0) }), void 0), _jsx("div", __assign({ className: styles.errorMsg, style: {
+                                        },
+                                        list: {
+                                            options: ['unordered'],
+                                        },
+                                    } }, void 0));
+                            } }, void 0) }), void 0) }), void 0), _jsx("div", __assign({ className: styles.errorMsg, style: {
                         color: formStyle.errorColor,
                     } }, { children: !!errors[step.id] && 'Este campo es obligatorio' }), void 0)] }), void 0));
     }
@@ -120,7 +123,7 @@ function TextAreaStep(_a) {
                         : 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, helperText: errors[step.id]
+                    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]
                             ? 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

@@ -22,6 +22,7 @@
     width: 100%;
     position: relative;
     margin-bottom: 1px;
+    overflow: hidden;
 }
 
 .editor {

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

@@ -37,7 +37,7 @@ function TextInputStep(_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]
                         ? errors[step.id].message
-                        : step.description, error: !!errors[step.id] }), void 0));
+                        : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id] }), void 0));
             } }, void 0) }), void 0));
 }
 export default TextInputStep;

package/dist/constants/FormStepTypes.d.ts

@@ -7,6 +7,7 @@ export declare enum FormStyleTypes {
 }
 declare enum TYPES {
     TITLE = "TITLE",
+    CHECKBOX = "CHECKBOX",
     TEXTAREA = "TEXTAREA",
     DATEPICKER = "DATEPICKER",
     FILEUPLOAD = "FILEUPLOAD",

package/dist/constants/FormStepTypes.js

@@ -10,6 +10,7 @@ export var FormStyleTypes;
 var TYPES;
 (function (TYPES) {
     TYPES["TITLE"] = "TITLE";
+    TYPES["CHECKBOX"] = "CHECKBOX";
     TYPES["TEXTAREA"] = "TEXTAREA";
     TYPES["DATEPICKER"] = "DATEPICKER";
     TYPES["FILEUPLOAD"] = "FILEUPLOAD";

package/dist/constants/InternalFormStyle.js

@@ -8,5 +8,6 @@ var InternalFormStyle = {
     errorColor: '#cc2936',
     textColor: '#293241',
     outlineColor: '#b8b8b8',
+    descriptionTextColor: '#989898',
 };
 export default InternalFormStyle;

package/dist/index.js

@@ -13,4 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as ReactDOM from 'react-dom';
 import App from './App';
 import styles from './index.module.css';
-ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', '') }, void 0) }), void 0), document.getElementById('eureka-root'));
+var urlParams = new URLSearchParams(window.location.search);
+var values = urlParams.get('data-values');
+var dataValues = undefined;
+if (values) {
+    try {
+        dataValues = JSON.parse(decodeURIComponent(values));
+    }
+    catch (error) {
+        console.error('Invalid data-values JSON', error);
+    }
+}
+ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues }, void 0) }), void 0), document.getElementById('eureka-root'));

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

@@ -26,6 +26,8 @@ interface StyleProps {
     shrunkenFontSize?: number | string;
     /** Cant edit */
     cantEdit?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
 }
 interface RoundedDatePickerProps extends StyleProps {
     /** If the calendar icon should be shown */

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -40,6 +40,8 @@ import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
 import { KeyboardDatePicker, } from '@material-ui/pickers';
+import { getLocale } from '../../FormComponents/Form/Form';
+import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
@@ -60,9 +62,7 @@ var useDatePickerStyles = function (props) {
             '& .EF-MuiOutlinedInput-notchedOutline': {
                 borderColor: props.outlineColor,
                 '& span': {
-                    fontSize: props.shrunkenFontSize,
-                    paddingRight: 0,
-                    paddingLeft: 0,
+                    fontSize: props.fontSize,
                 },
             },
             '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
@@ -96,6 +96,10 @@ var useDatePickerStyles = function (props) {
 var useDatePickerLabelStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            maxWidth: 'calc(100% - 50px)',
+            textOverflow: 'ellipsis',
             marginTop: '-4px',
             fontSize: props.fontSize,
             '&.Mui-focused': {
@@ -103,7 +107,7 @@ var useDatePickerLabelStyles = function (props) {
             },
             '&.EF-MuiInputLabel-shrink': {
                 marginTop: '0px',
-                fontSize: props.shrunkenFontSize,
+                maxWidth: 'calc(100% - 5px)',
             },
             '& .Mui-error': {
                 color: props.errorColor,
@@ -117,6 +121,7 @@ var useDatePickerLabelStyles = function (props) {
 var useDatePickerHelperTextStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
+            color: props.helperTextColor,
             '&.Mui-error': {
                 color: props.errorColor,
             },
@@ -158,7 +163,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 10 : _g, _h = _a.padding, padding = _h === void 0 ? '6px 12px' : _h, _j = _a.fontSize, fontSize = _j === void 0 ? '1rem' : _j, _k = _a.shrunkenFontSize, shrunkenFontSize = _k === void 0 ? '1rem' : _k, _l = _a.fontWeight, fontWeight = _l === void 0 ? '300' : _l, _m = _a.showIcon, showIcon = _m === void 0 ? true : _m, _o = _a.cantEdit, cantEdit = _o === void 0 ? false : _o, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "fontWeight", "showIcon", "cantEdit", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 10 : _g, _h = _a.padding, padding = _h === void 0 ? '6px 12px' : _h, _j = _a.fontSize, fontSize = _j === void 0 ? '1rem' : _j, _k = _a.shrunkenFontSize, shrunkenFontSize = _k === void 0 ? '1rem' : _k, _l = _a.helperTextColor, helperTextColor = _l === void 0 ? '#989898' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -173,6 +178,7 @@ function CustomDatePicker(_a) {
         fontSize: fontSize,
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
     })();
     var labelClasses = useDatePickerLabelStyles({
         padding: padding,
@@ -188,6 +194,7 @@ function CustomDatePicker(_a) {
         fontSize: fontSize,
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
     })();
     var datePicker = useDatePickerDialogStyles({
         padding: padding,
@@ -203,6 +210,7 @@ function CustomDatePicker(_a) {
         fontSize: fontSize,
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
     })().datePicker;
     var helperTextStyles = useDatePickerHelperTextStyles({
         padding: padding,
@@ -216,8 +224,9 @@ function CustomDatePicker(_a) {
         fontSize: fontSize,
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
     })();
-    return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: "PPP", format: "PPP", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+    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: {
             disableEnforceFocus: true,
             className: datePicker,
             cancelLabel: '',

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

@@ -1,6 +1,22 @@
 import React from 'react';
 import { SelectProps } from '@material-ui/core/Select';
-interface RoundedSelectProps extends Omit<SelectProps, 'color'> {
+interface ColorProps {
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** 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 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;
+}
+interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     /** children to display in the options */
     children?: any;
     /** Currently selected value */
@@ -10,26 +26,16 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'> {
         name?: string | undefined;
         value: any;
     }>, child?: React.ReactNode) => void;
-    /** The hight of the container */
-    height?: string;
     /** Strig to place in the label */
     label: string;
     /** Minimum width in px of the component */
     minWidth?: number;
     /** The color of the outline when selected and hovered on */
     focusColor?: string;
-    /** The color of the error to display */
-    errorColor?: string;
-    /** the color of the text */
-    color?: string;
-    /** The color of the outline when it is not selected */
-    outlineColor?: string;
     /** If outline should be error color */
     highlightError?: boolean;
     /** The helper Text to display */
     helperText?: string;
-    /** If the selector cant be opened, diabled but with same style */
-    cantEdit?: boolean;
     /** the margin around the selector */
     containerMargin?: string;
 }

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
@@ -105,7 +105,7 @@ var useLabelInputStyles = function (props) {
             marginTop: props.height != '40px' ? '-4px' : '0px',
             '&.EF-MuiInputLabel-shrink': {
                 marginTop: '0px',
-                maxWidth: 'calc(125% - 30px)',
+                maxWidth: 'calc(100% - 5px)',
             },
             '& .Mui-error': {
                 color: props.errorColor,
@@ -119,6 +119,7 @@ var useLabelInputStyles = function (props) {
 var useHelperTextStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
+            color: props.helperTextColor,
             '&.Mui-error': {
                 color: props.errorColor,
             },
@@ -126,42 +127,40 @@ 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.cantEdit, cantEdit = _f === void 0 ? false : _f, _g = _a.containerMargin, containerMargin = _g === void 0 ? '8px' : _g, _h = _a.height, height = _h === void 0 ? '40px' : _h, required = _a.required, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "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.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 classes = useStyles();
     var outlinedInputClasses = useOutlinedInputStyles({
-        focusColor: focusColor,
+        helperTextColor: helperTextColor,
         outlineColor: outlineColor,
-        cantEdit: cantEdit,
-        color: color,
         errorColor: errorColor,
+        focusColor: focusColor,
+        cantEdit: cantEdit,
         height: height,
+        color: color,
     })();
     var labelClasses = useLabelInputStyles({
-        focusColor: focusColor,
+        helperTextColor: helperTextColor,
         outlineColor: outlineColor,
         errorColor: errorColor,
-        color: color,
+        focusColor: focusColor,
         cantEdit: cantEdit,
         height: height,
+        color: color,
     })();
     var helperTextClasses = useHelperTextStyles({
-        focusColor: focusColor,
+        helperTextColor: helperTextColor,
         outlineColor: outlineColor,
         errorColor: errorColor,
+        focusColor: focusColor,
         cantEdit: cantEdit,
-        color: color,
         height: height,
+        color: color,
     })();
-    var inputLabel = React.useRef();
-    var _j = React.useState(0), labelWidth = _j[0], setLabelWidth = _j[1];
-    useEffect(function () {
-        setLabelWidth(inputLabel.current.offsetWidth);
-    }, [label]);
     return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ ref: inputLabel, classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate, input: _jsx(OutlinedInput, { disabled: cantEdit, labelWidth: labelWidth, name: label, 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, 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/RoundedTextField/RoundedTextField.d.ts

@@ -29,6 +29,8 @@ interface StyleProps {
     multiline?: boolean;
     /** Cant edit */
     cantEdit?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
 }
 interface RoundedTextFieldProps extends StyleProps {
 }

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -59,10 +59,14 @@ var useTextfieldStyles = function (props) {
             '& label': {
                 marginTop: props.multiline ? '0px' : '-4px',
                 fontSize: props.fontSize,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
             },
             '& label.EF-MuiInputLabel-shrink': {
-                fontSize: props.shrunkenFontSize,
                 marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
             },
             '& input + fieldset': {
                 borderRadius: props.borderRadius,
@@ -78,11 +82,6 @@ var useTextfieldStyles = function (props) {
                 },
                 '& .EF-MuiOutlinedInput-notchedOutline': {
                     borderColor: props.outlineColor,
-                    '& span': {
-                        fontSize: props.shrunkenFontSize,
-                        paddingRight: 0,
-                        paddingLeft: 0,
-                    },
                 },
             },
             '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
@@ -96,11 +95,14 @@ var useTextfieldStyles = function (props) {
             '& .Mui-error': {
                 color: props.errorColor,
             },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+            },
         },
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 10 : _g, _h = _a.padding, padding = _h === void 0 ? '6px 12px' : _h, _j = _a.fontSize, fontSize = _j === void 0 ? '1rem' : _j, _k = _a.shrunkenFontSize, shrunkenFontSize = _k === void 0 ? '1rem' : _k, _l = _a.errorColor, errorColor = _l === void 0 ? '#cc2936' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.multiline, multiline = _o === void 0 ? false : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, others = __rest(_a, ["focusColor", "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, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "errorColor", "fontWeight", "multiline", "cantEdit"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
@@ -108,6 +110,7 @@ function CustomTextfield(_a) {
         focusColor: focusColor,
         outlineColor: outlineColor,
         innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
         readOnly: readOnly,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "0.2.40",
+    "version": "0.2.43",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",