@arquimedes.co/eureka-forms 3.0.39 → 3.0.42-test

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -1,25 +1,3 @@
-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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialTextAreaStep.module.css';
 import { useController } from 'react-hook-form';
@@ -27,124 +5,110 @@ import { Editor } from 'react-draft-wysiwyg'; //Load programatically only if ste
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { useCallback, useState } from 'react';
-import { ClickAwayListener } from '@material-ui/core';
 import { useAppSelector } from '../../../hooks';
 import { useStepDependency } from '../../StepHooks';
 import { EditorState, convertFromRaw } from 'draft-js';
 import { getRawText } from '../../../Utils/DraftFunctions';
-function TextAreaStep(_a) {
-    var _b;
-    var step = _a.step, editable = _a.editable;
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var _d = useState(false), hovering = _d[0], setHovering = _d[1];
-    var _e = useState(false), focus = _e[0], setFocus = _e[1];
-    var _f = useState(), timer = _f[0], setTimer = _f[1];
-    var _g = useStepDependency(step, getRawText()), handleStepDep = _g.handleStepDep, originalValue = _g.originalValue, isDependency = _g.isDependency;
-    var _h = useController({
+import { ClickAwayListener } from '@mui/material';
+function TextAreaStep({ step, editable }) {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const [hovering, setHovering] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [timer, setTimer] = useState();
+    const { handleStepDep, originalValue, isDependency } = useStepDependency(step, getRawText());
+    const { field: { ref, onChange, ...field }, fieldState: { error }, } = useController({
         name: step.id,
         shouldUnregister: true,
         rules: step.required
             ? {
-                validate: function (editorState) {
-                    return editorState.getCurrentContent().hasText();
-                },
+                validate: (editorState) => editorState.getCurrentContent().hasText(),
             }
             : {},
         defaultValue: EditorState.createWithContent(convertFromRaw(originalValue)),
-    }), _j = _h.field, ref = _j.ref, onChange = _j.onChange, field = __rest(_j, ["ref", "onChange"]), error = _h.fieldState.error;
-    var handleChange = useCallback(function (value) {
+    });
+    const handleChange = useCallback((value) => {
         if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
+            clearTimeout(timer);
+            setTimer(setTimeout(() => {
                 handleStepDep(value.getCurrentContent().getPlainText());
                 setTimer(undefined);
             }, 1000));
         }
         onChange(value);
-    }, [handleStepDep, isDependency, onChange]);
-    var calcStyle = function () {
-        var backgroundColor = formStyle.stepBackgroundColor;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleStepDep, isDependency, onChange]);
+    const calcStyle = () => {
+        const backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {
             return {
                 border: '2px solid ' + formStyle.primaryColor,
                 marginTop: -1,
                 marginLeft: -1,
                 marginBottom: 0,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
         else if (hovering) {
             return {
                 border: '1px solid ' + formStyle.primaryColor,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
         else {
             return {
                 border: '1px solid ' + formStyle.outlineColor,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
     };
-    var canEdit = editable && !postview;
-    var value = field.value;
-    var editorClassName = styles.editor;
+    const canEdit = editable && !postview;
+    const value = field.value;
+    let editorClassName = styles.editor;
     if (!value.getCurrentContent().hasText()) {
-        if (value.getCurrentContent().getBlockMap().first().getType() !==
-            'unstyled') {
+        if (value.getCurrentContent().getBlockMap().first().getType() !== 'unstyled') {
             editorClassName += ' RichEditor-hidePlaceholder';
         }
     }
     if (!canEdit) {
         editorClassName += ' postview-editor';
     }
-    return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
+    return (_jsxs("div", { className: styles.textEditorContainer, style: {
             '--eureka-outline': formStyle.outlineColor,
             '--eureka-primary': formStyle.primaryColor,
-        } }, { children: [step.label && (_jsxs("div", __assign({ className: styles.textEditorLabel, style: {
-                    color: error
-                        ? formStyle.errorColor
-                        : formStyle.textColor,
-                } }, { children: [step.label, " ", step.required ? ' *' : ''] }))), _jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () {
+        }, children: [step.label && (_jsxs("div", { className: styles.textEditorLabel, style: {
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }, children: [step.label, " ", step.required ? ' *' : ''] })), _jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => {
                     if (canEdit) {
                         setFocus(false);
                     }
-                } }, { children: _jsx("div", __assign({ className: postview
-                        ? styles.postViewContainer + ' EF-DraftContainer'
-                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                }, children: _jsx("div", { className: postview
+                        ? styles.postViewContainer + ' Erk-DraftContainer'
+                        : styles.textContainer + ' Erk-DraftContainer', style: calcStyle(), onMouseEnter: () => {
                         if (canEdit) {
                             setHovering(true);
                         }
-                    }, onMouseLeave: function () {
+                    }, onMouseLeave: () => {
                         if (canEdit) {
                             setHovering(false);
                         }
-                    }, onClick: function () {
+                    }, onClick: () => {
                         if (canEdit) {
                             setFocus(true);
                         }
-                    }, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
+                    }, "data-testid": step.id, children: _jsx(Editor, { ...field, editorRef: ref, onFocus: () => {
                             setFocus(true);
-                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: step.description ?? '', toolbar: {
                             options: ['inline', 'list', 'history'],
                             inline: {
-                                options: [
-                                    'bold',
-                                    'italic',
-                                    'underline',
-                                    'strikethrough',
-                                ],
+                                options: ['bold', 'italic', 'underline', 'strikethrough'],
                             },
                             list: {
                                 options: ['unordered'],
                             },
-                        } })) })) })), _jsx("div", __assign({ className: styles.errorMsg, style: {
+                        } }) }) }), _jsx("div", { className: styles.errorMsg, style: {
                     color: formStyle.errorColor,
                     height: !postview && editable ? '0.75rem' : 0,
-                } }, { children: !!error && 'Este campo es obligatorio' }))] })));
+                }, children: !!error && 'Este campo es obligatorio' })] }));
 }
 export default TextAreaStep;

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TextAreaStepProps } from '../TextAreaStep';
 export interface Payload {
     text: string;
     draft: any;
 }
-declare function TextAreaStep({ step, editable, maxLength, }: TextAreaStepProps): JSX.Element;
+declare function TextAreaStep({ step, editable, maxLength }: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -1,47 +1,31 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
+import ErkTextField from '../../../Shared/ErkTextField/ErkTextField';
 import styles from './MaterialTextAreaStep.module.css';
 import React from 'react';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
-function TextAreaStep(_a) {
-    var _b, _c;
-    var step = _a.step, editable = _a.editable, maxLength = _a.maxLength;
-    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, partial = _d.partial;
-    var _e = useFormStep(step, {
+function TextAreaStep({ step, editable, maxLength }) {
+    const { formStyle, postview, partial } = useAppSelector((state) => state.global);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
         debounce: true,
         defaultValue: '',
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
-    var canEdit = editable && !postview;
-    return (_jsxs("div", __assign({ className: styles.container, style: {
-            paddingBottom: step.required || step.description || !!error
-                ? '0px'
-                : '5px',
-        } }, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, "data-testid": step.id, maxLength: maxLength, label: step.label, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description) !== null && _c !== void 0 ? _c : (step.required ? ' ' : null), error: !!error })) })), _jsxs("div", __assign({ className: styles.print }, { children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.printLbl, style: {
+    });
+    return (_jsxs("div", { className: styles.container, style: {
+            paddingBottom: step.required || step.description || !!error ? '0px' : '12px',
+        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, readOnly: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
                                     color: formStyle.descriptionTextColor,
-                                } }, { children: step.label })), _jsx("div", __assign({ className: styles.printLine, style: {
+                                }, children: step.label }), _jsx("div", { className: styles.printLine, style: {
                                     color: formStyle.stepBackgroundColor,
                                     backgroundColor: formStyle.stepBackgroundColor,
-                                } }, { children: step.label }))] })), !value && (_jsx("div", __assign({ className: styles.emptyPrintLbl, style: {
+                                }, children: step.label })] })), !value && (_jsx("div", { className: styles.emptyPrintLbl, style: {
                             color: formStyle.textColor + '8a',
-                        } }, { children: step.label }))), _jsx("p", __assign({ className: styles.printContainer, style: {
+                        }, children: step.label })), _jsx("p", { className: styles.printContainer, style: {
                             backgroundColor: formStyle.stepBackgroundColor,
                             borderColor: formStyle.outlineColor,
                             whiteSpace: 'pre-wrap',
-                        } }, { children: value }))] }))] })));
+                        }, children: value })] })] }));
 }
 export default TextAreaStep;

package/dist/FormSteps/TextAreaStep/TextAreaStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextArea } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface TextAreaStepProps extends StepProps {

package/dist/FormSteps/TextAreaStep/TextAreaStep.js

@@ -1,28 +1,17 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialTextAreaStep from './MaterialTextAreaStep/MaterialTextAreaStep';
 import MaterialTextAreaEditorStep from './MaterialTextAreaStep/MaterialTextAreaEditorStep';
 function TextAreaStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             if (props.step.hasTextEditor)
-                return _jsx(MaterialTextAreaEditorStep, __assign({}, props));
+                return _jsx(MaterialTextAreaEditorStep, { ...props });
             else
-                return _jsx(MaterialTextAreaStep, __assign({}, props));
+                return _jsx(MaterialTextAreaStep, { ...props });
         }
     }
 }

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextInputStepProps } from '../TextInputStep';
-declare function TextInputStep({ icon, step, editable, maxLength, defaultValue, validation, }: TextInputStepProps): JSX.Element;
+declare function TextInputStep({ step, editable, maxLength, IconComponent, defaultValue, validation, }: TextInputStepProps): JSX.Element;
 export default TextInputStep;

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -1,30 +1,17 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
-import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
+import ErkTextField from '../../../Shared/ErkTextField/ErkTextField';
 import styles from './MaterialTextInputStep.module.css';
 import { calcStepWidth } from '../../StepFunctions';
 import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
-function TextInputStep(_a) {
-    var _b;
-    var icon = _a.icon, step = _a.step, editable = _a.editable, maxLength = _a.maxLength, _c = _a.defaultValue, defaultValue = _c === void 0 ? step.defaultValue : _c, _d = _a.validation, validation = _d === void 0 ? step.validation : _d;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _e = useAppSelector(function (state) { return state.global; }), formStyle = _e.formStyle, postview = _e.postview;
-    var form = useContext(FormContext);
-    var _f = useFormStep(step, {
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
+function TextInputStep({ step, editable, maxLength, IconComponent, defaultValue = step.defaultValue, validation = step.validation, }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue: defaultValue ?? '',
         debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
@@ -38,15 +25,10 @@ function TextInputStep(_a) {
                 }
                 : undefined,
         },
-    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error, field = _f.field;
-    return (_jsx("div", __assign({ className: styles.container, style: {
-            width: currentBreakPoint <= step.size
-                ? '100%'
-                : calcStepWidth(step.size, form.size),
-            minHeight: step.description ||
-                (!postview && editable && (step.required || validation))
-                ? '55px'
-                : '43px',
-        } }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, maxLength: maxLength, "data-testid": step.id, label: step.label, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error, icon: step.showIcon ? icon : undefined })) })));
+    });
+    return (_jsx("div", { className: styles.container, style: {
+            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            minHeight: step.description || (!postview && editable && (step.required || validation)) ? '55px' : '43px',
+        }, children: _jsx(ErkTextField, { ...field, value: value, inputRef: ref, labelMargin: 0, error: !!error, label: step.label, onChange: onChange, maxLength: maxLength, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description, IconComponent: step.showIcon ? IconComponent : undefined }) }));
 }
 export default TextInputStep;

package/dist/FormSteps/TextInputStep/TextInputStep.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { TextInput } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface TextInputStepProps extends StepProps {
     /** The TextInputStep to display */
     step: TextInput;
     /** The icon to display */
-    icon?: React.ReactNode;
+    IconComponent?: React.ElementType;
     /** Default value to display */
     defaultValue?: string;
     /** Custom Validation to display */

package/dist/FormSteps/TextInputStep/TextInputStep.js

@@ -1,24 +1,13 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialTextInputStep from './MaterialTextInputStep/MaterialTextInputStep';
 import { useAppSelector } from '../../hooks';
 function TextInputStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialTextInputStep, __assign({}, props));
+            return _jsx(MaterialTextInputStep, { ...props });
         }
     }
 }

package/dist/FormSteps/TimePickerStep/MaterialTimePickerStep/MaterialTimePickerStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TimePickerStepProps } from '../TimePickerStep';
-declare function TimePickerStep({ step, editable, defaultValue, }: TimePickerStepProps): JSX.Element;
+declare function TimePickerStep({ step, editable, defaultValue }: TimePickerStepProps): JSX.Element;
 export default TimePickerStep;

package/dist/FormSteps/TimePickerStep/MaterialTimePickerStep/MaterialTimePickerStep.js

@@ -1,40 +1,23 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
-import RoundedTimePicker from '../../../Shared/RoundedTimePicker/RoundedTimePicker';
+import ErkTimePicker from '../../../Shared/ErkTimePicker/ErkTimePicker';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-function TimePickerStep(_a) {
-    var _b;
-    var step = _a.step, editable = _a.editable, defaultValue = _a.defaultValue;
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var _d = useFormStep(step, {
-        defaultValue: defaultValue,
+function TimePickerStep({ step, editable, defaultValue }) {
+    const postview = useAppSelector((state) => state.global.postview);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue,
         rules: {
-            validate: function (value) {
+            validate: (value) => {
                 if (step.required) {
-                    if (!value ||
-                        !(value.hours ||
-                            value.minutes ||
-                            value.days ||
-                            value.working !== undefined)) {
+                    if (!value || !(value.hours || value.minutes || value.days || value.working !== undefined)) {
                         return 'Este campo es obligatorio';
                     }
                 }
                 return true;
             },
         },
-    }), ref = _d.ref, value = _d.value, onChange = _d.onChange, error = _d.error, field = _d.field;
-    return (_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedTimePicker, __assign({}, field, { value: value, onChange: onChange, inputRef: ref, cantEdit: !editable || postview, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, helperTextColor: formStyle.descriptionTextColor, backgroundColor: formStyle.stepBackgroundColor, fontWeight: 400, height: '31px', containerMargin: "0px", label: step.label, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required, pickDays: step.pickDays, minDays: step.minDays, maxDays: step.maxDays, pickHours: step.pickHours, minHours: step.minHours, maxHours: step.maxHours, pickMinutes: step.pickMinutes, minMinutes: step.minMinutes, maxMinutes: step.maxMinutes, working: step.working })) })));
+    });
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkTimePicker, { ...field, value: value, onChange: onChange, inputRef: ref, labelMargin: 0, readOnly: !editable || postview, label: step.label, helperText: error?.message ?? step.description, error: !!error, required: step.required, pickDays: step.pickDays, minDays: step.minDays, maxDays: step.maxDays, pickHours: step.pickHours, minHours: step.minHours, maxHours: step.maxHours, pickMinutes: step.pickMinutes, minMinutes: step.minMinutes, maxMinutes: step.maxMinutes, working: step.working }) }));
 }
 export default TimePickerStep;

package/dist/FormSteps/TimePickerStep/TimePickerStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TimePicker } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 import { Time } from '../../@Types/Time';

package/dist/FormSteps/TimePickerStep/TimePickerStep.js

@@ -1,24 +1,13 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import { useAppSelector } from '../../hooks';
 import MaterialTimePickerStep from './MaterialTimePickerStep/MaterialTimePickerStep';
 function TimePickerStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialTimePickerStep, __assign({}, props));
+            return _jsx(MaterialTimePickerStep, { ...props });
         }
     }
 }

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TitleStepProps } from '../TitleStep';
 declare function TitleStep({ step }: TitleStepProps): JSX.Element;
 export default TitleStep;

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -1,23 +1,3 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
@@ -28,49 +8,36 @@ import { selectDependencies, useFormStep } from '../../StepHooks';
 import { stringToDraft } from '../../../Utils/DraftFunctions';
 import SmartDraftRenderer from '../../../Shared/SmartDraftRenderer/SmartDraftRenderer';
 //**Pendientes a mejorar, esperar antes de enviar, en local (actividades), usar el value envez de el draft en actividades, esperar a que dejen de escribir, optimizar para que use lo que tiene en local y si necesita ahi si pregunte. */
-function TitleStep(_a) {
-    var _b;
-    var step = _a.step;
-    var _c = useFormStep(step, {
+function TitleStep({ step }) {
+    const { value, onChange } = useFormStep(step, {
         defaultValue: undefined,
-    }), value = _c.value, onChange = _c.onChange;
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
-    var form = useContext(FormContext);
-    var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var size = (_b = step.size) !== null && _b !== void 0 ? _b : form.size.blockNum;
-    var title = useMemo(function () { var _a; return calcBaseDraft((_a = value === null || value === void 0 ? void 0 : value.title) !== null && _a !== void 0 ? _a : step.title); }, //Usa por defecto lo que venga en el value, pero no escucha cambios
-    [step.title]);
-    var description = useMemo(function () { var _a; return calcBaseDraft((_a = value === null || value === void 0 ? void 0 : value.description) !== null && _a !== void 0 ? _a : step.description); }, //Usa por defecto lo que venga en el value, pero no escucha cambios
-    [step.description]);
-    var dependencies = useAppSelector(function (state) {
-        return selectDependencies(state, step.dependencies);
     });
-    var values = useMemo(function () {
-        var values = {};
-        for (var _i = 0, _a = Object.values(dependencies); _i < _a.length; _i++) {
-            var _b = _a[_i], idOriginal = _b.idOriginal, value_1 = _b.value;
-            values[idOriginal] = value_1;
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const size = step.size ?? form.size.blockNum;
+    const title = useMemo(() => calcBaseDraft(value?.title ?? step.title), //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.title, value?.title]);
+    const description = useMemo(() => calcBaseDraft(value?.description ?? step.description), //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.description, value?.description]);
+    const dependencies = useAppSelector((state) => selectDependencies(state, step.dependencies));
+    const values = useMemo(() => {
+        const values = {};
+        for (const { idOriginal, value } of Object.values(dependencies)) {
+            values[idOriginal] = value;
         }
         return values;
     }, [dependencies]);
-    var path = useMemo(function () { return __spreadArray(__spreadArray([], step.stepPath, true), [step.id], false).join('.'); }, [step.stepPath, step.id]);
-    return (_jsxs("div", __assign({ className: styles.container, style: {
+    return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
-            width: widthStats.currentBreakPoint <= size
-                ? '100%'
-                : calcStepWidth(size, form.size),
-        } }, { children: [_jsx("div", __assign({ className: styles.titleLbl, style: {
-                    textAlign: widthStats.isMobile &&
-                        widthStats.currentBreakPoint <= size
-                        ? 'center'
-                        : 'start',
-                } }, { children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: "".concat(path, ".title"), onChange: function (title) { return onChange(__assign(__assign({}, value), { title: title })); } }) })), _jsx("div", __assign({ className: styles.descriptionPar }, { children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: "".concat(path, ".description"), onChange: function (description) {
-                        return onChange(__assign(__assign({}, value), { description: description }));
-                    } }) }))] })));
+            width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
+        }, children: [_jsx("div", { className: styles.titleLbl, style: {
+                    textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
+                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${step.stepPath.join('.')}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${step.stepPath.join('.')}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;
 function calcBaseDraft(value) {
     return typeof value === 'string'
         ? stringToDraft(value)
-        : value !== null && value !== void 0 ? value : stringToDraft('');
+        : (value ?? stringToDraft(''));
 }

package/dist/FormSteps/TitleStep/TitleStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Title } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface TitleStepProps extends StepProps {