@arquimedes.co/eureka-forms 3.0.30-test → 3.0.31-test

package/dist/App/AppHooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { reset } from '../States/GlobalSlice';
 import { fetchOrganization } from '../Services/OrganizationService';
 import { fetchForm } from '../Services/FormService';
@@ -15,6 +15,9 @@ export const useSetupApp = (isEmbedded, props) => {
     const [form, setForm] = useState(undefined);
     const [organization, setOrganization] = useState(undefined);
     const dispatch = useAppDispatch();
+    // Create stable stringified versions that only change when content changes
+    const valuesDataKey = useMemo(() => JSON.stringify(valuesData), [valuesData]);
+    const formDataKey = useMemo(() => JSON.stringify(formData), [formData]);
     const loadOrg = async (idOrganization) => {
         const organization = await fetchOrganization(idOrganization);
         if (organization) {
@@ -119,21 +122,21 @@ export const useSetupApp = (isEmbedded, props) => {
         return () => {
             dispatch({ type: 'CLEAR' });
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Use stringified keys for stable comparison - only changes when content changes
+        // Other object/function props (classifiers) are still
+        // intentionally excluded to prevent re-renders when parent re-creates these objects
     }, [
-        dispatch,
+        apiKey,
+        partial,
         preview,
         internal,
         postview,
-        partial,
         editable,
-        handleConfirmed,
         customSteps,
-        valuesData,
-        apiKey,
-        formData,
-        classifiers,
+        formDataKey,
+        valuesDataKey,
         idCurrentAgent,
+        handleConfirmed,
     ]);
     const reload = useCallback(() => {
         if (!form)
@@ -146,12 +149,11 @@ export const useSetupApp = (isEmbedded, props) => {
         if (handleConfirmed) {
             handleConfirmed();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return {
         form,
         organization,
-        branding: organization?.customBrandings ? form?.branding ?? organization.branding : organization?.branding,
+        branding: organization?.customBrandings ? (form?.branding ?? organization.branding) : organization?.branding,
         reload,
     };
 };
@@ -172,6 +174,5 @@ export const useLogRocket = (organization, form, { apiKey, internal, postview, p
     };
     useEffect(() => {
         void loadLogRocket();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [organization, form]);
 };

package/dist/Form/Form.js

@@ -34,14 +34,12 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             formMethods.setFocus(idFocusStep);
             dispatch(focusStep(undefined));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
     const onSubmit = useCallback(async (values) => {
         let token = null;
         if (form.hasCaptcha && !internal && !customSubmit) {
             token = recaptchaRef.current?.getValue();
-            if (!token)
-                token = await recaptchaRef?.current.executeAsync();
+            token ?? (token = await recaptchaRef?.current.executeAsync());
         }
         const ApiKey = internal ? form.apiKey : apiKey;
         if (!ApiKey && !customSubmit && !customSubmitBtns)
@@ -78,9 +76,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         catch (error) {
             console.error(error);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [customSteps, internal, customSubmit, idOrganization, idForm]);
+    }, [customSteps, internal, customSubmit, idOrganization, idForm]);
     useWidthStats(containerRef, form, postview, internal);
     const isResponsive = useAppSelector((state) => state.widthStats.isResponsive);
     const renderForm = () => {

package/dist/Form/FormHooks.js

@@ -30,6 +30,5 @@ export function useWidthStats(containerRef, form, postview, internal) {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -25,7 +25,6 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
     useEffect(() => {
         if (props.setSubmit)
             props.setSubmit(submit);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.setSubmit]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -47,7 +46,6 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
         values = await onSubmit(values);
         setLoading(false);
         return values;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading)] }))] }));
 }

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -29,7 +29,6 @@ function StepperForm({ onSubmit, scrollToTop }) {
     const handlePrevious = useCallback(() => {
         dispatch(SiteReducer.handlePrevious({ values: getValues(), form }));
         scrollToTop?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleNext = useCallback(async () => {
         setLoading('NEXT');
@@ -58,7 +57,6 @@ function StepperForm({ onSubmit, scrollToTop }) {
         const response = await onSubmit(values);
         setLoading(undefined);
         return response;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});

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

@@ -34,7 +34,6 @@ function CBRIncidentsStep({ step, editable, ...others }) {
         if (firstRender && value.length === 0 && !postview && editable) {
             handleAddIncident();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [firstRender]);
     const handleAddIncident = () => {
         const current = value.filter((incident) => !incident.deleted);

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -25,7 +25,6 @@ function ClassifierSelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const { postview, preview } = useAppSelector((state) => state.global);
@@ -47,14 +46,11 @@ function ClassifierSelectorStep({ step, editable }) {
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    idDependencies.map((id) => dependencies[id].value));
+    }, idDependencies.map((id) => dependencies[id].value));
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     if (!step.idClassifier || !classifier)
         return _jsx(_Fragment, {});

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -18,9 +18,7 @@ function Collapsible({ step, open, setOpen, ...others }) {
         if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
             setOpen(true);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    step.dependencies?.map((dep) => errors[dep]) ?? []);
+    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
     return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,

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

@@ -22,7 +22,6 @@ function EntityValuePickerStep({ step, editable }) {
             ids.push(...recursivelyCalcConditionSteps(dialog.condition));
         }
         return ids;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dialogDeps = useAppSelector((state) => selectDependencies(state, dialogsIdStepDeps));
     const handleCloseDialog = useCallback(() => {

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

@@ -64,7 +64,6 @@ function FileUploadStep({ step, editable }) {
             void getLinks(filesToFetchLink);
             onChange([...value, ...filesToFetchLink]);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fileChange]);
     async function getLinks(pFiles) {
         try {

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

@@ -19,7 +19,6 @@ function MapperElementComponent(props) {
             ...customContext,
             customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [element, customContext]);
     if (element.deleted)
         return _jsx(_Fragment, {});

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

@@ -29,7 +29,6 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     const prevIndex = useMemo(() => {
         for (let i = page - 1; i >= 0; i--) {
@@ -39,7 +38,6 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         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 */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -70,9 +68,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             page: index,
         });
         return;
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [elements]);
+    }, [elements]);
     const widthStats = useAppSelector((state) => state.widthStats);
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';

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

@@ -33,9 +33,7 @@ function MapperComponent({ form, step, error, value, loading, inputRef, editable
             elements: tempElements,
             page: page === index ? newPage : page,
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [elements, onChange]);
+    }, [elements, onChange]);
     const inputValue = useMemo(() => JSON.stringify(elements), [elements]);
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const { container } = useMemo(() => {
@@ -89,7 +87,6 @@ function MapperStep(props) {
             if (!customAdd)
                 handleAddElement();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleAddElement = useCallback((elementValue) => {
         const { element, steps, mappers } = addMapperStep(step, customSteps);
@@ -109,10 +106,7 @@ function MapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step, form, customSteps, value, onChange]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step, form, customSteps, value, onChange]);
     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 }));
 }
@@ -142,10 +136,7 @@ export function CustomMapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step, form, customSteps, elements, onChange]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step, form, customSteps, elements, onChange]);
     const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
     return _jsx(MapperComponent, { ...props, form: subForm, onChange: onChange, handleAddElement: handleAddElement });
 }

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

@@ -27,7 +27,6 @@ function SelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const mapNestedOption = () => {
@@ -54,14 +53,11 @@ function SelectorStep({ step, editable }) {
                 return true;
             return false;
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    idDependencies.map((id) => dependencies[id].value));
+    }, idDependencies.map((id) => dependencies[id].value));
     useEffect(() => {
         if (value && !filteredOptions.find((option) => option.value === value?.value)) {
             onChange('');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, required: step.required, options: filteredOptions, searchable: step.searchable, readOnly: !editable || postview, helperText: error?.message?.toString() ?? step.description, getOptionSelected: (option, value) => option?.value === value?.value }) }), value && mapNestedOption()] }));
 }

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

@@ -32,9 +32,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     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
-    idDependencies.map((id) => deps[id]));
+    const conditionDependencies = useMemo(() => deps, idDependencies.map((id) => deps[id]));
     const { emptyDep, invalids } = useAppSelector((state) => selectStepDependencies(state, step, form));
     const { getValues, setFocus } = useFormContext();
     const isEmpty = useAppSelector((state) => state.site.dependencies[step.id]?.empty);
@@ -47,9 +45,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         else if (value && !step.searchable) {
             setOptions([value]);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    allDeps.map((dep) => dependencies[dep]?.value) ?? []);
+    }, allDeps.map((dep) => dependencies[dep]?.value) ?? []);
     const calcOptions = async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
@@ -114,13 +110,11 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
         if (!touched)
             setTouched(true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, emptyDep, postview, editable, invalids, touched]);
     const filteredOptions = useMemo(() => {
         if (!options || !filterOptions)
             return options;
         return filterOptions(options, conditionDependencies);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, conditionDependencies]);
     const errorMsg = useMemo(() => {
         if (postview || loading)
@@ -138,7 +132,6 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             return 'Error al cargar las opciones';
         }
         return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [invalids, touched, value, filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, onFocus: onFocus, loading: loading, label: step.label, onChange: onChange, required: step.required, searchable: step.searchable, getValueString: getValueString, disabled: emptyDep, getOptionSelected: getOptionSelected, options: filteredOptions ?? undefined, IconComponent: step.showIcon ? IconComponent : undefined, error: !!errorMsg || !!warning || !!error, readOnly: !editable || postview || emptyDep || filteredOptions === null, helperText: errorMsg ?? warning ?? error?.message?.toString() ?? step.description ?? undefined }) }), renderNestedSteps?.(value)] }));
 }

package/dist/FormSteps/StepHooks.js

@@ -28,7 +28,6 @@ export const useStepDependency = (step, defaultValue) => {
         return () => {
             dispatch(clearDependency(step));
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isDependency]);
     const handleStepDep = useCallback((value) => {
         if (!isDependency)
@@ -37,9 +36,7 @@ export const useStepDependency = (step, defaultValue) => {
             step,
             value: value ?? null,
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step.id, step.type, isDependency]);
+    }, [step.id, step.type, isDependency]);
     return {
         handleStepDep,
         isDependency,
@@ -105,9 +102,7 @@ export const useFormStep = (step, { rules, debounce, sizeChange, defaultValue })
         fieldOnChange(value);
         if (sizeChange)
             handleSizeChange?.();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleStepDep, isDependency, fieldOnChange]);
+    }, [handleStepDep, isDependency, fieldOnChange]);
     return {
         ref,
         value,
@@ -125,14 +120,11 @@ export const selectDependencies = createSelector([
     [idDep]: dependencies[idDep],
 }), {}));
 export const useCondition = (condition) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const ids = useMemo(() => recursivelyCalcConditionSteps(condition), []);
     const dependencies = useAppSelector((state) => selectDependencies(state, ids));
     return useMemo(() => {
         return !condition || evaluateCondition(condition, dependencies);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ids.map((id) => dependencies[id].value));
+    }, ids.map((id) => dependencies[id].value));
 };
 export const calcStepDeps = (step) => {
     const dependencies = [...(step.dependencies ?? [])];

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/DraftEditor.css

@@ -63,7 +63,7 @@
     margin-left: -5px;
 }
 .Erk-DraftContainer .rdw-editing-image {
-    border: 1px solid var(--secondary);
+    border: 1px solid var(--eureka-primary);
 }
 
 .Erk-DraftContainer .DraftEditor-root figure {
@@ -80,7 +80,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--light-grey);
+    border: 1px solid var(--eureka-outline);
 }
 
 .Erk-DraftContainer .rdw-image-alignment-options-popup {

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

@@ -35,9 +35,7 @@ function TextAreaStep({ step, editable }) {
             }, 1000));
         }
         onChange(value);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleStepDep, isDependency, onChange]);
+    }, [handleStepDep, isDependency, onChange]);
     const calcStyle = () => {
         const backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {

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

@@ -13,7 +13,6 @@ function StepFiller({ step, children }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
     const handleSizeChange = useCallback(() => {
         setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", { className: styles.firstLvlContainer, style: {

package/dist/Shared/CustomBtn/CustomBtn.js

@@ -9,7 +9,6 @@ function CustomBtn({ label, onClick, backgroundColor, color, loading = false, di
         if (coords)
             setCoords(undefined);
         return () => setMounted(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [label]);
     return (_jsxs("button", { className: styles.customBtn, style: {
             width,

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkButton from './ErkButton';
 declare const meta: {
     component: typeof ErkButton;
@@ -6,6 +6,7 @@ declare const meta: {
     args: {
         text: string;
         disabled: false;
+        onClick: import("vitest").Mock<(...args: any[]) => any>;
     };
 };
 export default meta;

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

@@ -1,3 +1,4 @@
+import { fn } from 'storybook/test';
 import ErkButton from './ErkButton';
 const meta = {
     component: ErkButton,
@@ -5,6 +6,7 @@ const meta = {
     args: {
         text: 'Label',
         disabled: false,
+        onClick: fn(),
     },
 };
 export default meta;

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkCheckBox from './ErkCheckBox';
 declare const meta: {
     component: typeof ErkCheckBox;

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkDatePicker from './ErkDatePicker';
 declare const meta: {
     component: typeof ErkDatePicker;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
 import ErkDatePicker from './ErkDatePicker';
-import { within, screen } from '@storybook/testing-library';
-import { userEvent } from '@storybook/testing-library';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkDatePicker,
     tags: ['autodocs'],
@@ -36,7 +34,7 @@ export const ValueAndLabel = {
             args.onChange?.(value);
             setArgs({ value });
         };
-        return _jsx(ErkDatePicker, { ...args, ref: args, onChange: onValueChange });
+        return _jsx(ErkDatePicker, { ...args, onChange: onValueChange });
     },
 };
 export const Full = {
@@ -67,8 +65,7 @@ export const Menu = {
         label: 'Label',
         value: null,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
     },
@@ -79,8 +76,7 @@ export const DateTimeDateMenu = {
         value: null,
         pickTime: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
     },
@@ -91,11 +87,10 @@ export const DateTimeTimeMenu = {
         value: null,
         pickTime: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
-        const time = screen.getByText('12', {
+        const time = canvas.getByText('12', {
             selector: 'h3',
         });
         await userEvent.click(time);

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

@@ -1,16 +1,19 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkSelect from './ErkSelect';
 declare const meta: {
     component: typeof ErkSelect;
     tags: string[];
     args: {
         readOnly: false;
+        MenuProps: {
+            disablePortal: false;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
 export declare const Default: Story;
+export declare const Empty: Story;
 export declare const ValueAndLabel: Story;
 export declare const Full: Story;
 export declare const Error: Story;

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -1,22 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ErkSelect from './ErkSelect';
 import { MenuItem } from '@mui/material';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkSelect,
     tags: ['autodocs'],
     args: {
         readOnly: false,
+        MenuProps: {
+            disablePortal: false,
+        },
     },
 };
 export default meta;
-export const Empty = {
-    args: {},
-};
 export const Default = {
     args: {
         label: 'Label',
     },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsxs(ErkSelect, { ...args, onChange: onValueChange, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Empty = {
+    args: {},
+    render: function Component(args) {
+        return _jsx(ErkSelect, { ...args });
+    },
 };
 export const ValueAndLabel = {
     args: {
@@ -37,6 +51,9 @@ export const Full = {
         label: 'Label',
         helperText: 'Helper text',
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const Error = {
     args: {
@@ -44,6 +61,9 @@ export const Error = {
         helperText: 'Helper text',
         error: true,
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const ErrorColor = {
     args: {
@@ -51,6 +71,9 @@ export const ErrorColor = {
         helperText: 'Helper text',
         error: true,
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const DifferentColors = {
     args: {

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkSmartSelect from './ErkSmartSelect';
 declare const meta: {
     component: typeof ErkSmartSelect;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.stories.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
 import ErkSmartSelect from './ErkSmartSelect';
-import { within, userEvent, screen } from '@storybook/testing-library';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkSmartSelect,
     tags: ['autodocs'],
@@ -26,11 +25,10 @@ export const Default = {
             },
         ],
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
-        const option = screen.getByTestId('smart-select-option');
+        const option = canvas.getByTestId('smart-select-option');
         await userEvent.click(option);
     },
     render: function Component(args) {
@@ -46,11 +44,10 @@ export const Focused = {
     args: {
         label: 'Label',
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
-        const option = screen.getByTestId('smart-select-empty');
+        const option = canvas.getByTestId('smart-select-empty');
         await userEvent.click(option);
     },
 };
@@ -59,8 +56,7 @@ export const FocusedSearchable = {
         label: 'Label',
         searchable: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
     },
@@ -76,8 +72,7 @@ export const SearchableWithOptions = {
             },
         ],
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
     },
@@ -94,8 +89,7 @@ export const SearchableWithSearchAndOptions = {
             },
         ],
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
     },
@@ -111,8 +105,7 @@ export const LoadingOpened = {
         label: 'Label',
         loading: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
     },
@@ -123,8 +116,7 @@ export const SearchableLoadingOpened = {
         searchable: true,
         loading: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('smart-select');
         await userEvent.click(selector);
     },

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkTextField from './ErkTextField';
 declare const meta: {
     component: typeof ErkTextField;

package/dist/Shared/ErkTextField/ErkTextField.stories.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
 import ErkTextField from './ErkTextField';
-import { within, userEvent } from '@storybook/testing-library';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkTextField,
     tags: ['autodocs'],
@@ -23,13 +22,10 @@ export const Default = {
     args: {
         label: 'Label',
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const emailInput = canvas.getByRole('textbox');
         await userEvent.click(emailInput);
-        await userEvent.type(emailInput, 'example-email@email.com', {
-            delay: 100,
-        });
+        await userEvent.type(emailInput, 'example-email@email.com', { initialSelectionStart: 100 });
     },
     render: function Component(args) {
         const [, setArgs] = useArgs();
@@ -44,16 +40,14 @@ export const Focused = {
     args: {
         label: 'Label',
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const emailInput = canvas.getByRole('textbox');
         await userEvent.click(emailInput);
     },
 };
 export const FocusedNoLabel = {
     args: {},
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const emailInput = canvas.getByRole('textbox');
         await userEvent.click(emailInput);
     },

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import Navbar from './Navbar';
 declare const meta: {
     component: typeof Navbar;

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import Rating from './Rating';
 declare const meta: {
     component: typeof Rating;

package/dist/Shared/Toggle/Toggle.js

@@ -7,7 +7,7 @@ const Styled = styled(MuiSwitch)(({ theme, checked, size }) => ({
     '& .Erk-MuiSwitch-switchBase': {
         marginTop: size === 'small' ? -5 : undefined,
         transform: size === 'small' ? 'translateX(-5px)' : undefined,
-        color: 'var(--outlineGrey)',
+        color: '#b8b8b8',
         '&.Mui-checked': {
             transform: size === 'small' ? 'translateX(12px)' : undefined,
             '& .Erk-MuiSwitch-thumb': {

package/dist/Utils/AxiosAPI.js

@@ -23,7 +23,7 @@ export const axiosBaseQuery = () => async ({ url, method, body, params, timeout,
         return {
             error: {
                 status: err.response?.status,
-                data: err.response?.data || err.message,
+                data: err.response?.data ?? err.message,
             },
         };
     }

package/dist/Utils/LocaleUtils.js

@@ -8,5 +8,5 @@ const localeMap = {
 export const getLocale = () => {
     return (localeMap[navigator.languages?.length
         ? navigator.languages[0]
-        : navigator.userLanguage || navigator.language || navigator.browserLanguage] ?? localeMap.es);
+        : (navigator.userLanguage ?? navigator.language ?? navigator.browserLanguage)] ?? localeMap.es);
 };

package/dist/Utils/MaterialProviders.js

@@ -4,8 +4,8 @@ import { createTheme, ThemeProvider } from '@mui/material';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { getLocale } from './LocaleUtils';
-// stepBackgroundColor: string;
-function MaterialProviders({ children, formStyle }) {
+import InternalFormStyle from '../constants/InternalFormStyle';
+function MaterialProviders({ children, formStyle = InternalFormStyle }) {
     return (_jsx(ThemeProvider, { theme: createTheme({
             typography: {
                 fontFamily: 'inherit',

package/dist/Utils/store.d.ts

@@ -24,13 +24,4 @@ export type AppStore = typeof store;
 export type AppState = ReturnType<typeof store.getState>;
 export declare const getAppState: import("@reduxjs/toolkit").AsyncThunk<RootState, {
     idForm: string;
-}, {
-    state?: unknown;
-    dispatch?: import("redux-thunk").ThunkDispatch<unknown, unknown, import("redux").UnknownAction>;
-    extra?: unknown;
-    rejectValue?: unknown;
-    serializedErrorType?: unknown;
-    pendingMeta?: unknown;
-    fulfilledMeta?: unknown;
-    rejectedMeta?: unknown;
-}>;
+}, import("@reduxjs/toolkit").AsyncThunkConfig>;

package/dist/index.css

@@ -1,6 +1,7 @@
 body {
     margin: 0;
     font-size: 16px;
+    font-family: 'Nunito', sans-serif;
 }
 
 .ErkIcon {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.30-test",
+  "version":"3.0.31-test",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -11,25 +11,25 @@
     "preview": "vite preview",
     "test": "vitest",
     "tsc-build": "tsc --p tsconfig.app.json --noEmit false --outDir ./dist --composite false --declaration true --allowImportingTsExtensions false",
+    "cypress": "DISPLAY=:0 cypress open",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "cypress": "DISPLAY=:0 cypress open"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.8.1",
-    "axios": "^1.9.0",
+    "@reduxjs/toolkit": "^2.9.0",
+    "axios": "^1.12.2",
     "date-fns": "^4.1.0",
     "draft-js": "^0.11.7",
     "i18n-iso-countries": "^7.14.0",
-    "libphonenumber-js": "^1.12.8",
-    "logrocket": "^10.0.0",
-    "nanoid": "^5.1.5",
+    "libphonenumber-js": "^1.12.23",
+    "logrocket": "^10.1.0",
+    "nanoid": "^5.1.6",
     "react-draft-wysiwyg": "^1.15.0",
     "react-google-recaptcha": "^3.1.0",
-    "react-hook-form": "^7.56.3",
-    "react-international-phone": "^4.5.0",
+    "react-hook-form": "^7.64.0",
+    "react-international-phone": "^4.6.0",
     "react-redux": "^9.2.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.9.3"
   },
   "eslintConfig": {},
   "browserslist": {
@@ -45,61 +45,49 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@eslint/compat": "^1.2.7",
-    "@eslint/eslintrc": "^3.3.0",
-    "@eslint/js": "^9.21.0",
-    "@faker-js/faker": "^9.5.1",
-    "@mui/material": "^7.1.0",
-    "@mui/x-data-grid-pro": "^8.3.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.37.0",
+    "@faker-js/faker": "^10.0.0",
+    "@mui/material": "^7.3.4",
+    "@mui/x-data-grid-pro": "^8.13.1",
     "@mui/x-date-pickers": "^8.3.0",
-    "@mui/x-date-pickers-pro": "^8.3.0",
-    "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/addon-themes": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-webpack5": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@mui/x-date-pickers-pro": "^8.12.0",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/addon-themes": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/draft-js": "^0.11.18",
     "@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.26.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.26.0",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "chromatic": "^11.27.0",
-    "cypress": "^14.1.0",
-    "dotenv-webpack": "^8.1.0",
-    "eslint": "^9.26.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.1.0",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "css-loader": "^7.1.2",
+    "cypress": "^15.3.0",
+    "dotenv-webpack": "^8.1.1",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "eslint-plugin-storybook": "^9.1.10",
+    "globals": "^16.4.0",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^26.0.0",
-    "prettier": "3.5.3",
-    "react-docgen-typescript": "^2.2.2",
-    "react-refresh": "^0.16.0",
-    "storybook": "^8.6.4",
-    "storybook-mock-date-decorator": "^2.0.6",
-    "vite": "^6.3.5",
-    "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^3.1.3"
+    "jsdom": "^27.0.0",
+    "prettier": "3.6.2",
+    "react-refresh": "^0.18.0",
+    "storybook": "^9.1.10",
+    "style-loader": "^4.0.0",
+    "vite": "^7.1.9",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.x.x",