@arquimedes.co/eureka-forms 3.0.11-refactor → 3.0.16-refactor

package/dist/App/AppHooks.js

@@ -143,7 +143,7 @@ export const useLogRocket = (organization, form, { apiKey, internal, postview, p
                 const LogRocket = await import('logrocket');
                 LogRocket.default.init('63mg8a/forms-uv0gd');
                 LogRocket.default.identify(organization.idOrganization + '/' + apiKey, {
-                    name: organization.name + '/' + (form?.name ? form?.name : '404'),
+                    name: organization.name + '/' + (form?.name ?? '404'),
                 });
             }
             catch (error) {

package/dist/Form/Terms/Term/MaterialTerm/MaterialTerm.js

@@ -54,12 +54,12 @@ function TermComponent({ term, tempError }) {
                                 setShowDialog(false);
                             }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsx("div", { className: styles.dialogTitle, style: {
                                 borderBottom: '1px solid ' + formStyle.primaryColor,
-                            }, children: term.clickEffect.title }), _jsx("div", { className: styles.dialogContentContainer, children: term.clickEffect.text }), _jsx(ErkButton, { text: 'Aceptar', padding: "20px 15px", backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, fontSize: 20, onClick: () => {
+                            }, children: term.clickEffect.title }), _jsx("div", { className: styles.dialogContentContainer, children: term.clickEffect.text }), _jsx(ErkButton, { text: 'Aceptar', sx: { padding: '20px 15px', fontSize: '20px' }, onClick: () => {
                                 setShowDialog(false);
                                 if (!postview) {
                                     field.onChange(true);
                                 }
-                            } })] })) }), _jsxs("div", { className: styles.container + ' noselect', children: [_jsx("div", { className: styles.checkboxContainer, children: _jsx(ErkCheckbox, { inputRef: ref, ...field, checked: field.value, disabled: postview, padding: "5px", error: !!error }) }), _jsx("p", { className: styles.messageContainer, style: {
+                            } })] })) }), _jsxs("div", { className: styles.container + ' noselect', children: [_jsx("div", { className: styles.checkboxContainer, children: _jsx(ErkCheckbox, { inputRef: ref, ...field, checked: field.value, readOnly: postview, padding: "5px", error: !!error }) }), _jsx("p", { className: styles.messageContainer, style: {
                             color: !!error && tempError ? formStyle.errorColor : 'inherit',
                         }, children: renderText(term.message) })] })] }));
 }

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.js

@@ -100,7 +100,7 @@ function CBRIncidentsStep({ step, editable, ...others }) {
                             }
                         }
                         onChange(tempIncidents);
-                    }, ...others }, index))) }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
+                    }, ...others }, index))) }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
                             if (editable && !postview) {
                                 handleAddIncident();
                             }

package/dist/FormSteps/@Construction/CBRPropertyStep/CBRPropertyStep.js

@@ -74,8 +74,6 @@ function CBRPropertyStepComponent(props) {
                     },
                 }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
                                 setShowWarning(undefined);
-                            }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.warningContainer, style: { color: formStyle.primaryColor }, children: _jsx(WarningIcon, { style: { fontSize: '160px' } }) }), _jsxs("div", { className: styles.messageContainer, children: ["La garant\u00EDa de su inmueble expir\u00F3 el d\u00EDa ", showWarning.toLocaleDateString(), "."] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
-                                            setShowWarning(undefined);
-                                        } }) })] })] }) }))] }));
+                            }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.warningContainer, style: { color: formStyle.primaryColor }, children: _jsx(WarningIcon, { style: { fontSize: '160px' } }) }), _jsxs("div", { className: styles.messageContainer, children: ["La garant\u00EDa de su inmueble expir\u00F3 el d\u00EDa ", showWarning.toLocaleDateString(), "."] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', sx: { padding: '5px 15px' }, onClick: () => setShowWarning(undefined) }) })] })] }) }))] }));
 }
 export default CBRPropertyStepComponent;

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -35,7 +35,7 @@ function CheckBoxStep({ step, editable }) {
                                 height: step.size < 4 ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
-                            }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", size: "1.6rem", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
+                            }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
                                 color: error ? formStyle.errorColor : formStyle.descriptionTextColor,
                             }, children: error ? 'Este campo es obligatorio' : step.description }))] }) }), renderNested()] }));
 }

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValueDialog/MaterialEntityValueDialog.js

@@ -26,6 +26,6 @@ function MaterialEntityValueDialog({ type, entity, message, entityValue, handleC
             },
         }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => handleClose(), children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.contentContainer, children: [_jsx("div", { className: styles.warningContainer, style: {
                                         color: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor,
-                                    }, children: type === 'INFO' ? (_jsx(InfoIcon, { style: { fontSize: '160px' } })) : (_jsx(WarningIcon, { style: { fontSize: '160px' } })) }), _jsx("div", { className: styles.messageContainer, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) })] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor, fontSize: '1.2rem', height: undefined, padding: '16px 20px', onClick: () => handleClose() }) })] })] }) }));
+                                    }, children: type === 'INFO' ? (_jsx(InfoIcon, { style: { fontSize: '160px' } })) : (_jsx(WarningIcon, { style: { fontSize: '160px' } })) }), _jsx("div", { className: styles.messageContainer, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) })] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', onClick: () => handleClose(), sx: { padding: '16px 20px', fontSize: '1.2rem' } }) })] })] }) }));
 }
 export default MaterialEntityValueDialog;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -34,7 +34,7 @@ function EntityValuePickerStep({ step, editable }) {
             }
             : undefined);
     }, []);
-    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { editable: editable, step: step, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
+    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { editable: editable, step: step, getOptionalDependencies: getOptionalDependencies, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
                         for (const step of steps) {
                             if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
                                 return 'Selecciona un ' + step.label;
@@ -149,3 +149,18 @@ const getEntityValueOptions = async (idOrganization, step, dependencyStore) => {
     });
     return response.data.filter((option) => step.options[option._id]?.type !== EntityValueOptionTypes.HIDE);
 };
+const getOptionalDependencies = (step) => {
+    const optional = [];
+    for (const filter of step.filters) {
+        switch (filter.type) {
+            case EntityValueDataTypes.STEP: {
+                if (filter.idStep && !filter.required && !step.dependencies?.includes(filter.idStep))
+                    optional.push(filter.idStep);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    return optional;
+};

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -142,7 +142,7 @@ function FileUploadStep({ step, editable }) {
                         }
                         inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
                             if (editable && !postview) {
                                 const input = inputRef.current;
                                 if (input !== null) {

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

@@ -61,7 +61,7 @@ function MapperComponent({ form, step, error, value, loading, inputRef, editable
     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 ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
+                (!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();
                             }

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.d.ts

@@ -1,4 +1,4 @@
 import { SmartSelectStepProps } from '../SmartSelectStep';
 import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-declare function SmartSelectStep<StepType extends GSmartSelect>({ step, editable, getOptions, calcDepError, defaultValue, filterOptions, IconComponent, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, getOptionsConditionsIdSteps, renderNestedSteps, }: SmartSelectStepProps<StepType>): JSX.Element;
+declare function SmartSelectStep<StepType extends GSmartSelect>({ step, editable, getOptions, calcDepError, defaultValue, filterOptions, IconComponent, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, getOptionalDependencies, getOptionsConditionsIdSteps, renderNestedSteps, }: SmartSelectStepProps<StepType>): JSX.Element;
 export default SmartSelectStep;

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -9,7 +9,7 @@ import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
 import { selectDependencies, selectStepDependencies, useFormStep } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { FormTypes } from '../../../constants/FormStepTypes';
-function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValue, filterOptions, IconComponent, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, getOptionsConditionsIdSteps = () => [], renderNestedSteps, }) {
+function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValue, filterOptions, IconComponent, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, getOptionalDependencies = () => [], getOptionsConditionsIdSteps = () => [], renderNestedSteps, }) {
     const { ref, value, error, field, onChange: handleChange, } = useFormStep(step, {
         sizeChange: true,
         defaultValue: defaultValue ?? null,
@@ -28,9 +28,9 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     const [firstTime, setFirstTime] = useState(true);
     const [touched, setTouched] = useState(false);
     const dispatch = useAppDispatch();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), []);
-    const dependencies = useAppSelector((state) => selectDependencies(state, step.dependencies));
+    const allDeps = useMemo(() => [...(step.dependencies ?? []), ...getOptionalDependencies(step)], [getOptionalDependencies, step]);
+    const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), [getOptionsConditionsIdSteps, step]);
+    const dependencies = useAppSelector((state) => selectDependencies(state, allDeps));
     const deps = useAppSelector((state) => selectDependencies(state, idDependencies));
     const conditionDependencies = useMemo(() => deps, 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/FormSteps/SmartSelectStep/SmartSelectStep.d.ts

@@ -18,6 +18,8 @@ export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSele
     getValueString: (value: any) => string;
     /** Function to if currently selected option has warning */
     getValueWarning?: (value: any) => string | null;
+    /** Function called to get the idSteps of the optional dependencies */
+    getOptionalDependencies?: (step: StepType) => string[];
     /** Function called to get the idSteps of the step's conditions for better refreshing */
     getOptionsConditionsIdSteps?: (step: StepType) => string[];
     /** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -15,7 +15,7 @@ function TextAreaStep({ step, editable, maxLength }) {
     });
     return (_jsxs("div", { className: styles.container, style: {
             paddingBottom: step.required || step.description || !!error ? '0px' : '12px',
-        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, disabled: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
+        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, readOnly: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
                                     color: formStyle.descriptionTextColor,
                                 }, children: step.label }), _jsx("div", { className: styles.printLine, style: {
                                     color: formStyle.stepBackgroundColor,

package/dist/Shared/ErkButton/ErkButton.d.ts

@@ -1,31 +1,25 @@
-import React from 'react';
 import { ButtonProps as MuiButtonProps } from '@mui/material';
-interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        inherit: false;
+    }
+}
+export interface ErkButtonProps extends Omit<MuiButtonProps, 'color' | 'onSubmit' | 'ref'> {
     /** Button text */
-    text: string;
-    /** Background Color */
-    backgroundColor?: string;
-    /** Font Color */
-    color?: string;
+    text?: string;
+    /** The color of the button */
+    color?: 'primary' | 'secondary' | 'error' | 'warning';
     /** Button Click Handle */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** If button is disabled */
     disabled?: boolean;
-    /** Text font size */
-    fontSize?: number | string;
-    /** Button padding '0 13px 0 13px' format */
-    padding?: string;
-    /** border radius */
-    borderRadius?: number;
-    /** Component height */
-    height?: number;
-    /** If text is bold */
-    bold?: boolean;
-    /** The width of the button */
-    width?: string;
+    /** If the button es loading */
+    loading?: boolean;
+    /** The href to redirect */
+    buttonRef?: React.Ref<HTMLButtonElement>;
 }
 /**
  * Generic capta button
  */
-declare function ErkButton({ text, color, ...props }: ButtonProps): JSX.Element;
+declare function ErkButton({ text, color, loading, children, disabled, buttonRef, ...props }: ErkButtonProps): JSX.Element;
 export default ErkButton;

package/dist/Shared/ErkButton/ErkButton.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as MuiButton, styled } from '@mui/material';
-const StyledButton = styled(MuiButton)(({ height = 28, bold = false, fontColor = '#ffffff', fontSize = '1rem', borderRadius = 10, width = 'fit-content', padding = '0 13px 0 13px', backgroundColor = '#3d5a7f', }) => ({
-    width,
+import Loader from '../Loader/Loader';
+const StyledButton = styled(MuiButton)(({ theme, color }) => ({
+    width: 'fit-content',
     textTransform: 'none',
     fontFamily: 'inherit',
-    fontSize,
-    borderRadius,
-    padding,
-    height: height,
+    fontSize: '1rem',
+    borderRadius: 10,
+    padding: '0 13px 0 13px',
+    minHeight: 28,
     boxShadow: 'none',
-    backgroundColor,
-    color: fontColor,
-    '&:hover': {
-        boxShadow: 'none',
-        backgroundColor,
-    },
+    '&:hover': { boxShadow: 'none' },
     '&:disabled': {
-        backgroundColor,
-        color: fontColor,
+        backgroundColor: theme.palette[color ?? 'primary']?.main,
+        color: theme.palette[color ?? 'primary']?.contrastText,
         opacity: 0.5,
     },
-    fontWeight: bold ? 'bold' : 'normal',
+    fontWeight: 'normal',
 }));
 /**
  * Generic capta button
  */
-function ErkButton({ text, color, ...props }) {
-    return (_jsx(StyledButton, { text: '', fontColor: color, variant: "contained", ...props, children: text }));
+function ErkButton({ text, color = 'primary', loading, children, disabled, buttonRef, ...props }) {
+    return (_jsxs(StyledButton, { text: '', ref: buttonRef, variant: "contained", disabled: disabled ?? loading, color: color, ...props, children: [loading && _jsx(Loader, { size: 20, color: 'white' }), text && (_jsx("label", { style: {
+                    visibility: loading ? 'hidden' : 'visible',
+                    fontSize: 'inherit',
+                    cursor: 'inherit',
+                }, children: text })), _jsx("div", { style: { visibility: loading ? 'hidden' : 'visible' }, children: children })] }));
 }
 export default ErkButton;

package/dist/Shared/ErkButton/ErkButton.stories.d.ts

@@ -5,15 +5,7 @@ declare const meta: {
     tags: string[];
     args: {
         text: string;
-        backgroundColor: string;
-        color: string;
         disabled: false;
-        fontSize: string;
-        padding: string;
-        borderRadius: number;
-        height: number;
-        bold: false;
-        width: string;
     };
 };
 export default meta;

package/dist/Shared/ErkButton/ErkButton.stories.js

@@ -4,15 +4,7 @@ const meta = {
     tags: ['autodocs'],
     args: {
         text: 'Label',
-        backgroundColor: '#3d5a7f',
-        color: '#ffffff',
         disabled: false,
-        fontSize: '1rem',
-        padding: '0 13px 0 13px',
-        borderRadius: 10,
-        height: 28,
-        bold: false,
-        width: 'fit-content',
     },
 };
 export default meta;
@@ -30,7 +22,5 @@ export const Disabled = {
 export const DifferentColors = {
     args: {
         text: 'Label',
-        backgroundColor: 'red',
-        color: 'blue',
     },
 };

package/dist/Shared/ErkCheckbox/ErkCheckBox.d.ts

@@ -1,7 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
 interface StyleProps {
-    size?: CSSProperties['fontSize'];
+    size?: 'small' | 'medium';
     padding?: string;
     error?: number;
 }

package/dist/Shared/ErkCheckbox/ErkCheckBox.js

@@ -3,9 +3,10 @@ import React from 'react';
 import CheckboxUncheckedIcon from '../../Icons/CheckboxUncheckedIcon';
 import CheckboxCheckedIcon from '../../Icons/CheckboxCheckedIcon';
 import { FormControl, Checkbox as MuiCheckbox, styled } from '@mui/material';
-const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding = '9px', disabled, readOnly, error }) => ({
-    padding: padding,
-    fontSize: size,
+const StyledCheckbox = styled(MuiCheckbox, { shouldForwardProp: (prop) => prop !== 'size' })(({ theme, padding = '0px', size = 'small', disabled, readOnly, error }) => ({
+    padding,
+    width: size === 'small' ? 26 : 32,
+    height: size === 'small' ? 26 : 32,
     opacity: disabled ? 0.5 : 1,
     pointerEvents: readOnly ? 'none' : undefined,
     color: error ? theme.palette.error.main : '#787878',
@@ -17,7 +18,7 @@ const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding =
  * Generic capta checkbox
  */
 function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, ...others }) {
-    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, { style: { fontSize: 'inherit' } }), checkedIcon: _jsx(CheckboxCheckedIcon, { style: { fontSize: 'inherit' } }), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
+    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, {}), checkedIcon: _jsx(CheckboxCheckedIcon, {}), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.d.ts

@@ -3,9 +3,6 @@ import ErkCheckBox from './ErkCheckBox';
 declare const meta: {
     component: typeof ErkCheckBox;
     tags: string[];
-    args: {
-        size: string;
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.js

@@ -2,9 +2,6 @@ import ErkCheckBox from './ErkCheckBox';
 const meta = {
     component: ErkCheckBox,
     tags: ['autodocs'],
-    args: {
-        size: '1.5rem',
-    },
 };
 export default meta;
 export const Uncheked = {

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -14,6 +14,9 @@ const StyledSelect = styled(Select)(() => ({
     input: {
         padding: 0,
     },
+    '& .Erk-MuiSelect-select': {
+        height: '20px',
+    },
     '& .Erk-MuiSelect-select.Erk-MuiInputBase-inputSizeSmall': {
         paddingBottom: 0,
         borderBottom: 'none',

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -52,6 +52,6 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
             }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
     }
     else {
-        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [_jsx(ErkMenuItem, { value: '', "data-testid": 'smart-select-empty', children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
+        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
     }
 }

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -111,7 +111,7 @@ function CustomTextfield({ onChange, value = '', IconComponent, size = 'small',
     if (maxLength) {
         inputProps.inputProps = { maxLength };
     }
-    const helperText = others.helperText ?? (others.error === false ? ' ' : undefined);
+    const helperText = others.helperText ?? (others.error === false && !others.readOnly ? ' ' : undefined);
     return (_jsxs("div", { style: {
             position: 'relative',
             width: fullWidth ? '100%' : 'fit-content',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.11-refactor",
+  "version":"3.0.16-refactor",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -16,19 +16,19 @@
     "cypress": "DISPLAY=:0 cypress open"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.4.0",
-    "axios": "^1.7.7",
+    "@reduxjs/toolkit": "^2.6.0",
+    "axios": "^1.8.1",
     "date-fns": "^4.1.0",
     "draft-js": "^0.11.7",
-    "i18n-iso-countries": "^7.13.0",
-    "libphonenumber-js": "^1.11.14",
-    "logrocket": "^9.0.0",
-    "nanoid": "^5.0.7",
+    "i18n-iso-countries": "^7.14.0",
+    "libphonenumber-js": "^1.12.5",
+    "logrocket": "^9.0.2",
+    "nanoid": "^5.1.2",
     "react-draft-wysiwyg": "^1.15.0",
     "react-google-recaptcha": "^3.1.0",
-    "react-hook-form": "^7.53.2",
-    "react-international-phone": "^4.3.0",
-    "react-redux": "^9.1.2",
+    "react-hook-form": "^7.54.2",
+    "react-international-phone": "^4.5.0",
+    "react-redux": "^9.2.0",
     "typescript": "^5.7.2"
   },
   "eslintConfig": {},
@@ -45,15 +45,18 @@
     ]
   },
   "devDependencies": {
-    "@mui/material": "^6.3.0",
-    "@mui/x-data-grid-pro": "^7.23.5",
-    "@mui/x-date-pickers": "^7.23.3",
-    "@mui/x-date-pickers-pro": "^7.23.3",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@faker-js/faker": "^9.2.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.21.0",
+    "@faker-js/faker": "^9.5.1",
+    "@mui/material": "^6.4.7",
+    "@mui/x-data-grid-pro": "^7.27.2",
+    "@mui/x-date-pickers": "^7.27.1",
+    "@mui/x-date-pickers-pro": "^7.27.1",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",
@@ -67,43 +70,44 @@
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/draft-js": "^0.11.18",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/react-draft-wysiwyg": "^1.13.8",
     "@types/react-google-recaptcha": "^2.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "chromatic": "^11.19.0",
-    "cypress": "^13.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "chromatic": "^11.27.0",
+    "cypress": "^14.1.0",
     "dotenv-webpack": "^8.1.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.11.4",
+    "globals": "^16.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^25.0.1",
-    "prettier": "3.4.1",
+    "jsdom": "^26.0.0",
+    "prettier": "3.5.3",
     "react-docgen-typescript": "^2.2.2",
-    "react-refresh": "^0.14.2",
-    "storybook": "^8.4.5",
+    "react-refresh": "^0.16.0",
+    "storybook": "^8.6.4",
     "storybook-mock-date-decorator": "^2.0.6",
-    "vite": "^6.0.1",
+    "vite": "^6.2.0",
     "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^2.1.6"
+    "vitest": "^3.0.8"
   },
   "peerDependencies": {
-    "react": "^18.x.x",
-    "react-dom": "^18.x.x",
     "@emotion/react": "^11.x.x",
     "@emotion/styled": "^11.x.x",
     "@mui/material": "^6.x.x",
-    "@mui/x-date-pickers": "^7.x.x"
+    "@mui/x-date-pickers": "^7.x.x",
+    "react": "^18.x.x",
+    "react-dom": "^18.x.x"
   },
   "publishConfig": {
     "access": "public"