@m4l/components 9.3.16-JT19092025.beta.1 → 9.3.17-JT25092025.beta.1

package/components/Stepper/Stepper.styles.js

@@ -76,8 +76,7 @@ const stepperStyles = {
     const isLastStep = step === totalSteps - 1;
     return {
       cursor: "pointer",
-      display: "flex",
-      visibility: ownerState?.isStepVisible ? "visible" : "hidden",
+      display: ownerState?.isStepVisible ? "flex" : "none",
       flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
       alignItems: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "start",
       justifyContent: ownerState?.visibleTitle ? "space-between" : "center",
@@ -131,7 +130,7 @@ const stepperStyles = {
     whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
-      color: (ownerState?.currentStep ?? 0) > (ownerState?.step ?? 0) ? theme.vars.palette.primary.semanticText : (ownerState?.currentStep ?? 0) === (ownerState?.step ?? 0) ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary,
+      color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
@@ -139,13 +138,12 @@ const stepperStyles = {
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
   indicator: ({ theme, ownerState }) => {
-    const currentStep = ownerState?.currentStep ?? 0;
     const step = ownerState?.step ?? 0;
     const totalSteps = ownerState?.totalSteps ?? 0;
-    const isCompleted = currentStep > step;
-    const isCurrent = currentStep === step;
+    const isCompleted = ownerState?.isCompleted ?? false;
+    const isCurrent = ownerState?.isCurrent ?? false;
+    const isValidStep = ownerState?.isValidStep ?? true;
     const isLastStep = step === totalSteps - 1;
-    const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
     return {
       ...ownerState?.orientation === "horizontal" ? {
         marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
@@ -155,7 +153,7 @@ const stepperStyles = {
       justifyContent: "center",
       flexShrink: 0,
       order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
-      background: isCompleted ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : !isValidStep ? theme.vars.palette.error.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : isCurrent ? theme.vars.palette.primary.enabled : theme.vars.palette.default.enabled,
+      background: !isValidStep && ownerState?.hasBeenValidated ? theme.vars.palette.error.enabled : isCompleted && isValidStep ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : isCurrent ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.default.enabled,
       borderRadius: theme.vars.size.borderRadius.r2,
       ...ownerState?.indicatorType === "number" && !theme.generalSettings.isMobile && {
         boxShadow: isCurrent ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
@@ -183,13 +181,13 @@ const stepperStyles = {
    * Estilos para el número de texto dentro del indicador numérico del Stepper.
    */
   textNumber: ({ theme, ownerState }) => {
-    const currentStep = ownerState?.currentStep ?? 0;
-    const step = ownerState?.step ?? 0;
-    const isCompleted = currentStep > step;
-    const isCurrent = currentStep === step;
+    const isCompleted = ownerState?.isCompleted ?? false;
+    const isCurrent = ownerState?.isCurrent ?? false;
+    const isValidStep = ownerState?.isValidStep ?? true;
+    const hasBeenValidated = ownerState?.hasBeenValidated ?? false;
     return {
       "&.M4LTypography-root": {
-        color: isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
+        color: !isValidStep && hasBeenValidated ? theme.vars.palette.error.contrastText : isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
       }
     };
   },

package/components/Stepper/helpers/getInitialFieldValues/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Obtiene los valores iniciales de campos específicos del formulario.
+ * Se usa para inicializar el ref que trackea cambios en los campos.
+ * @param allValues - Todos los valores del formulario (de getValues())
+ * @param fields - Lista de nombres de campos de los que queremos obtener valores
+ * @returns Objeto con solo los valores de los campos especificados
+ * @example
+ * const formValues = { name: 'John', age: 25, city: 'NY', country: 'USA' };
+ * getInitialFieldValues(formValues, ['name', 'age'])
+ * // Retorna: { name: 'John', age: 25 }
+ */
+export declare function getInitialFieldValues(allValues: Record<string, any>, fields?: string[]): Record<string, any>;

package/components/Stepper/helpers/getInitialFieldValues/index.js

@@ -0,0 +1,14 @@
+function getInitialFieldValues(allValues, fields = []) {
+  if (fields.length === 0) {
+    return {};
+  }
+  return fields.reduce((acc, field) => {
+    if (field in allValues) {
+      acc[field] = allValues[field];
+    }
+    return acc;
+  }, {});
+}
+export {
+  getInitialFieldValues as g
+};

package/components/Stepper/helpers/index.d.ts

@@ -2,3 +2,5 @@ export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepConditi
 export { findNextVisibleValidStep } from './findNextVisibleValidStep';
 export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
+export { parseWatchedValues } from './parseWatchedValues';
+export { getInitialFieldValues } from './getInitialFieldValues';

package/components/Stepper/helpers/parseWatchedValues/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Convierte los valores observados de useWatch en un objeto estructurado con los nombres de campos como keys.
+ *
+ * useWatch de react-hook-form retorna diferentes estructuras según la cantidad de campos observados:
+ * - Un solo campo: retorna el valor directamente
+ * - Múltiples campos: retorna un array con los valores en el mismo orden de los campos
+ * @param watchValues - Valores observados de useWatch (puede ser un valor único o un array)
+ * @param fields - Lista de nombres de campos que se están observando
+ * @returns Objeto con los valores actuales mapeados a sus respectivos nombres de campo
+ * @example
+ * // Para un solo campo
+ * parseWatchedValues('John', ['name']) // { name: 'John' }
+ *
+ * // Para múltiples campos
+ * parseWatchedValues(['John', 25], ['name', 'age']) // { name: 'John', age: 25 }
+ */
+export declare function parseWatchedValues(watchValues: any, fields: string[]): Record<string, any>;

package/components/Stepper/helpers/parseWatchedValues/index.js

@@ -0,0 +1,12 @@
+function parseWatchedValues(watchValues, fields) {
+  if (fields.length === 1) {
+    return { [fields[0]]: watchValues };
+  }
+  return fields.reduce((acc, field, index) => {
+    acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
+    return acc;
+  }, {});
+}
+export {
+  parseWatchedValues as p
+};

package/components/Stepper/hooks/useDynamicValidation/index.d.ts

@@ -3,7 +3,9 @@
  * @returns Objeto con funciones para manejar la validación dinámica
  */
 export declare function useDynamicValidation(): {
-    activateFieldsValidation: (fields: string[]) => void;
+    activateFieldsValidation: (fields: string[], skipIfValidating?: boolean) => void;
     clearAllValidation: () => void;
     activeFields: string[];
+    startExternalValidation: () => void;
+    endExternalValidation: () => void;
 };

package/components/Stepper/hooks/useDynamicValidation/index.js

@@ -1,20 +1,23 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
+import { p as parseWatchedValues } from "../../helpers/parseWatchedValues/index.js";
+import { g as getInitialFieldValues } from "../../helpers/getInitialFieldValues/index.js";
 function useDynamicValidation() {
-  const { trigger } = useFormContext();
+  const { trigger, getValues } = useFormContext();
   const [activeFields, setActiveFields] = useState([]);
+  const [isValidating, setIsValidating] = useState(false);
+  const statusLoad = useWatch({
+    name: "statusLoad"
+  });
   const watchValues = useWatch({
     name: activeFields.length > 0 ? activeFields : ["__dummy__"]
   });
   const lastValuesRef = useRef({});
   useEffect(() => {
-    if (activeFields.length === 0) {
+    if (activeFields.length === 0 || statusLoad !== "ready" || isValidating) {
       return;
     }
-    const currentValues = activeFields.length === 1 ? { [activeFields[0]]: watchValues } : activeFields.reduce((acc, field, index) => {
-      acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
-      return acc;
-    }, {});
+    const currentValues = parseWatchedValues(watchValues, activeFields);
     const changedFields = activeFields.filter((field) => {
       const currentValue = currentValues[field];
       const lastValue = lastValuesRef.current[field];
@@ -30,18 +33,25 @@ function useDynamicValidation() {
       }, 100);
       return () => clearTimeout(timeoutId);
     }
-  }, [activeFields, trigger, watchValues]);
-  const activateFieldsValidation = useCallback((fields) => {
-    setActiveFields((prev) => {
-      const newFields = fields.filter((field) => !prev.includes(field));
-      return [...prev, ...newFields];
-    });
-    fields.forEach((field) => {
-      if (!lastValuesRef.current.hasOwnProperty(field)) {
-        lastValuesRef.current[field] = void 0;
-      }
-    });
+  }, [activeFields, trigger, watchValues, statusLoad, isValidating]);
+  const startExternalValidation = useCallback(() => {
+    setIsValidating(true);
+  }, []);
+  const endExternalValidation = useCallback(() => {
+    setIsValidating(false);
   }, []);
+  const activateFieldsValidation = useCallback(
+    (fields, skipIfValidating = true) => {
+      if (skipIfValidating && isValidating) {
+        return;
+      }
+      const formValues = getValues();
+      setActiveFields(fields);
+      const initialValues = getInitialFieldValues(formValues, fields);
+      lastValuesRef.current = initialValues;
+    },
+    [getValues, isValidating]
+  );
   const clearAllValidation = useCallback(() => {
     setActiveFields([]);
     lastValuesRef.current = {};
@@ -49,7 +59,9 @@ function useDynamicValidation() {
   return {
     activateFieldsValidation,
     clearAllValidation,
-    activeFields
+    activeFields,
+    startExternalValidation,
+    endExternalValidation
   };
 }
 export {

package/components/Stepper/hooks/useStepperActions/index.js

@@ -54,9 +54,7 @@ function useStepperActions() {
       const currentStepData = steps[currentStep - 1];
       const fieldsJustValidated = currentStepData?.validationFields || [];
       if (fieldsJustValidated.length > 0) {
-        setTimeout(() => {
-          clearAllValidation();
-        }, 100);
+        clearAllValidation();
       }
     }
     if (success && futureFields.length > 0) {

package/components/Stepper/store/StepperStore/index.js

@@ -35,6 +35,18 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               if (!preserveStepValidationStatus) {
                 state.stepValidationStatus = {};
               }
+              if (!preserveStepValidationStatus) {
+                const firstVisibleStepIndex = findNextVisibleValidStep(
+                  -1,
+                  // Comenzar desde -1 para encontrar el primer step visible
+                  steps,
+                  {},
+                  state.visibilityData
+                );
+                if (firstVisibleStepIndex !== 0 && firstVisibleStepIndex < steps.length) {
+                  state.currentStep = firstVisibleStepIndex;
+                }
+              }
             });
           },
           /**
@@ -114,9 +126,16 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           resetStepper: () => {
             set((state) => {
-              state.currentStep = 0;
               state.stepValidationStatus = {};
               state.isValidating = false;
+              const firstVisibleStepIndex = findNextVisibleValidStep(
+                -1,
+                // Comenzar desde -1 para encontrar el primer step visible
+                state.steps,
+                {},
+                state.visibilityData
+              );
+              state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
           }
         }

package/components/Stepper/subcomponents/StepArea/index.js

@@ -10,7 +10,7 @@ import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisi
 function StepArea() {
   const { trigger, clearErrors } = useFormContext();
   const formValues = useWatch();
-  const { activateFieldsValidation } = useDynamicValidation();
+  const { activateFieldsValidation, startExternalValidation, endExternalValidation } = useDynamicValidation();
   const {
     currentStep,
     steps,
@@ -34,16 +34,19 @@ function StepArea() {
     }),
     shallow
   );
-  const validSteps = useMemo(() => {
-    return steps;
-  }, [steps]);
+  const allSteps = steps;
+  const visibleSteps = useMemo(() => {
+    return steps.filter(
+      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
+    );
+  }, [steps, formValues, visibilityData]);
   const ownerState = {
     visibleTitle,
     orientation,
-    totalSteps: validSteps.length
+    totalSteps: visibleSteps.length
   };
   const handleStepClick = async (targetIndex) => {
-    const currentIndex = validSteps.findIndex(
+    const currentIndex = visibleSteps.findIndex(
       (step) => step.key === steps[currentStep].key
     );
     if (targetIndex === currentIndex) {
@@ -51,7 +54,7 @@ function StepArea() {
     }
     const isNavigatingForward = targetIndex > currentIndex;
     const targetOriginalIndex = steps.findIndex(
-      (s) => s.key === validSteps[targetIndex].key
+      (s) => s.key === visibleSteps[targetIndex].key
     );
     if (!isNavigatingForward) {
       setCurrentStep(targetOriginalIndex);
@@ -60,9 +63,11 @@ function StepArea() {
     const isSkippingSteps = targetIndex > currentIndex + 1;
     if (isSkippingSteps) {
       for (let i = currentIndex; i < targetIndex; i++) {
-        const step = validSteps[i];
+        const step = visibleSteps[i];
         const stepOriginalIndex = steps.findIndex((s) => s.key === step.key);
+        startExternalValidation();
         const isValid = await trigger(step.validationFields);
+        endExternalValidation();
         if (!isValid) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
@@ -72,11 +77,13 @@ function StepArea() {
         setStepValidationStatus(stepOriginalIndex, true);
       }
     } else {
-      const currentStepData = validSteps[currentIndex];
+      const currentStepData = visibleSteps[currentIndex];
       const currentStepOriginalIndex = steps.findIndex(
         (s) => s.key === currentStepData.key
       );
+      startExternalValidation();
       const isCurrentValid = await trigger(currentStepData.validationFields);
+      endExternalValidation();
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
         activateFieldsValidation(currentStepData.validationFields || []);
@@ -86,13 +93,13 @@ function StepArea() {
     }
     setCurrentStep(targetOriginalIndex);
     if (isNavigatingForward) {
-      const currentStepData = validSteps[currentIndex];
+      const currentStepData = visibleSteps[currentIndex];
       const currentStepOriginalIndex = steps.findIndex(
         (s) => s.key === currentStepData.key
       );
       const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
       if (isCurrentStepValid) {
-        const targetStep = validSteps[targetIndex];
+        const targetStep = visibleSteps[targetIndex];
         const targetStepFields = targetStep.validationFields || [];
         if (targetStepFields.length > 0) {
           clearErrors(targetStepFields);
@@ -104,32 +111,37 @@ function StepArea() {
       }
     }
   };
-  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: validSteps.map((step, validIndex) => {
-    const originalIndex = steps.findIndex((s) => s.key === step.key);
-    const totalVisibleSteps = validSteps.filter(
-      (s) => evaluateVisibilityStepCondition(s, formValues || {}, visibilityData)
-    ).length;
+  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: allSteps.map((step, originalIndex) => {
+    const isStepVisible = evaluateVisibilityStepCondition(
+      step,
+      formValues || {},
+      visibilityData
+    );
+    const visibleStepIndex = isStepVisible ? visibleSteps.findIndex((visStep) => visStep.key === step.key) : -1;
     return /* @__PURE__ */ jsxs(
       StepStyled,
       {
         role: "button",
-        onClick: () => handleStepClick(validIndex),
+        onClick: () => isStepVisible ? handleStepClick(visibleStepIndex) : void 0,
         ownerState: {
           ...ownerState,
           currentStep,
-          step: validIndex,
-          isStepVisible: evaluateVisibilityStepCondition(
-            step,
-            formValues || {},
-            visibilityData
-          )
+          step: visibleStepIndex,
+          // Usa el índice en la secuencia visible
+          isStepVisible
         },
         children: [
           visibleTitle && /* @__PURE__ */ jsx(
             StepNameStyled,
             {
               variant: "body",
-              ownerState: { ...ownerState, currentStep, step: validIndex },
+              ownerState: {
+                ...ownerState,
+                currentStep,
+                step: visibleStepIndex,
+                originalStepIndex: originalIndex,
+                isStepVisible
+              },
               children: step.title
             }
           ),
@@ -137,8 +149,8 @@ function StepArea() {
             Indicator,
             {
               currentStep,
-              step: validIndex,
-              totalSteps: totalVisibleSteps,
+              step: visibleStepIndex,
+              totalSteps: visibleSteps.length,
               originalStepIndex: originalIndex
             }
           )

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.js

@@ -21,15 +21,6 @@ function Indicator(props) {
   );
   const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
-  const ownerState = {
-    size: currentSize,
-    currentStep,
-    step,
-    totalSteps,
-    orientation,
-    indicatorType,
-    stepValidationStatus
-  };
   const isMobile = useIsMobile();
   const effectiveIndicatorType = useMemo(() => {
     return isMobile ? "dot" : indicatorType;
@@ -45,6 +36,20 @@ function Indicator(props) {
       hasBeenValidated: validated
     };
   }, [currentStep, originalStepIndex, stepValidationStatus]);
+  const ownerState = {
+    size: currentSize,
+    currentStep,
+    step,
+    totalSteps,
+    orientation,
+    indicatorType,
+    stepValidationStatus,
+    originalStepIndex,
+    isCompleted,
+    isCurrent: currentStep === originalStepIndex,
+    isValidStep,
+    hasBeenValidated
+  };
   return /* @__PURE__ */ jsx(IndicatorStyled, { ownerState, children: hasBeenValidated && !isValidStep ? (
     // Mostrar error solo si ha sido validado y es inválido
     /* @__PURE__ */ jsx(
@@ -67,7 +72,10 @@ function Indicator(props) {
     )
   ) : (
     // Mostrar estado normal (número o dot) para pasos no validados o actuales
-    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState: { currentStep, step }, children: effectiveIndicatorType === "number" ? step + 1 : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState, children: effectiveIndicatorType === "number" ? (
+      // Solo mostrar número si el step es visible (step >= 0)
+      step >= 0 ? step + 1 : ""
+    ) : /* @__PURE__ */ jsx(
       Icon,
       {
         src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -12,28 +12,47 @@ function Step(props) {
     steps: state.steps,
     visibilityData: state.visibilityData
   }));
-  const currentStepConfig = useMemo(() => {
-    return steps[currentStep];
-  }, [steps, currentStep]);
   const stepConfig = useMemo(() => {
     return steps.find((step) => step.key === stepKey);
   }, [steps, stepKey]);
   const isStepVisible = useMemo(() => {
-    if (!currentStepConfig) {
-      return false;
-    }
-    if (stepKey !== currentStepConfig.key) {
+    if (!stepConfig) {
       return false;
     }
-    if (stepConfig && !evaluateVisibilityStepCondition(
+    const meetsVisibilityCondition = evaluateVisibilityStepCondition(
       stepConfig,
       formValues || {},
       visibilityData
-    )) {
+    );
+    if (!meetsVisibilityCondition) {
+      return false;
+    }
+    const currentStepConfig = steps[currentStep];
+    if (!currentStepConfig) {
+      return false;
+    }
+    if (evaluateVisibilityStepCondition(currentStepConfig, formValues || {}, visibilityData)) {
+      return stepKey === currentStepConfig.key;
+    }
+    const visibleStepsUpToCurrent = [];
+    for (let i = 0; i <= currentStep; i++) {
+      const step = steps[i];
+      if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
+        visibleStepsUpToCurrent.push(step);
+      }
+    }
+    if (visibleStepsUpToCurrent.length === 0) {
+      for (let i = currentStep + 1; i < steps.length; i++) {
+        const step = steps[i];
+        if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
+          return stepKey === step.key;
+        }
+      }
       return false;
     }
-    return true;
-  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
+    const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
+    return stepKey === activeVisibleStep.key;
+  }, [currentStep, stepKey, stepConfig, steps, formValues, visibilityData]);
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
 import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
@@ -7,13 +7,15 @@ import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButto
 function StepperFooterRightActions(props) {
   const { children } = props;
   const isLastVisibleValidStep = useIsLastVisibleValidStep();
-  const hasCustomSubmitButton = useMemo(() => {
-    return React.Children.toArray(children).some((child) => {
+  const [hasCustomSubmitButton, setHasCustomSubmitButton] = useState(false);
+  useEffect(() => {
+    const hasCustomButton = React.Children.toArray(children).some((child) => {
       if (React.isValidElement(child)) {
         return child.type === StepperSubmitButton;
       }
       return false;
     });
+    setHasCustomSubmitButton(hasCustomButton);
   }, [children]);
   const filteredChildren = useMemo(() => {
     return React.Children.toArray(children).filter((child) => {

package/components/areas/icons.js

@@ -1,6 +1,6 @@
 const ICONS = {
   MAXIMIZE: "window_expand.svg",
-  NORMALIZE: "window_normalize.svg",
+  NORMALIZE: "window_minimize.svg",
   COLLAPSE: "window_collapse.svg",
   UNCOLLPASE: "window_uncollapse.svg",
   RESET_COOKIES: "reset_cookies.svg",

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js

@@ -1,7 +1,4 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getPropertyByString } from "@m4l/core";
-import { useIsMobile } from "@m4l/graphics";
-import { useTheme } from "@mui/material";
 import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
@@ -13,28 +10,22 @@ function RHFAutocomplete(props) {
     getOptionLabel,
     isOptionEqualToValue,
     label,
-    color,
     options,
     disabled,
     onOpen,
     onClose,
     loading,
-    variant,
     helperMessage,
     size,
     onChangeFilterParmsLocal,
     mandatory,
     mandatoryMessage,
     multiple,
-    imageScale = true,
-    imageRepeat,
     refresh
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
-  const theme = useTheme();
   const [open, setOpen] = useState(false);
-  const isDesktop = !useIsMobile();
   const onCloseLocal = useCallback((event, reason) => {
     setOpen(false);
     if (onClose) {
@@ -59,34 +50,11 @@ function RHFAutocomplete(props) {
     },
     [getOptionLabel]
   );
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : color || "default",
-    theme.vars.palette.default
-  );
   const {
-    control,
-    formState: { errors }
+    control
   } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  useEffect(() => {
-    const hasError = errors[nameRHF];
-    if (hasError) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors, nameRHF, variant, control]);
   const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    semantics: currentVariant,
-    disabled,
-    multiple: Boolean(multiple),
-    imageScale: Boolean(imageScale),
-    imageRepeat: Boolean(imageRepeat),
-    paletteColor
+    disabled
   };
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
@@ -147,7 +115,7 @@ function RHFAutocomplete(props) {
                   htmlFor: htmlForId
                 }
               ),
-              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
+              error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
             ] });
           }
         }

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PopperProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TextFieldProps } from '../../mui_extended/TextField/types';
 import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -52,11 +52,6 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
  */
 export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
     disabled?: boolean;
-    semantics: RHFAutocompleteVariants | 'error' | null;
-    multiple: boolean;
-    imageScale?: boolean;
-    imageRepeat?: boolean;
-    paletteColor: PaletteColor;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.