@arquimedes.co/eureka-forms 3.0.52-test → 3.0.53-claude-evlog-migration

package/dist/App/App.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import App from './App';
+import { log } from '../Utils/Logger';
 /**
  * Stories to test full forms from a `{ form, values }` payload:
  *
@@ -149,8 +150,8 @@ const meta = {
         idOrganization: 'storybook',
         valuesData: {},
         customSubmit: (values) => {
-            // eslint-disable-next-line no-console
-            console.log('Storybook submit:', values);
+            // Storybook fixtures only — real submissions must never log field values.
+            log.info({ form: { id: 'storybook' }, action: { name: 'submit' }, fields: Object.keys(values) });
             return Promise.resolve();
         },
     },

package/dist/App/AppHooks.js

@@ -11,6 +11,7 @@ import { calcDependencies } from '../Form/FormFunctions';
 import { iterateNestedSteps } from '../FormSteps/StepFunctions';
 import { createNextState } from '@reduxjs/toolkit';
 import { BaseConfirmationMessage } from '../Contexts/FormContext';
+import { errorFields, log } from '../Utils/Logger';
 export const useSetupApp = (isEmbedded, props) => {
     const { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, idCurrentAgent, ...others } = props;
     const [form, setForm] = useState(undefined);
@@ -136,8 +137,6 @@ export const useSetupApp = (isEmbedded, props) => {
     };
     useEffect(() => {
         void loadData();
-        // eslint-disable-next-line no-console
-        console.log('Form props Changed!');
         return () => {
             dispatch({ type: 'CLEAR' });
         };
@@ -189,7 +188,7 @@ export const useLogRocket = (organization, form, { apiKey, internal, postview, p
                 });
             }
             catch (error) {
-                console.error('LogRocker Error', error);
+                log.warn({ session: { provider: 'logrocket' }, error: errorFields(error) });
             }
         }
     };

package/dist/Form/Form.js

@@ -19,6 +19,7 @@ import FormContext, { IdFormContext } from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
 import LoginPage from '../Login/LoginPage';
 import { focusStep } from '../States/SiteSlice';
+import { errorFields, log } from '../Utils/Logger';
 function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }) {
     const { idOrganization, internal, postview, user } = useAppSelector((state) => state.global);
     const formMethods = useForm({
@@ -76,7 +77,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             setShowConfirmation(resp?.data);
         }
         catch (error) {
-            console.error(error);
+            log.error({ form: { step: 'submit' }, error: errorFields(error) });
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/Form/FormFunctions.js

@@ -3,6 +3,7 @@ import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes'
 import { calcStepDeps } from '../FormSteps/StepHooks';
 import { calcRecursiveData } from '../Utils/FormStepFunctions';
 import { isValidPhoneNumber } from '../Utils/PhoneFunctions';
+import { log } from '../Utils/Logger';
 /**
  * Function that cals the value of a step to output on submit
  */
@@ -166,7 +167,7 @@ function calcStepDependency(idStep, steps, values, customSteps) {
     if (!depStep) {
         const originalValue = values.global[idStep];
         if (!originalValue)
-            console.error('Missing Step Dependency:', idStep);
+            log.warn({ form: { step: idStep }, dependency: { resolved: false } });
         return {
             idOriginal: idStep,
             type: originalValue ? 'ORIGINAL' : 'MISSING',
@@ -176,7 +177,7 @@ function calcStepDependency(idStep, steps, values, customSteps) {
     }
     const originalValue = values.sections[depStep.idSection]?.[depStep.id] ?? values.global[depStep.id];
     if (!depStep.stepPath)
-        console.error('Missing stepPath', depStep);
+        log.warn({ form: { step: depStep.id, type: depStep.type }, dependency: { stepPath: false } });
     return {
         type: depStep.type,
         idOriginal: depStep.stepPath?.[0] ?? [idStep],

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

@@ -11,6 +11,7 @@ import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import { addPagedValues } from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
+import { log } from '../../../Utils/Logger';
 function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
     const [loading, setLoading] = useState(false);
     const { postview, editable, formStyle } = useAppSelector((state) => state.global);
@@ -29,7 +30,7 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
     }, [props.setSubmit]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
-        console.error('Errors:', errors);
+        log.warn({ form: { type: 'column' }, validation: { fields: Object.keys(errors) } });
     });
     const submit = useCallback(async () => {
         setLoading(true);

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

@@ -11,6 +11,7 @@ import { getAppState } from '../../../Utils/store';
 import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import { addPagedValues } from '../../../States/SiteSlice';
+import { log } from '../../../Utils/Logger';
 function StepperForm({ onSubmit, scrollToTop }) {
     const [loading, setLoading] = useState(undefined);
     const { postview, editable, formStyle } = useAppSelector((state) => state.global);
@@ -24,7 +25,7 @@ function StepperForm({ onSubmit, scrollToTop }) {
     const next = useAppSelector((state) => state.site.nextSections);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
-        console.error('Errors:', errors);
+        log.warn({ form: { type: 'stepper' }, validation: { fields: Object.keys(errors) } });
     });
     const handlePrevious = useCallback(() => {
         dispatch(SiteReducer.handlePrevious({ values: getValues(), form }));

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

@@ -6,6 +6,7 @@ import FileIcon from '../../../../Icons/FileIcon';
 import ErrorIcon from '../../../../Icons/ErrorIcon';
 import CloseIcon from '../../../../Icons/CloseIcon';
 import { isUploadedFileObject } from '../FileFunctions';
+import { errorFields, log } from '../../../../Utils/Logger';
 function FileUploadComponent({ file, formStyle, error, editable, handleRemove, fetchDownloadUrl, }) {
     const [downloading, setDownloading] = useState(false);
     if (!file) {
@@ -23,7 +24,7 @@ function FileUploadComponent({ file, formStyle, error, editable, handleRemove, f
                 setDownloading(false);
             }
             catch (error) {
-                console.error(error);
+                log.error({ upload: { operation: 'download' }, error: errorFields(error) });
             }
         }
     };

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

@@ -10,6 +10,7 @@ import maxSize from '../../../constants/Files/FileMaxSize';
 import { useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';
 import { useFormStep } from '../../StepHooks';
+import { errorFields, log } from '../../../Utils/Logger';
 function FileUploadStep({ step, editable }) {
     const { ref, value, onChange, error: fieldError, } = useFormStep(step, {
         defaultValue: [],
@@ -65,7 +66,7 @@ function FileUploadStep({ step, editable }) {
             }
         }
         catch (error) {
-            console.error(error);
+            log.error({ upload: { operation: 'validate' }, error: errorFields(error) });
         }
     }, [idOrganization]);
     const uploadFile = useCallback(async (pFile) => {
@@ -77,7 +78,7 @@ function FileUploadStep({ step, editable }) {
             setFileChange((prev) => prev.map((f) => (f.file === pFile.file ? { ...f, state: 'DONE', ...resp[0] } : f)));
         }
         catch (error) {
-            console.error(error);
+            log.error({ upload: { operation: 'upload' }, error: errorFields(error) });
         }
     }, []);
     useEffect(() => {

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

@@ -10,6 +10,7 @@ import DeleteIcon from '../../../../../Icons/DeleteIcon';
 import { MobileStepper, styled } from '@mui/material';
 import ArrowRightIcon from '../../../../../Icons/ArrowRightIcon';
 import ArrowLeftIcon from '../../../../../Icons/ArrowLeftIcon';
+import { log } from '../../../../../Utils/Logger';
 function PagedMapperElement({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }) {
     const deletable = step.deletable ?? true;
     const { size } = useContext(FormContext);
@@ -43,7 +44,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
     }, [value]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
-        console.error('Errors:', errors);
+        log.warn({ form: { type: 'mapper' }, validation: { fields: Object.keys(errors) } });
     });
     const handleChangePage = useCallback(async (index) => {
         const valid = await trigger(undefined, { shouldFocus: true });

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

@@ -10,6 +10,7 @@ import { selectDependencies, selectStepDependencies, useFormStep } from '../../S
 import { shallowEqual } from 'react-redux';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { FormTypes } from '../../../constants/FormStepTypes';
+import { errorFields, log } from '../../../Utils/Logger';
 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,
@@ -82,7 +83,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             }
         }
         catch (error) {
-            console.error(error);
+            log.error({ api: { endpoint: 'smartSelect' }, error: errorFields(error) });
             setOptions(null);
         }
         setLoading(false);

package/dist/FormSteps/Step.js

@@ -24,13 +24,14 @@ import CustomContext from '../Contexts/CustomContext';
 import { selectOriginalValue, useCondition } from './StepHooks';
 import TimePickerStep from './TimePickerStep/TimePickerStep';
 import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
+import { log } from '../Utils/Logger';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
     const originalValue = useAppSelector((state) => selectOriginalValue(state, step));
     const showStep = useCondition(step.condition);
     if (!step) {
-        console.error('Step not found!', step);
+        log.error({ form: { step }, render: { component: 'Step', reason: 'step_not_found' } });
         return _jsx("div", {});
     }
     if (!showStep)

package/dist/FormSteps/StepFunctions.js

@@ -4,6 +4,7 @@ import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import { getRawText } from '../Utils/DraftFunctions';
 import ConditionTypes, { ExpressionTypes, OperatorTypes } from '../constants/ConditionTypes';
 import EntityPropertyTypes from '../constants/EntityPropertyTypes';
+import { log } from '../Utils/Logger';
 export function calcFillerSize(step, steps, values, size) {
     const maxSize = step.maxSize ?? size.blockNum;
     if (maxSize < size.blockNum) {
@@ -138,7 +139,7 @@ export const calcDefaultValue = (step) => {
 export const iterateNestedSteps = (idStep, steps, iteration, path = []) => {
     const step = steps[idStep];
     if (!step) {
-        console.error('Missing Step:', idStep);
+        log.warn({ form: { step: idStep }, reason: 'missing_step' });
         return;
     }
     iteration(step, path);

package/dist/Login/LoginPage.js

@@ -11,6 +11,7 @@ import { setUser } from '../States/GlobalSlice';
 import { jwtDecode } from 'jwt-decode';
 import LoginTextField from './LoginTextField';
 import MaterialProviders from '../Utils/MaterialProviders';
+import { errorFields, log } from '../Utils/Logger';
 const EMAIL_REGEX = 
 // eslint-disable-next-line no-control-regex
 /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
@@ -51,7 +52,7 @@ function LoginPage({ form }) {
             catch (err) {
                 setLoading(false);
                 if (err?.response?.status !== 400) {
-                    console.error(err);
+                    log.error({ action: { name: 'login' }, error: errorFields(err) });
                 }
                 if (err?.response?.data === 'Invalid Organization') {
                     setError('password', {

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -128,10 +128,10 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '0.9rem',
     lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today': {
+    '&.Erk-MuiPickerDay-today': {
         backgroundColor: theme.palette.primary.main + '33',
     },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
+    '&.Erk-MuiPickerDay-dayOutsideMonth': {
         color: 'rgb(0,0,0,0.4)',
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
@@ -171,7 +171,7 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, siz
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
     if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, orientation: "portrait", ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -231,7 +231,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, orientation: "portrait", readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -71,10 +71,10 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '0.9rem',
     lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today:not(.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight)': {
+    '&.Erk-MuiDateRangePickerDay-today:not(.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight)': {
         backgroundColor: theme.palette.primary.main + '33',
     },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
+    '&.Erk-MuiDateRangePickerDay-dayOutsideMonth': {
         color: 'rgb(0,0,0,0.4)',
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
@@ -84,7 +84,7 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
         backgroundColor: theme.palette.primary.main + '1a',
     },
 }));
-const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef, }, ref) {
+const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef }, ref) {
     const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
     const { displayValue, isInvalid } = useMemo(() => {
         const [startDate, endDate] = value ?? [null, null];

package/dist/Shared/Navbar/Navbar.js

@@ -4,6 +4,7 @@ import styles from './Navbar.module.css';
 import { IconButton, Avatar, Menu, MenuItem } from '@mui/material';
 import { logout } from '../../Services/UserService';
 import { useAppSelector } from '../../hooks';
+import { errorFields, log } from '../../Utils/Logger';
 function Navbar({ logo, color, apiKey }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const user = useAppSelector((state) => state.global.user);
@@ -14,7 +15,7 @@ function Navbar({ logo, color, apiKey }) {
                 await logout(apiKey);
             }
             catch (err) {
-                console.error(err);
+                log.error({ action: { name: 'logout' }, error: errorFields(err) });
             }
         }
         localStorage.removeItem('token');

package/dist/Shared/SmartDraftRenderer/LinkDecorator.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { errorFields, log } from '../../Utils/Logger';
 export function LinkComponent({ children, decoratedText }) {
     // Add protocol if missing
     const getHref = (url) => {
@@ -38,8 +39,7 @@ export function findLinkEntities(contentBlock, callback) {
     }
     catch (error) {
         // Fail silently to avoid breaking the editor
-        // eslint-disable-next-line no-console
-        console.warn('LinkDecorator: Error finding link entities:', error);
+        log.warn({ render: { component: 'LinkDecorator' }, error: errorFields(error) });
     }
 }
 export const linkDecorator = {

package/dist/Utils/Logger.d.ts

@@ -0,0 +1,10 @@
+import { log, parseError } from 'evlog';
+/**
+ * Loggable fields for a caught value. The global `log` API takes plain objects, not `Error`s, and a stack
+ * trace adds nothing in a published form — the message and the class are what identify the failure.
+ */
+export declare function errorFields(error: unknown): {
+    message: string;
+    name?: string;
+};
+export { log, parseError };

package/dist/Utils/Logger.js

@@ -0,0 +1,31 @@
+import { initLogger, log, parseError } from 'evlog';
+/**
+ * Local runs are detected from the hostname rather than a build-time flag: this package ships through both
+ * the Vite app build and the webpack `Embeddables` build, and only one of them defines `import.meta.env`.
+ */
+const isLocal = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1|\[::1\])$/.test(window.location.hostname);
+/**
+ * Configure evlog for the form renderer. Runs on first import of this module, so every entry point (the
+ * Vite app, the webpack embeddable, and the published library) is covered without touching each one.
+ *
+ * `redact` stays on everywhere. These forms collect third parties' personal data on third parties' sites,
+ * so the redaction pass is the last line of defence behind the rule that field values are never logged at
+ * all — see `docs/CONVENCIONES_LOGS.md` §3 in the Eureka-All workspace.
+ */
+initLogger({
+    env: { service: 'eureka-forms' },
+    pretty: isLocal,
+    redact: true,
+    // `debug` never reaches a published form.
+    minLevel: 'info',
+});
+/**
+ * Loggable fields for a caught value. The global `log` API takes plain objects, not `Error`s, and a stack
+ * trace adds nothing in a published form — the message and the class are what identify the failure.
+ */
+export function errorFields(error) {
+    if (error instanceof Error)
+        return { message: error.message, name: error.name };
+    return { message: String(error) };
+}
+export { log, parseError };

package/dist/Utils/PhoneFunctions.js

@@ -1,5 +1,6 @@
 import * as libphonenumber from 'libphonenumber-js/max';
-import { guessCountryByPartialPhoneNumber, removeDialCode, } from 'react-international-phone';
+import { guessCountryByPartialPhoneNumber, removeDialCode } from 'react-international-phone';
+import { log } from './Logger';
 export function isValidPhoneNumber(phone) {
     if (!phone.startsWith('+'))
         phone = '+' + phone;
@@ -19,7 +20,7 @@ export function isEmptyPhoneNumber(phone) {
         return true;
     }
     if (!country) {
-        console.error('Country not found for phone number:', phone);
+        log.warn({ validation: { field: 'phone', reason: 'country_not_found' } });
         return true;
     }
     return false;

package/dist/main.js

@@ -5,6 +5,7 @@ import styles from './index.module.css';
 import App from './App/App';
 import './index.css';
 import './Utils/MuiClassnameSetup';
+import { errorFields, log } from './Utils/Logger';
 const urlParams = new URLSearchParams(window.location.search);
 const values = urlParams.get('data-values');
 let dataValues = undefined;
@@ -13,7 +14,7 @@ if (values) {
         dataValues = JSON.parse(decodeURIComponent(values));
     }
     catch (error) {
-        console.error('Invalid data-values JSON', error);
+        log.error({ form: { source: 'data-values' }, error: errorFields(error) });
     }
 }
 const idOrganization = urlParams.get('idOrganization') ?? undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.52-test",
+  "version":"3.0.53-claude-evlog-migration",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -20,6 +20,7 @@
     "axios": "1.16.0",
     "date-fns": "4.1.0",
     "draft-js": "0.11.7",
+    "evlog": "^2.22.4",
     "i18n-iso-countries": "7.14.0",
     "jwt-decode": "4.0.0",
     "libphonenumber-js": "1.12.42",
@@ -50,10 +51,10 @@
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.1",
     "@faker-js/faker": "10.1.0",
-    "@mui/material": "^9.0.1",
-    "@mui/x-data-grid-pro": "^9.3.0",
-    "@mui/x-date-pickers": "^9.3.0",
-    "@mui/x-date-pickers-pro": "^9.3.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-data-grid-pro": "^9.10.1",
+    "@mui/x-date-pickers": "^9.10.1",
+    "@mui/x-date-pickers-pro": "^9.10.1",
     "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-onboarding": "^10.4.0",
     "@storybook/addon-themes": "^10.4.0",
@@ -97,8 +98,8 @@
   "peerDependencies": {
     "@emotion/react": "11.x.x",
     "@emotion/styled": "11.x.x",
-    "@mui/material": "^9.0.1",
-    "@mui/x-date-pickers": "^9.3.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-date-pickers": "^9.10.1",
     "react": "18 || 19",
     "react-dom": "18 || 19"
   },