@arquimedes.co/eureka-forms 3.0.35 → 3.0.36-test

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

@@ -1,41 +1,10 @@
-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 { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useContext, useMemo, useCallback, } 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 ErkButton from '../../../Shared/ErkButton/ErkButton';
 import MapperElementComponent from './Element/MapperElementComponent';
 import { addStepsDependencies } from '../../../States/SiteSlice';
 import FormContext from '../../../Contexts/FormContext';
@@ -44,15 +13,17 @@ 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, value = _a.value, loading = _a.loading, inputRef = _a.inputRef, editable = _a.editable, customAdd = _a.customAdd, onChange = _a.onChange, handleAddElement = _a.handleAddElement, others = __rest(_a, ["form", "step", "error", "value", "loading", "inputRef", "editable", "customAdd", "onChange", "handleAddElement"]);
-    var page = value.page, elements = value.elements;
-    var handleDeleteElement = useCallback(function (index) { return function () {
-        var tempElements = __spreadArray([], elements, true);
-        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        var newPage = 0;
-        for (var i = page; i >= 0; i--) {
-            var element = elements[i];
+function MapperComponent({ form, step, error, value, loading, inputRef, editable, customAdd, onChange, handleAddElement, ...others }) {
+    const { page, elements } = value;
+    const handleDeleteElement = useCallback((index) => () => {
+        const tempElements = [...elements];
+        tempElements[index] = {
+            ...tempElements[index],
+            deleted: true,
+        };
+        let newPage = 0;
+        for (let i = page; i >= 0; i--) {
+            const element = elements[i];
             if (!element.deleted) {
                 newPage = i;
                 break;
@@ -62,127 +33,117 @@ function MapperComponent(_a) {
             elements: tempElements,
             page: page === index ? newPage : page,
         });
-    }; }, [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) {
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [elements, onChange]);
+    const inputValue = useMemo(() => JSON.stringify(elements), [elements]);
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const { container } = useMemo(() => {
+        switch (step.style?.type) {
             case MapperStyleTypes.LIST:
                 return { container: styles.listContainer };
             case MapperStyleTypes.PILL:
             default:
                 return { container: styles.pillContainer };
         }
-    }, [step]).container;
-    var mapElements = function () {
+    }, [step]);
+    const mapElements = () => {
         if (step.style.type === MapperStyleTypes.PAGED) {
-            var element = elements[page];
+            const element = elements[page];
             if (!element)
                 return _jsx(_Fragment, {});
-            return (_jsx(FormContext.Provider, __assign({ value: form }, { children: _createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: page, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, handleDelete: handleDeleteElement(page) })) })));
+            return (_jsx(FormContext.Provider, { value: form, children: _createElement(MapperElementComponent, { ...others, key: element.id, num: page, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, handleDelete: handleDeleteElement(page) }) }));
         }
-        return (_jsx(FormContext.Provider, __assign({ value: form }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { num: index, key: element.id, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, handleDelete: handleDeleteElement(index) }))); }) })));
+        return (_jsx(FormContext.Provider, { value: form, children: elements.map((element, index) => (_createElement(MapperElementComponent, { ...others, num: index, key: element.id, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, 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, id: 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 + '-input', 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 () {
+    return (_jsxs("div", { className: container, style: { color: formStyle.textColor }, "data-testid": step.id, id: step.id, children: [step.label && _jsx("div", { className: styles.titleLbl, children: step.label }), step.description && (_jsx("p", { className: styles.descriptionPar, style: {
+                    margin: step.description ? '10px 0px' : '0px 0px 5px 0px',
+                }, children: step.description })), mapElements(), _jsx("input", { id: step.id + '-input', ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max || elements.filter((elem) => !elem.deleted).length < step.max) && (_jsxs("div", { className: styles.btnContainer, children: [!customAdd && (_jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
                             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" })))] })));
+                        } })), customAdd?.(inputRef, !editable || postview, handleAddElement)] })), !!error && elements.filter((elem) => !elem.deleted).length === 0 && (_jsx("div", { 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, {
+    const { step, editable, customAdd } = props;
+    const form = useContext(FormContext);
+    const { postview } = useAppSelector((state) => state.global);
+    const { customSteps } = useContext(CustomContext);
+    const dispatch = useAppDispatch();
+    const { setValue } = useFormContext();
+    const { ref, value, onChange, error } = useFormStep(step, {
         defaultValue: { elements: [], page: 0 },
         rules: {
-            validate: function (_a) {
-                var elements = _a.elements;
-                return !step.required ||
-                    (step.required &&
-                        elements.filter(function (elem) { return !elem.deleted; }).length > 0);
-            },
+            validate: ({ elements }) => !step.required ||
+                (step.required && elements.filter((elem) => !elem.deleted).length > 0),
         },
-    }), ref = _a.ref, value = _a.value, onChange = _a.onChange, error = _a.error;
-    var elements = value.elements;
-    var _b = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _b[0], setLocalSteps = _b[1];
+    });
+    const { elements } = value;
+    const [localSteps, setLocalSteps] = useState(calcMapperSubSteps(step, elements, customSteps));
     //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
-    useEffect(function () {
+    useEffect(() => {
         if (elements.length === 0 && !postview && editable && step.creatable) {
             if (!customAdd)
                 handleAddElement();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var handleAddElement = useCallback(function (elementValue) {
-        var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
+    const handleAddElement = useCallback((elementValue) => {
+        const { element, steps, mappers } = addMapperStep(step, customSteps);
         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];
+        for (const [key, elems] of Object.entries(mappers)) {
             setValue(key, elems);
         }
-        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        const newElements = [...elements, element];
         onChange({
             elements: newElements,
-            page: step.style.type === MapperStyleTypes.PAGED
-                ? elements.length - 1
-                : 0,
+            page: step.style.type === MapperStyleTypes.PAGED ? elements.length - 1 : 0,
         });
-        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
+        setLocalSteps((oldLocalSteps) => ({ ...oldLocalSteps, ...steps }));
         dispatch(addStepsDependencies({
-            steps: steps,
-            customSteps: customSteps,
-            allSteps: __assign(__assign({}, form.steps), steps),
+            steps,
+            customSteps,
+            allSteps: { ...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, value: value, handleAddElement: handleAddElement, form: subForm })));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [step, form, customSteps, value, onChange]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
+    return (_jsx(MapperComponent, { ...props, error: error, inputRef: ref, onChange: onChange, value: value, handleAddElement: handleAddElement, form: subForm }));
 }
 export function CustomMapperStep(props) {
-    var step = props.step, value = props.value, onChange = props.onChange;
-    var elements = value.elements;
-    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;
+    const { step, value, onChange } = props;
+    const { elements } = value;
+    const form = useContext(FormContext);
+    const { customSteps } = useContext(CustomContext);
+    const dispatch = useAppDispatch();
+    const { setValue } = useFormContext();
+    const [localSteps, setLocalSteps] = useState(calcMapperSubSteps(step, elements, customSteps));
+    const handleAddElement = useCallback((elementValue) => {
+        const { element, steps, mappers } = addMapperStep(step, customSteps);
         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];
+        for (const [key, elems] of Object.entries(mappers)) {
             setValue(key, elems);
         }
-        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        const newElements = [...elements, element];
         onChange({
             elements: newElements,
-            page: step.style.type === MapperStyleTypes.PAGED
-                ? elements.length - 1
-                : 0,
+            page: step.style.type === MapperStyleTypes.PAGED ? elements.length - 1 : 0,
         });
-        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
+        setLocalSteps((oldLocalSteps) => ({ ...oldLocalSteps, ...steps }));
         dispatch(addStepsDependencies({
-            steps: steps,
-            customSteps: customSteps,
-            allSteps: __assign(__assign({}, form.steps), steps),
+            steps,
+            customSteps,
+            allSteps: { ...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, onChange: onChange, handleAddElement: handleAddElement })));
+    }, [step, form, customSteps, elements, onChange, dispatch, setValue]);
+    const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps, form]);
+    return _jsx(MapperComponent, { ...props, form: subForm, onChange: onChange, handleAddElement: handleAddElement });
 }
 export default MapperStep;

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.d.ts

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

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.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 } from "react/jsx-runtime";
 import styles from './MaterialPhoneInputStep.module.css';
 import { calcStepWidth } from '../../StepFunctions';
@@ -16,36 +5,29 @@ import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
-import RoundedPhoneInput from '../../../Shared/RoundedPhoneInput/RoundedPhoneInput';
-import { isEmptyPhoneNumber, isValidPhoneNumber, } from '../../../Utils/PhoneFunctions';
-function PhoneInputStep(_a) {
-    var _b;
-    var step = _a.step, editable = _a.editable, _c = _a.defaultValue, defaultValue = _c === void 0 ? step.defaultValue : _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 : '',
+import ErkPhoneInput from '../../../Shared/ErkPhoneInput/EkrPhoneInput';
+import { isEmptyPhoneNumber, isValidPhoneNumber } from '../../../Utils/PhoneFunctions';
+function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const postview = useAppSelector((state) => state.global.postview);
+    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,
-            validate: function (phone) {
-                var _a, _b;
+            validate: (phone) => {
                 if (isValidPhoneNumber(phone))
                     return true;
                 if (!step.required && isEmptyPhoneNumber(phone))
                     return true;
-                return ((_b = (_a = step.validation) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Número de teléfono inválido');
+                return step.validation?.message ?? 'Número de teléfono inválido';
             },
         },
-    }), 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)
-                ? '55px'
-                : '43px',
-        } }, { children: _jsx(RoundedPhoneInput, __assign({}, field, { inputRef: ref, value: value, onChange: onChange, "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 })) })));
+    });
+    return (_jsx("div", { className: styles.container, style: {
+            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            minHeight: step.description || (!postview && editable) ? '55px' : '43px',
+        }, children: _jsx(ErkPhoneInput, { ...field, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default PhoneInputStep;

package/dist/FormSteps/PhoneInputStep/PhoneInputStep.d.ts

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

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

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.d.ts

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

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.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 styles from './MaterialRatingStep.module.css';
 import React, { useContext } from 'react';
@@ -19,20 +8,18 @@ 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, {
+function RatingStep({ step, editable }) {
+    const { ref, value, onChange, error } = 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;
+    });
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const renderNestedOption = () => {
+        let currentOption;
         if (value !== undefined && value !== null && step.nestedSteps) {
             if (step.ratingType === RatingTypes.LIKE) {
                 currentOption = step.nestedSteps[value];
@@ -41,21 +28,20 @@ function RatingStep(_a) {
                 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 (_jsx(React.Fragment, { children: currentOption.map((idSubStep) => {
+                        const subStep = form.steps[idSubStep];
+                        return _jsx(StepComponent, { editable: editable, step: subStep }, idSubStep);
                     }) }));
             }
         }
+        return null;
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: styles.container, style: {
                     paddingBottom: step.description || step.required ? 0 : 15,
-                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { 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: {
+                }, children: [_jsx("div", { className: styles.labelLabel, children: step.label + (step.required ? ' *' : '') }), _jsx("div", { className: styles.ratingContainer, children: _jsx(Rating, { type: step.ratingType, isMobile: widthStats.isMobile, disabled: !editable || postview, value: value, onChange: onChange, inputRef: ref }) }), (step.description || step.required) && (_jsx("div", { 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()] }));
+                                ? (formStyle.errorColor ?? '#cc2936')
+                                : (formStyle.descriptionTextColor ?? '#989898'),
+                        }, children: !!error && value === null ? error?.message : step.description }))] }), renderNestedOption()] }));
 }
 export default RatingStep;

package/dist/FormSteps/RatingStep/RatingStep.d.ts

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

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

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.d.ts

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