@arquimedes.co/eureka-forms 3.0.31 → 3.0.32

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -1,6 +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, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
-import ErkCheckBox from '../../../Shared/ErkCheckbox/ErkCheckBox';
+import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
 import React, { useContext } from 'react';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
@@ -9,34 +20,41 @@ import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { calcStepWidth } from '../../StepFunctions';
-function CheckBoxStep({ step, editable }) {
-    const { ref, value, onChange, error, field } = useFormStep(step, {
-        defaultValue: step.defaultValue ?? false,
+function CheckBoxStep(_a) {
+    var _b;
+    var step = _a.step, editable = _a.editable;
+    var _c = useFormStep(step, {
+        defaultValue: (_b = step.defaultValue) !== null && _b !== void 0 ? _b : false,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
         sizeChange: true,
-    });
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const renderNested = () => {
-        const steps = value ? step.steps : step.uncheckedSteps;
-        return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
-                const subStep = form.steps[idStep];
-                return _jsx(StepComponent, { editable: editable, step: subStep }, idStep);
+    }), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error, field = _c.field;
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    var form = useContext(FormContext);
+    var renderNested = function () {
+        var steps = value ? step.steps : step.uncheckedSteps;
+        return (_jsx(React.Fragment, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (idStep) {
+                var subStep = form.steps[idStep];
+                return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
             }) }));
     };
-    const renderLabel = (colon = false) => {
-        return (_jsxs("div", { className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
+    var renderLabel = function (colon) {
+        if (colon === void 0) { colon = false; }
+        return (_jsxs("div", __assign({ className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
                 maxWidth: calcStepWidth(step.size, form.size) - 45,
-            }, children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] }));
+            } }, { children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] })));
     };
-    return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
+    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable, maxHeight: step.size < 4 }, { children: _jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer, style: {
                                 height: step.size < 4 ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
-                            }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
-                                color: error ? formStyle.errorColor : formStyle.descriptionTextColor,
-                            }, children: error ? 'Este campo es obligatorio' : step.description }))] }) }), renderNested()] }));
+                            } }, { children: [step.label && !step.isList && renderLabel(true), _jsx(RoundedCheckBox, __assign({}, field, { inputRef: ref, onChange: onChange, "data-testid": step.id, padding: "0px", size: "1.6rem", error: !!error, cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })), step.label && step.isList && renderLabel()] })), (step.description || !!error) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
+                                color: error
+                                    ? formStyle.errorColor
+                                    : formStyle.descriptionTextColor,
+                            } }, { children: error
+                                ? 'Este campo es obligatorio'
+                                : step.description })))] })) })), renderNested()] })));
 }
 export default CheckBoxStep;

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.d.ts

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

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.js

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

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.d.ts

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

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -1,70 +1,107 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 React, { useContext, useEffect, useMemo } from 'react';
 import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
-import ErkSmartSelect from '../../../Shared/ErkSmartSelect/ErkSmartSelect';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-import { recursivelyCalcConditionSteps, selectDependencies, useFormStep } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies, useFormStep, } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { calcDefaultValue, evaluateCondition } from '../../StepFunctions';
-function ClassifierSelectorStep({ step, editable }) {
-    const { ref, value, onChange, error, field } = useFormStep(step, {
+function ClassifierSelectorStep(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, editable = _a.editable;
+    var _f = useFormStep(step, {
         defaultValue: calcDefaultValue(step),
         sizeChange: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    });
-    const idDependencies = useMemo(() => {
-        const dependencies = [...(step.dependencies ?? [])];
-        for (const option of Object.values(step.options)) {
-            if (option.type !== ClassifierOptionTypes.HIDE && option.condition) {
-                dependencies.push(...recursivelyCalcConditionSteps(option.condition));
+    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error, field = _f.field;
+    var idDependencies = useMemo(function () {
+        var _a;
+        var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
+        for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
+            var option = _b[_i];
+            if (option.type !== ClassifierOptionTypes.HIDE &&
+                option.condition) {
+                dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
             }
         }
         return dependencies;
     }, []);
-    const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
-    const { postview, preview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const classifier = form.classifiers?.[step.idClassifier ?? ''];
-    const options = useMemo(() => {
-        return classifier?.children
-            ?.filter((idClassifier) => {
-            const option = step.options[idClassifier];
-            if (option?.type === ClassifierOptionTypes.HIDE || !form.classifiers?.[idClassifier]) {
+    var dependencies = useAppSelector(function (state) {
+        return selectDependencies(state, idDependencies);
+    });
+    var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview, preview = _g.preview;
+    var form = useContext(FormContext);
+    if (!step.idClassifier)
+        return _jsx("div", {});
+    var classifier = (_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[step.idClassifier];
+    if (!classifier)
+        return _jsx("div", {});
+    var options = useMemo(function () {
+        var _a, _b;
+        return ((_b = (_a = classifier.children) === null || _a === void 0 ? void 0 : _a.filter(function (idClassifier) {
+            var _a;
+            var option = step.options[idClassifier];
+            if ((option === null || option === void 0 ? void 0 : option.type) === ClassifierOptionTypes.HIDE ||
+                !((_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier])) {
                 return false;
             }
-            return !option?.condition || evaluateCondition(option.condition, dependencies);
-        })
-            .map((idClassifier) => {
-            const classifier = form.classifiers?.[idClassifier];
+            return (!option ||
+                !(option === null || option === void 0 ? void 0 : option.condition) ||
+                evaluateCondition(option.condition, dependencies));
+        }).map(function (idClassifier) {
+            var _a, _b, _c;
+            var classifier = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier];
             return {
-                value: classifier?._id,
-                label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
+                value: classifier === null || classifier === void 0 ? void 0 : classifier._id,
+                label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && preview
+                    ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
+                    : classifier === null || classifier === void 0 ? void 0 : classifier.name,
             };
-        });
-    }, idDependencies.map((id) => dependencies[id].value));
-    useEffect(() => {
-        if (value && !options?.find((option) => option.value === value?.value)) {
+        })) !== null && _b !== void 0 ? _b : []);
+    }, idDependencies.map(function (id) { return dependencies[id].value; }));
+    var mapNestedOption = function () {
+        if (value) {
+            var currentOption = step.options[value.value];
+            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
+                return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
+                        var subStep = form.steps[idStep];
+                        return (_jsx(StepComponent, { step: subStep, editable: editable }, idStep));
+                    }) }));
+            }
+        }
+    };
+    useEffect(function () {
+        if (value && !options.find(function (option) { return option.value === (value === null || value === void 0 ? void 0 : value.value); })) {
             onChange('');
         }
     }, [options]);
-    if (!step.idClassifier || !classifier)
-        return _jsx(_Fragment, {});
-    const mapNestedOption = () => {
-        if (!value)
-            return null;
-        const currentOption = step.options[value.value];
-        if (currentOption?.type !== ClassifierOptionTypes.NESTED)
-            return null;
-        return (_jsx(React.Fragment, { children: currentOption.steps.map((idStep) => {
-                const subStep = form.steps[idStep];
-                return _jsx(StepComponent, { step: subStep, editable: editable }, idStep);
-            }) }));
-    };
-    return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, error: !!error, options: options, onChange: onChange, readOnly: !editable || postview, label: step.label ? step.label : classifier.name, required: step.required, searchable: step.searchable, helperText: error?.message?.toString() ?? step.description, getOptionSelected: (option, value) => option.value === value?.value }) }), mapNestedOption()] }));
+    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, disabled: false, loading: false, options: options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_c = formStyle.stepBackgroundColor) !== null && _c !== void 0 ? _c : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: onChange, getOptionSelected: function (option, value) {
+                        return option.value === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_e = (_d = error === null || error === void 0 ? void 0 : error.message) === null || _d === void 0 ? void 0 : _d.toString()) !== null && _e !== void 0 ? _e : step.description, error: !!error })) })), mapNestedOption()] })));
 }
 export default ClassifierSelectorStep;

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.d.ts

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

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.js

@@ -1,15 +1,38 @@
+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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
-function CollapsibleStep({ step, ...others }) {
-    const { formStyle } = useAppSelector((state) => state.global);
+function CollapsibleStep(_a) {
+    var step = _a.step, others = __rest(_a, ["step"]);
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     if (step.steps.length === 0)
         return _jsx(_Fragment, {});
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialCollapsibleStep, { step: step, ...others });
+            return _jsx(MaterialCollapsibleStep, __assign({ step: step }, others));
         }
     }
 }

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.d.ts

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

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -1,58 +1,88 @@
+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 { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useState } from 'react';
 import styles from './MaterialCollapsibleStep.module.css';
 import { Controller, useFormContext } from 'react-hook-form';
 import StepComponent from '../../Step';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-import ExpandLessIcon from '../../../Icons/ExpandLessIcon';
-import ExpandMoreIcon from '../../../Icons/ExpandMoreIcon';
-function Collapsible({ step, open, setOpen, ...others }) {
-    const [firstTime, setFirstTime] = useState(true);
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const { formState: { errors }, } = useFormContext();
-    const contentRef = React.useRef(null);
-    useEffect(() => {
-        if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
+function Collapsible(_a) {
+    var _b, _c, _d;
+    var step = _a.step, open = _a.open, setOpen = _a.setOpen, others = __rest(_a, ["step", "open", "setOpen"]);
+    var _e = useState(true), firstTime = _e[0], setFirstTime = _e[1];
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
+    var errors = useFormContext().formState.errors;
+    var contentRef = React.useRef(null);
+    useEffect(function () {
+        var _a;
+        if (!open && ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.find(function (dep) { return !!errors[dep]; }))) {
             setOpen(true);
         }
-    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
-    return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
+    }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return errors[dep]; })) !== null && _c !== void 0 ? _c : []);
+    return (_jsxs("div", __assign({ style: { maxWidth: '100%' } }, { children: [_jsxs("div", __assign({ className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,
-                }, children: [_jsx("div", { className: styles.collapsibleLabel, onClick: () => {
+                } }, { children: [_jsx("div", __assign({ className: styles.collapsibleLabel, onClick: function () {
                             if (firstTime)
                                 setFirstTime(false);
                             setOpen(!open);
-                        }, children: step.label }), _jsx("div", { className: styles.expand, onClick: () => {
+                        } }, { children: step.label })), _jsx("div", __assign({ className: styles.expand, onClick: function () {
                             if (firstTime)
                                 setFirstTime(false);
                             setOpen(!open);
-                        }, children: _jsx("div", { className: styles.expandIcon, children: open ? (_jsx(ExpandLessIcon, { style: { fontSize: 'inherit' } })) : (_jsx(ExpandMoreIcon, { style: { fontSize: 'inherit' } })) }) })] }), _jsx("div", { className: styles.content, style: {
+                        } }, { children: _jsx("div", __assign({ className: styles.expandIcon }, { children: open ? (_jsx(ExpandLessRoundedIcon, { fontSize: "inherit" })) : (_jsx(ExpandMoreRoundedIcon, { fontSize: "inherit" })) })) }))] })), _jsx("div", __assign({ className: styles.content, style: {
                     height: open
                         ? firstTime
                             ? 'auto'
-                            : contentRef.current?.offsetHeight
+                            : (_d = contentRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight
                         : 0,
-                }, children: _jsx("div", { className: styles.contentContainer, ref: contentRef, children: step.steps.map((idSubStep) => {
-                        const subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, { ...others, step: subStep, key: idSubStep }));
-                    }) }) }), _jsx("div", { className: styles.separator, style: {
+                } }, { children: _jsx("div", __assign({ className: styles.contentContainer, ref: contentRef }, { children: step.steps.map(function (idSubStep) {
+                        var subStep = form.steps[idSubStep];
+                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep })));
+                    }) })) })), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
-                } })] }));
+                } })] })));
 }
 function CollapsibleStep(props) {
-    const { postview } = useAppSelector((state) => state.global);
-    const { clearErrors, formState: { errors }, } = useFormContext();
-    return (_jsx(Controller, { name: props.step.id, defaultValue: props.step.defaultValue ?? (postview ? false : true), render: ({ field: { value, onChange } }) => (_jsx(Collapsible, { ...props, open: value, setOpen: (open) => {
-                if (!open) {
-                    const deps = props.step.dependencies?.filter((dep) => !!errors[dep]);
-                    if (deps)
-                        clearErrors(deps);
-                }
-                onChange(open);
-            } })) }));
+    var _a;
+    var postview = useAppSelector(function (state) { return state.global; }).postview;
+    var _b = useFormContext(), clearErrors = _b.clearErrors, errors = _b.formState.errors;
+    return (_jsx(Controller, { name: props.step.id, defaultValue: (_a = props.step.defaultValue) !== null && _a !== void 0 ? _a : (postview ? false : true), render: function (_a) {
+            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+            return (_jsx(Collapsible, __assign({}, props, { open: value, setOpen: function (open) {
+                    var _a;
+                    if (!open) {
+                        var deps = (_a = props.step.dependencies) === null || _a === void 0 ? void 0 : _a.filter(function (dep) { return !!errors[dep]; });
+                        if (deps)
+                            clearErrors(deps);
+                    }
+                    onChange(open);
+                } })));
+        } }));
 }
 export default CollapsibleStep;

package/dist/FormSteps/CustomStep.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { StepProps } from './Step';
 import { Form } from '../@Types';
 import { GlobalState } from '../States/GlobalSlice';

package/dist/FormSteps/CustomStep.js

@@ -1,24 +1,38 @@
+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 FormContext from '../Contexts/FormContext';
 import { useAppSelector } from '../hooks';
 import CustomStepPropsContext from '../Contexts/CustomContext';
 import { useContext } from 'react';
 import { useStepDependency } from './StepHooks';
-function CustomStepComponent({ customComponent, customProps = {}, ...props }) {
-    const form = useContext(FormContext);
-    const global = useAppSelector((state) => state.global);
-    const { customStepProps } = useContext(CustomStepPropsContext);
-    const dependencyStore = useAppSelector((state) => state.site.dependencies);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const dependencyInfo = useStepDependency(props.step, undefined);
-    return customComponent({
-        ...global,
-        ...dependencyInfo,
-        ...props,
-        dependencyStore,
-        widthStats,
-        form,
-        customStepProps,
-        ...customProps,
-    });
+function CustomStepComponent(_a) {
+    var customComponent = _a.customComponent, _b = _a.customProps, customProps = _b === void 0 ? {} : _b, props = __rest(_a, ["customComponent", "customProps"]);
+    var form = useContext(FormContext);
+    var global = useAppSelector(function (state) { return state.global; });
+    var customStepProps = useContext(CustomStepPropsContext).customStepProps;
+    var dependencyStore = useAppSelector(function (state) { return state.site.dependencies; });
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var dependencyInfo = useStepDependency(props.step, undefined);
+    return customComponent(__assign(__assign(__assign(__assign(__assign({}, global), dependencyInfo), props), { dependencyStore: dependencyStore, widthStats: widthStats, form: form, customStepProps: customStepProps }), customProps));
 }
 export default CustomStepComponent;

package/dist/FormSteps/DatePickerStep/DatePickerStep.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { DatePicker } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface DatePickerStepProps extends StepProps {
     /** The DatePickerStep to display */
     step: DatePicker;
     /** Default value to display */
-    defaultValue?: string | null;
+    defaultValue?: Date | null;
 }
 declare function DatePickerStep(props: DatePickerStepProps): JSX.Element;
 export default DatePickerStep;

package/dist/FormSteps/DatePickerStep/DatePickerStep.js

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

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.d.ts

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

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -1,18 +1,29 @@
+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 ErkDatePicker from '../../../Shared/ErkDatePicker/ErkDatePicker';
+import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { useCallback } from 'react';
-function DatePickerStep({ step, editable, defaultValue }) {
-    const postview = useAppSelector((state) => state.global.postview);
-    const { ref, value, onChange, error, field } = useFormStep(step, {
-        defaultValue,
+function DatePickerStep(_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,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    });
-    const handleChange = useCallback((date) => onChange(date?.toISOString() ?? null), [onChange]);
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePicker, { ...field, value: value ? new Date(value) : null, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: handleChange, pickTime: step.pickTime, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+    }), 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(RoundedDatePicker, __assign({}, field, { value: value, onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || 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: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required })) })));
 }
 export default DatePickerStep;

package/dist/FormSteps/EntityValueStep/EntityValuePickerStep.d.ts

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