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

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

@@ -1,52 +1,30 @@
-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 './ListMapperElement.module.css';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
-function ListMapperElement(_a) {
-    var _b, _c;
-    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;
-    var size = useContext(FormContext).size;
-    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.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)
-            : '';
-    return (_jsxs("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: [_jsx("div", __assign({ className: styles.bulletContainer, style: {
+import DeleteIcon from '../../../../../Icons/DeleteIcon';
+function ListMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }) {
+    const { size } = useContext(FormContext);
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const { calcName } = customElementModifiers ?? {};
+    const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
+    return (_jsxs("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, children: [_jsx("div", { className: styles.bulletContainer, style: {
                     height: name ? 28 : 40,
-                } }, { children: _jsx("div", { className: styles.bullet, style: {
+                }, children: _jsx("div", { className: styles.bullet, style: {
                         backgroundColor: formStyle.outlineColor,
                         borderColor: formStyle.descriptionTextColor,
-                    } }) })), _jsxs("div", __assign({ className: styles.contentContainer, style: {
-                    width: (size.blockSize + size.spacingSize) *
-                        ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
-                } }, { children: [name && (_jsxs("div", __assign({ className: styles.title, style: { color: formStyle.textColor } }, { children: [(name || loading) && (_jsx("label", __assign({ className: styles.titleLbl }, { children: loading ? 'Cargando...' : name + ':' }))), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
-                                    ? styles.disabledDeleteBtn
-                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                    } }) }), _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsxs("div", { className: styles.title, style: { color: formStyle.textColor }, children: [(name || loading) && (_jsx("label", { className: styles.titleLbl, children: loading ? 'Cargando...' : name + ':' })), step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {
-                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                        handleDelete?.();
                                     }
-                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] }))), children] })), !name && step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
-                    ? styles.disabledDeleteBtn
-                    : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: function () {
+                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] })), children] }), !name && step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: () => {
                     if (editable && !postview) {
-                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                        handleDelete?.();
                     }
-                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })));
+                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }));
 }
 export default ListMapperElement;

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

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

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
 import { MapperElementComponentProps } from '../MapperElementComponent';
 declare function PagedMapperElement<Type = any>({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;

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

@@ -1,206 +1,120 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useContext, useMemo } from 'react';
 import styles from './PagedMapperElement.module.css';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../../../hooks';
-import { MobileStepper, makeStyles } from '@material-ui/core';
-import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
 import CustomBtn from '../../../../../Shared/CustomBtn/CustomBtn';
 import { useFormContext } from 'react-hook-form';
 import { updateNestedValues } from '../../../../../States/SiteSlice';
-function PagedMapperElement(_a) {
-    var _this = this;
-    var _b;
-    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, onChange = _a.onChange, value = _a.value, 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 elements = value.elements, page = value.page;
-    var dispatch = useAppDispatch();
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var totalElements = elements.filter(function (elem) { return !elem.deleted; });
-    var position = totalElements.findIndex(function (e) { return e.id == element.id; });
-    var containerRef = React.useRef(null);
-    var pagingRef = React.useRef(null);
-    var _d = useFormContext(), getValues = _d.getValues, trigger = _d.trigger, handleSubmit = _d.handleSubmit;
-    var nextIndex = useMemo(function () {
-        for (var i = page + 1; i < elements.length; i++) {
-            var element_1 = elements[i];
-            if (!element_1.deleted) {
+import DeleteIcon from '../../../../../Icons/DeleteIcon';
+import { MobileStepper, styled } from '@mui/material';
+import ArrowRightIcon from '../../../../../Icons/ArrowRightIcon';
+import ArrowLeftIcon from '../../../../../Icons/ArrowLeftIcon';
+function PagedMapperElement({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }) {
+    const deletable = step.deletable ?? true;
+    const { size } = useContext(FormContext);
+    const { elements, page } = value;
+    const dispatch = useAppDispatch();
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const totalElements = elements.filter((elem) => !elem.deleted);
+    const position = totalElements.findIndex((e) => e.id == element.id);
+    const containerRef = React.useRef(null);
+    const pagingRef = React.useRef(null);
+    const { getValues, trigger, handleSubmit } = useFormContext();
+    const nextIndex = useMemo(() => {
+        for (let i = page + 1; i < elements.length; i++) {
+            const element = elements[i];
+            if (!element.deleted) {
                 return i;
             }
         }
         return null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    var prevIndex = useMemo(function () {
-        for (var i = page - 1; i >= 0; i--) {
-            var element_2 = elements[i];
-            if (!element_2.deleted) {
+    const prevIndex = useMemo(() => {
+        for (let i = page - 1; i >= 0; i--) {
+            const element = elements[i];
+            if (!element.deleted) {
                 return i;
             }
         }
         return null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
-    var handleErrors = handleSubmit(function () { }, function (errors) {
+    const handleErrors = handleSubmit(() => { }, (errors) => {
         console.error('Errors:', errors);
     });
-    var handleChangePage = useCallback(function (index) { return __awaiter(_this, void 0, void 0, function () {
-        var valid, values, nestedValues, _i, _a, _b, key, value_1;
-        var _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0: return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
-                case 1:
-                    valid = _d.sent();
-                    /** Imprimir errores si no es valido */
-                    if (!valid) {
-                        handleErrors();
-                        return [2 /*return*/];
-                    }
-                    values = getValues();
-                    nestedValues = {};
-                    for (_i = 0, _a = Object.entries(values); _i < _a.length; _i++) {
-                        _b = _a[_i], key = _b[0], value_1 = _b[1];
-                        if (key.startsWith(step.id + '-' + element.id)) {
-                            nestedValues[key] = value_1;
-                        }
-                    }
-                    dispatch(updateNestedValues({
-                        key: step.id + '-' + element.id,
-                        values: nestedValues,
-                    }));
-                    (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ behavior: 'smooth' });
-                    //Updated the nestedValues in the values store.
-                    onChange({
-                        elements: elements,
-                        page: index,
-                    });
-                    return [2 /*return*/];
+    const handleChangePage = useCallback(async (index) => {
+        const valid = await trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            void handleErrors();
+            return;
+        }
+        const values = getValues();
+        const nestedValues = {};
+        for (const [key, value] of Object.entries(values)) {
+            if (key.startsWith(step.id + '-' + element.id)) {
+                nestedValues[key] = value;
             }
+        }
+        dispatch(updateNestedValues({
+            key: step.id + '-' + element.id,
+            values: nestedValues,
+        }));
+        containerRef.current?.scrollIntoView({ behavior: 'smooth' });
+        //Updated the nestedValues in the values store.
+        onChange({
+            elements,
+            page: index,
         });
-    }); }, [elements]);
-    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, _c;
-        return (_jsx("div", __assign({ className: widthStats.isMobile
-                ? styles.mobileContainer
-                : styles.container, ref: containerRef }, { 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 () {
+        return;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [elements]);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const { calcName } = customElementModifiers ?? {};
+    const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
+    const renderElement = (renderElementButtons) => {
+        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsx("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {
-                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                        handleDelete?.();
                                     }
-                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })), children, totalElements.length > 0 && (_jsx("div", __assign({ className: styles.pagingContainer, ref: pagingRef }, { children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null
-                                ? function () {
-                                    return handleChangePage(nextIndex);
-                                }
-                                : undefined, handlePrev: prevIndex !== null
-                                ? function () {
-                                    return handleChangePage(prevIndex);
-                                }
-                                : undefined, width: (_c = pagingRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth }) })))] })) })));
+                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children, totalElements.length > 0 && (_jsx("div", { className: styles.pagingContainer, ref: pagingRef, children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null ? () => void handleChangePage(nextIndex) : undefined, handlePrev: prevIndex !== null ? () => void handleChangePage(prevIndex) : undefined, width: pagingRef.current?.clientWidth }) }))] }) }));
     };
-    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
-            ? customElementRender(element, num, renderElement)
-            : renderElement() })));
+    return (_jsx("div", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
 }
 export default PagedMapperElement;
-var useStepperStyles = function (props) {
-    return makeStyles(function () { return ({
-        root: {
-            backgroundColor: 'transparent',
-            padding: '10px',
-            '& .EF-MuiMobileStepper-dot': {
-                width: 11,
-                height: 11,
-                backgroundColor: props.outlineColor,
-            },
-            '& .EF-MuiMobileStepper-dotActive': {
-                backgroundColor: props.primaryColor,
-            },
-            '& .EF-MuiLinearProgress-root': {
-                height: 8,
-                backgroundColor: props.outlineColor,
-                borderRadius: 4,
-                margin: '0px 8px',
-            },
-            '& .EF-MuiLinearProgress-barColorPrimary': {
-                backgroundColor: props.primaryColor,
-            },
-        },
-    }); });
-};
-function CustomStepper(_a) {
-    var position = _a.position, handleNext = _a.handleNext, totalElements = _a.totalElements, width = _a.width, handlePrev = _a.handlePrev;
-    var formStyle = useAppSelector(function (state) { return state.global.formStyle; });
-    var classes = useStepperStyles(formStyle)();
-    var fits = useMemo(function () {
-        return (width !== null && width !== void 0 ? width : 0) > 16 + totalElements * 15 + 128;
-    }, [width]);
+const StyledStepper = styled(MobileStepper)(({ formStyle }) => ({
+    backgroundColor: 'transparent',
+    padding: '10px',
+    '& .Erk-MuiMobileStepper-dot': {
+        width: 11,
+        height: 11,
+        backgroundColor: formStyle.outlineColor,
+    },
+    '& .Erk-MuiMobileStepper-dotActive': {
+        backgroundColor: formStyle.primaryColor,
+    },
+    '& .Erk-MuiLinearProgress-root': {
+        height: 8,
+        backgroundColor: formStyle.outlineColor,
+        borderRadius: 4,
+        margin: '0px 8px',
+    },
+    '& .Erk-MuiLinearProgress-barColorPrimary': {
+        backgroundColor: formStyle.primaryColor,
+    },
+}));
+function CustomStepper({ position, handleNext, totalElements, width, handlePrev }) {
+    const formStyle = useAppSelector((state) => state.global.formStyle);
+    const fits = useMemo(() => {
+        return (width ?? 0) > 16 + totalElements * 15 + 128;
+    }, [totalElements, width]);
     if (!width)
         return _jsx(_Fragment, {});
-    return (_jsx(MobileStepper, { className: classes.root, steps: totalElements, position: "static", variant: fits ? 'dots' : 'progress', activeStep: position, nextButton: _jsx(CustomBtn, __assign({ onClick: handleNext, disabled: !handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px" }, { children: _jsx(KeyboardArrowRight, { style: {
-                    width: 30,
-                    height: 30,
-                } }) })), backButton: _jsx(CustomBtn, __assign({ onClick: handlePrev, disabled: !handlePrev, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px" }, { children: _jsx(KeyboardArrowLeft, { style: {
-                    width: 30,
-                    height: 30,
-                } }) })) }));
+    return (_jsx(StyledStepper, { formStyle: formStyle, steps: totalElements, position: "static", variant: fits ? 'dots' : 'progress', activeStep: position, nextButton: _jsx(CustomBtn, { onClick: handleNext, disabled: !handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px", children: _jsx(ArrowRightIcon, { style: { width: 30, height: 30 } }) }), backButton: _jsx(CustomBtn, { onClick: handlePrev, disabled: !handlePrev, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px", children: _jsx(ArrowLeftIcon, { style: { width: 30, height: 30 } }) }) }));
 }

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
 import { MapperElementComponentProps } from '../MapperElementComponent';
 declare function PillMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;

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

@@ -1,60 +1,33 @@
-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, useMemo } 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, _c, _d;
-    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 _e = useAppSelector(function (state) { return state.global; }), formStyle = _e.formStyle, postview = _e.postview;
-    var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
-    var name = useMemo(function () {
-        return calcName
-            ? calcName(element)
-            : step.unitLabel
-                ? step.unitLabel + ' ' + (num + 1)
-                : '';
+import DeleteIcon from '../../../../../Icons/DeleteIcon';
+function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
+    const deletable = step.deletable ?? true;
+    const { size } = useContext(FormContext);
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const { calcName } = customElementModifiers ?? {};
+    const name = useMemo(() => {
+        return calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
     }, [calcName, element, num, step.unitLabel]);
-    var isDeleted = (_d = (_c = customElementModifiers === null || customElementModifiers === void 0 ? void 0 : customElementModifiers.isDeleted) === null || _c === void 0 ? void 0 : _c.call(customElementModifiers, element)) !== null && _d !== void 0 ? _d : false;
-    var renderElement = function (renderElementButtons) {
-        var _a, _b;
-        return (_jsx("div", __assign({ className: widthStats.isMobile
-                ? styles.mobileContainer
-                : styles.container, style: {
+    const isDeleted = customElementModifiers?.isDeleted?.(element) ?? false;
+    const renderElement = (renderElementButtons) => {
+        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: {
                 opacity: isDeleted ? 0.5 : 1,
-            } }, { 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: {
+            }, children: _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsx("div", { className: styles.titleLbl, style: {
                             color: formStyle.textColor,
-                            textDecoration: isDeleted
-                                ? 'line-through'
-                                : 'none',
-                        } }, { 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 () {
+                            textDecoration: isDeleted ? 'line-through' : 'none',
+                        }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {
-                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                        handleDelete?.();
                                     }
-                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })), children] })) })));
+                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children] }) }));
     };
-    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
-            ? customElementRender(element, num, renderElement)
-            : renderElement() })));
+    return (_jsx("div", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
 }
 export default PillMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MapperStepProps } from '../MapperStep';
 import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';