@m4l/components 9.1.8 → 9.1.10

package/components/PaperForm/components/Header.d.ts

@@ -1,5 +1,12 @@
 import { HeaderProps } from '../types';
 /**
- * TODO: Documentar
+ * Componente que representa el encabezado del PaperForm
+ * este encabezado contiene un icono y un título
+ * @author Andrés Quintero - automatic
+ * @param props - Propiedades del componente
+ * @returns JSX.Element
+ * @createdAt 2024-11-21 11:29:19 - automatic
+ * @updatedAt 2024-12-03 11:01:24 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/components/PaperForm/components/Header.js

@@ -1,18 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton } from "@mui/material";
-import { I as Icon } from "../../Icon/Icon.js";
-import { H as HeaderContainer, I as IconTitleContainer, a as IconHeader, S as SkTPaperFormHeader } from "../styles.js";
+import { H as HeaderStyled, I as IconStyled, T as TitleStyled } from "../slots/PaperFormSlots.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 const Header = (props) => {
-  const { urlIcon, title, classes } = props;
+  const { urlIcon, title, size, dataTestId, color } = props;
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(HeaderContainer, { id: "Header", className: classes.headerContainer, children: !isSkeleton ? /* @__PURE__ */ jsxs(IconTitleContainer, { className: classes.iconTitleContainer, children: [
-    urlIcon ? /* @__PURE__ */ jsx(IconHeader, { className: classes.iconHeaderContainer, children: /* @__PURE__ */ jsx(Icon, { src: urlIcon }) }) : null,
-    title
-  ] }) : /* @__PURE__ */ jsxs(SkTPaperFormHeader, { className: classes.skeletonContainer, children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }),
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 68, height: 14 })
-  ] }) });
+  const ownerState = {
+    color
+  };
+  const renderSkeleton = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      urlIcon ? /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }) : null,
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 })
+    ] });
+  };
+  const renderContentHeader = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      urlIcon ? /* @__PURE__ */ jsx(IconStyled, { ownerState: {}, src: urlIcon, size }) : null,
+      /* @__PURE__ */ jsx(TitleStyled, { ownerState: {}, variant: "bodyDens", size, children: title })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: isSkeleton ? renderSkeleton() : renderContentHeader() });
 };
 export {
   Header as H

package/components/PaperForm/constants.d.ts

@@ -0,0 +1 @@
+export declare const PAPER_FORM_KEY = "M4LPaperForm";

package/components/PaperForm/constants.js

@@ -0,0 +1,4 @@
+const PAPER_FORM_KEY = "M4LPaperForm";
+export {
+  PAPER_FORM_KEY as P
+};

package/components/PaperForm/slots/PaperFormEnum.d.ts

@@ -0,0 +1,7 @@
+export declare enum PaperFormSlots {
+    paperFormRoot = "paperFormRoot",
+    containerHeader = "containerHeader",
+    containerTitle = "containerTitle",
+    containerContent = "containerContent",
+    containerIcon = "containerIcon"
+}

package/components/PaperForm/slots/PaperFormEnum.js

@@ -0,0 +1,11 @@
+var PaperFormSlots = /* @__PURE__ */ ((PaperFormSlots2) => {
+  PaperFormSlots2["paperFormRoot"] = "paperFormRoot";
+  PaperFormSlots2["containerHeader"] = "containerHeader";
+  PaperFormSlots2["containerTitle"] = "containerTitle";
+  PaperFormSlots2["containerContent"] = "containerContent";
+  PaperFormSlots2["containerIcon"] = "containerIcon";
+  return PaperFormSlots2;
+})(PaperFormSlots || {});
+export {
+  PaperFormSlots as P
+};

package/components/PaperForm/slots/PaperFormSlots.d.ts

@@ -0,0 +1,15 @@
+export declare const PaperFormRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const HeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, 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/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const TitleStyled: 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> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/PaperForm/slots/PaperFormSlots.js

@@ -0,0 +1,33 @@
+import { P as PAPER_FORM_KEY } from "../constants.js";
+import { P as PaperFormSlots } from "./PaperFormEnum.js";
+import { p as paperFormStyles } from "../styles.js";
+import { styled } from "@mui/material/styles";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const PaperFormRootStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.paperFormRoot
+})(paperFormStyles?.paperFormRoot);
+const HeaderStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerHeader
+})(paperFormStyles?.containerHeader);
+const IconStyled = styled(Icon, {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerIcon
+})(paperFormStyles?.containerIcon);
+const TitleStyled = styled(Typography, {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerTitle
+})(paperFormStyles?.containerTitle);
+const ContentStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerContent
+})(paperFormStyles?.containerContent);
+export {
+  ContentStyled as C,
+  HeaderStyled as H,
+  IconStyled as I,
+  PaperFormRootStyled as P,
+  TitleStyled as T
+};

package/components/PaperForm/styles.d.ts

@@ -1,6 +1,2 @@
-export declare const PaperFormRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconTitleContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconHeader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SkTPaperFormHeader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { PaperFormStyles } from './types';
+export declare const paperFormStyles: PaperFormStyles;

package/components/PaperForm/styles.js

@@ -1,51 +1,99 @@
-import { styled } from "@mui/material/styles";
-const PaperFormRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPaperForm?.styleOverrides || {}
-}));
-const HeaderContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  // height: theme.spacing(5),
-  borderBottom: `1px solid ${theme.vars.palette.divider}`,
-  paddingBottom: theme.spacing(3),
-  marginBottom: theme.spacing(2),
-  overflow: "hidden"
-}));
-const IconTitleContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  flexGrow: 1,
-  alignItems: "center",
-  color: theme.vars.palette.text.primary,
-  ...theme.colorSchemes.finalTheme.typography.subtitle1
-}));
-const IconHeader = styled("div")(({ theme }) => ({
-  // width: "24px",
-  // height: "24px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(1.5)
-}));
-const Content = styled("div")(() => ({
-  flexGrow: 1,
-  position: "relative"
-}));
-const SkTPaperFormHeader = styled("div")(({ theme }) => ({
-  width: "auto",
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(2)} auto`,
-  gridGap: `${theme.spacing(1.5)}`,
-  paddingBottom: `${theme.spacing(3)}`,
-  borderBottom: `1px solid ${theme.vars.palette.divider}`,
-  marginBottom: `${theme.spacing(3)}`
-}));
+const paperFormStyles = {
+  /**
+   *************************************************************
+   * Estilos del contenedor principal del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  paperFormRoot: ({ theme }) => ({
+    borderRadius: theme.size.borderRadius.r1,
+    background: theme.vars.palette.background.default,
+    border: `${theme.size.borderStroke.container}`,
+    borderColor: theme.vars.palette.border.default,
+    width: "100%",
+    height: "auto",
+    overflow: "hidden"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del contenedor del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerHeader: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    overflow: "hidden",
+    height: "auto",
+    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
+    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity
+  }),
+  /**
+   * ************************************************************
+   * Estilos del título del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerTitle: ({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.body,
+    variants: [],
+    display: "inline-flex",
+    alignItems: "center",
+    marginTop: "1px"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del icono del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerIcon: () => ({
+    display: "grid",
+    placeItems: "center"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del contenido del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerContent: ({ theme, ownerState }) => ({
+    width: "100%",
+    height: "auto",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: ownerState.isForm ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp0,
+    padding: theme.vars.size.baseSpacings.sp3,
+    background: theme.vars.palette.background.default
+  })
+};
 export {
-  Content as C,
-  HeaderContainer as H,
-  IconTitleContainer as I,
-  PaperFormRoot as P,
-  SkTPaperFormHeader as S,
-  IconHeader as a
+  paperFormStyles as p
 };

package/components/PaperForm/types.d.ts

@@ -1,12 +1,36 @@
 import { ReactNode } from 'react';
-import { Classes } from './classes/types';
+import { PaperFormSlots } from './slots/PaperFormEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PAPER_FORM_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 export interface PaperFormProps {
     urlIcon?: string;
     title: string;
     children: ReactNode;
+    variant?: 'standard';
+    color?: Extract<ComponentPalletColor, 'default'>;
+    size?: Extract<Sizes, 'small' | 'medium'>;
     isForm?: boolean;
+    dataTestId?: string;
 }
-export interface HeaderProps extends Omit<PaperFormProps, 'children' | 'isForm'> {
-    classes: Classes;
+/**
+ * ***************************************
+ * Interfaz de propiedades comunes usadas
+ * en HeaderProps y PaperFormOwnerState
+ * ***************************************
+ */
+interface CommonsProps {
+    paperFormVariant?: PaperFormProps['variant'];
 }
-export type OwnerState = Pick<PaperFormProps, 'isForm'>;
+export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color'> & CommonsProps;
+/**
+ * ***********************************
+ * Slots para los estilos utilizados
+ * en el componente PaperForm
+ * **********************************
+ */
+export type PaperFormSlotsType = keyof typeof PaperFormSlots;
+export type PaperFormStyles = Partial<OverridesStyleRules<PaperFormSlotsType, typeof PAPER_FORM_KEY, Theme> | undefined> | undefined;
+export {};

package/components/SideBar/SideBar.d.ts

@@ -1,33 +1,35 @@
 import { SideBarProps } from './types';
 /**
  * Componente SideBar.
- * @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.
+ * @param {SideBarProps} props - Propiedades para el componente SideBar.
+ * @returns {React.ReactElement} El componente SideBar.
  * @example
- *
- *<SideBar
- * collapsed={false}
+ * ```tsx
+ * <SideBar
+ * anchored={true}
  * visible={true}
- * onToggleCollapse={() => {}}
+ * onToggleAnchored={() => {}}
  * onToggleVisible={() => {}}
  * menuData={[]}
- * onClick={() => {}}
- * companyLogoNormalUrl={''}
- * companyLogoSmallUrl={''}
- * isItemActive={(_item: MenuDataType) => false}
+ * onMenuItemClick={() => {}}
+ * companyLogoNormalUrl=""
+ * companyLogoSmallUrl=""
+ * moduleSelectedId=""
+ * expandedWidth="230px"
  * companyName=""
+ * companySlogan=""
  * />
+ * ```
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-10-31 17:50:39 - automatic
+ * @updatedAt 2024-11-14 17:08:16 - automatic
+ * @updatedUser Andrés Quintero - automatic
+ */
+/**
+ *
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-11-15 21:43:42 - automatic
+ * @updatedAt 2024-12-02 19:02:04 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
-export declare const SideBar: (props: SideBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideBar: import('react').MemoExoticComponent<(props: SideBarProps) => import("react/jsx-runtime").JSX.Element>;

package/components/SideBar/SideBar.js

@@ -1,78 +1,50 @@
 import { jsx } from "react/jsx-runtime";
-import { S as SideBarRoot } from "./styles.js";
-import { C as ContentDesktop } from "./subcomponents/ContentDesktop/index.js";
 import { S as SideBarProvider } from "./context/sideBarContext/index.js";
-import { g as getSideBarClassesByState } from "./classes/index.js";
-import { g as getNameDataTestId } from "./tests/utils.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { C as ContentMobile } from "./subcomponents/ContentMobile/index.js";
-import { useResponsive } from "@m4l/styles";
-import { M as MENU_COLLAPSED_SIZE } from "./constants.js";
-const SideBar = (props) => {
+import { S as SideBarMobile } from "./subcomponents/SideBarMobile/index.js";
+import { S as SideBarDesktop } from "./subcomponents/SideBarDesktop/index.js";
+import { memo, useMemo } from "react";
+import { g as getMenuDataWithState } from "./helpers/getMenuDataWithState/index.js";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getDataToSkeleton } from "./helpers/getDataToSkeleton/index.js";
+const SideBar = memo((props) => {
   const {
-    collapsed,
+    anchored,
     visible,
-    onToggleCollapse,
+    onToggleAnchored,
     onToggleVisible,
     menuData,
-    onClick,
+    onMenuItemClick,
     companyLogoNormalUrl,
     companyLogoSmallUrl,
-    isItemActive,
-    expandedWidth = "280px",
+    moduleSelectedId,
+    expandedWidth = "230px",
     companyName,
-    variantStyle = "variantDefault"
+    companySlogan
   } = props;
-  const isMobile = useResponsive("down", "md");
-  const ownerState = {
-    collapsed,
-    visible,
-    variantStyle
-  };
-  const classes = getSideBarClassesByState(ownerState);
-  return (
-    /**
-     * Componente SideBarRoot.
-     * Este componente representa la raíz de la barra lateral.
-     *
-     */
-    /* @__PURE__ */ jsx(
-      SideBarRoot,
-      {
-        className: classes.root,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-        children: /* @__PURE__ */ jsx(
-          SideBarProvider,
-          {
-            value: {
-              // Propiedades y funciones proporcionadas a través del contexto
-              collapsed,
-              visible,
-              onToggleCollapse,
-              onToggleVisible,
-              menuData,
-              onClick,
-              companyLogoNormalUrl,
-              companyLogoSmallUrl,
-              isItemActive,
-              expandedWidth,
-              classes,
-              companyName
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classes.wrapperSideBar,
-                style: { width: collapsed ? MENU_COLLAPSED_SIZE : expandedWidth },
-                children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
-              }
-            )
-          }
-        )
-      }
-    )
+  const menuDataWithState = useMemo(() => getMenuDataWithState({ menuData: menuData ?? getDataToSkeleton(), moduleSelectedId }), [menuData, moduleSelectedId]);
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx(
+    SideBarProvider,
+    {
+      value: {
+        // Propiedades y funciones proporcionadas a través del contexto
+        anchored,
+        visible,
+        onToggleAnchored,
+        onToggleVisible,
+        menuData: menuDataWithState,
+        onMenuItemClick,
+        companyLogoNormalUrl,
+        companyLogoSmallUrl,
+        moduleSelectedId,
+        expandedWidth,
+        companyName,
+        companySlogan
+      },
+      children: !isMobile ? /* @__PURE__ */ jsx(SideBarDesktop, {}) : /* @__PURE__ */ jsx(SideBarMobile, {})
+    }
   );
-};
+});
 export {
   SideBar as S
 };

package/components/SideBar/constants.d.ts

@@ -1,2 +1,6 @@
-export declare const MENU_COLLAPSED_SIZE = "14px";
-export declare const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+export declare const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
+export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
+export declare const LIST_MENU_ITEM = "M4LListMenuItem";
+export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
+export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+export declare const ITEM_DEFAULT = "No Items";

package/components/SideBar/constants.js

@@ -1,6 +1,12 @@
-const MENU_COLLAPSED_SIZE = "14px";
-const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
+const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
+const LIST_MENU_ITEM = "M4LListMenuItem";
+const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
+const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
 export {
-  MENU_COLLAPSED_SIZE as M,
-  MENU_COLLAPSED_CONTAINER_SIZE as a
+  CONTAINER_BTN_ANCHORED as C,
+  LIST_MENU_ITEM as L,
+  PATH_ARROW_DOWN_ICON as P,
+  SIDEBAR_KEY_COMPONENT as S,
+  PATH_ARROW_RIGHT_ICON as a
 };

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

@@ -3,12 +3,17 @@ 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.
+ * @createdAt 2024-11-06 17:30:06 - automatic
  */
 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.
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-11-06 17:30:06 - automatic
+ * @updatedAt 2024-11-26 18:02:53 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 declare const SideBarProvider: (props: SideBarProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { SideBarProvider, SideBarContext };