@m4l/components 9.3.12-JT290825.beta.1 → 9.3.13-JT010925.beta.1

package/{storybook/components/DataGrid → components/DataGrid/tests}/helpers/filterFieldsSeedData.d.ts

@@ -1,4 +1,4 @@
-import { FilterField } from '../../../../src/components/DynamicFilter/types';
+import { FilterField } from '../../../DynamicFilter/types';
 /**
  * Helper que retorna los fields configurados para el DataGrid de Storybook
  */

package/{storybook/components/DataGrid → components/DataGrid/tests}/helpers/getRowsWithBackendSimulation.d.ts

@@ -1,6 +1,6 @@
 import { RowType } from './types';
-import { RawFilterFieldApply } from '../../../../src/components/DynamicFilter/types';
-import { RawSortFieldApply } from '../../../../src/components/DynamicSort/types';
+import { RawFilterFieldApply } from '../../../DynamicFilter/types';
+import { RawSortFieldApply } from '../../../DynamicSort/types';
 /**
  * Función que simula el comportamiento del backend
  * Recibe exactamente los mismos parámetros que se enviarían al backend real

package/{storybook/components/DataGrid → components/DataGrid/tests}/helpers/sortsSeedData.d.ts

@@ -1,4 +1,4 @@
-import { SortField } from '../../../../src/components/DynamicSort/types';
+import { SortField } from '../../../DynamicSort/types';
 /**
  * Helper que retorna los sorts configurados para el DataGrid de Storybook
  */

package/{storybook/components/DataGrid → components/DataGrid/tests}/helpers/types.d.ts

@@ -1,7 +1,7 @@
 import { RenderHeaderCellProps } from 'react-data-grid';
-import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
-import { DeepKeyOf } from '../../../../src/utils/types';
-import { ColumnAlign } from '../../../../src/components/DataGrid/types';
+import { ChipStatusFormatterProps } from '../../../formatters/ChipStatusFormatter/types';
+import { DeepKeyOf } from '../../../../utils/types';
+import { ColumnAlign } from '../../types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;

package/{storybook/components/DataGrid → components/DataGrid/tests}/helpers/useSeed.d.ts

@@ -4,8 +4,8 @@ import { SeedProps } from './types';
  */
 export declare const useSeed: (props: SeedProps) => {
     columns: readonly import('react-data-grid').Column<import('./types').RowType, unknown>[];
-    filters: import('../../../../src').FilterField[];
-    sorts: import('../../../../src').SortField[];
+    filters: import('../../..').FilterField[];
+    sorts: import('../../..').SortField[];
     rows: import('./types').RowType[];
     rowsMultiSort: import('./types').RowType[];
 };

package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts

@@ -28,6 +28,6 @@ export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<
 export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const ReactJsonSlot: import('@emotion/styled').StyledComponent<Pick<import('@microlink/react-json-view').ReactJsonViewProps, keyof import('@microlink/react-json-view').ReactJsonViewProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ReactJsonSlot: import('@emotion/styled').StyledComponent<Pick<import('../../extended/React-Json-Viewer/types').ReactJsonViewerProps, keyof import('../../extended/React-Json-Viewer/types').ReactJsonViewerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -4,7 +4,7 @@ import { o as objectLogsStyles } from "../ObjectLogs.styles.js";
 import { S as Stack } from "../../mui_extended/Stack/Stack.js";
 import { W as WindowBase } from "../../WindowBase/WindowBase.js";
 import { D as DetailDialog } from "../subcomponents/DetailDialog/index.js";
-import ReactJson from "@microlink/react-json-view";
+import { R as ReactJsonViewer } from "../../extended/React-Json-Viewer/ReactJsonViewer.js";
 import { O as ObjectLogsSlots } from "./ObjectLogsEnum.js";
 import { T as Tooltip } from "../../mui_extended/Tooltip/Tooltip.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
@@ -49,7 +49,7 @@ const IconClickeableStyled = styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconClickeableStyled
 })(objectLogsStyles?.iconClickeableStyled);
-styled(ReactJson, {
+styled(ReactJsonViewer, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.reactJsonSlot
 })(objectLogsStyles?.reactJsonSlot);

package/components/ObjectLogs/subcomponents/DetailDialog/index.js

@@ -28,11 +28,9 @@ function DetailDialog(props) {
   return /* @__PURE__ */ jsx(
     ReactJsonViewer,
     {
-      name: null,
-      sortKeys: true,
+      value: detail,
       displayDataTypes: false,
-      quotesOnKeys: false,
-      src: detail
+      quotesOnKeys: false
     }
   );
 }

package/components/SideBar/tests/constants.d.ts

@@ -3,3 +3,4 @@ export declare const SIDEBAR_PREFIX = "M4LSideBar";
 export declare const Data1: Array<MenuDataType>;
 export declare const Data2: Array<MenuDataType>;
 export declare const Data3: Array<MenuDataType>;
+export declare const menuData: MenuDataType[];

package/components/Stepper/Stepper.styles.js

@@ -18,6 +18,9 @@ const stepperStyles = {
    */
   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
   }),
@@ -30,9 +33,11 @@ const stepperStyles = {
       alignItems: "start",
       width: "100%",
       minWidth: "350px",
-      overflowX: "auto"
+      overflowX: "auto",
+      overflowY: "hidden"
     } : {
-      maxWidth: "116px"
+      maxWidth: "116px",
+      overflowY: "auto"
     }
   }),
   /**
@@ -194,7 +199,22 @@ const stepperStyles = {
   contentAreaHeader: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.size.baseSpacings.sp3
+    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.

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

@@ -1,15 +1,24 @@
 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
-  }));
+  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);
+  return isLastVisibleValidStep(
+    currentStep,
+    steps || [],
+    formData,
+    visibilityData
+  );
 };
 export {
   useIsLastVisibleValidStep as u

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

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

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

@@ -1 +1,8 @@
-export { useStepperActions } from './useStepperActions';
+/**
+ * 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

@@ -1 +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/slots/StepperEnum.d.ts

@@ -12,6 +12,7 @@ export declare enum ContentSlots {
 export declare enum ContentAreaSlots {
     contentArea = "contentArea",
     contentAreaHeader = "contentAreaHeader",
+    contentAreaBody = "contentAreaBody",
     wrapperIcon = "wrapperIcon",
     wrapperTitle = "wrapperTitle",
     icon = "icon",

package/components/Stepper/slots/StepperEnum.js

@@ -14,6 +14,7 @@ var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
 var ContentAreaSlots = /* @__PURE__ */ ((ContentAreaSlots2) => {
   ContentAreaSlots2["contentArea"] = "contentArea";
   ContentAreaSlots2["contentAreaHeader"] = "contentAreaHeader";
+  ContentAreaSlots2["contentAreaBody"] = "contentAreaBody";
   ContentAreaSlots2["wrapperIcon"] = "wrapperIcon";
   ContentAreaSlots2["wrapperTitle"] = "wrapperTitle";
   ContentAreaSlots2["icon"] = "icon";

package/components/Stepper/slots/StepperSlot.d.ts

@@ -25,6 +25,9 @@ export declare const IndicatorStyled: import('@emotion/styled').StyledComponent<
 export declare const TextNumberStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const ContentAreaBodyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContentAreaHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Stepper/slots/StepperSlot.js

@@ -36,6 +36,10 @@ const TextNumberStyled = styled(Typography, {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.textNumber
 })(stepperStyles.textNumber);
+const ContentAreaBodyStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentAreaBody
+})(stepperStyles.contentAreaBody);
 const ContentAreaHeaderStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentAreaSlots.contentAreaHeader
@@ -85,13 +89,14 @@ export {
   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
+  ContentAreaBodyStyled as c,
+  WrapperTitleStyled as d,
+  StepAreaStyled as e,
+  StepStyled as f,
+  StepNameStyled as g,
+  IndicatorStyled as h,
+  TextNumberStyled as i,
+  StepperFooterSectionStyled as j,
+  StepperFooterLeftActionsStyled as k,
+  StepperFooterRightActionsStyled as l
 };

package/components/Stepper/store/StepperContext/index.d.ts

@@ -1,8 +1,13 @@
 import { StepperContextProps } from '../types';
-import { StepperStore } from '../StepperStore';
-declare const StepperContext: import('react').Context<{
-    store: StepperStore;
-} | null>;
+declare const StepperContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('../types').StepperStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions> | ((state: import('../types').StepperStateWithActions) => import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../types').StepperStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
 /**
  * Contexto que crea y da alcance al Store (Zustand) para ser usado desde cualquier parte del componente.
  * @param props StepperProps

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

@@ -1,6 +1,5 @@
 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);
@@ -15,7 +14,6 @@ const StepperProvider = (props) => {
     visibilityData,
     children
   } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const stepperStoreRef = useRef();
   const prevVisibilityDataRef = useRef(visibilityData);
   if (!stepperStoreRef.current) {
@@ -25,8 +23,6 @@ const StepperProvider = (props) => {
         steps,
         visibleTitle,
         ownerState: {},
-        host_static_assets,
-        environment_assets,
         indicatorType,
         orientation,
         visibilityData
@@ -87,15 +83,7 @@ const StepperProvider = (props) => {
     }
     prevVisibilityDataRef.current = visibilityData;
   }, [steps, visibilityData]);
-  return /* @__PURE__ */ jsx(
-    StepperContext.Provider,
-    {
-      value: {
-        store: stepperStoreRef.current
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: stepperStoreRef.current, children });
 };
 export {
   StepperProvider as S,

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

@@ -14,7 +14,6 @@ const createDevtools = (immerMiddlewere, config) => {
 const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
     currentStep: 0,
-    completedSteps: [],
     stepValidationStatus: {},
     isValidating: false,
     ...initProps
@@ -33,7 +32,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
           init: (steps) => {
             set((state) => {
               state.steps = steps;
-              state.completedSteps = [];
               state.stepValidationStatus = {};
             });
           },
@@ -45,17 +43,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               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
@@ -99,31 +86,24 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
             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);
+            if (!isValid) {
+              set((draft) => {
+                draft.isValidating = false;
+                draft.stepValidationStatus[currentStep] = false;
+              });
+              return false;
+            }
             set((draft) => {
-              if (!draft.completedSteps.includes(currentStep)) {
-                draft.completedSteps.push(currentStep);
-              }
-              draft.currentStep = nextValidStepIndex;
               draft.isValidating = false;
+              draft.stepValidationStatus[currentStep] = true;
+              draft.currentStep = nextValidStepIndex;
             });
             return true;
           },
@@ -133,7 +113,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
           resetStepper: () => {
             set((state) => {
               state.currentStep = 0;
-              state.completedSteps = [];
               state.stepValidationStatus = {};
               state.isValidating = false;
             });

package/components/Stepper/store/types.d.ts

@@ -9,18 +9,6 @@ export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTit
      * "currentStep" step actual
      */
     currentStep: number;
-    /**
-     * "host_static_assets" ruta base de los assets estáticos
-     */
-    host_static_assets: string;
-    /**
-     * "environment_assets" ruta del entorno de assets
-     */
-    environment_assets: string;
-    /**
-     * "completedSteps" pasos completados
-     */
-    completedSteps: number[];
     /**
      * "stepValidationStatus" estado de validación por cada step
      * - true: el paso es válido
@@ -42,11 +30,6 @@ export interface StepperStateWithActions extends StepperState {
          * @param currentStep - Índice del paso actual
          */
         setCurrentStep: (currentStep: number) => void;
-        /**
-         * Marca un paso como completado
-         * @param stepIndex - Índice del paso
-         */
-        setCompletedStep: (stepIndex: number) => void;
         /**
          * Establece el estado de validación de un paso
          * @param stepIndex - Índice del paso
@@ -75,4 +58,4 @@ export interface StepperStateWithActions extends StepperState {
 export interface StepperContextProps extends StepperProps {
     children: ReactNode;
 }
-export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'host_static_assets' | 'environment_assets' | 'indicatorType' | 'orientation' | 'visibilityData'>;
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData'>;

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

@@ -1,6 +1,6 @@
 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 { a as ContentAreaStyled, b as ContentAreaHeaderStyled, c as ContentAreaBodyStyled } 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) {
@@ -16,7 +16,7 @@ function ContentArea(props) {
       /* @__PURE__ */ jsx(WrapperIcon, {}),
       /* @__PURE__ */ jsx(WrapperTitle, {})
     ] }),
-    children
+    /* @__PURE__ */ jsx(ContentAreaBodyStyled, { children })
   ] });
 }
 export {

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

@@ -3,13 +3,13 @@ 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";
+import { useEnvironment } from "@m4l/core";
 function WrapperIcon() {
-  const { steps, currentStep, host_static_assets, environment_assets } = useStepper((state) => ({
-    host_static_assets: state.host_static_assets,
-    environment_assets: state.environment_assets,
+  const { steps, currentStep } = useStepper((state) => ({
     steps: state.steps,
     currentStep: state.currentStep
   }));
+  const { host_static_assets, environment_assets } = useEnvironment();
   const currentStepConfig = useMemo(() => {
     return steps[currentStep];
   }, [steps, currentStep]);

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

@@ -1,7 +1,7 @@
 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";
+import { d as WrapperTitleStyled, T as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
 function WrapperTitle() {
   const { steps, currentStep } = useStepper((state) => ({
     steps: state.steps,

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

@@ -2,8 +2,9 @@ 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 { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
+import { shallow } from "zustand/shallow";
 import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
 function StepArea() {
   const { trigger, clearErrors } = useFormContext();
@@ -17,17 +18,20 @@ function StepArea() {
     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
-  }));
+  } = 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
+    }),
+    shallow
+  );
   const validSteps = useMemo(() => {
     return steps.filter(
       (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)