@m4l/components 9.3.24-JT04112025.beta.1 → 9.3.24-JT04112025.beta.2

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

@@ -1,8 +1,58 @@
 import { jsx } from "react/jsx-runtime";
-import { A as ActionFormCancel } from "../../../../CommonActions/components/ActionFormCancel/ActionFormCancel.js";
+import { useCallback } from "react";
+import { useFormContext, useFormState } from "react-hook-form";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
+import { D as DICTIONARY$1 } from "../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../CommonActions/dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useModal } from "../../../../../hooks/useModal/index.js";
+import { u as useWindowToolsMF } from "../../../../WindowBase/hooks/useWindowToolsMF/index.js";
+import { W as WindowConfirm } from "../../../../WindowConfirm/WindowConfirm.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperCancelButton(props) {
-  const { ...rest } = props;
-  return /* @__PURE__ */ jsx(ActionFormCancel, { "data-testid": "stepper-cancel-button", ...rest });
+  const { label, ...rest } = props;
+  const { getLabel } = useModuleDictionary();
+  const { cancelAction } = useStepperActions();
+  const { openModal } = useModal();
+  const { close: closeWindow } = useWindowToolsMF();
+  const { control } = useFormContext();
+  const { isDirty } = useFormState({
+    control
+  });
+  const onConfirmQuit = useCallback(() => {
+    cancelAction();
+    closeWindow();
+  }, [cancelAction, closeWindow]);
+  const handleCancel = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel(DICTIONARY.CONFIRM_QUIT_TITLE),
+            msg: getLabel(DICTIONARY.CONFIRM_QUIT_MSG),
+            onClickIntro: onConfirmQuit
+          }
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal, onConfirmQuit]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: label || getLabel(DICTIONARY$1.LABEL_CANCEL_BUTTON),
+      variant: "outlined",
+      color: "default",
+      onClick: handleCancel,
+      ...rest,
+      "data-testid": "stepper-cancel-button"
+    }
+  );
 }
 export {
   StepperCancelButton as S

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

@@ -7,16 +7,15 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperNextButton(props) {
-  const { label, forceIsMobile, ...rest } = props;
+  const { label, ...rest } = props;
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
-  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const handleNext = async () => {
     await nextStepAction();
   };
-  return isMobileForce ? /* @__PURE__ */ jsx(
+  return isMobile ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

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

@@ -8,13 +8,12 @@ import { D as DICTIONARY } from "../../../dictionary.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperPrevButton(props) {
-  const { label, forceIsMobile, ...rest } = props;
+  const { label, ...rest } = props;
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
-  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { prevStepAction } = useStepperActions();
   const handlePrev = () => {
@@ -23,7 +22,7 @@ function StepperPrevButton(props) {
   if (currentStep === 0) {
     return null;
   }
-  return isMobileForce ? /* @__PURE__ */ jsx(
+  return isMobile ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

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

@@ -1,37 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { D as DICTIONARY } from "../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { useIsMobile } from "@m4l/graphics";
-import { p as pathIcons } from "../../../icons.js";
-import { useFormContext } from "react-hook-form";
-import { L as LoadingButton } from "../../../../mui_extended/LoadingButton/LoadingButton.js";
-import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
-import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
+import { useModuleDictionary } from "@m4l/core";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperSubmitButton(props) {
-  const { label, forceIsMobile, ...rest } = props;
+  const { label, ...rest } = props;
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isMobile = useIsMobile();
-  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
-  const { formState: { isSubmitting } } = useFormContext();
-  return isMobileForce ? /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      type: "submit",
-      icon: isSubmitting ? /* @__PURE__ */ jsx(CircularProgress, { color: "default" }) : `${host_static_assets}/${environment_assets}/${pathIcons.circleCheck}`,
-      "data-testid": "stepper-prev-button",
-      variant: "contained",
-      color: "primary"
-    }
-  ) : /* @__PURE__ */ jsx(
-    LoadingButton,
+  return /* @__PURE__ */ jsx(
+    Button,
     {
       type: "submit",
       label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
       "data-testid": "stepper-submit-button",
-      loading: isSubmitting,
       ...rest
     }
   );

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

@@ -1,9 +1,58 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { useWatch } from "react-hook-form";
 import { j as StepContentStyled } from "../../../../slots/StepperSlot.js";
-import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
+import { e as evaluateVisibilityStepCondition } from "../../../../helpers/evaluateVisibilityStepCondition/index.js";
 function Step(props) {
   const { stepKey, children } = props;
-  const isStepVisible = useIsStepVisible({ stepKey });
+  const formValues = useWatch();
+  const { currentStep, steps, visibilityData } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibilityData: state.visibilityData
+  }));
+  const stepConfig = useMemo(() => {
+    return steps.find((step) => step.key === stepKey);
+  }, [steps, stepKey]);
+  const isStepVisible = useMemo(() => {
+    if (!stepConfig) {
+      return false;
+    }
+    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;
+    }
+    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/types.d.ts

@@ -150,10 +150,6 @@ export interface StepperFooterLeftActionsProps {
  * Props para los botones del Stepper que extienden las props de Button de mui_extended
  */
 export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
-    /**
-     * Forzar a un una versión especifica no importando el dispositivo
-     */
-    forceIsMobile?: boolean;
     label?: string;
 }
 /**

package/components/ToastContainer/ToastContainer.js

@@ -28,7 +28,6 @@ const ToastContainer = (props) => {
             icon: false,
             closeButton: false,
             autoClose: DEFAULT_CLOSE_TIME,
-            position: "bottom-left",
             theme: "light",
             ...restProps
           }

package/components/ToastContainer/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const TOAST_KEY_COMPONENT = "M4LToastContainer";
-export declare const DEFAULT_CLOSE_TIME = 10000;
+export declare const DEFAULT_CLOSE_TIME = 30000;
 export declare const ICONS_PATH = "frontend/components/toast/assets/icons";
 export declare const TOAST_NATIVE_STYLES: {
     '&': {

package/components/ToastContainer/constants.js

@@ -1,5 +1,5 @@
 const TOAST_KEY_COMPONENT = "M4LToastContainer";
-const DEFAULT_CLOSE_TIME = 1e4;
+const DEFAULT_CLOSE_TIME = 3e4;
 const ICONS_PATH = "frontend/components/toast/assets/icons";
 const TOAST_NATIVE_STYLES = {
   "&": {

package/components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js

@@ -1,53 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React, { createContext, useMemo } from "react";
+import React, { createContext } from "react";
 const WindowToolsMFContext = createContext(null);
 function WindowToolsMFProvider(props) {
-  const {
-    children,
-    getCookie,
-    getWindowId,
-    getCookies,
-    setActions,
-    setCookie,
-    startProgress,
-    stopProgress,
-    toast,
-    close,
-    setFnQueryClose,
-    setWindowTitle,
-    setWindowSubTitle,
-    setWindowEditionInfo
-  } = props;
-  const value = useMemo(() => ({
-    getCookie,
-    getWindowId,
-    getCookies,
-    setActions,
-    setCookie,
-    startProgress,
-    stopProgress,
-    toast,
-    close,
-    setFnQueryClose,
-    setWindowTitle,
-    setWindowSubTitle,
-    setWindowEditionInfo
-  }), [
-    getCookie,
-    getWindowId,
-    getCookies,
-    setActions,
-    setCookie,
-    startProgress,
-    stopProgress,
-    toast,
-    close,
-    setFnQueryClose,
-    setWindowTitle,
-    setWindowSubTitle,
-    setWindowEditionInfo
-  ]);
-  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, { value, children });
+  const { children, ...other } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, { value: { ...other }, children });
 }
 const MemonizedWindowToolsMFContext = React.memo(WindowToolsMFProvider);
 export {

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts

@@ -53,7 +53,7 @@ export interface WindowToolsMF {
     /**
      * Método para cerrar la ventana actual.
      */
-    close: (useFnQueryClose?: boolean) => void;
+    close: () => void;
     /**
      * Método para establecer la función de consulta de cierre de la ventana.
      * @param fnQueryClose La función de consulta de cierre de la ventana que se desea establecer.

package/components/WindowBase/subcomponents/Component/index.d.ts

@@ -1,18 +1,7 @@
 import { default as React } from 'react';
 import { ComponentProps } from './types';
 /**
- * Componente encargado de renderizar el componente de la ventana con transición y loader.
- * Usa useTransition para priorizar el loader y mantener la UI responsive durante el renderizado pesado.
- *
- * ## Flujo de renderizado:
- * 1. Monta con shouldRender=false, isPending=false → muestra nada (o loader inicial)
- * 2. useEffect ejecuta: startTransition(() => setShouldRender(true))
- * 3. React marca la actualización como "no urgente" e inmediatamente isPending=true → muestra loader
- * 4. React procesa el cambio de shouldRender: useMemo se re-ejecuta y crea el componente pesado
- * 5. Cuando termina TODO el trabajo de render: isPending=false → muestra componente con fade in
- *
- * La clave es que React mantiene isPending=true durante TODO el tiempo que tarde en procesar
- * la actualización de estado y el render que causa (incluyendo el useMemo pesado).
+ * Componente encargado de renderizar el componente de la ventana.
  */
 export declare const WindowBaseComponent: (props: ComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MemonizedComponent: React.MemoExoticComponent<(props: ComponentProps) => import("react/jsx-runtime").JSX.Element>;

package/components/WindowBase/subcomponents/Component/index.js

@@ -1,65 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useTransition, useState, useRef, useMemo, createElement, useEffect } from "react";
+import React from "react";
 import { a as WindowContainerComponentStyled } from "../../slots/WindowBaseSlots.js";
-import { P as PropagateLoaderSpinner } from "../../../extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 import { a as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { a as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 const WindowBaseComponent = (props) => {
   const { component, dynamicMFStore, windowTools, componentProps, emergeType } = props;
-  const [isPending, startTransition] = useTransition();
-  const [shouldRender, setShouldRender] = useState(false);
-  const mountTimeRef = useRef(performance.now());
-  const renderedComponent = useMemo(() => {
-    if (!shouldRender) {
-      return null;
-    }
-    const renderStartTime = performance.now();
-    const component_result = typeof component === "function" ? createElement(component, componentProps) : component;
-    const renderTime = performance.now() - renderStartTime;
-    if (process.env.NODE_ENV === "development" && renderTime > 100) {
-      console.warn(`⚠️ WindowBase component rendering took ${renderTime.toFixed(2)}ms`);
-    }
-    return component_result;
-  }, [shouldRender, component, componentProps]);
-  useEffect(() => {
-    startTransition(() => {
-      setShouldRender(true);
-    });
-    const timer = setTimeout(() => {
-      const totalTime = performance.now() - mountTimeRef.current;
-      if (process.env.NODE_ENV === "development" && totalTime > 500) {
-        console.warn(`⏱️ WindowBase total mount time: ${totalTime.toFixed(2)}ms`);
-      }
-    }, 0);
-    return () => clearTimeout(timer);
-  }, []);
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(
-    WindowContainerComponentStyled,
-    {
-      ownerState: { emergeType },
-      children: isPending ? (
-        // Mientras isPending=true, mostrar solo el loader
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              width: "100%",
-              height: "100%",
-              zIndex: 1e3
-            },
-            children: /* @__PURE__ */ jsx(PropagateLoaderSpinner, {})
-          }
-        )
-      ) : (
-        // Cuando isPending=false, mostrar componente con fade in
-        renderedComponent
-      )
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: { emergeType }, children: typeof component === "function" ? component(componentProps) : component }) }) });
 };
 React.memo(WindowBaseComponent);
 export {

package/components/WindowBase/subcomponents/Component/types.d.ts

@@ -3,7 +3,6 @@ import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
 import { JSX_REACT_NODE } from '../../../WindowBase/types';
 import { EmergeType } from '../../../areas/types';
 export interface ComponentProps {
-    id: string;
     emergeType: EmergeType;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;

package/components/WindowBase/types.d.ts

@@ -16,7 +16,7 @@ export type WindowOptions = {
      */
     allowPersistCookies: boolean;
 };
-export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | JSX.Element;
+export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
 /**
  * Tipo que representa el tipo de ventana: microfrontend o componente.
  */

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -90,7 +90,6 @@ const Window = (props) => {
       ) : /* @__PURE__ */ jsx(
         WindowBaseComponent,
         {
-          id: windowId,
           emergeType,
           dynamicMFStore,
           windowTools,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -68,7 +68,7 @@ const useWindow = (windowId, areaId) => {
       getCookie: (id) => getCookie(windowId, id),
       getCookies: (type) => getCookies(windowId, type),
       setCookie: (id, type, cookie) => setCookie(windowId, id, type, cookie),
-      close: (useFnQueryClose = true) => close(windowId, useFnQueryClose),
+      close: () => close(windowId),
       startProgress: () => startProgress(windowId),
       stopProgress: () => stopProgress(windowId),
       setFnQueryClose: (fnQueryClose) => setFnQueryClose(windowId, fnQueryClose),

package/components/areas/contexts/AreasContext/store.js

@@ -721,13 +721,9 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * close window
            */
-          close: (windowId, useFnQueryClose = true) => {
+          close: (windowId) => {
             const hW = get().hashWindows[windowId];
             if (hW) {
-              if (hW.fnQueryClose && useFnQueryClose) {
-                hW.fnQueryClose();
-                return;
-              }
               const onClose = hW.onClose;
               if (onClose) {
                 onClose(hW.windowId);

package/components/areas/contexts/AreasContext/types.d.ts

@@ -285,7 +285,7 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
         getCookie: (windowId: string, id: string) => Record<string, any> | undefined;
         getCookies: (windowId: string, type: CookieType) => Record<string, any>;
         setCookie: (windowId: string, id: string, type: CookieType, cookie: Record<string, any>) => void;
-        close: (windowId: string, useFnQueryClose?: boolean) => void;
+        close: (windowId: string) => void;
         startProgress: (windowId: string) => void;
         stopProgress: (windowId: string) => void;
         loadCookiesFromApi: (windowId: string) => void;

package/components/formatters/IconsFormatter/IconsFormatter.d.ts

@@ -0,0 +1,6 @@
+import { IconsFormatterProps } from './types';
+/**
+ * IconsFormatter
+ * Componente formatter que renderiza uno o varios iconos
+ */
+export declare const IconsFormatter: (props: IconsFormatterProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/IconsFormatter.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { r as renderIcon } from "./helpers/renderIcon.js";
+import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
+const IconsFormatter = (props) => {
+  const { icons } = props;
+  const iconsArray = useMemo(() => {
+    if (!icons) {
+      return null;
+    }
+    return Array.isArray(icons) ? icons : [icons];
+  }, [icons]);
+  if (!iconsArray || iconsArray.length === 0) {
+    return null;
+  }
+  if (iconsArray.length === 1) {
+    return renderIcon(iconsArray[0]);
+  }
+  return renderMultipleIcons(iconsArray);
+};
+export {
+  IconsFormatter as I
+};

package/components/formatters/IconsFormatter/IconsFormatter.styles.d.ts

@@ -0,0 +1,2 @@
+import { IconsFormatterStyles } from './types';
+export declare const iconsFormatterStyles: IconsFormatterStyles;

package/components/formatters/IconsFormatter/IconsFormatter.styles.js

@@ -0,0 +1,29 @@
+const iconsFormatterStyles = {
+  /**
+   * Estilo del contenedor de array de iconos
+   */
+  iconsContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: theme.vars.size.baseSpacings.sp1,
+    maxHeight: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * Estilo del icono
+   */
+  icon: () => ({
+    flexShrink: 0
+  }),
+  /**
+   * Estilo del icono clickeable
+   */
+  iconClickeable: () => ({
+    cursor: "pointer",
+    flexShrink: 0
+  })
+};
+export {
+  iconsFormatterStyles as i
+};

package/components/formatters/IconsFormatter/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";

package/components/formatters/IconsFormatter/constants.js

@@ -0,0 +1,4 @@
+const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";
+export {
+  ICONS_FORMATTER_KEY_COMPONENT as I
+};

package/components/{DataGrid/formatters/ColumnIconFormatter → formatters/IconsFormatter}/helpers/renderIcon.d.ts

@@ -1,8 +1,8 @@
-import { ColumnIconResponse } from '../types';
+import { IconConfig } from '../types';
 /**
  * Helper que renderiza un único icono
  * @param iconConfig - Configuración del icono
  * @param key - Clave opcional para listas
  * @returns Componente de icono renderizado
  */
-export declare function renderIcon(iconConfig: ColumnIconResponse, key?: number): import("react/jsx-runtime").JSX.Element;
+export declare function renderIcon(iconConfig: IconConfig, key?: number): import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/helpers/renderIcon.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { I as IconClickeableStyled, a as IconStyled } from "../slots/IconsFormatterSlots.js";
+function renderIcon(iconConfig, key) {
+  const { iconUrl, onClick, tooltip, dataTestId, color, visible, size } = iconConfig;
+  if (visible === false) {
+    return null;
+  }
+  const IconComponent = onClick ? IconClickeableStyled : IconStyled;
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      src: iconUrl,
+      onClick,
+      tooltipContent: tooltip,
+      instaceDataTestId: dataTestId,
+      color,
+      size
+    },
+    key
+  );
+}
+export {
+  renderIcon as r
+};

package/components/formatters/IconsFormatter/helpers/renderMultipleIcons.d.ts

@@ -0,0 +1,7 @@
+import { IconConfig } from '../types';
+/**
+ * Helper que renderiza múltiples iconos
+ * @param icons - Array de configuraciones de iconos
+ * @returns Componente contenedor con múltiples iconos
+ */
+export declare function renderMultipleIcons(icons: IconConfig[]): import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/helpers/renderMultipleIcons.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { b as IconsContainerStyled } from "../slots/IconsFormatterSlots.js";
+import { r as renderIcon } from "./renderIcon.js";
+function renderMultipleIcons(icons) {
+  const visibleIcons = icons.filter((icon) => icon.visible !== false);
+  if (visibleIcons.length === 0) {
+    return null;
+  }
+  if (visibleIcons.length === 1) {
+    return renderIcon(visibleIcons[0]);
+  }
+  return /* @__PURE__ */ jsx(IconsContainerStyled, { children: visibleIcons.map((icon, index) => renderIcon(icon, index)) });
+}
+export {
+  renderMultipleIcons as r
+};

package/components/formatters/IconsFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export { IconsFormatter } from './IconsFormatter';
+export * from './types';
+export * from './constants';

package/components/formatters/IconsFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/IconsFormatter/slots/IconsFormatterEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum IconsFormatterSlots {
+    iconsContainer = "iconsContainer",
+    icon = "icon",
+    iconClickeable = "iconClickeable"
+}

package/components/formatters/IconsFormatter/slots/IconsFormatterEnum.js

@@ -0,0 +1,9 @@
+var IconsFormatterSlots = /* @__PURE__ */ ((IconsFormatterSlots2) => {
+  IconsFormatterSlots2["iconsContainer"] = "iconsContainer";
+  IconsFormatterSlots2["icon"] = "icon";
+  IconsFormatterSlots2["iconClickeable"] = "iconClickeable";
+  return IconsFormatterSlots2;
+})(IconsFormatterSlots || {});
+export {
+  IconsFormatterSlots as I
+};

package/components/formatters/IconsFormatter/slots/IconsFormatterSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const IconsContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;
+export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;