@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/dist/FormSteps/StepHooks.js

@@ -0,0 +1,143 @@
+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;
+};
+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 { useCallback, useContext, useEffect, useState } from 'react';
+import { useAppSelector, useAppDispatch } from '../hooks';
+import { clearDependency, setStepDependency, } from '../States/SiteSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import { calcDefaultValue } from './StepFunctions';
+import { useController, } from 'react-hook-form';
+import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
+var selectIsDependency = createSelector([
+    function (state) { return state.site.dependencies; },
+    function (state, step) { return step; },
+], function (dependencies, step) {
+    return dependencies[step.id] !== undefined;
+});
+export var selectOriginalValue = createSelector([
+    function (state) { return state.site.values; },
+    function (state, step) { return step; },
+], function (values, step) { var _a; return (_a = values.sections[step.idSection]) === null || _a === void 0 ? void 0 : _a[step.id]; });
+export var useStepDependency = function (step, defaultValue) {
+    var _a;
+    var isDependency = useAppSelector(function (state) {
+        return selectIsDependency(state, step);
+    });
+    var originalValue = useAppSelector(function (state) {
+        return selectOriginalValue(state, step);
+    });
+    var dispatch = useAppDispatch();
+    useEffect(function () {
+        if (isDependency && !originalValue && defaultValue) {
+            dispatch(setStepDependency({
+                step: step,
+                value: defaultValue,
+            }));
+        }
+        return function () {
+            dispatch(clearDependency(step));
+        };
+    }, [isDependency]);
+    var handleStepDep = useCallback(function (value) {
+        if (!isDependency)
+            return;
+        dispatch(setStepDependency({
+            step: step,
+            value: value !== null && value !== void 0 ? value : null,
+        }));
+    }, [step.id, step.type, isDependency]);
+    return {
+        handleStepDep: handleStepDep,
+        isDependency: isDependency,
+        originalValue: (_a = originalValue !== null && originalValue !== void 0 ? originalValue : defaultValue) !== null && _a !== void 0 ? _a : calcDefaultValue(step),
+    };
+};
+export var selectDependencies = createSelector([
+    function (state) { return state.site.dependencies; },
+    function (state, step) { return step; },
+    function (state, step, form) { return form; },
+], function (dependencies, step, form) {
+    var invalids = [];
+    var emptyDep = false;
+    /** Show deep error changes even if not in dependencies */
+    for (var _i = 0, _a = calcDeepDependencies(step.id, form); _i < _a.length; _i++) {
+        var idDep = _a[_i];
+        var dependency = dependencies[idDep];
+        if ((dependency === null || dependency === void 0 ? void 0 : dependency.value) === null && form.steps[idDep]) {
+            invalids.push(idDep);
+        }
+        if (dependency === null || dependency === void 0 ? void 0 : dependency.empty)
+            emptyDep = true;
+    }
+    return { invalids: invalids, emptyDep: emptyDep };
+});
+var calcDeepDependencies = function (idStep, form, deps) {
+    if (deps === void 0) { deps = []; }
+    var step = form.steps[idStep];
+    if (step === null || step === void 0 ? void 0 : step.dependencies) {
+        for (var _i = 0, _a = step.dependencies; _i < _a.length; _i++) {
+            var dep = _a[_i];
+            if (!deps.includes(dep)) {
+                deps.push.apply(deps, __spreadArray(__spreadArray([], calcDeepDependencies(dep, form, deps), false), [dep], false));
+            }
+        }
+    }
+    return deps;
+};
+export var useFormStep = function (step, _a) {
+    var rules = _a.rules, debounce = _a.debounce, sizeChange = _a.sizeChange, defaultValue = _a.defaultValue;
+    var _b = useState(), timer = _b[0], setTimer = _b[1];
+    var _c = useStepDependency(step, defaultValue), isDependency = _c.isDependency, handleStepDep = _c.handleStepDep, originalValue = _c.originalValue;
+    var _d = useController({
+        name: step.id,
+        rules: rules,
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _e = _d.field, ref = _e.ref, value = _e.value, fieldOnChange = _e.onChange, field = __rest(_e, ["ref", "value", "onChange"]), error = _d.fieldState.error;
+    var handleSizeChange = useContext(SizeChangeContext);
+    var onChange = useCallback(function (value) {
+        if (isDependency) {
+            if (debounce) {
+                try {
+                    clearTimeout(timer);
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                setTimer(setTimeout(function () {
+                    handleStepDep(value);
+                    setTimer(undefined);
+                }, 1000));
+            }
+            else {
+                handleStepDep(value);
+            }
+        }
+        fieldOnChange(value);
+        if (sizeChange)
+            handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
+    }, [handleStepDep, isDependency, fieldOnChange]);
+    return {
+        ref: ref,
+        value: value,
+        onChange: onChange,
+        error: error,
+        field: field,
+    };
+};

package/dist/{mjs/FormSteps → FormSteps}/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -1,3 +1,25 @@
+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';
@@ -10,63 +32,67 @@ import { useAppSelector } from '../../../hooks';
 import { useStepDependency } from '../../StepHooks';
 import { EditorState, convertFromRaw } from 'draft-js';
 import { getRawText } from '../../../Utils/DraftFunctions';
-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({
+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({
         name: step.id,
         shouldUnregister: true,
         rules: step.required
             ? {
-                validate: (editorState) => editorState.getCurrentContent().hasText(),
+                validate: function (editorState) {
+                    return editorState.getCurrentContent().hasText();
+                },
             }
             : {},
         defaultValue: EditorState.createWithContent(convertFromRaw(originalValue)),
-    });
-    const handleChange = useCallback((value) => {
+    }), _j = _h.field, ref = _j.ref, onChange = _j.onChange, field = __rest(_j, ["ref", "onChange"]), error = _h.fieldState.error;
+    var handleChange = useCallback(function (value) {
         if (isDependency) {
             try {
                 clearTimeout(timer);
                 // eslint-disable-next-line no-empty
             }
             catch (e) { }
-            setTimer(setTimeout(() => {
+            setTimer(setTimeout(function () {
                 handleStepDep(value.getCurrentContent().getPlainText());
                 setTimer(undefined);
             }, 1000));
         }
         onChange(value);
     }, [handleStepDep, isDependency, onChange]);
-    const calcStyle = () => {
-        const backgroundColor = formStyle.stepBackgroundColor;
+    var calcStyle = function () {
+        var 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,
             };
         }
     };
-    const canEdit = editable && !postview;
-    const value = field.value;
-    let editorClassName = styles.editor;
+    var canEdit = editable && !postview;
+    var value = field.value;
+    var editorClassName = styles.editor;
     if (!value.getCurrentContent().hasText()) {
         if (value.getCurrentContent().getBlockMap().first().getType() !==
             'unstyled') {
@@ -76,35 +102,35 @@ function TextAreaStep({ step, editable }) {
     if (!canEdit) {
         editorClassName += ' postview-editor';
     }
-    return (_jsxs("div", { className: styles.textEditorContainer, style: {
-            pageBreakInside: 'avoid',
+    return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
+            breakInside: 'avoid',
             '--eureka-outline': formStyle.outlineColor,
             '--eureka-primary': formStyle.primaryColor,
-        }, children: [step.label && (_jsxs("div", { className: styles.textEditorLabel, style: {
+        } }, { children: [step.label && (_jsxs("div", __assign({ className: styles.textEditorLabel, style: {
                     color: error
                         ? formStyle.errorColor
                         : formStyle.textColor,
-                }, children: [step.label, " ", step.required ? ' *' : ''] })), _jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => {
+                } }, { children: [step.label, " ", step.required ? ' *' : ''] }))), _jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () {
                     if (canEdit) {
                         setFocus(false);
                     }
-                }, children: _jsx("div", { className: postview
+                } }, { children: _jsx("div", __assign({ className: postview
                         ? styles.postViewContainer + ' EF-DraftContainer'
-                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: () => {
+                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
                         if (canEdit) {
                             setHovering(true);
                         }
-                    }, onMouseLeave: () => {
+                    }, onMouseLeave: function () {
                         if (canEdit) {
                             setHovering(false);
                         }
-                    }, onClick: () => {
+                    }, onClick: function () {
                         if (canEdit) {
                             setFocus(true);
                         }
-                    }, "data-testid": step.id, children: _jsx(Editor, { ...field, editorRef: ref, onFocus: () => {
+                    }, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
                             setFocus(true);
-                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: step.description ?? '', toolbar: {
+                        }, 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: {
                             options: ['inline', 'list', 'history'],
                             inline: {
                                 options: [
@@ -117,9 +143,9 @@ function TextAreaStep({ step, editable }) {
                             list: {
                                 options: ['unordered'],
                             },
-                        } }) }) }), _jsx("div", { className: styles.errorMsg, style: {
+                        } })) })) })), _jsx("div", __assign({ 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.js

@@ -0,0 +1,48 @@
+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 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, {
+        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',
+            breakAfter: 'auto',
+        } }, { 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: {
+                                    color: formStyle.descriptionTextColor,
+                                } }, { children: step.label })), _jsx("div", __assign({ className: styles.printLine, style: {
+                                    color: formStyle.stepBackgroundColor,
+                                    backgroundColor: formStyle.stepBackgroundColor,
+                                } }, { children: step.label }))] })), !value && (_jsx("div", __assign({ className: styles.emptyPrintLbl, style: {
+                            color: formStyle.textColor + '8a',
+                        } }, { children: step.label }))), _jsx("p", __assign({ className: styles.printContainer, style: {
+                            backgroundColor: formStyle.stepBackgroundColor,
+                            borderColor: formStyle.outlineColor,
+                            whiteSpace: 'pre-wrap',
+                        } }, { children: value }))] }))] })));
+}
+export default TextAreaStep;

package/{src → dist}/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -58,14 +58,39 @@
 }
 .print {
     display: none;
+    position: relative;
+}
+.printLbl {
+    padding: 0px 4px;
+    top: -8px;
+    left: 10.5px;
+    font-size: 0.75rem;
+    position: absolute;
+    z-index: 3;
+}
+.emptyPrintLbl {
+    position: absolute;
+    top: 9px;
+    left: 14px;
+}
+.printLine {
+    top: 0px;
+    padding: 0px 5px;
+    left: 9px;
+    height: 1px;
+    font-size: 0.75rem;
+    position: absolute;
+    overflow: hidden;
+    z-index: 2;
 }
 .printContainer {
     border-radius: 10px;
     border: 1px solid black;
-    padding: 6px 12px;
+    padding: 5px 11px;
     width: calc(100% - 2);
     font-size: 1rem;
-    min-height: 50px;
+    min-height: 76px;
+    line-height: 1.2rem;
     margin: 0px;
 }
 .erkTextArea {

package/dist/FormSteps/TextAreaStep/TextAreaStep.js

@@ -0,0 +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 { 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;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            if (props.step.hasTextEditor)
+                return _jsx(MaterialTextAreaEditorStep, __assign({}, props));
+            else
+                return _jsx(MaterialTextAreaStep, __assign({}, props));
+        }
+    }
+}
+export default TextAreaStep;

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

@@ -0,0 +1,53 @@
+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 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, defaultValue = _a.defaultValue, _c = _a.validation, validation = _c === void 0 ? step.validation : _c;
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    var form = useContext(FormContext);
+    var _e = useFormStep(step, {
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
+        debounce: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            pattern: validation
+                ? {
+                    value: new RegExp(validation.type === 'EMAIL'
+                        ? // eslint-disable-next-line no-control-regex
+                            /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
+                        : validation.value),
+                    message: validation.message,
+                }
+                : undefined,
+        },
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.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',
+            breakInside: 'avoid',
+        } }, { 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 })) })));
+}
+export default TextInputStep;

package/dist/FormSteps/TextInputStep/TextInputStep.js

@@ -0,0 +1,25 @@
+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;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialTextInputStep, __assign({}, props));
+        }
+    }
+}
+export default TextInputStep;

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

@@ -0,0 +1,46 @@
+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 { calcStepWidth } from '../../StepFunctions';
+import styles from './MaterialTitleStep.module.css';
+import { useAppSelector } from '../../../hooks';
+import FormContext from '../../../Contexts/FormContext';
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+function TitleStep(_a) {
+    var _b, _c, _d;
+    var step = _a.step;
+    var value = useFormStep(step, {
+        defaultValue: undefined,
+    }).value;
+    var title = (_b = value === null || value === void 0 ? void 0 : value.title) !== null && _b !== void 0 ? _b : step.title;
+    var description = (_c = value === null || value === void 0 ? void 0 : value.description) !== null && _c !== void 0 ? _c : step.description;
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var size = (_d = step.size) !== null && _d !== void 0 ? _d : form.size.blockNum;
+    return (_jsxs("div", __assign({ className: styles.container, style: {
+            color: formStyle.textColor,
+            width: widthStats.currentBreakPoint <= size
+                ? '100%'
+                : calcStepWidth(size, form.size),
+            breakInside: 'avoid',
+        } }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
+                    textAlign: widthStats.isMobile &&
+                        widthStats.currentBreakPoint <= size
+                        ? 'center'
+                        : 'start',
+                } }, { children: title }))), description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    margin: title ? '10px 0px' : '0px 0px 5px 0px',
+                } }, { children: description })))] })));
+}
+export default TitleStep;

package/dist/FormSteps/TitleStep/TitleStep.js

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

package/dist/FormSteps/Utils/@StepFiller/StepFiller.js

@@ -0,0 +1,48 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { calcFillerSize } from '../../StepFunctions';
+import FormContext from '../../../Contexts/FormContext';
+import styles from './StepFiller.module.css';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+export var SizeChangeContext = createContext(undefined);
+function StepFiller(_a) {
+    var step = _a.step, children = _a.children;
+    var getValues = useFormContext().getValues;
+    var form = useContext(FormContext);
+    var _b = useState(calcFillerSize(step, form.steps, getValues(), form.size)), fillerSize = _b[0], setFillerSize = _b[1];
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var handleSizeChange = useCallback(function () {
+        setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+    }, []);
+    if (step.maxSize && step.maxSize < form.size.blockNum) {
+        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
+                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
+            } }, { children: [_jsx(SizeChangeContext.Provider, __assign({ value: handleSizeChange }, { children: children })), _jsx("div", { className: styles.smallSeparator, style: {
+                        width: fillerSize,
+                    } })] })));
+    }
+    else {
+        return (_jsxs(SizeChangeContext.Provider, __assign({ value: handleSizeChange }, { children: [children, step.maxSize && _jsx("div", { className: styles.separator })] })));
+    }
+}
+function StepFillerContainer(_a) {
+    var step = _a.step, children = _a.children;
+    var handleSizeChange = useContext(SizeChangeContext);
+    if (handleSizeChange)
+        return _jsx(_Fragment, { children: children });
+    else
+        return _jsx(StepFiller, { step: step, children: children });
+}
+export default StepFillerContainer;