@m4l/components 9.3.12 → 9.3.13-JT010925.beta.2

package/components/Stepper/Stepper.styles.js

@@ -0,0 +1,302 @@
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const stepperStyles = {
+  /**
+   *
+   * Estilos para el contenedor principal del Stepper.
+   */
+  stepperRoot: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: ownerState?.stepperFooterSticky ? "flex-start" : "space-between",
+    background: theme.vars.palette.background.default,
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.vars.size.borderRadius.r1
+  }),
+  /**
+   * Estilos para la sección que contiene los pasos del Stepper.
+   */
+  contentSection: ({ theme, ownerState }) => ({
+    display: "flex",
+    flex: 1,
+    height: "100%",
+    overflow: "hidden",
+    flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
+    gap: theme.vars.size.baseSpacings.sp8
+  }),
+  /**
+   * Estilos para la sección que contiene los botones de acción del Stepper.
+   */
+  stepArea: ({ theme, ownerState }) => ({
+    ...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
+      display: "flex",
+      alignItems: "start",
+      width: "100%",
+      minWidth: "350px",
+      overflowX: "auto",
+      overflowY: "hidden"
+    } : {
+      maxWidth: "116px",
+      overflowY: "auto"
+    }
+  }),
+  /**
+   * Estilos para el área de contenido del Stepper.
+   */
+  contentArea: ({ theme, ownerState }) => ({
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp6,
+    ...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
+      borderTop: "1px solid",
+      paddingTop: theme.vars.size.baseSpacings.sp8
+    } : {
+      borderLeft: "1px solid",
+      paddingLeft: theme.vars.size.baseSpacings.sp8
+    },
+    borderColor: theme.vars.palette?.border.disabled
+  }),
+  /**
+   * Estilos para cada paso del Stepper.
+   */
+  step: ({ theme, ownerState }) => {
+    const currentStep = ownerState?.currentStep ?? 0;
+    const step = ownerState?.step ?? 0;
+    const totalSteps = ownerState?.totalSteps ?? 0;
+    const isCompleted = currentStep > step;
+    const isLastStep = step === totalSteps - 1;
+    return {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
+      alignItems: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "start",
+      justifyContent: ownerState?.visibleTitle ? "space-between" : "center",
+      gap: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? theme.vars.size.baseSpacings.sp1 : theme.vars.size.baseSpacings.sp4,
+      width: "100%",
+      ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
+        minWidth: theme.vars.size.baseSpacings.sp10
+      },
+      height: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "auto" : theme.vars.size.baseSpacings.sp13,
+      position: "relative",
+      ...!isLastStep && (ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: ownerState?.orientation === "horizontal" && theme.generalSettings.isMobile ? "16px" : "10px",
+          // Ajustado para coincidir con el centro del indicador cuando alignItems es start
+          height: "1px",
+          borderTop: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`,
+          left: "50%",
+          width: "100%"
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para el nombre del paso dentro del Stepper.
+   */
+  stepName: ({ theme, ownerState }) => ({
+    ...ownerState?.orientation === "horizontal" && {
+      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.large.action
+    },
+    ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
+      maxWidth: "120px",
+      width: "100%",
+      lineHeight: "1.2",
+      marginTop: theme.vars.size.baseSpacings.sp1
+    },
+    alignContent: "center",
+    cursor: "pointer",
+    overflow: "hidden",
+    ...theme.generalSettings.isMobile ? {
+      display: "none"
+    } : {
+      display: ownerState?.visibleTitle ? "-webkit-box" : "none"
+    },
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 2,
+    textOverflow: "ellipsis",
+    flex: 1,
+    minWidth: 0,
+    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,
+      textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
+    }
+  }),
+  /**
+   * 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 isLastStep = step === totalSteps - 1;
+    const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
+    return {
+      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
+        return {
+          width: size,
+          height: size
+        };
+      }),
+      ...ownerState?.orientation === "horizontal" ? {
+        marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
+      } : {},
+      display: "flex",
+      alignItems: "center",
+      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,
+      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"
+      },
+      position: "relative",
+      ...!isLastStep && ownerState?.orientation === "horizontal" && !theme.generalSettings.isMobile && {
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "1px",
+          height: theme.vars.size.baseSpacings.sp12,
+          borderLeft: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`
+        }
+      }
+    };
+  },
+  /**
+   * 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;
+    return {
+      "&.M4LTypography-root": {
+        color: isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
+      }
+    };
+  },
+  /**
+   * Estilos para el área de contenido del Stepper.
+   */
+  contentAreaHeader: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.size.baseSpacings.sp3,
+    position: "sticky",
+    top: 0,
+    backgroundColor: theme.vars.palette.background.default,
+    zIndex: 10,
+    paddingBottom: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos para el cuerpo del área de contenido del Stepper
+   */
+  contentAreaBody: ({ theme }) => ({
+    flex: 1,
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp6
+  }),
+  /**
+   * Estilos para el contenedor del icono del titulo del Stepper.
+   */
+  wrapperIcon: ({ theme, ownerState }) => ({
+    ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => {
+      return {
+        width: size,
+        height: size
+      };
+    }),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: theme.vars.palette.primary.enabledOpacity,
+    borderRadius: theme.vars.size.borderRadius["r1-5"]
+  }),
+  /**
+   * Estilos para el título del Stepper.
+   */
+  wrapperTitle: ({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Estilos para el icono del Stepper.
+   */
+  icon: ({ theme, ownerState }) => ({
+    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
+      return {
+        width: size,
+        height: size
+      };
+    })
+  }),
+  /**
+   * Estilos para el título del Stepper.
+   */
+  title: () => ({}),
+  /**
+   * Estilos para la descripción del Stepper.
+   */
+  description: ({ theme }) => ({
+    "&.M4LTypography-root": {
+      color: theme.vars.palette.text.secondary
+    }
+  }),
+  /**
+   * Estilos para la sección de botones de acción del Stepper.
+   */
+  stepperFooterSection: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingTop: theme.vars.size.baseSpacings.sp4,
+    ...ownerState?.stepperFooterSticky && {
+      position: "sticky",
+      bottom: 0,
+      backgroundColor: theme.vars.palette.background.default,
+      marginTop: "auto",
+      zIndex: 10
+    }
+  }),
+  /**
+   * Estilos para las acciones del lado izquierdo del StepperFooter.
+   */
+  stepperFooterLeftActions: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos para las acciones del lado derecho del StepperFooter.
+   */
+  stepperFooterRightActions: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos para el contenedor de los botones del Stepper.
+   */
+  wrapperButtons: ({ theme }) => ({
+    display: "flex",
+    gap: theme.size.baseSpacings.sp3
+  })
+};
+export {
+  stepperStyles as s
+};

package/components/Stepper/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const STEPPER_PREFIX_NAME = "M4LStepper";
+export declare const STEPPER_STORE_ID = "M4LStepperStore";

package/components/Stepper/constants.js

@@ -0,0 +1,6 @@
+const STEPPER_PREFIX_NAME = "M4LStepper";
+const STEPPER_STORE_ID = "M4LStepperStore";
+export {
+  STEPPER_PREFIX_NAME as S,
+  STEPPER_STORE_ID as a
+};

package/components/Stepper/dictionary.d.ts

@@ -0,0 +1,8 @@
+export declare const STEPPER_DICTIONARY_ID = "stepper";
+export declare function getStepperComponentsDictionary(): string[];
+export declare const DICTIONARY: {
+    LABEL_PREV_BUTTON: string;
+    LABEL_NEXT_BUTTON: string;
+    LABEL_CANCEL_BUTTON: string;
+    LABEL_SUBMIT_BUTTON: string;
+};

package/components/Stepper/dictionary.js

@@ -0,0 +1,14 @@
+const STEPPER_DICTIONARY_ID = "stepper";
+function getStepperComponentsDictionary() {
+  return [STEPPER_DICTIONARY_ID];
+}
+const DICTIONARY = {
+  LABEL_PREV_BUTTON: `${STEPPER_DICTIONARY_ID}.label_prev_button`,
+  LABEL_NEXT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_next_button`,
+  LABEL_CANCEL_BUTTON: `${STEPPER_DICTIONARY_ID}.label_cancel_button`,
+  LABEL_SUBMIT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_submit_button`
+};
+export {
+  DICTIONARY as D,
+  getStepperComponentsDictionary as g
+};

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

@@ -0,0 +1,9 @@
+import { FormData, Step, VisibilityData } from '../../types';
+/**
+ * evaluateVisibilityStepCondition - Función helper que evalúa si un step debe ser visible según su condition
+ * @param step - El step a evaluar
+ * @param formData - Datos del formulario actual para evaluar la condition
+ * @param visibilityData - Datos adicionales para evaluar la condition (ej: objectId)
+ * @returns boolean - Retorna true si el step debe ser visible, false en caso contrario
+ */
+export declare const evaluateVisibilityStepCondition: (step: Step, formData?: FormData, visibilityData?: VisibilityData) => boolean;

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

@@ -0,0 +1,17 @@
+const evaluateVisibilityStepCondition = (step, formData, visibilityData) => {
+  if (!step.visibilityCondition) {
+    return true;
+  }
+  try {
+    return step.visibilityCondition(formData || {}, visibilityData);
+  } catch (error) {
+    console.error(
+      `Error evualuando la condición del step "${step.key}":`,
+      error
+    );
+    return false;
+  }
+};
+export {
+  evaluateVisibilityStepCondition as e
+};

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

@@ -0,0 +1,10 @@
+import { FormData, Step, VisibilityData } from '../../types';
+/**
+ * findNextVisibleValidStep - Función helper que busca el siguiente step válido según su visibilityCondition.
+ * @param currentStepIndex - Índice del step actual
+ * @param steps - Lista de todos los steps del Stepper
+ * @param formData - Datos del formulario actual para evaluar las conditions
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
+ * @returns number - Retorna el índice del siguiente step válido, o steps.length si no hay más steps válidos
+ */
+export declare const findNextVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => number;

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

@@ -0,0 +1,13 @@
+import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
+const findNextVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
+  for (let i = currentStepIndex + 1; i < steps.length; i++) {
+    const step = steps[i];
+    if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
+      return i;
+    }
+  }
+  return steps.length;
+};
+export {
+  findNextVisibleValidStep as f
+};

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

@@ -0,0 +1,10 @@
+import { FormData, Step, VisibilityData } from '../../types';
+/**
+ * findPrevVisibleValidStep - Función helper que busca el paso anterior válido según su condition
+ * @param currentStepIndex - Índice del step actual
+ * @param steps - Lista de todos los steps del Stepper
+ * @param formData - Datos del formulario actual para evaluar las conditions
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
+ * @returns number - Retorna el índice del step anterior válido, o -1 si no hay steps anteriores válidos
+ */
+export declare const findPrevVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => number;

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

@@ -0,0 +1,13 @@
+import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
+const findPrevVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
+  for (let i = currentStepIndex - 1; i >= 0; i--) {
+    const step = steps[i];
+    if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
+      return i;
+    }
+  }
+  return -1;
+};
+export {
+  findPrevVisibleValidStep as f
+};

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

@@ -0,0 +1,4 @@
+export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepCondition';
+export { findNextVisibleValidStep } from './findNextVisibleValidStep';
+export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
+export { isLastVisibleValidStep } from './isLastVisibleValidStep';

package/components/Stepper/helpers/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,10 @@
+import { FormData, Step, VisibilityData } from '../../types';
+/**
+ * isLastVisibleValidStep - Función helper que determina si el paso actual es el último paso válido
+ * @param currentStepIndex - Índice del step actual
+ * @param steps - Lista de todos los steps del Stepper
+ * @param formData - Datos del formulario actual para evaluar las conditions
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
+ * @returns boolean - Retorna true si el paso actual es el último paso válido
+ */
+export declare const isLastVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => boolean;

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

@@ -0,0 +1,16 @@
+import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
+const isLastVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
+  if (!steps || currentStepIndex >= steps.length || currentStepIndex < 0) {
+    return false;
+  }
+  for (let i = currentStepIndex + 1; i < steps.length; i++) {
+    const step = steps[i];
+    if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
+      return false;
+    }
+  }
+  return true;
+};
+export {
+  isLastVisibleValidStep as i
+};

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

@@ -0,0 +1,6 @@
+/**
+ * useIsLastVisibleValidStep - Hook que determina si el paso actual es el último paso válido
+ * considerando la "visibilityCondition" de cada step y los datos actuales del formulario
+ * @returns boolean - true si estamos en el último paso válido
+ */
+export declare const useIsLastVisibleValidStep: () => boolean;

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

@@ -0,0 +1,25 @@
+import { useFormContext } from "react-hook-form";
+import { u as useStepper } from "../useStepper/index.js";
+import { shallow } from "zustand/shallow";
+import { i as isLastVisibleValidStep } from "../../helpers/isLastVisibleValidStep/index.js";
+const useIsLastVisibleValidStep = () => {
+  const { getValues } = useFormContext();
+  const { currentStep, steps, visibilityData } = useStepper(
+    (state) => ({
+      currentStep: state.currentStep,
+      steps: state.steps,
+      visibilityData: state.visibilityData
+    }),
+    shallow
+  );
+  const formData = getValues();
+  return isLastVisibleValidStep(
+    currentStep,
+    steps || [],
+    formData,
+    visibilityData
+  );
+};
+export {
+  useIsLastVisibleValidStep as u
+};

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

@@ -0,0 +1,5 @@
+import { StepperStateWithActions } from '../../store/types';
+/**
+ * Hook que permite acceder al store de StepperStore
+ */
+export declare function useStepper<T>(selector: (state: StepperStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

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

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { a as StepperContext } from "../../store/StepperContext/index.js";
+function useStepper(selector, equalityFn) {
+  const store = useContext(StepperContext);
+  if (!store) {
+    throw new Error("useStepper context must be use inside StepperContext");
+  }
+  return useStore(store, selector, equalityFn ?? shallow);
+}
+export {
+  useStepper as u
+};

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

@@ -0,0 +1,8 @@
+/**
+ * useActions - Hook/función que expone las acciones del Stepper para uso externo
+ */
+export declare function useStepperActions(): {
+    prevStepAction: () => void;
+    nextStepAction: () => Promise<boolean>;
+    cancelAction: () => void;
+};

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

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+import { u as useStepper } from "../useStepper/index.js";
+import { useFormContext } from "react-hook-form";
+import { shallow } from "zustand/shallow";
+function useStepperActions() {
+  const { trigger, clearErrors, getValues, reset } = useFormContext();
+  const {
+    nextStep,
+    prevStep,
+    currentStep,
+    steps,
+    setStepValidationStatus,
+    resetStepper
+  } = useStepper(
+    (state) => ({
+      nextStep: state.actions.nextStep,
+      prevStep: state.actions.prevStep,
+      currentStep: state.currentStep,
+      steps: state.steps,
+      setStepValidationStatus: state.actions.setStepValidationStatus,
+      resetStepper: state.actions.resetStepper
+    }),
+    shallow
+  );
+  const prevStepAction = useCallback(() => {
+    const formData = getValues();
+    prevStep(formData);
+  }, [prevStep, getValues]);
+  const nextStepAction = useCallback(async () => {
+    const formData = getValues();
+    const futureSteps = steps.slice(currentStep + 1);
+    const futureFields = [];
+    futureSteps.forEach((step) => {
+      if (step.validationFields) {
+        futureFields.push(...step.validationFields);
+      }
+    });
+    const validateFn = async () => {
+      const currentStepData = steps[currentStep];
+      const fieldsToValidate = currentStepData?.validationFields || [];
+      if (fieldsToValidate.length === 0) {
+        return true;
+      }
+      return await trigger(fieldsToValidate);
+    };
+    const success = await nextStep(validateFn, formData);
+    if (success && futureFields.length > 0) {
+      clearErrors(futureFields);
+      setTimeout(() => {
+        clearErrors(futureFields);
+        futureSteps.forEach((_, index) => {
+          const stepIndex = currentStep + 1 + index;
+          setStepValidationStatus(stepIndex, true);
+        });
+      }, 100);
+    }
+    return success;
+  }, [
+    nextStep,
+    clearErrors,
+    setStepValidationStatus,
+    steps,
+    currentStep,
+    trigger,
+    getValues
+  ]);
+  const cancelAction = useCallback(() => {
+    reset();
+    clearErrors();
+    resetStepper();
+  }, [reset, clearErrors, resetStepper]);
+  return { prevStepAction, nextStepAction, cancelAction };
+}
+export {
+  useStepperActions as u
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Hook para determinar cuando el footer del Stepper debe usar posición sticky.
+ * @param containerRef - Referencia al contenedor del Stepper
+ * @param contentRef - Referencia al área de contenido del Stepper
+ * @returns boolean - true si el footer debe ser sticky, false en caso contrario
+ */
+export declare function useStickyStepperFooter(containerRef: React.RefObject<HTMLDivElement>, contentRef: React.RefObject<HTMLElement>): boolean;

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

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.js";
+function useStickyStepperFooter(containerRef, contentRef) {
+  const containerSize = useSizeContainer(containerRef.current);
+  const shouldBeSticky = useMemo(() => {
+    if (!containerRef.current || !contentRef.current) {
+      return false;
+    }
+    const containerHeight = containerRef.current.clientHeight;
+    const contentHeight = contentRef.current.clientHeight;
+    const totalContentHeight = contentHeight + 80;
+    const exceedsContainer = totalContentHeight > containerHeight;
+    const hasMinimumSpace = containerHeight > 120;
+    return exceedsContainer && hasMinimumSpace;
+  }, [containerSize, containerRef, contentRef]);
+  return shouldBeSticky;
+}
+export {
+  useStickyStepperFooter as u
+};

package/components/Stepper/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const pathIcons: {
+    patronum: string;
+    arrowLeft: string;
+    arrowRight: string;
+    circleCheck: string;
+    circleError: string;
+    dotOutline: string;
+    dotSelected: string;
+};

package/components/Stepper/icons.js

@@ -0,0 +1,12 @@
+const pathIcons = {
+  patronum: "frontend/components/step/assets/icons/patronum_fill.svg",
+  arrowLeft: "frontend/components/step/assets/icons/arrow_left.svg",
+  arrowRight: "frontend/components/step/assets/icons/arrow_right.svg",
+  circleCheck: "frontend/components/step/assets/icons/circle_check.svg",
+  circleError: "frontend/components/step/assets/icons/circle_error.svg",
+  dotOutline: "frontend/components/step/assets/icons/dot_outline.svg",
+  dotSelected: "frontend/components/step/assets/icons/dot_selected.svg"
+};
+export {
+  pathIcons as p
+};