@m4l/components 0.2.21 → 0.2.24

package/components/LoadingError/classes/index.d.ts

@@ -1,6 +1,18 @@
 import { LoadingErrorClassesType } from './types';
+/**
+ * Clases de utilidad para el componente de carga de error.
+ */
 export declare const loadingErrorClasses: LoadingErrorClassesType;
+/**
+ * Obtiene la clase de utilidad para un slot específico del componente de carga de error.
+ * @param slot El slot para el que se desea obtener la clase de utilidad.
+ * @returns La clase de utilidad correspondiente al slot especificado.
+ */
 export declare function getLoadingErrorUtilityClass(slot: string): string;
+/**
+ * Función para generar todas las clases de utilidad del componente de carga de error.
+ * @returns Un objeto que contiene todas las clases de utilidad generadas.
+ */
 export declare const loadingErrorUtilityClasses: () => {
     root: string;
     loadingErrorLoading: string;

package/components/LoadingError/{index.3a86956f.js → index.123e16f8.js}

@@ -3,10 +3,10 @@ import { I as ICONS } from "../areas/icons.8266ccc8.js";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.32caeee2.js";
-import { I as Icon } from "../Icon/index.770f86ae.js";
+import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.a0ad2d9e.js";
+import { I as Icon } from "../Icon/index.b920baf8.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { B as Button } from "../mui_extended/Button/index.928f05b7.js";
+import { B as Button } from "../mui_extended/Button/index.e520bd15.js";
 const componentName = "M4LoadingError";
 generateUtilityClasses(componentName, [
   "root",

package/components/LoadingError/types.d.ts

@@ -1,10 +1,17 @@
 import { AreaStatus, AreasStatus } from "../areas/contexts/AreasContext/types";
 export interface AreasLoadingErrorProps {
+    /**Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación. */
     status: AreasStatus | AreaStatus;
+    /** Es una función que se ejecutará cuando se presione el botón de error.*/
     action: () => void;
+    /**Es una cadena de texto que representa el título del mensaje de error. Este título se mostrará en el componente cuando ocurra un error. */
     title?: string;
+    /**Es una cadena de texto que proporciona una descripción detallada del error. */
     description?: string;
+    /** Es una cadena de texto que proporciona una recomendación sobre cómo manejar el error o qué acciones tomar para resolverlo.  */
     recommendation?: string;
+    /** Es una cadena de texto que proporciona un mensaje introductorio adicional. */
     introMessage?: string;
+    /**Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error. */
     errorIcon?: string;
 }

package/components/MFLoader/MFLoader.d.ts

@@ -4,6 +4,17 @@ declare global {
         [key: string]: any;
     }
 }
+/**
+ * @typedef {Object} MFType - Tipo que representa la estructura de un microfrontend.
+ * @property {string} divContainerId - El ID del contenedor DIV del microfrontend.
+ * @property {string} scriptId - El ID del script del microfrontend.
+ * @property {string} moduleId - El ID del módulo del microfrontend.
+ */
+/**
+ * Componente para cargar microfrontends de manera dinámica.
+ * @param {MFLoaderProps} props - Props del componente MFLoader.
+ * @returns {JSX.Element} - El componente MFLoader.
+ */
 export declare function MFLoader(props: MFLoaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MFLoader {
     var defaultProps: {

package/components/MFLoader/{index.544940c7.js → index.52096ea5.js}

@@ -12,7 +12,7 @@ import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/mater
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { L as LinearProgress } from "../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { L as LoadingError } from "../LoadingError/index.3a86956f.js";
+import { L as LoadingError } from "../LoadingError/index.123e16f8.js";
 const componentName = "M4LMFLoader";
 const mfLoaderClasses = generateUtilityClasses(componentName, [
   "root",

package/components/MFLoader/types.d.ts

@@ -1,7 +1,19 @@
 import { DynamicMFStore, WindowToolsMF } from "../areas";
 import { MFBaseProps } from "../areas/types";
+/**
+ * Propiedades para el componente MFLoader, utilizado para cargar microfrontends de manera dinámica.
+ */
 export interface MFLoaderProps extends MFBaseProps {
+    /**
+     * Identificador único del módulo del microfrontend.
+     */
     moduleId: string;
+    /**
+     * Almacén dinámico para el microfrontend.
+     */
     dynamicMFStore?: DynamicMFStore;
+    /**
+    * Herramientas de ventana para el microfrontend.
+    */
     windowTools: WindowToolsMF;
 }

package/components/ModalDialog/{index.9ac45602.js → index.2e931b5f.js}

@@ -1,11 +1,11 @@
 import { useTheme, Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.38b6012b.js";
-import { u as useModal } from "../../hooks/useModal/index.50b23c06.js";
-import { R as ResizeableWindow } from "../Resizeable/index.14ab4804.js";
+import { c as cjs } from "../../react-draggable.ee21cb7e.js";
+import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
+import { R as ResizeableWindow } from "../Resizeable/index.0eb66c37.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { m as modalUtilityClasses } from "../modal/index.61389369.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.b8a1d42a.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2f6286eb.js";
 const DragabblePaperComponent = (props) => {
   return /* @__PURE__ */ jsx(cjs.exports, {
     handle: ".m4l_draggable_handle",

package/components/NoItemSelected/{index.08ec6c48.js → index.1024b856.js}

@@ -1,6 +1,6 @@
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../Image/index.6dd3b128.js";
+import { I as Image } from "../Image/index.d034ca68.js";
 import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
 import { useMemo } from "react";
 import { unstable_composeClasses } from "@mui/base";

package/components/ObjectLogs/{index.0d263f80.js → index.d10f4a2f.js}

@@ -1,18 +1,18 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.660a6e7b.js";
+import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.b1eafce1.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.5636414a.js";
 import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.50b23c06.js";
-import { I as Icon } from "../Icon/index.770f86ae.js";
+import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
+import { I as Icon } from "../Icon/index.b920baf8.js";
 import { S as Stack } from "../mui_extended/Stack/index.0e53197c.js";
-import { W as WindowBase } from "../modal/WindowBase.14255209.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.0d1fcfa7.js";
+import { W as WindowBase } from "../modal/WindowBase.998b8a38.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.b93e5649.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 const Container = styled("div")(() => ({
   height: "100%",

package/components/PDFViewer/{index.de51408a.js → index.98852f91.js}

@@ -1,7 +1,7 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { B as Button } from "../mui_extended/Button/index.928f05b7.js";
+import { B as Button } from "../mui_extended/Button/index.e520bd15.js";
 const PDFVeiwerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPDFViewer?.styleOverrides
 }));

package/components/Page/{index.09e28ba1.js → index.def863f2.js}

@@ -1,5 +1,5 @@
 import { useBase, BaseProvider, useModuleSkeleton } from "@m4l/core";
-import { c as classes, g as getSize, F as FactoryRender } from "../PrintingSystem/index.9dcfb35d.js";
+import { c as classes, g as getSize, F as FactoryRender } from "../PrintingSystem/index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default from "react";

package/components/PaperForm/{index.130ce6ad.js → index.8a617a66.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as Icon } from "../Icon/index.770f86ae.js";
+import { I as Icon } from "../Icon/index.b920baf8.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 const PaperFormRoot = styled("div")(({

package/components/Period/{index.3c7e8590.js → index.d80dff10.js}

@@ -1,8 +1,8 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, generateUtilityClasses, generateUtilityClass, Autocomplete, TextField, Skeleton } from "@mui/material";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.770f86ae.js";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.b8a1d42a.js";
+import { I as Icon } from "../Icon/index.b920baf8.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2f6286eb.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";

package/components/PrintingSystem/{index.9dcfb35d.js → index.2e17cae5.js}

@@ -1,20 +1,20 @@
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.79b6a2c1.js";
+import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { styled, useTheme } from "@mui/material/styles";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.6e177f94.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.4941ecf4.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.9cc3b262.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.a5d48adf.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.6dd3b128.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.a3897785.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.82f1e38f.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.a4c5c3e6.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.3764b312.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.2b8fef69.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.ecd5e809.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.09e28ba1.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.78b023bb.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.0b66458e.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.b4c72fef.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.ef44c8ab.js";
+import { a as ImageNode, Q as QRImageNode } from "../Image/index.d034ca68.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.c5ffe20a.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.b29fc1e9.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.d72d224b.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.8e53440c.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.11626284.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.020c037c.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.def863f2.js";
 import { useBase, evaluateWithContext } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";

package/components/PrintingSystem/subcomponents/BodyNode/{index.a3897785.js → index.c5ffe20a.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BodyNode = (props) => {

package/components/PrintingSystem/subcomponents/ChartNode/{index.ecd5e809.js → index.020c037c.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.9dcfb35d.js";
+import { c as classes } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";
@@ -21,14 +21,29 @@ const ChartNode = (props) => {
   } = useBase();
   const pointsMaybeString = typeof points === "string" && regexPattern.exec(points) || "";
   const formatPoints = typeof points === "string" ? getPropertyByString(sourceData, pointsMaybeString[1]) : points;
-  const data = Array.isArray(formatPoints) && formatPoints.length > 0 ? formatPoints.map((point) => {
+  const adjustedPoints = [];
+  if (Array.isArray(formatPoints) && formatPoints.length > 0) {
+    formatPoints.forEach((point, index) => {
+      adjustedPoints.push(point);
+      if (index < formatPoints.length - 1) {
+        const nextPoint = formatPoints[index + 1];
+        const step = 0.5;
+        for (let x = point.avg + step; x < nextPoint.avg; x += step) {
+          adjustedPoints.push({
+            avg: x,
+            correction: null,
+            uncertainty: null
+          });
+        }
+      }
+    });
+  }
+  const data = Array.isArray(adjustedPoints) && adjustedPoints.length > 0 ? adjustedPoints.map((point) => {
     return {
-      x: 0,
-      xMin: 0,
-      xMax: 0,
+      x: point.avg,
       y: point.correction,
-      yMin: point.correction - point.uncertainty,
-      yMax: point.correction + point.uncertainty
+      yMin: point.correction !== null && point.uncertainty !== null ? point.correction - point.uncertainty : 0,
+      yMax: point.correction !== null && point.uncertainty !== null ? point.correction + point.uncertainty : 0
     };
   }) : [];
   useEffect(() => {
@@ -38,7 +53,7 @@ const ChartNode = (props) => {
       if (ctx != null) {
         new LineWithErrorBarsChart(ctx, {
           data: {
-            labels: Array.isArray(formatPoints) && formatPoints.length > 0 ? formatPoints.map((point) => point.avg) : [],
+            labels: Array.isArray(adjustedPoints) && adjustedPoints.length > 0 ? adjustedPoints.map((point) => point.avg) : [],
             datasets: [{
               data,
               borderWidth: 0,
@@ -62,7 +77,8 @@ const ChartNode = (props) => {
                 title: {
                   display: true,
                   text: evaluateWithContext(sourceData, messageX)
-                }
+                },
+                beginAtZero: false
               },
               y: {
                 title: {

package/components/PrintingSystem/subcomponents/DividerNode/{index.6e177f94.js → index.78b023bb.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.9dcfb35d.js";
+import { c as classes } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const DividerNode = (props) => {

package/components/PrintingSystem/subcomponents/FooterNode/{index.82f1e38f.js → index.b29fc1e9.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const FooterNode = (props) => {

package/components/PrintingSystem/subcomponents/GridNode/{index.2b8fef69.js → index.11626284.js}

@@ -1,5 +1,5 @@
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const GridNode = (props) => {
@@ -54,7 +54,9 @@ const GridNode = (props) => {
                   minWidth: getSize(dataColumns[id].width || "auto", unitSize),
                   justifyContent: cell.alignX ? cell.alignX : "center"
                 },
-                children: isNested ? getPropertyByString(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
+                children: isNested ? evaluateWithContext({
+                  row
+                }, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
               }, `td-${Math.random().toString(36).substring(7)}`);
             })
           }, `tr-${Math.random().toString(36).substring(7)}`);

package/components/PrintingSystem/subcomponents/HeaderNode/{index.a5d48adf.js → index.ef44c8ab.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const HeaderNode = (props) => {

package/components/PrintingSystem/subcomponents/PaperNode/{index.a4c5c3e6.js → index.d72d224b.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.9dcfb35d.js";
+import { c as classes } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PaperNode = (props) => {

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.3764b312.js → index.8e53440c.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PropertyValueNode = (props) => {

package/components/PrintingSystem/subcomponents/SectionNode/{index.4941ecf4.js → index.0b66458e.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.9dcfb35d.js";
+import { c as classes, g as getSize } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const SectionNode = (props) => {

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.9cc3b262.js → index.b4c72fef.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.9dcfb35d.js";
+import { c as classes } from "../../index.2e17cae5.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const TextBoxNode = (props) => {

package/components/PropertyValue/{index.d975c7f3.js → index.3b6670d4.js}

@@ -7,7 +7,7 @@ import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
 import { useState } from "react";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as Icon } from "../Icon/index.770f86ae.js";
+import { I as Icon } from "../Icon/index.b920baf8.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 const PropertyValueRoot = styled("div")(({
   theme

package/components/Resizeable/{index.14ab4804.js → index.0eb66c37.js}

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { a as ResizableBox } from "../../react-resizable.3cdda6a7.js";
+import { a as ResizableBox } from "../../react-resizable.ee028152.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({
   theme

package/components/SideBar/SideBar.d.ts

@@ -1,2 +1,57 @@
+/**
+ * Este módulo representa una barra lateral.
+ * @module SideBar
+ */
 import { SideBarProps } from './types';
+/**
+ * Propiedades para el componente SideBar.
+ * @typedef {Object} SideBarProps
+ * @param {SideBarProps} props
+ * @property {boolean} collapsed - Indica si la barra lateral está colapsada.
+ * @property {boolean} visible - Indica si la barra lateral está visible.
+ * @property {function} onToggleCollapse - Función para alternar el estado colapsado de la barra lateral.
+ * @property {function} onToggleVisible - Función para alternar la visibilidad de la barra lateral.
+ * @property {Array} menuData - Datos del menú de la barra lateral.
+ * @property {function} onClick - Función manejadora del clic en un elemento de la barra lateral.
+ * @property {string} companyLogoNormalUrl - URL del logotipo de la empresa en tamaño normal.
+ * @property {string} companyLogoSmallUrl - URL del logotipo de la empresa en tamaño reducido.
+ * @property {function} isItemActive - Función para determinar si un elemento de la barra lateral está activo.
+ * @property {string} collapsedWidht - Ancho de la barra lateral cuando está colapsada (valor por defecto: '280px').
+ * @property {string} unCollapsedWidht - Ancho de la barra lateral cuando no está colapsada (valor por defecto: '52px').
+ * @property {string} companyName - Nombre de la empresa.
+ */
+/**
+ *
+ * @param {SideBarProps} props  - Propiedades del componente.
+ * @param {boolean} props.collapsed - Valor para abrir o cerrar la ventana del componente
+ * @param {boolean} props.visible - Valor para cambiar a modo movile para resolucion de 600px
+ * @param {VoidFunction} props.onToggleCollapse - Funcion para hacer el cambio de Valor de collapsed
+ * @param {VoidFunction} props.onToggleVisible - Funcion para hacer el cambio de Valor de visible
+ * @param {Array<MenuDataType>} props.menuData - Datos llenar el SideBar
+ * @param {Function} props.onClick - Manejador para hacer clic en el componente.
+ * @param {string} props.companyLogoNormalUrl - Renderiza logo o imagen entamaño normal.
+ * @param {string} props.companyLogoSmallUrl - Renderiza logo o imagen entamaño pequeño.
+ * @param {Function} props.isItemActive - Funcion para abrir item de la prop MenuData.
+ * @param {string} props.collapsedWidht - Valor que le puedes dar al tamaño de width cuando esta colapsado.
+ * @param {string} props.unCollapsedWidht - Valor que le puedes dar al tamaño de width cuando esta no esta colapsado.
+ * @param {string} props.companyName - Nombre que se le puede dar para llenar los campo de texto de la compañía.
+ *
+ *
+ * @returns - Elemento JSX que muestra el menu de navegación.
+ *
+ * @example
+ *
+ *<SideBar
+   collapsed={false}
+   visible={true}
+   onToggleCollapse={() => {}}
+   onToggleVisible={() => {}}
+   menuData={[]}
+   onClick={() => {}}
+   companyLogoNormalUrl={''}
+   companyLogoSmallUrl={''}
+   isItemActive={(_item: MenuDataType) => false}
+   companyName=""
+  />
+ */
 export declare const SideBar: (props: SideBarProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/classes/types.d.ts

@@ -30,5 +30,7 @@ export interface SideBarClassesType {
     visible: string;
     subItemActive: string;
     itemMainActive: string;
+    variantDefault: string;
+    variantComercial: string;
 }
 export declare type SideBarClassesKey = keyof SideBarClassesType;

package/components/SideBar/context/sideBarContext/index.d.ts

@@ -1,5 +1,15 @@
 /// <reference types="react" />
 import { SideBarProviderProps, SideBarProviderValue } from './types';
+/**
+ * Representa el contexto para el componente Sidebar.
+ * Establece un contexto llamado SideBarContext con un valor inicial initialState,
+ * que puede ser utilizado por los componentes dentro del árbol de componentes para acceder a datos específicos del sidebar sin necesidad de pasar props manualmente.
+ */
 declare const SideBarContext: import("react").Context<SideBarProviderValue>;
+/**
+* Componente que actúa como proveedor de contexto para el componente Sidebar y sus elementos secundarios.
+* @param props Las propiedades para el proveedor del contexto Sidebar.
+* @returns El proveedor de contexto Sidebar.
+*/
 declare const SideBarProvider: (props: SideBarProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { SideBarProvider, SideBarContext };

package/components/SideBar/context/sideBarContext/types.d.ts

@@ -1,9 +1,21 @@
 import { ReactNode } from 'react';
 import { Classes, SideBarProps } from '../../types';
+/**
+ * Valor proporcionado por el proveedor del contexto Sidebar.
+ * @extends SideBarProps
+ */
 export interface SideBarProviderValue extends SideBarProps {
+    /**
+     * Las clases asociadas al proveedor del contexto Sidebar.
+     */
     classes: Classes;
 }
+/**
+ * Propiedades para el proveedor del contexto Sidebar.
+ */
 export interface SideBarProviderProps {
+    /** value contendrá el valor que se proporcionará en el contexto*/
     value: SideBarProviderValue;
+    /** children contendrá los elementos secundarios que estarán dentro del ámbito del proveedor del contexto.*/
     children: ReactNode;
 }

package/components/SideBar/hooks/useSideBar/index.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @type Variable que almacena el uso del estado y ayuda a evitar prop drilling
+ */
 declare const useSideBar: () => import("../../context/sideBarContext/types").SideBarProviderValue;
 export default useSideBar;

package/components/SideBar/{index.e55c9b7c.js → index.cdb70977.js}

@@ -1,20 +1,21 @@
-import { useResponsiveDesktop } from "@m4l/graphics";
 import { styled, alpha } from "@mui/material/styles";
 import { styled as styled$1, generateUtilityClasses, ListItemText, Tooltip, ListItemButton, Collapse, useTheme, Skeleton, Drawer as Drawer$1 } from "@mui/material";
 import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { createContext, useContext, useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.79b6a2c1.js";
+import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../Image/index.6dd3b128.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.023c369f.js";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.770f86ae.js";
+import { I as Image } from "../Image/index.d034ca68.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.9ea23f87.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.b920baf8.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
 import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
 import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
+import { useResponsive } from "@m4l/styles";
 const SideBarRoot = styled("div")(({
   theme
 }) => ({
@@ -101,12 +102,14 @@ generateUtilityClasses(
     "collapsed",
     "visible",
     "subItemActive",
-    "itemMainActive"
+    "itemMainActive",
+    "variantDefault",
+    "variantComercial"
   ]
 );
 const getSideBarClassesByState = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.collapsed && "collapsed", ownerState.visible && "visible"],
+    root: ["root", ownerState.collapsed && "collapsed", ownerState.visible && "visible", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"],
     containerSideBarLogo: ["containerSideBarLogo"],
     contentDesktop: ["contentDesktop"],
     contentMobile: ["contentMobile"],
@@ -137,8 +140,8 @@ const getSideBarClassesByState = (ownerState) => {
     collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
     subItemCollapseActive: ["subItemCollapseActive"],
     contentGroupsLine: ["contentGroupsLine"],
-    drawer: ["drawer"],
-    popover: ["popover"]
+    drawer: ["drawer", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"],
+    popover: ["popover", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"]
   };
   const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
   return {
@@ -225,6 +228,9 @@ function CollapseButton(props) {
     classes,
     companyLogoNormalUrl
   } = useSideBar$1();
+  const handleButtonClick = () => {
+    onToggleCollapse();
+  };
   return /* @__PURE__ */ jsxs(CollapseButtonRoot, {
     className: classes.collapseButton,
     ...process.env.NODE_ENV !== "production" ? {
@@ -243,10 +249,13 @@ function CollapseButton(props) {
       style: {
         transform: `rotate(${collapsed ? 0 : 180}deg)`
       },
-      children: /* @__PURE__ */ jsx(IconButton, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`,
-        onClick: onToggleCollapse
-      })
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: handleButtonClick,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`
+        }
+      )
     })]
   });
 }
@@ -469,7 +478,7 @@ const NavSubItemContent = (props) => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("navSubItemContentRoot")
     } : {},
-    children: [/* @__PURE__ */ jsx(Icon, {
+    children: [icon_url && /* @__PURE__ */ jsx(Icon, {
       src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/${icon_url}`
     }), /* @__PURE__ */ jsx(Typography, {
       variant: "body",
@@ -1035,12 +1044,14 @@ const SideBar = (props) => {
     isItemActive,
     collapsedWidht = "280px",
     unCollapsedWidht = "52px",
-    companyName
+    companyName,
+    variantStyle = "variantDefault"
   } = props;
-  const isDesktop = useResponsiveDesktop();
+  const isMobile = useResponsive("down", "md");
   const ownerState = {
     collapsed,
-    visible
+    visible,
+    variantStyle
   };
   const classes = getSideBarClassesByState(ownerState);
   return /* @__PURE__ */ jsx(SideBarRoot, {
@@ -1068,7 +1079,7 @@ const SideBar = (props) => {
         className: classes.wrapperSideBar,
         width: !collapsed ? collapsedWidht : unCollapsedWidht,
         visible,
-        children: isDesktop ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
+        children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
       })
     })
   });