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

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -0,0 +1,51 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import StepComponent from '../../../Step';
+import { MapperStyleTypes } from '../../../../constants/FormStepTypes';
+import ListMapperElement from './ListMapperElement/ListMapperElement';
+import PillMapperElement from './PillMapperElement/PillMapperElement';
+import React, { useContext, useMemo } from 'react';
+import FormContext from '../../../../Contexts/FormContext';
+import CustomContext from '../../../../Contexts/CustomContext';
+function MapperElementComponent(props) {
+    var _a;
+    var step = props.step, element = props.element, editable = props.editable;
+    var customContext = useContext(CustomContext);
+    var form = useContext(FormContext);
+    if (element.deleted) {
+        return _jsx("div", {});
+    }
+    var nestedCustomContext = useMemo(function () {
+        if (!props.calcCustomStepProps)
+            return customContext;
+        return __assign(__assign({}, customContext), { customStepProps: props.calcCustomStepProps(element, customContext.customStepProps) });
+    }, [element, customContext]);
+    var mapSubSteps = function () {
+        return (_jsx(CustomContext.Provider, __assign({ value: nestedCustomContext }, { children: step.rootSteps.map(function (idSubStep) {
+                var _a;
+                var subStep = form.steps[element.ids[idSubStep]];
+                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep] })));
+            }) })));
+    };
+    switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+        case MapperStyleTypes.INLINE:
+            return _jsx(React.Fragment, { children: mapSubSteps() });
+        case MapperStyleTypes.LIST:
+            return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+        case MapperStyleTypes.PILL:
+        default:
+            return (_jsx(PillMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+    }
+}
+export default MapperElementComponent;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -0,0 +1,50 @@
+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 { useContext } from 'react';
+import styles from './PillMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
+function PillMapperElement(_a) {
+    var _b;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers, customElementRender = _a.customElementRender;
+    var deletable = (_b = step.deletable) !== null && _b !== void 0 ? _b : true;
+    var size = useContext(FormContext).size;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    var name = calcName
+        ? calcName(element)
+        : step.unitLabel
+            ? step.unitLabel + ' ' + (num + 1)
+            : '';
+    var renderElement = function (renderElementButtons) {
+        var _a, _b;
+        return (_jsx("div", __assign({ className: widthStats.isMobile
+                ? styles.mobileContainer
+                : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        ((_b = (_a = step.style) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : size.blockNum - 1),
+                } }, { children: [name && (_jsx("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: loading ? 'Cargando...' : name + ':' }))), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [renderElementButtons === null || renderElementButtons === void 0 ? void 0 : renderElementButtons(element), (deletable || !element.isOriginal) && (_jsx("div", __assign({ className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                                    if (editable && !postview) {
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                    }
+                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })), children] })) })));
+    };
+    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() })));
+}
+export default PillMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -0,0 +1,157 @@
+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;
+};
+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 { createElement as _createElement } from "react";
+import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
+import styles from './MaterialMapperStep.module.css';
+import { useFormContext } from 'react-hook-form';
+import { MapperStyleTypes } from '../../../constants/FormStepTypes';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+import MapperElementComponent from './Element/MapperElementComponent';
+import { addStepsDependencies } from '../../../States/SiteSlice';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import CustomContext from '../../../Contexts/CustomContext';
+import { useFormStep } from '../../StepHooks';
+import { addMapperStep } from '../../../App/AppFunctions';
+import { calcMapperSubSteps } from '../../../Form/FormFunctions';
+function MapperComponent(_a) {
+    var form = _a.form, step = _a.step, error = _a.error, loading = _a.loading, inputRef = _a.inputRef, editable = _a.editable, customAdd = _a.customAdd, elements = _a.elements, onChange = _a.onChange, handleAddElement = _a.handleAddElement, others = __rest(_a, ["form", "step", "error", "loading", "inputRef", "editable", "customAdd", "elements", "onChange", "handleAddElement"]);
+    var handleDeleteElement = useCallback(function (index) { return function () {
+        var tempElements = __spreadArray([], elements, true);
+        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+        onChange(tempElements);
+    }; }, [elements, onChange]);
+    var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
+    var container = useMemo(function () {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case MapperStyleTypes.LIST:
+                return { container: styles.listContainer };
+            case MapperStyleTypes.PILL:
+            default:
+                return { container: styles.pillContainer };
+        }
+    }, [step]).container;
+    var mapElements = function () {
+        return (_jsx(FormContext.Provider, __assign({ value: form }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, loading: loading, handleDelete: handleDeleteElement(index) }))); }) })));
+    };
+    if (step.style.type === MapperStyleTypes.INLINE)
+        return _jsx(React.Fragment, { children: mapElements() });
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    elements.filter(function (elem) { return !elem.deleted; }).length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel +
+                            (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                            if (editable && !postview) {
+                                handleAddElement();
+                            }
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
+                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+}
+function MapperStep(props) {
+    var step = props.step, editable = props.editable, customAdd = props.customAdd;
+    var form = useContext(FormContext);
+    var postview = useAppSelector(function (state) { return state.global; }).postview;
+    var customSteps = useContext(CustomContext).customSteps;
+    var dispatch = useAppDispatch();
+    var setValue = useFormContext().setValue;
+    var _a = useFormStep(step, {
+        defaultValue: [],
+        rules: {
+            validate: function (array) {
+                return !step.required ||
+                    (step.required &&
+                        array.filter(function (elem) { return !elem.deleted; }).length > 0);
+            },
+        },
+    }), ref = _a.ref, value = _a.value, onChange = _a.onChange, error = _a.error;
+    var _b = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _b[0], setLocalSteps = _b[1];
+    //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
+    useEffect(function () {
+        if (value.length === 0 && !postview && editable && step.creatable) {
+            if (!customAdd)
+                handleAddElement();
+        }
+    }, []);
+    var handleAddElement = useCallback(function (elementValue) {
+        var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
+        if (elementValue)
+            element.value = elementValue;
+        for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
+            var _c = _b[_i], key = _c[0], elems = _c[1];
+            setValue(key, elems);
+        }
+        var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
+        onChange(newElements);
+        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
+        dispatch(addStepsDependencies({
+            steps: steps,
+            customSteps: customSteps,
+            allSteps: __assign(__assign({}, form.steps), steps),
+        }));
+    }, [step, form, customSteps, value, onChange]);
+    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
+    return (_jsx(MapperComponent, __assign({}, props, { error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value })));
+}
+export function CustomMapperStep(props) {
+    var step = props.step, elements = props.elements, onChange = props.onChange;
+    var form = useContext(FormContext);
+    var customSteps = useContext(CustomContext).customSteps;
+    var dispatch = useAppDispatch();
+    var setValue = useFormContext().setValue;
+    var _a = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _a[0], setLocalSteps = _a[1];
+    var handleAddElement = useCallback(function (elementValue) {
+        var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
+        if (elementValue)
+            element.value = elementValue;
+        for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
+            var _c = _b[_i], key = _c[0], elems = _c[1];
+            setValue(key, elems);
+        }
+        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        onChange(newElements);
+        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
+        dispatch(addStepsDependencies({
+            steps: steps,
+            customSteps: customSteps,
+            allSteps: __assign(__assign({}, form.steps), steps),
+        }));
+    }, [step, form, customSteps, elements, onChange]);
+    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
+    return (_jsx(MapperComponent, __assign({}, props, { form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement })));
+}
+export default MapperStep;

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -0,0 +1,62 @@
+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 './MaterialRatingStep.module.css';
+import React, { useContext } from 'react';
+import Rating from '../../../Shared/Rating/Rating';
+import { RatingTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import { calcDefaultValue } from '../../StepFunctions';
+function RatingStep(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, editable = _a.editable;
+    var _f = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error;
+    var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview;
+    var form = useContext(FormContext);
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var renderNestedOption = function () {
+        var currentOption;
+        if (value !== undefined && value !== null && step.nestedSteps) {
+            if (step.ratingType === RatingTypes.LIKE) {
+                currentOption = step.nestedSteps[value];
+            }
+            else {
+                currentOption = step.nestedSteps[value - 1];
+            }
+            if (currentOption && currentOption.length > 0) {
+                return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
+                        var subStep = form.steps[idSubStep];
+                        return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
+                    }) }));
+            }
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
+                    paddingBottom: step.description || step.required ? 0 : 15,
+                    breakInside: 'avoid',
+                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: ref }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
+                            color: !!error && value === null
+                                ? (_d = formStyle.errorColor) !== null && _d !== void 0 ? _d : '#cc2936'
+                                : (_e = formStyle.descriptionTextColor) !== null && _e !== void 0 ? _e : '#989898',
+                        } }, { children: !!error && value === null
+                            ? error === null || error === void 0 ? void 0 : error.message
+                            : step.description })))] })), renderNestedOption()] }));
+}
+export default RatingStep;

package/dist/FormSteps/RatingStep/RatingStep.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 MaterialRatingStep from './MaterialRatingStep/MaterialRatingStep';
+import { useAppSelector } from '../../hooks';
+function RatingStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialRatingStep, __assign({}, props));
+        }
+    }
+}
+export default RatingStep;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -0,0 +1,60 @@
+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 React, { useContext } from 'react';
+import { OptionTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
+function SelectorStep(_a) {
+    var _b, _c, _d;
+    var step = _a.step, editable = _a.editable;
+    var _e = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
+    var form = useContext(FormContext);
+    var _f = useAppSelector(function (state) { return state.global; }), postview = _f.postview, formStyle = _f.formStyle;
+    var mapNestedOption = function () {
+        var currentOptionIndex = null;
+        var currentOption = null;
+        for (var i = 0; i < step.options.length; i++) {
+            var option = step.options[i];
+            if ((option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value)) {
+                currentOptionIndex = i;
+                currentOption = option;
+            }
+        }
+        if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === OptionTypes.NESTED &&
+            currentOptionIndex !== null) {
+            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep) {
+                    var subStep = form.steps[idSubStep];
+                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
+                }) }));
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { value: value, inputRef: ref, handleUpdate: onChange, disabled: false, loading: false, options: step.options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_b = formStyle.stepBackgroundColor) !== null && _b !== void 0 ? _b : 'white', label: step.label, 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", getOptionSelected: function (option, value) {
+                        return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_d = (_c = error === null || error === void 0 ? void 0 : error.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!error })) })), value && mapNestedOption()] }));
+}
+function SelectorStepContainer(props) {
+    return (_jsx(StepFillerContainer, __assign({ step: props.step }, { children: _jsx(SelectorStep, __assign({}, props)) })));
+}
+export default SelectorStepContainer;

package/dist/FormSteps/SelectorStep/SelectorStep.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 { useAppSelector } from '../../hooks';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialSelectorStep from './MaterialSelectorStep/MaterialSelectorStep';
+function SelectorStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialSelectorStep, __assign({}, props));
+        }
+    }
+}
+export default SelectorStep;

package/dist/{mjs/FormSteps → FormSteps}/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useAppSelector } from '../../../hooks';
 import styles from './MaterialSeparatorStep.module.css';
-function SeparatorStep({ step }) {
-    const { formStyle } = useAppSelector((state) => state.global);
+function SeparatorStep(_a) {
+    var step = _a.step;
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     return (_jsx("div", { className: styles.container, style: {
             backgroundColor: step.transparent
                 ? 'transparent'

package/dist/FormSteps/SeparatorStep/SeparatorStep.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 { useAppSelector } from '../../hooks';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialSeparatorStep from './MaterialSeparatorStep/MaterialSeparatorStep';
+function SeparatorStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialSeparatorStep, __assign({}, props));
+        }
+    }
+}
+export default SeparatorStep;