@arquimedes.co/eureka-forms 2.0.99 → 3.0.1-refactor

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' : '5px',
+        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, disabled: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _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, inputRef: ref, value: value, maxLength: maxLength, "data-testid": step.id, label: step.label, readOnly: !editable || postview, required: step.required, error: !!error, IconComponent: step.showIcon ? IconComponent : undefined, onChange: onChange, helperText: error?.message ?? step.description }) }));
 }
 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, 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,14 +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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
@@ -16,30 +5,28 @@ 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, {
+function TitleStep({ step }) {
+    const { 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: {
+    });
+    const title = value?.title ?? step.title;
+    const description = value?.description ?? step.description;
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const size = step.size ?? form.size.blockNum;
+    return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
             width: widthStats.currentBreakPoint <= size
                 ? '100%'
                 : calcStepWidth(size, form.size),
-        } }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
+        }, children: [title && (_jsx("div", { className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile &&
                         widthStats.currentBreakPoint <= size
                         ? 'center'
                         : 'start',
-                } }, { children: title }))), description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                }, children: title })), description && (_jsx("p", { className: styles.descriptionPar, style: {
                     margin: title ? '10px 0px' : '0px 0px 5px 0px',
-                } }, { children: description })))] })));
+                }, children: description }))] }));
 }
 export default TitleStep;

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 {

package/dist/FormSteps/TitleStep/TitleStep.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 MaterialTitleStep from './MaterialTitleStep/MaterialTitleStep';
 import { useAppSelector } from '../../hooks';
 function TitleStep(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(MaterialTitleStep, __assign({}, props));
+            return _jsx(MaterialTitleStep, { ...props });
         }
     }
 }

package/dist/FormSteps/Utils/@StepFiller/StepFiller.d.ts

@@ -5,5 +5,5 @@ export interface StepFillerContainerProps {
     step: FillerSteps;
     children: React.ReactNode;
 }
-declare function StepFillerContainer({ step, children, }: StepFillerContainerProps): JSX.Element;
+declare function StepFillerContainer({ step, children }: StepFillerContainerProps): JSX.Element;
 export default StepFillerContainer;

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

@@ -1,14 +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);
-};
 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';
@@ -16,30 +5,29 @@ 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 () {
+export const SizeChangeContext = createContext(undefined);
+function StepFiller({ step, children }) {
+    const { getValues } = useFormContext();
+    const form = useContext(FormContext);
+    const [fillerSize, setFillerSize] = useState(calcFillerSize(step, form.steps, getValues(), form.size));
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const handleSizeChange = useCallback(() => {
         setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (step.maxSize && step.maxSize < form.size.blockNum) {
-        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
+        return (_jsxs("div", { className: styles.firstLvlContainer, style: {
                 width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
-            } }, { children: [_jsx(SizeChangeContext.Provider, __assign({ value: handleSizeChange }, { children: children })), fillerSize > 0 && (_jsx("div", { className: styles.smallSeparator, style: {
+            }, children: [_jsx(SizeChangeContext.Provider, { value: handleSizeChange, children: children }), fillerSize > 0 && (_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 })] })));
+        return (_jsxs(SizeChangeContext.Provider, { 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);
+function StepFillerContainer({ step, children }) {
+    const handleSizeChange = useContext(SizeChangeContext);
     if (handleSizeChange)
         return _jsx(_Fragment, { children: children });
     else

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GSmartSelect } from '../../../@Types/GenericFormSteps';
 import { CheckBox, DatePicker, ClassifierSelector, FormSelector, TimePicker } from '../../../@Types/FormStep';
 interface MaterialInputProps {

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js

@@ -1,26 +1,14 @@
-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 { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector, selectBreakPoint } from '../../../hooks';
 import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialInputContainer.module.css';
-function MaterialInputContainer(_a) {
-    var step = _a.step, editable = _a.editable, children = _a.children, onClick = _a.onClick, _b = _a.maxHeight, maxHeight = _b === void 0 ? true : _b;
-    var form = useContext(FormContext);
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var postview = useAppSelector(function (state) { return state.global.postview; });
-    return (_jsx("div", __assign({ className: styles.container, style: {
+function MaterialInputContainer({ step, editable, children, onClick, maxHeight = true, }) {
+    const form = useContext(FormContext);
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const postview = useAppSelector((state) => state.global.postview);
+    return (_jsx("div", { className: styles.container, style: {
             width: currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form.size),
@@ -30,6 +18,6 @@ function MaterialInputContainer(_a) {
                     ? '55px'
                     : '43px'
                 : undefined,
-        }, onClick: onClick, "data-testid": step.id }, { children: children })));
+        }, onClick: onClick, "data-testid": step.id, children: children }));
 }
 export default MaterialInputContainer;

package/dist/Icons/@IconTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IconProps {
     fill?: string;
     contrast?: string;

package/dist/Icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@IconTypes';
+declare function ArrowLeftIcon({ className, ...props }: IconProps): JSX.Element;
+export default ArrowLeftIcon;

package/dist/Icons/ArrowLeftIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './ErkIcon.module.css';
+function ArrowLeftIcon({ className = styles.ErkIcon, ...props }) {
+    return (_jsx("svg", { ...props, className: className, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41a.9959.9959 0 00-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" }) }));
+}
+export default ArrowLeftIcon;

package/dist/Icons/ArrowRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@IconTypes';
+declare function ArrowRightIcon({ className, ...props }: IconProps): JSX.Element;
+export default ArrowRightIcon;

package/dist/Icons/ArrowRightIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './ErkIcon.module.css';
+function ArrowRightIcon({ className = styles.ErkIcon, ...props }) {
+    return (_jsx("svg", { ...props, className: className, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.29 15.88L13.17 12 9.29 8.12a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" }) }));
+}
+export default ArrowRightIcon;

package/dist/Icons/CalendarIcon.d.ts

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

package/dist/Icons/CalendarIcon.js

@@ -1,17 +1,6 @@
-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";
-function CalendarIcon(_a) {
-    var className = _a.className, style = _a.style, fill = _a.fill;
-    return (_jsx("svg", __assign({ fill: fill, style: style, className: className, xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "-1 -1 26 26", width: "24" }, { children: _jsx("path", { d: "M20 3h-1V2c0-.55-.45-1-1-1s-1 .45-1 1v1H7V2c0-.55-.45-1-1-1s-1 .45-1 1v1H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 18H5c-.55 0-1-.45-1-1V8h16v12c0 .55-.45 1-1 1z" }) })));
+import styles from './ErkIcon.module.css';
+function CalendarIcon({ className = styles.ErkIcon, ...props }) {
+    return (_jsx("svg", { ...props, className: className, xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "-1 -1 26 26", width: "24", children: _jsx("path", { d: "M20 3h-1V2c0-.55-.45-1-1-1s-1 .45-1 1v1H7V2c0-.55-.45-1-1-1s-1 .45-1 1v1H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 18H5c-.55 0-1-.45-1-1V8h16v12c0 .55-.45 1-1 1z" }) }));
 }
 export default CalendarIcon;

package/dist/Icons/CheckCircleIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@IconTypes';
+declare function CheckCircleIcon({ className, ...props }: IconProps): JSX.Element;
+export default CheckCircleIcon;

package/dist/Icons/CheckCircleIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './ErkIcon.module.css';
+function CheckCircleIcon({ className = styles.ErkIcon, ...props }) {
+    return (_jsx("svg", { ...props, className: className, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.88-11.71L10 14.17l-1.88-1.88a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7c.39-.39.39-1.02 0-1.41-.39-.39-1.03-.39-1.42 0z" }) }));
+}
+export default CheckCircleIcon;

package/dist/Icons/CheckboxCheckedIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@IconTypes';
+declare function CheckboxCheckedIcon({ className, ...props }: IconProps): JSX.Element;
+export default CheckboxCheckedIcon;