@m4l/components 3.1.7 → 3.1.8

package/components/SideBar/index-PUBBe0yH.js

@@ -1,758 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { O as NavItemMainRoot, Q as NavSubItemContentRoot, T as NavListSubItemRoot, U as ContainerListSubItem, V as ContentGroupsRoot, X as WrapperGroup, Y as WrapperGroupTitle, Z as CollapseButtonRoot, _ as WrapperContentMobile, $ as SideBarRoot } from "../../styles/index-DKj6m8SL.js";
-import { createContext, useState, useContext, useEffect } from "react";
-import { generateUtilityClasses, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index-DiMrtgIu.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
-import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index-C89MAkeH.js";
-import { T as Typography } from "../mui_extended/Typography/index-Cf_4Zw8f.js";
-import clsx from "clsx";
-import { useLocation } from "react-router-dom";
-import { I as Image } from "../Image/index-COp8vP0X.js";
-import { I as IconButton } from "../mui_extended/IconButton/index-CusYFjie.js";
-import { useResponsive } from "@m4l/styles";
-const componentName = "M4LSideBar";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root",
-    "containerSideBarLogo",
-    "contentDesktop",
-    "contentMobile",
-    "footer",
-    "collapseButton",
-    "collapseButtonSecondary",
-    "containerLogo",
-    "contentGroups",
-    "wrapperGroup",
-    "wrapperGroupTitle",
-    "itemListMainRootContainer",
-    "itemListMainRoot",
-    "containerListSubItem",
-    "navItemMainRoot",
-    "navItemRootContent",
-    "arrowIconRoot",
-    "navListSubItemRoot",
-    "navSubItemContentRoot",
-    "skeleton",
-    "lineLeft",
-    "wrapperSideBar",
-    "areaExpandMenu",
-    "navItemMainTriangleTop",
-    "navItemMainTriangleBottom",
-    "navItemRootContentIconTypo",
-    "navSubItemContentBullet",
-    "containerLogoButtonLogo",
-    "collapseButtontriangleTop",
-    "collapseButtontriangleBottom",
-    "subItemCollapseActive",
-    "containerContentGroupsFooter",
-    "contentGroupsLine",
-    "drawer",
-    "popover",
-    "wrapperLogoFooter",
-    /* states or variants of elements */
-    "collapsed",
-    "visible",
-    "subItemActive",
-    "itemMainActive",
-    "variantDefault",
-    "variantComercial",
-    "overlapping"
-  ]
-  /*  returna un objeto igual a:
-      {
-          root: 'M4LSideBar-root',
-  
-      } 
-      */
-);
-const getSideBarClassesByState = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.collapsed && "collapsed",
-      ownerState.visible && "visible",
-      ownerState.variantStyle === "variantDefault" && "variantDefault",
-      ownerState.variantStyle === "variantComercial" && "variantComercial"
-    ],
-    containerSideBarLogo: ["containerSideBarLogo"],
-    contentDesktop: ["contentDesktop"],
-    contentMobile: ["contentMobile"],
-    footer: ["footer"],
-    collapseButton: ["collapseButton"],
-    collapseButtonSecondary: ["collapseButtonSecondary"],
-    containerLogo: ["containerLogo"],
-    contentGroups: ["contentGroups"],
-    wrapperGroup: ["wrapperGroup"],
-    wrapperGroupTitle: ["wrapperGroupTitle"],
-    itemListMainRootContainer: ["itemListMainRootContainer"],
-    itemListMainRoot: ["itemListMainRoot"],
-    containerListSubItem: ["containerListSubItem"],
-    navItemMainRoot: ["navItemMainRoot"],
-    navItemRootContent: ["navItemRootContent"],
-    arrowIconRoot: ["arrowIconRoot"],
-    navListSubItemRoot: ["navListSubItemRoot"],
-    navSubItemContentRoot: ["navSubItemContentRoot"],
-    skeleton: ["skeleton"],
-    subItemActive: ["subItemActive"],
-    lineLeft: ["lineLeft"],
-    wrapperSideBar: ["wrapperSideBar"],
-    areaExpandMenu: ["areaExpandMenu"],
-    itemMainActive: ["itemMainActive"],
-    navItemMainTriangleTop: ["navItemMainTriangleTop"],
-    navItemMainTriangleBottom: ["navItemMainTriangleBottom"],
-    navItemRootContentIconTypo: ["navItemRootContentIconTypo"],
-    navSubItemContentBullet: ["navSubItemContentBullet"],
-    containerLogoButtonLogo: ["containerLogoButtonLogo"],
-    collapseButtontriangleTop: ["collapseButtontriangleTop"],
-    collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
-    subItemCollapseActive: ["subItemCollapseActive"],
-    containerContentGroupsFooter: ["containerContentGroupsFooter"],
-    contentGroupsLine: ["contentGroupsLine"],
-    drawer: [
-      "drawer",
-      ownerState.variantStyle === "variantDefault" && "variantDefault",
-      ownerState.variantStyle === "variantComercial" && "variantComercial"
-    ],
-    popover: [
-      "popover",
-      ownerState.variantStyle === "variantDefault" && "variantDefault",
-      ownerState.variantStyle === "variantComercial" && "variantComercial"
-    ],
-    overlapping: ["overlapping"],
-    wrapperLogoFooter: ["wrapperLogoFooter"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-    /* retorna un objeto para una variante de tipo = 'password':
-        {
-            input : "M4LRHFTextField-input"
-            root: "M4LRHFTextField-root M4LRHFTextField-variantPassword"
-            skeleton: "M4LRHFTextField-skeleton"
-        };
-        */
-  };
-};
-const initialState = {
-  collapsed: false,
-  visible: true,
-  onToggleCollapse: () => {
-  },
-  onToggleVisible: () => {
-  },
-  onToggleOverlay: () => {
-  },
-  overlay: false,
-  menuData: [],
-  companyLogoNormalUrl: "",
-  companyLogoSmallUrl: "",
-  onClick: () => {
-  },
-  isItemActive: () => false,
-  expandedWidth: "",
-  // Obtener las clases iniciales para la barra lateral
-  classes: getSideBarClassesByState({ collapsed: false, visible: true }),
-  companyName: ""
-};
-const SideBarContext = createContext(initialState);
-const SideBarProvider = (props) => {
-  const { value, children } = props;
-  const [overlay, setOverlay] = useState(false);
-  const onToggleOverlay = (value2) => {
-    setOverlay(value2);
-  };
-  const {
-    collapsed,
-    visible,
-    onToggleCollapse,
-    onToggleVisible,
-    menuData,
-    onClick,
-    companyLogoNormalUrl,
-    companyLogoSmallUrl,
-    isItemActive,
-    expandedWidth,
-    classes,
-    companyName
-  } = value;
-  return (
-    // Proporcionar el contexto con las propiedades desestructuradas
-    /* @__PURE__ */ jsx(
-      SideBarContext.Provider,
-      {
-        value: {
-          collapsed,
-          visible,
-          onToggleCollapse,
-          onToggleVisible,
-          menuData,
-          onClick,
-          companyLogoNormalUrl,
-          companyLogoSmallUrl,
-          isItemActive,
-          expandedWidth,
-          classes,
-          companyName,
-          onToggleOverlay,
-          overlay
-        },
-        children
-      }
-    )
-  );
-};
-const useSideBar = () => useContext(SideBarContext);
-const SIDEBAR_PREFIX = "M4LSideBar";
-const getNameDataTestId = (KEY) => {
-  return `${SIDEBAR_PREFIX}-${KEY}`;
-};
-const NavItemMainContent = (props) => {
-  const { item, onClick, handlerOpen, changeVisible, open } = props;
-  const { title, icon_url: icon, children } = item;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useSideBar();
-  const isDesktop = useResponsiveDesktop();
-  const handlerClick = (event) => {
-    onClick && onClick(item);
-    handlerOpen && handlerOpen(event);
-    !isDesktop && changeVisible && changeVisible();
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      className: classes.navItemRootContent,
-      id: "WrapperNavItemRootContent",
-      onClick: handlerClick,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.navItemRootContentIconTypo, children: [
-          icon ? /* @__PURE__ */ jsx(
-            Icon,
-            {
-              src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/${icon}`
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(Typography, { variant: "paragraph", color: "text.secondary", children: title })
-        ] }),
-        children ? /* @__PURE__ */ jsx(ArrowIcon, { openState: open }) : null
-      ]
-    }
-  );
-};
-function NavItemMain(props) {
-  const { item, setOpen, open } = props;
-  const { children } = item;
-  const { onClick, isItemActive, onToggleVisible, classes } = useSideBar();
-  const active = isItemActive(item);
-  if (children) {
-    return /* @__PURE__ */ jsx(
-      NavItemMainRoot,
-      {
-        className: classes.navItemMainRoot,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot") } : {},
-        onClick: () => setOpen((lastOpen) => !lastOpen),
-        activeRoot: active,
-        children: /* @__PURE__ */ jsx(NavItemMainContent, { item, open })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    NavItemMainRoot,
-    {
-      activeRoot: active,
-      className: classes.navItemMainRoot,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot") } : {},
-      children: /* @__PURE__ */ jsx(
-        NavItemMainContent,
-        {
-          item,
-          onClick,
-          changeVisible: onToggleVisible,
-          open
-        }
-      )
-    }
-  );
-}
-const NavSubItemContent = (props) => {
-  const { item, onClick, closePopover = () => {
-  }, setOpenSub, openSub } = props;
-  const { title, icon_url } = item;
-  const { isItemActive, onToggleVisible, classes } = useSideBar();
-  const active = isItemActive(item);
-  const isDesktop = useResponsiveDesktop();
-  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const handlerClick = () => {
-    onClick(item);
-    if (!hasChildren || hasChildren === void 0) {
-      closePopover();
-    }
-    setOpenSub((val) => !val);
-    if (!isDesktop && (!hasChildren || hasChildren === void 0)) {
-      onToggleVisible();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    NavSubItemContentRoot,
-    {
-      onClick: handlerClick,
-      disableRipple: true,
-      className: clsx(
-        classes.navSubItemContentRoot,
-        active && classes.subItemActive,
-        hasChildren && openSub ? classes.subItemCollapseActive : ""
-      ),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("navSubItemContentRoot") } : {},
-      children: [
-        icon_url && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/${icon_url}`
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { variant: "body", children: title }),
-        hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: openSub }) : null
-      ]
-    }
-  );
-};
-function NavSubItem(props) {
-  const { item, closePopover, setOpenSub, openSub } = props;
-  const { onClick } = useSideBar();
-  return /* @__PURE__ */ jsx(
-    NavSubItemContent,
-    {
-      item,
-      onClick: () => onClick(item),
-      closePopover,
-      setOpenSub,
-      openSub
-    }
-  );
-}
-function NavListSubItem(props) {
-  const { item: list, closePopover = () => {
-  } } = props;
-  const { setAncestorActive } = useBase();
-  const [internalItemActive, setInternalItemActive] = useState(false);
-  const { classes, isItemActive } = useSideBar();
-  const active = isItemActive(list);
-  const [openSub, setOpenSub] = useState(false);
-  const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
-  const location = useLocation();
-  useEffect(() => {
-    let mounted = true;
-    if (mounted) {
-      if (active || internalItemActive) {
-        setAncestorActive(true);
-      } else {
-        setAncestorActive(false);
-      }
-    }
-    return function cleanUp() {
-      setAncestorActive(false);
-      mounted = false;
-    };
-  }, [active, internalItemActive, location.search]);
-  return /* @__PURE__ */ jsx(
-    NavListSubItemRoot,
-    {
-      className: clsx(
-        classes.navListSubItemRoot,
-        active || internalItemActive ? classes.subItemActive : null
-      ),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("navListSubItemRoot") } : {},
-      children: hasChildren ? /* @__PURE__ */ jsx(
-        BaseProvider,
-        {
-          value: {
-            ancestorActive: internalItemActive,
-            setAncestorActive: setInternalItemActive
-          },
-          children: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              NavSubItem,
-              {
-                item: list,
-                openSub,
-                setOpenSub,
-                closePopover
-              }
-            ),
-            /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, { item, closePopover }, item.title)) })
-          ] })
-        }
-      ) : /* @__PURE__ */ jsx(
-        NavSubItem,
-        {
-          item: list,
-          openSub,
-          setOpenSub,
-          closePopover
-        }
-      )
-    }
-  );
-}
-function ItemListMain(props) {
-  const { list } = props;
-  const { isItemActive, classes } = useSideBar();
-  const location = useLocation();
-  const [internalItemActive, setInternalItemActive] = useState(false);
-  const [active, setActive] = useState(false);
-  const childrens = [];
-  const findChildren = (list2) => {
-    const moduleId = list2.children ? list2.children[0].module_id : void 0;
-    if (moduleId) {
-      childrens.push(moduleId);
-      list2.children && findChildren(list2.children[0]);
-    }
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (mounted) {
-      setActive(false);
-      setActive(isItemActive(list));
-      if (mounted && !active) {
-        findChildren(list);
-        for (let i = 0; i < childrens.length; i++) {
-          if (isItemActive({ title: "", module_id: childrens[i] })) {
-            setActive(true);
-            break;
-          }
-        }
-      }
-    }
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [location.search]);
-  const [open, setOpen] = useState(true);
-  const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
-  if (hasChildren) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        className: clsx(
-          classes.itemListMainRoot,
-          active || internalItemActive ? classes.itemMainActive : null
-        ),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot") } : {},
-        children: /* @__PURE__ */ jsxs(
-          BaseProvider,
-          {
-            value: {
-              ancestorActive: internalItemActive,
-              setAncestorActive: setInternalItemActive
-            },
-            children: [
-              /* @__PURE__ */ jsx(NavItemMain, { item: list, open, setOpen }),
-              /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: (list.children || []).map((item) => /* @__PURE__ */ jsx(
-                ContainerListSubItem,
-                {
-                  className: classes.containerListSubItem,
-                  ...process.env.NODE_ENV !== "production" ? {
-                    [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
-                  } : {},
-                  children: /* @__PURE__ */ jsx(NavListSubItem, { item }, item.title)
-                },
-                item.title
-              )) })
-            ]
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(classes.itemListMainRoot, active ? classes.itemMainActive : null),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot") } : {},
-      children: /* @__PURE__ */ jsx(NavItemMain, { item: list, open, setOpen })
-    }
-  );
-}
-const ContentGroups = () => {
-  const { menuData, classes } = useSideBar();
-  const [itemMainActive, setItemMainActive] = useState(-1);
-  if (menuData && menuData.length > 0) {
-    return /* @__PURE__ */ jsxs(
-      ContentGroupsRoot,
-      {
-        className: classes.contentGroups,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("contentGroups") } : {},
-        children: [
-          /* @__PURE__ */ jsx("div", { className: classes.contentGroupsLine }),
-          menuData.map((group) => /* @__PURE__ */ jsxs(
-            WrapperGroup,
-            {
-              className: classes.wrapperGroup,
-              ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("wrapperGroup") } : {},
-              children: [
-                /* @__PURE__ */ jsx(WrapperGroupTitle, { className: classes.wrapperGroupTitle, children: /* @__PURE__ */ jsx(Typography, { variant: "paragraphDens", skeletonWidth: "100px", children: group.title }) }),
-                /* @__PURE__ */ jsx("div", { className: classes.itemListMainRootContainer, children: group.children?.map((list, id) => /* @__PURE__ */ jsx(
-                  ItemListMain,
-                  {
-                    list,
-                    itemMainActive,
-                    setItemMainActive,
-                    id
-                  },
-                  id
-                )) })
-              ]
-            },
-            group.title
-          ))
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    ContentGroupsRoot,
-    {
-      className: classes.contentGroups,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("contentGroups") } : {}
-    }
-  );
-};
-function FooterSidebar(_props) {
-  const { classes, companyLogoNormalUrl } = useSideBar();
-  return /* @__PURE__ */ jsx(
-    CollapseButtonRoot,
-    {
-      className: classes.footer,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("footer") } : {},
-      children: /* @__PURE__ */ jsx("div", { className: classes.wrapperLogoFooter, children: /* @__PURE__ */ jsx("div", { className: classes.containerLogoButtonLogo, children: /* @__PURE__ */ jsx(
-        Image,
-        {
-          width: "192px",
-          height: "28px",
-          src: companyLogoNormalUrl || "",
-          alt: "logo"
-        },
-        "Logo"
-      ) }) })
-    }
-  );
-}
-const MENU_COLLAPSED_SIZE = "14px";
-const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
-const ContentComponent = () => {
-  const { collapsed, onToggleCollapse, classes, onToggleOverlay, overlay } = useSideBar();
-  const handlerOnMouseEnter = () => {
-    if (collapsed) {
-      onToggleOverlay(true);
-    }
-  };
-  const handlerOnMouseLeave = () => {
-    if (collapsed) {
-      onToggleOverlay(false);
-    }
-  };
-  const handlerOnMouseEnterIconButton = () => {
-    if (collapsed && overlay) {
-      onToggleOverlay(true);
-    }
-  };
-  const handlerOnMouseLeaveIconButton = () => {
-    if (collapsed && overlay) {
-      onToggleOverlay(false);
-    }
-  };
-  const handleButtonClick = () => {
-    onToggleCollapse();
-  };
-  const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(classes.contentDesktop, overlay && classes.overlapping),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("contentDesktop") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            variant: "line",
-            rotationAngle: !collapsed ? 180 : 0,
-            onClick: () => handleButtonClick(),
-            onMouseEnter: () => handlerOnMouseEnterIconButton(),
-            onMouseLeave: () => handlerOnMouseLeaveIconButton(),
-            className: classes.collapseButton,
-            src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: classes.containerContentGroupsFooter,
-            style: { minWidth: MENU_COLLAPSED_CONTAINER_SIZE },
-            onMouseEnter: () => handlerOnMouseEnter(),
-            onMouseLeave: () => handlerOnMouseLeave(),
-            children: [
-              /* @__PURE__ */ jsx(ContentGroups, {}),
-              /* @__PURE__ */ jsx(FooterSidebar, { onToggleCollapse, collapsed })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const ContentDesktop = () => {
-  const { classes, collapsed, expandedWidth, overlay } = useSideBar();
-  const areaExpandMenuSize = collapsed ? !overlay ? MENU_COLLAPSED_SIZE : expandedWidth : expandedWidth;
-  return /* @__PURE__ */ jsx("div", { className: classes.areaExpandMenu, style: { width: areaExpandMenuSize }, children: /* @__PURE__ */ jsx(ContentComponent, {}) });
-};
-const Drawer = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(Drawer$1, { ...props, children });
-};
-const ContentMobile = () => {
-  const {
-    visible,
-    onToggleVisible,
-    companyLogoSmallUrl,
-    expandedWidth,
-    collapsed,
-    classes,
-    companyName
-  } = useSideBar();
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      open: visible,
-      onClose: onToggleVisible,
-      PaperProps: { sx: { width: expandedWidth } },
-      className: classes.drawer,
-      sx: { ...theme.components?.M4LSideBarDrawer?.styleOverrides },
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes.lineLeft,
-            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("lineLeft") } : {}
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          WrapperContentMobile,
-          {
-            className: classes.contentMobile,
-            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("contentMobile") } : {},
-            children: [
-              companyLogoSmallUrl ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: classes.containerSideBarLogo,
-                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerSideBarLogo") } : {},
-                  children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: classes.containerLogo,
-                      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerLogo") } : {},
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Image,
-                          {
-                            width: "40px",
-                            height: "40px",
-                            src: companyLogoSmallUrl,
-                            alt: "logo"
-                          },
-                          "Logo"
-                        ),
-                        !collapsed && /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", skeletonWidth: "100px", children: companyName })
-                      ]
-                    }
-                  )
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(ContentGroups, {})
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
-const SideBar = (props) => {
-  const {
-    collapsed,
-    visible,
-    onToggleCollapse,
-    onToggleVisible,
-    menuData,
-    onClick,
-    companyLogoNormalUrl,
-    companyLogoSmallUrl,
-    isItemActive,
-    expandedWidth = "280px",
-    companyName,
-    variantStyle = "variantDefault"
-  } = 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, {})
-              }
-            )
-          }
-        )
-      }
-    )
-  );
-};
-export {
-  SideBar as S,
-  getNameDataTestId as g,
-  useSideBar as u
-};