@m4l/components 9.3.12-JT270825.beta.1 → 9.3.12-JT290825.beta.1

package/components/Stepper/slots/StepperSlot.js

@@ -0,0 +1,97 @@
+import { styled } from "@mui/material/styles";
+import { S as STEPPER_PREFIX_NAME } from "../constants.js";
+import { S as StepperSlots, C as ContentSlots, a as StepperFooterSlots, b as ContentAreaSlots } from "./StepperEnum.js";
+import { s as stepperStyles } from "../Stepper.styles.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const StepperRootStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperSlots.stepperRoot
+})(stepperStyles.stepperRoot);
+const ContentSectionStyled = styled("section", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.contentSection
+})(stepperStyles.contentSection);
+const StepAreaStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepArea
+})(stepperStyles.stepArea);
+const ContentAreaStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentArea
+})(stepperStyles.contentArea);
+const StepStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.step
+})(stepperStyles.step);
+const StepNameStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepName
+})(stepperStyles.stepName);
+const IndicatorStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.indicator
+})(stepperStyles.indicator);
+const TextNumberStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.textNumber
+})(stepperStyles.textNumber);
+const ContentAreaHeaderStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentAreaHeader
+})(stepperStyles.contentAreaHeader);
+const WrapperIconStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.wrapperIcon
+})(stepperStyles.wrapperIcon);
+const WrapperTitleStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.wrapperTitle
+})(stepperStyles.wrapperTitle);
+const IconStyled = styled(Icon, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.icon
+})(stepperStyles.icon);
+const TitleStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.title
+})(stepperStyles.title);
+const DescriptionStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.description
+})(stepperStyles.description);
+const StepperFooterSectionStyled = styled("section", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterSection
+})(stepperStyles.stepperFooterSection);
+const StepperFooterLeftActionsStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterLeftActions
+})(stepperStyles.stepperFooterLeftActions);
+const StepperFooterRightActionsStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterRightActions
+})(stepperStyles.stepperFooterRightActions);
+styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.wrapperButtons
+})(stepperStyles.wrapperButtons);
+export {
+  ContentSectionStyled as C,
+  DescriptionStyled as D,
+  IconStyled as I,
+  StepperRootStyled as S,
+  TitleStyled as T,
+  WrapperIconStyled as W,
+  ContentAreaStyled as a,
+  ContentAreaHeaderStyled as b,
+  WrapperTitleStyled as c,
+  StepAreaStyled as d,
+  StepStyled as e,
+  StepNameStyled as f,
+  IndicatorStyled as g,
+  TextNumberStyled as h,
+  StepperFooterSectionStyled as i,
+  StepperFooterLeftActionsStyled as j,
+  StepperFooterRightActionsStyled as k
+};

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

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef, useEffect } from "react";
+import { useEnvironment } from "@m4l/core";
+import { c as createStepperStore } from "../StepperStore/index.js";
+import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
+const StepperContext = createContext(null);
+const StepperProvider = (props) => {
+  const {
+    storeId,
+    storeDevtoolsEnabled,
+    steps,
+    visibleTitle = true,
+    indicatorType = "number",
+    orientation = "horizontal",
+    visibilityData,
+    children
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const stepperStoreRef = useRef();
+  const prevVisibilityDataRef = useRef(visibilityData);
+  if (!stepperStoreRef.current) {
+    stepperStoreRef.current = createStepperStore(
+      {
+        storeId,
+        steps,
+        visibleTitle,
+        ownerState: {},
+        host_static_assets,
+        environment_assets,
+        indicatorType,
+        orientation,
+        visibilityData
+      },
+      storeDevtoolsEnabled
+    );
+    stepperStoreRef.current.getState().actions.init(steps);
+  }
+  useEffect(() => {
+    if (stepperStoreRef.current) {
+      const currentState = stepperStoreRef.current.getState();
+      if (currentState.visibleTitle !== visibleTitle) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          visibleTitle
+        }));
+      }
+      if (currentState.orientation !== orientation) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          orientation
+        }));
+      }
+      if (currentState.indicatorType !== indicatorType) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          indicatorType
+        }));
+      }
+      if (currentState.visibilityData !== visibilityData) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          visibilityData
+        }));
+      }
+    }
+  }, [visibleTitle, orientation, indicatorType, visibilityData]);
+  useEffect(() => {
+    if (stepperStoreRef.current && steps) {
+      const store = stepperStoreRef.current;
+      const currentState = store.getState();
+      store.getState().actions.init(steps);
+      if (visibilityData) {
+        const hasVisibilityDataChanged = JSON.stringify(prevVisibilityDataRef.current) !== JSON.stringify(visibilityData);
+        if (hasVisibilityDataChanged) {
+          const nextStepIndex = findNextVisibleValidStep(
+            currentState.currentStep,
+            steps,
+            {},
+            visibilityData
+          );
+          if (nextStepIndex < steps.length && nextStepIndex !== currentState.currentStep) {
+            store.getState().actions.setCurrentStep(nextStepIndex);
+            store.getState().actions.setStepValidationStatus(currentState.currentStep, true);
+          }
+        }
+      }
+    }
+    prevVisibilityDataRef.current = visibilityData;
+  }, [steps, visibilityData]);
+  return /* @__PURE__ */ jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        store: stepperStoreRef.current
+      },
+      children
+    }
+  );
+};
+export {
+  StepperProvider as S,
+  StepperContext as a
+};

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

@@ -0,0 +1,152 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { a as STEPPER_STORE_ID } from "../../constants.js";
+import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
+import { f as findPrevVisibleValidStep } from "../../helpers/findPrevVisibleValidStep/index.js";
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
+  const startProps = {
+    currentStep: 0,
+    completedSteps: [],
+    stepValidationStatus: {},
+    isValidating: false,
+    ...initProps
+  };
+  return createStore(
+    createDevtools(
+      /**
+       * immer es un middleware de Zustand que permite trabajar con el estado de manera inmutable
+       */
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          /**
+           * init es la acción que se ejecuta al inicializar el store
+           */
+          init: (steps) => {
+            set((state) => {
+              state.steps = steps;
+              state.completedSteps = [];
+              state.stepValidationStatus = {};
+            });
+          },
+          /**
+           * setCurrentStep es la acción que se ejecuta para cambiar el step actual
+           */
+          setCurrentStep: (currentStep) => {
+            set((state) => {
+              state.currentStep = currentStep;
+            });
+          },
+          /**
+           * setCompletedStep es la acción que se ejecuta para marcar un paso como completado
+           * @param stepIndex - Índice del paso a marcar como completado
+           */
+          setCompletedStep: (stepIndex) => {
+            set((state) => {
+              if (!state.completedSteps.includes(stepIndex)) {
+                state.completedSteps.push(stepIndex);
+              }
+            });
+          },
+          /**
+           * setStepValidationStatus es la acción que se ejecuta para establecer el estado de validación de un paso
+           * @param stepIndex
+           * @param isValid
+           */
+          setStepValidationStatus: (stepIndex, isValid) => {
+            set((state) => {
+              state.stepValidationStatus[stepIndex] = isValid;
+            });
+          },
+          /**
+           * prevStep - Función que retrocede al paso anterior válido del Stepper.
+           * @param formData Datos del formulario actual para evaluar las conditions de los pasos
+           * @param visibilityData Datos adicionales para evaluar las conditions (opcional, usa el del store si no se proporciona)
+           */
+          prevStep: (formData = {}, visibilityData) => {
+            const state = get();
+            const { currentStep, steps } = state;
+            const dataForVisibility = visibilityData ?? state.visibilityData;
+            const prevValidStepIndex = findPrevVisibleValidStep(
+              currentStep,
+              steps,
+              formData,
+              dataForVisibility
+            );
+            if (prevValidStepIndex < 0) {
+              return;
+            }
+            set((draft) => {
+              draft.currentStep = prevValidStepIndex;
+            });
+          },
+          /**
+           * nextStep - Función que valida el paso actual y avanza al siguiente paso del Stepper.
+           * @param validateFn Función de validación externa que debe retornar una promesa que resuelve a true o false
+           * @param formData Datos del formulario actual para evaluar las conditions de los pasos
+           * @param visibilityData Datos adicionales para evaluar las conditions (opcional, usa el del store si no se proporciona)
+           * @returns Promise<boolean> Retorna true si se avanzó al siguiente paso, false en caso contrario
+           */
+          nextStep: async (validateFn, formData = {}, visibilityData) => {
+            const state = get();
+            const { currentStep, steps } = state;
+            const dataForVisibility = visibilityData ?? state.visibilityData;
+            set((draft) => {
+              draft.isValidating = true;
+            });
+            const isValid = await validateFn();
+            if (!isValid) {
+              set((draft) => {
+                draft.isValidating = false;
+              });
+              state.actions.setStepValidationStatus(currentStep, false);
+              return false;
+            }
+            state.actions.setStepValidationStatus(currentStep, true);
+            const nextValidStepIndex = findNextVisibleValidStep(
+              currentStep,
+              steps,
+              formData,
+              dataForVisibility
+            );
+            state.actions.setCompletedStep(currentStep);
+            set((draft) => {
+              if (!draft.completedSteps.includes(currentStep)) {
+                draft.completedSteps.push(currentStep);
+              }
+              draft.currentStep = nextValidStepIndex;
+              draft.isValidating = false;
+            });
+            return true;
+          },
+          /**
+           * resetStepper - Resetea el Stepper a su estado inicial
+           */
+          resetStepper: () => {
+            set((state) => {
+              state.currentStep = 0;
+              state.completedSteps = [];
+              state.stepValidationStatus = {};
+              state.isValidating = false;
+            });
+          }
+        }
+      })),
+      {
+        name: `${STEPPER_STORE_ID}: ${initProps.storeId}`,
+        enabled: storeDevtoolsEnabled
+      }
+    )
+  );
+};
+export {
+  createStepperStore as c
+};

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { u as useStepper } from "../../hooks/useStepper/index.js";
+import { a as ContentAreaStyled, b as ContentAreaHeaderStyled } from "../../slots/StepperSlot.js";
+import { W as WrapperIcon } from "./subcomponents/WrapperIcon/index.js";
+import { W as WrapperTitle } from "./subcomponents/WrapperTitle/index.js";
+function ContentArea(props) {
+  const { children } = props;
+  const { orientation } = useStepper((state) => ({
+    orientation: state.orientation
+  }));
+  const ownerState = {
+    orientation
+  };
+  return /* @__PURE__ */ jsxs(ContentAreaStyled, { ownerState, children: [
+    /* @__PURE__ */ jsxs(ContentAreaHeaderStyled, { children: [
+      /* @__PURE__ */ jsx(WrapperIcon, {}),
+      /* @__PURE__ */ jsx(WrapperTitle, {})
+    ] }),
+    children
+  ] });
+}
+export {
+  ContentArea as C
+};

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { W as WrapperIconStyled, I as IconStyled } from "../../../../slots/StepperSlot.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+function WrapperIcon() {
+  const { steps, currentStep, host_static_assets, environment_assets } = useStepper((state) => ({
+    host_static_assets: state.host_static_assets,
+    environment_assets: state.environment_assets,
+    steps: state.steps,
+    currentStep: state.currentStep
+  }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  return /* @__PURE__ */ jsx(WrapperIconStyled, { children: /* @__PURE__ */ jsx(
+    IconStyled,
+    {
+      color: "primary.enabled",
+      src: currentStepConfig.icon ? currentStepConfig.icon : `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
+    }
+  ) });
+}
+export {
+  WrapperIcon as W
+};

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { c as WrapperTitleStyled, T as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
+function WrapperTitle() {
+  const { steps, currentStep } = useStepper((state) => ({
+    steps: state.steps,
+    currentStep: state.currentStep
+  }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  if (!currentStepConfig) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(WrapperTitleStyled, { children: [
+    /* @__PURE__ */ jsx(TitleStyled, { variant: "paragraphDens", children: currentStepConfig.title }),
+    currentStepConfig.description && /* @__PURE__ */ jsx(DescriptionStyled, { variant: "body", children: currentStepConfig.description })
+  ] });
+}
+export {
+  WrapperTitle as W
+};

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

@@ -0,0 +1,135 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { u as useStepper } from "../../hooks/useStepper/index.js";
+import { d as StepAreaStyled, e as StepStyled, f as StepNameStyled } from "../../slots/StepperSlot.js";
+import { I as Indicator } from "./subcomponents/Inidicator/index.js";
+import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
+function StepArea() {
+  const { trigger, clearErrors } = useFormContext();
+  const formValues = useWatch();
+  const {
+    currentStep,
+    steps,
+    visibleTitle,
+    setCurrentStep,
+    orientation,
+    setStepValidationStatus,
+    stepValidationStatus,
+    visibilityData
+  } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibleTitle: state.visibleTitle,
+    setCurrentStep: state.actions.setCurrentStep,
+    indicatorType: state.indicatorType,
+    orientation: state.orientation,
+    setStepValidationStatus: state.actions.setStepValidationStatus,
+    stepValidationStatus: state.stepValidationStatus,
+    visibilityData: state.visibilityData
+  }));
+  const validSteps = useMemo(() => {
+    return steps.filter(
+      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
+    );
+  }, [steps, formValues, visibilityData]);
+  const ownerState = {
+    visibleTitle,
+    orientation,
+    totalSteps: validSteps.length
+  };
+  const handleStepClick = async (targetIndex) => {
+    const currentIndex = validSteps.findIndex(
+      (step) => step.key === steps[currentStep].key
+    );
+    if (targetIndex === currentIndex) {
+      return;
+    }
+    const isNavigatingForward = targetIndex > currentIndex;
+    const targetOriginalIndex = steps.findIndex(
+      (s) => s.key === validSteps[targetIndex].key
+    );
+    if (!isNavigatingForward) {
+      setCurrentStep(targetOriginalIndex);
+      return;
+    }
+    const isSkippingSteps = targetIndex > currentIndex + 1;
+    if (isSkippingSteps) {
+      for (let i = currentIndex; i < targetIndex; i++) {
+        const step = validSteps[i];
+        const stepOriginalIndex = steps.findIndex((s) => s.key === step.key);
+        const isValid = await trigger(step.validationFields);
+        if (!isValid) {
+          setCurrentStep(stepOriginalIndex);
+          setStepValidationStatus(stepOriginalIndex, false);
+          return;
+        }
+        setStepValidationStatus(stepOriginalIndex, true);
+      }
+    } else {
+      const currentStepData = validSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentValid = await trigger(currentStepData.validationFields);
+      if (!isCurrentValid) {
+        setStepValidationStatus(currentStepOriginalIndex, false);
+        return;
+      }
+      setStepValidationStatus(currentStepOriginalIndex, true);
+    }
+    setCurrentStep(targetOriginalIndex);
+    if (isNavigatingForward) {
+      const currentStepData = validSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
+      if (isCurrentStepValid) {
+        const targetStep = validSteps[targetIndex];
+        const targetStepFields = targetStep.validationFields || [];
+        if (targetStepFields.length > 0) {
+          clearErrors(targetStepFields);
+          setTimeout(() => {
+            clearErrors(targetStepFields);
+            setStepValidationStatus(targetOriginalIndex, true);
+          }, 100);
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: validSteps.map((step, validIndex) => {
+    const originalIndex = steps.findIndex((s) => s.key === step.key);
+    return /* @__PURE__ */ jsxs(
+      StepStyled,
+      {
+        role: "button",
+        onClick: () => handleStepClick(validIndex),
+        ownerState: { ...ownerState, currentStep, step: validIndex },
+        children: [
+          visibleTitle && /* @__PURE__ */ jsx(
+            StepNameStyled,
+            {
+              variant: "body",
+              ownerState: { ...ownerState, currentStep, step: validIndex },
+              children: step.title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Indicator,
+            {
+              currentStep,
+              step: validIndex,
+              totalSteps: validSteps.length,
+              originalStepIndex: originalIndex
+            }
+          )
+        ]
+      },
+      step.key
+    );
+  }) });
+}
+export {
+  StepArea as S
+};

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

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { g as IndicatorStyled, h as TextNumberStyled } from "../../../../slots/StepperSlot.js";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+function Indicator(props) {
+  const { step, currentStep, totalSteps, originalStepIndex } = props;
+  const {
+    host_static_assets,
+    environment_assets,
+    orientation,
+    size,
+    indicatorType,
+    stepValidationStatus
+  } = useStepper((state) => ({
+    host_static_assets: state.host_static_assets,
+    environment_assets: state.environment_assets,
+    orientation: state.orientation,
+    size: state.size,
+    indicatorType: state.indicatorType,
+    stepValidationStatus: state.stepValidationStatus
+  }));
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    size: currentSize,
+    currentStep,
+    step,
+    totalSteps,
+    orientation,
+    indicatorType,
+    stepValidationStatus
+  };
+  const isMobile = useIsMobile();
+  const effectiveIndicatorType = useMemo(() => {
+    return isMobile ? "dot" : indicatorType;
+  }, [isMobile, indicatorType]);
+  const { isCompleted, isValidStep, hasBeenValidated } = useMemo(() => {
+    const completed = currentStep > originalStepIndex;
+    const validationStatus = stepValidationStatus[originalStepIndex];
+    const validated = validationStatus !== void 0;
+    const valid = validationStatus === true;
+    return {
+      isCompleted: completed,
+      isValidStep: valid,
+      hasBeenValidated: validated
+    };
+  }, [currentStep, originalStepIndex, stepValidationStatus]);
+  return /* @__PURE__ */ jsx(IndicatorStyled, { ownerState, children: hasBeenValidated && !isValidStep ? (
+    // Mostrar error solo si ha sido validado y es inválido
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${pathIcons.circleError}`,
+        size: "small",
+        color: "error.contrastText"
+      }
+    )
+  ) : isCompleted && isValidStep ? (
+    // Mostrar completado solo si está completado Y es válido
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${effectiveIndicatorType === "number" ? pathIcons.circleCheck : pathIcons.dotOutline}`,
+        size: "small",
+        color: "primary.semanticText"
+      }
+    )
+  ) : (
+    // 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(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,
+        size: "small",
+        color: currentStep === originalStepIndex ? "primary.semanticText" : "text.disabled"
+      }
+    ) })
+  ) });
+}
+export {
+  Indicator as I
+};

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/useStepperActions.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperCancelButton() {
+  const { getLabel } = useModuleDictionary();
+  const { cancelAction } = useStepperActions();
+  const handleCancel = () => {
+    cancelAction();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
+      variant: "outlined",
+      color: "default",
+      onClick: handleCancel
+    }
+  );
+}
+export {
+  StepperCancelButton as S
+};