@m4l/components 0.1.62 → 0.1.63

package/components/SideBar/index.011880b6.js

@@ -0,0 +1,1010 @@
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useEnvironment } from "@m4l/core";
+import { createContext, useContext, useState } from "react";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { I as Image } from "../Image/index.1a9c0327.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.be9c2ce5.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled as styled$1, ListItemText, ListItemButton, Collapse, Skeleton, generateUtilityClasses, Drawer } from "@mui/material";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.0f9b360e.js";
+import { T as Typography } from "../mui_extended/Typography/index.41b60a6b.js";
+import clsx from "clsx";
+import { P as Popover } from "../mui_extended/Popover/index.260aae81.js";
+import { S as ScrollBar } from "../ScrollBar/index.bbe48f4d.js";
+import { styled, alpha } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../utils/index.e199226a.js";
+const SideBarRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LSideBar?.styleOverrides
+}));
+styled("div", {
+  shouldForwardProp: (props) => props !== "collapsed"
+})((props) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: props.collapsed ? "center" : "normal",
+  padding: props.theme.spacing(3, 2.5, 2, 2.5)
+}));
+const WrapperSideBar = styled("div", {
+  shouldForwardProp: (props) => props !== "width" && props !== "visible"
+})(({
+  width,
+  visible,
+  theme
+}) => ({
+  width,
+  transition: theme.transitions.create("width", {
+    duration: theme.transitions.duration.shorter
+  }),
+  opacity: 1,
+  ...!visible && {
+    width: 0,
+    opacity: 0
+  },
+  [theme.breakpoints.down("sm")]: {
+    position: "absolute"
+  }
+}));
+const WrapperContentDesktop = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  "& .m4l_image": {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}));
+const CollapseButtonRoot = styled$1("div")(() => ({
+  display: "flex"
+}));
+const ContainerLogoButton = styled$1("div")(() => ({
+  display: "flex"
+}));
+const initialState = {
+  collapsed: false,
+  visible: true,
+  onToggleCollapse: () => {
+  },
+  onToggleVisible: () => {
+  },
+  menuData: [],
+  companyLogoNormalUrl: "",
+  companyLogoSmallUrl: "",
+  onClick: () => {
+  },
+  isItemActive: () => false,
+  collapsedWidht: "",
+  unCollapsedWidht: "",
+  classes: {},
+  companyName: ""
+};
+const SideBarContext = createContext(initialState);
+const SideBarProvider = (props) => {
+  const {
+    value,
+    children
+  } = props;
+  const {
+    collapsed,
+    visible,
+    onToggleCollapse,
+    onToggleVisible,
+    menuData,
+    onClick,
+    companyLogoNormalUrl,
+    companyLogoSmallUrl,
+    isItemActive,
+    collapsedWidht,
+    unCollapsedWidht,
+    classes,
+    companyName
+  } = value;
+  return /* @__PURE__ */ jsx(SideBarContext.Provider, {
+    value: {
+      collapsed,
+      visible,
+      onToggleCollapse,
+      onToggleVisible,
+      menuData,
+      onClick,
+      companyLogoNormalUrl,
+      companyLogoSmallUrl,
+      isItemActive,
+      collapsedWidht,
+      unCollapsedWidht,
+      classes,
+      companyName
+    },
+    children
+  });
+};
+const useSideBar = () => useContext(SideBarContext);
+const SIDEBAR_PREFIX = "M4LSideBar";
+const getNameDataTestId = (KEY) => {
+  return `${SIDEBAR_PREFIX}-${KEY}`;
+};
+function CollapseButton(props) {
+  const {
+    onToggleCollapse,
+    collapsed
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    classes,
+    companyLogoNormalUrl
+  } = useSideBar();
+  return /* @__PURE__ */ jsx(CollapseButtonRoot, {
+    className: classes.collapseButton,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("collapseButton")
+    } : {},
+    children: /* @__PURE__ */ jsxs(ContainerLogoButton, {
+      className: classes.containerLogoButton,
+      children: [!collapsed && /* @__PURE__ */ jsx("div", {
+        className: classes.containerLogoButtonLogo,
+        children: /* @__PURE__ */ jsx(Image, {
+          width: "100%",
+          height: "100%",
+          src: companyLogoNormalUrl,
+          alt: "logo"
+        }, "Logo")
+      }), /* @__PURE__ */ jsxs("div", {
+        className: classes.containerLogoButtonIcon,
+        style: {
+          transform: `rotate(${collapsed ? 0 : 180}deg)`
+        },
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.collapseButtontriangleTop
+        }), /* @__PURE__ */ jsx(IconButton, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`,
+          onClick: onToggleCollapse
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.collapseButtontriangleBottom
+        })]
+      })]
+    })
+  });
+}
+const WrapperGroup = styled$1("ul")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  listStyle: "none",
+  padding: "0px"
+}));
+const ContentGroupsRoot = styled$1("ul")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}));
+const WrapperGroupTitle = styled$1("li", {
+  shouldForwardProp: (props) => props !== "collapsed"
+})(({
+  collapsed,
+  theme
+}) => ({
+  ...theme.typography.overline,
+  paddingTop: theme.spacing(3),
+  paddingLeft: theme.spacing(2),
+  paddingBottom: theme.spacing(1),
+  color: theme.palette.text.primary,
+  transition: theme.transitions.create("opacity", {
+    duration: theme.transitions.duration.shorter
+  }),
+  ...collapsed && {
+    opacity: 0,
+    width: 0,
+    overflowX: "hidden"
+  }
+}));
+const NavItemMainRoot = styled("div", {
+  shouldForwardProp: (prop) => prop !== "activeRoot"
+})(({
+  activeRoot,
+  theme
+}) => ({
+  ...activeRoot && {
+    ...theme.typography.subtitle2,
+    color: theme.palette.primary.main,
+    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+  }
+}));
+styled(ListItemText, {
+  shouldForwardProp: (prop) => prop !== "isCollapse"
+})(({
+  isCollapse,
+  theme
+}) => ({
+  whiteSpace: "nowrap",
+  transition: theme.transitions.create(["width", "opacity"], {
+    duration: theme.transitions.duration.shorter
+  }),
+  ...isCollapse && {
+    width: 0,
+    opacity: 0
+  }
+}));
+const NavItemMainContentRoot = styled$1("div", {
+  shouldForwardProp: (props) => props !== "collapsed"
+})(({
+  collapsed
+}) => ({
+  ...collapsed && {
+    padding: "0",
+    display: "block"
+  },
+  "& .M4LTypography-root": {
+    ...collapsed && {
+      width: 0,
+      opacity: 0
+    }
+  },
+  "& .m4l_icon": {
+    ...collapsed && {
+      width: "100%",
+      height: "100%"
+    }
+  }
+}));
+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 {
+    collapsed,
+    isItemActive,
+    classes
+  } = useSideBar();
+  const active = isItemActive(item);
+  console.log("NavItemRootContent active", active);
+  const isDesktop = useResponsiveDesktop();
+  const handlerClick = (event) => {
+    onClick && onClick(item);
+    handlerOpen && handlerOpen(event);
+    !isDesktop && changeVisible && changeVisible();
+  };
+  return /* @__PURE__ */ jsxs(NavItemMainContentRoot, {
+    className: classes.navItemRootContent,
+    collapsed,
+    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: !collapsed ? title : " "
+      })]
+    }), !collapsed && children ? /* @__PURE__ */ jsx(ArrowIcon, {
+      openState: open
+    }) : null]
+  });
+};
+const NavListSubItemRoot = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const NavSubItemContentRoot = styled$1(ListItemButton)(({
+  theme
+}) => ({
+  display: "flex",
+  padding: theme.spacing(0, 2),
+  alignItems: "center",
+  height: theme.spacing(6),
+  borderRadius: theme.spacing(1),
+  "& .m4l_icon": {
+    marginRight: theme.spacing(1)
+  }
+}));
+styled$1("span", {
+  shouldForwardProp: (props) => props !== "active"
+})(({
+  theme,
+  active
+}) => ({
+  width: "22px",
+  height: "22px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "50%",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shorter
+  }),
+  "&::before": {
+    content: '""',
+    width: "4px",
+    height: "4px",
+    borderRadius: "50%",
+    backgroundColor: theme.palette.text.disabled,
+    ...active && {
+      transform: "scale(1.5)",
+      backgroundColor: theme.palette.primary.main
+    }
+  }
+}));
+const NavSubItemContent = (props) => {
+  const {
+    item,
+    onClick,
+    closePopover = () => {
+    }
+  } = props;
+  const {
+    title
+  } = item;
+  const {
+    isItemActive,
+    onToggleVisible,
+    classes
+  } = useSideBar();
+  const active = isItemActive(item);
+  const isDesktop = useResponsiveDesktop();
+  const handlerClick = () => {
+    onClick(item);
+    closePopover();
+    if (!isDesktop) {
+      onToggleVisible();
+    }
+  };
+  return /* @__PURE__ */ jsxs(NavSubItemContentRoot, {
+    onClick: handlerClick,
+    disableRipple: true,
+    className: clsx(classes.navSubItemContentRoot, active && classes.subItemActive),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("navSubItemContentRoot")
+    } : {},
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.navSubItemContentBullet
+    }), /* @__PURE__ */ jsx(Typography, {
+      variant: "body",
+      children: title
+    })]
+  });
+};
+function NavSubItem(props) {
+  const {
+    item,
+    closePopover
+  } = props;
+  const {
+    onClick
+  } = useSideBar();
+  return /* @__PURE__ */ jsx(NavSubItemContent, {
+    item,
+    onClick: () => onClick(item),
+    closePopover
+  });
+}
+function NavListSubItem(props) {
+  const {
+    item: list,
+    closePopover = () => {
+    },
+    setSubItemActive
+  } = props;
+  const {
+    isItemActive,
+    classes
+  } = useSideBar();
+  const active = isItemActive(list);
+  const [openSub, setOpenSub] = useState(active);
+  const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
+  return /* @__PURE__ */ jsx(NavListSubItemRoot, {
+    className: classes.navListSubItemRoot,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("navListSubItemRoot")
+    } : {},
+    children: hasChildren ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(NavSubItem, {
+        item: list,
+        open: openSub,
+        setOpen: setOpenSub,
+        closePopover
+      }), /* @__PURE__ */ jsx(Collapse, {
+        in: openSub,
+        timeout: "auto",
+        unmountOnExit: true,
+        children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
+          item,
+          setSubItemActive
+        }, item.title))
+      })]
+    }) : /* @__PURE__ */ jsx(NavSubItem, {
+      item: list,
+      open: openSub,
+      setOpen: setOpenSub,
+      closePopover
+    })
+  });
+}
+function NavItemMain(props) {
+  const {
+    item,
+    setOpen,
+    open
+  } = props;
+  const {
+    children
+  } = item;
+  const {
+    collapsed,
+    onClick,
+    isItemActive,
+    onToggleVisible,
+    classes
+  } = useSideBar();
+  const [popoverStatus, setPopoverStatus] = useState(null);
+  const active = isItemActive(item);
+  const handleOpen = (event) => {
+    setPopoverStatus(event.currentTarget);
+  };
+  const handleClose = () => {
+    setPopoverStatus(null);
+  };
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [collapsed && /* @__PURE__ */ jsxs(NavItemMainRoot, {
+        activeRoot: active,
+        className: classes.navItemMainRoot,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
+        } : {},
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.navItemMainTriangleTop
+        }), /* @__PURE__ */ jsx(NavItemMainContent, {
+          item,
+          handlerOpen: handleOpen,
+          open
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.navItemMainTriangleBottom
+        }), /* @__PURE__ */ jsx(Popover, {
+          className: classes.popover,
+          open: Boolean(popoverStatus),
+          anchorEl: popoverStatus,
+          onClose: handleClose,
+          arrowType: "left-center",
+          sx: {
+            ml: "14px"
+          },
+          anchorOrigin: {
+            vertical: "center",
+            horizontal: "right"
+          },
+          transformOrigin: {
+            vertical: "center",
+            horizontal: "left"
+          },
+          children: (item.children || []).map((itemList) => /* @__PURE__ */ jsx(NavListSubItem, {
+            item: itemList,
+            closePopover: handleClose
+          }, itemList.title))
+        })]
+      }), !collapsed && /* @__PURE__ */ jsxs(NavItemMainRoot, {
+        className: classes.navItemMainRoot,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
+        } : {},
+        onClick: () => setOpen((lastOpen) => !lastOpen),
+        activeRoot: active,
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.navItemMainTriangleTop
+        }), /* @__PURE__ */ jsx(NavItemMainContent, {
+          item,
+          open
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.navItemMainTriangleBottom
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(NavItemMainRoot, {
+    activeRoot: active,
+    className: classes.navItemMainRoot,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
+    } : {},
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.navItemMainTriangleTop
+    }), /* @__PURE__ */ jsx(NavItemMainContent, {
+      item,
+      onClick,
+      changeVisible: onToggleVisible,
+      open
+    }), /* @__PURE__ */ jsx("div", {
+      className: classes.navItemMainTriangleBottom
+    })]
+  });
+}
+const ContainerListSubItem = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "auto",
+  paddingLeft: theme.spacing(2.75)
+}));
+function ItemListMain(props) {
+  const {
+    list,
+    setItemMainActive,
+    itemMainActive,
+    id
+  } = props;
+  const {
+    collapsed: isSideBarCollapsed,
+    isItemActive,
+    classes
+  } = useSideBar();
+  const active = isItemActive(list);
+  const [subItemActive, setSubItemActive] = useState(false);
+  const [open, setOpen] = useState(active);
+  const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
+  console.log("test item active equal", itemMainActive === id);
+  if (hasChildren) {
+    return /* @__PURE__ */ jsxs("div", {
+      className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
+      } : {},
+      onClick: () => setItemMainActive(id),
+      children: [/* @__PURE__ */ jsx(NavItemMain, {
+        item: list,
+        open,
+        setOpen,
+        subItemActive
+      }), !isSideBarCollapsed && /* @__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,
+            setSubItemActive
+          }, item.title)
+        }, item.title))
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
+    } : {},
+    onClick: () => setItemMainActive(id),
+    children: /* @__PURE__ */ jsx(NavItemMain, {
+      item: list,
+      open,
+      setOpen
+    })
+  });
+}
+const WrapperSKTNavSectionVertical = styled$1("div", {
+  shouldForwardProp: (props) => props !== "collapse"
+})(({
+  theme,
+  collapse
+}) => ({
+  margin: "0",
+  padding: "0",
+  position: "relative",
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  marginTop: collapse ? "50px" : "0px",
+  height: "100%",
+  paddingTop: "100px"
+}));
+const NavSectionVerticalItem = styled$1("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "20px 1fr",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  width: "100%",
+  padding: theme.spacing(1, 1.5, 1, 0.5),
+  marginBottom: theme.spacing(0.5),
+  height: theme.spacing(6)
+}));
+const NavSectionVerticalTitle = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  height: "50px",
+  padding: theme.spacing(3, 0, 1, 2)
+}));
+const SkeletonNavSectionVertical = () => {
+  const {
+    collapsed,
+    classes
+  } = useSideBar();
+  return /* @__PURE__ */ jsxs(WrapperSKTNavSectionVertical, {
+    collapse: collapsed,
+    className: classes.skeleton,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("skeleton")
+    } : {},
+    children: [!collapsed && /* @__PURE__ */ jsx(NavSectionVerticalTitle, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        height: "14px",
+        width: "80px"
+      })
+    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "22px",
+        height: "22px"
+      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        height: "14px",
+        width: "100%"
+      })]
+    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "22px",
+        height: "22px"
+      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        height: "14px",
+        width: "100%"
+      })]
+    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "22px",
+        height: "22px"
+      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        height: "14px",
+        width: "100%"
+      })]
+    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "22px",
+        height: "22px"
+      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        height: "14px",
+        width: "100%"
+      })]
+    })]
+  });
+};
+const ContentGroups = () => {
+  const {
+    collapsed,
+    menuData,
+    classes
+  } = useSideBar();
+  const [itemMainActive, setItemMainActive] = useState(-1);
+  console.log("valor del item main active", itemMainActive);
+  if (menuData && menuData.length > 0) {
+    return /* @__PURE__ */ jsx(ContentGroupsRoot, {
+      className: classes.contentGroups,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("contentGroups")
+      } : {},
+      children: /* @__PURE__ */ jsx(ScrollBar, {
+        children: /* @__PURE__ */ jsx(Fragment, {
+          children: menuData.map((group) => /* @__PURE__ */ jsxs(WrapperGroup, {
+            className: classes.wrapperGroup,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId("wrapperGroup")
+            } : {},
+            children: [/* @__PURE__ */ jsx(WrapperGroupTitle, {
+              collapsed,
+              className: classes.wrapperGroupTitle,
+              children: /* @__PURE__ */ jsx(Typography, {
+                variant: "paragraphDens",
+                skeletonWidth: "100px",
+                children: group.title
+              })
+            }), /* @__PURE__ */ jsx(ScrollBar, {
+              children: /* @__PURE__ */ jsx("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "100%",
+                  height: "auto"
+                },
+                children: group.children?.map((list, id) => /* @__PURE__ */ jsx(ItemListMain, {
+                  list,
+                  itemMainActive,
+                  setItemMainActive,
+                  id
+                }, id))
+              })
+            })]
+          }, group.title))
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(SkeletonNavSectionVertical, {});
+};
+const ContentDesktop = () => {
+  const {
+    collapsed,
+    onToggleCollapse,
+    companyLogoSmallUrl,
+    classes,
+    companyName
+  } = useSideBar();
+  return /* @__PURE__ */ jsxs(WrapperContentDesktop, {
+    className: classes.contentDesktop,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("contentDesktop")
+    } : {},
+    children: [/* @__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: "64px",
+          height: "64px",
+          src: companyLogoSmallUrl,
+          alt: "logo"
+        }, "Logo"), !collapsed && /* @__PURE__ */ jsx(Typography, {
+          variant: "subtitleDens",
+          skeletonWidth: "100px",
+          children: companyName
+        })]
+      })
+    }), /* @__PURE__ */ jsx(ContentGroups, {}), /* @__PURE__ */ jsx(CollapseButton, {
+      onToggleCollapse,
+      collapsed
+    })]
+  });
+};
+const componentName = "M4LSideBar";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "containerSideBarLogo",
+    "contentDesktop",
+    "contentMobile",
+    "collapseButton",
+    "containerLogo",
+    "contentGroups",
+    "wrapperGroup",
+    "wrapperGroupTitle",
+    "itemListMainRoot",
+    "containerListSubItem",
+    "navItemMainRoot",
+    "navItemRootContent",
+    "arrowIconRoot",
+    "navListSubItemRoot",
+    "navSubItemContentRoot",
+    "skeleton",
+    "lineLeft",
+    "wrapperSideBar",
+    "containerLogoButton",
+    "navItemMainTriangleTop",
+    "navItemMainTriangleBottom",
+    "navItemRootContentIconTypo",
+    "navSubItemContentBullet",
+    "containerLogoButtonLogo",
+    "containerLogoButtonIcon",
+    "collapseButtontriangleTop",
+    "collapseButtontriangleBottom",
+    "drawer",
+    "popover",
+    "collapsed",
+    "visible",
+    "subItemActive",
+    "itemMainActive"
+  ]
+);
+const getSideBarClassesByState = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.collapsed && "collapsed", ownerState.visible && "visible"],
+    containerSideBarLogo: ["containerSideBarLogo"],
+    contentDesktop: ["contentDesktop"],
+    contentMobile: ["contentMobile"],
+    collapseButton: ["collapseButton"],
+    containerLogo: ["containerLogo"],
+    contentGroups: ["contentGroups"],
+    wrapperGroup: ["wrapperGroup"],
+    wrapperGroupTitle: ["wrapperGroupTitle"],
+    itemListMainRoot: ["itemListMainRoot"],
+    containerListSubItem: ["containerListSubItem"],
+    navItemMainRoot: ["navItemMainRoot"],
+    navItemRootContent: ["navItemRootContent"],
+    arrowIconRoot: ["arrowIconRoot"],
+    navListSubItemRoot: ["navListSubItemRoot"],
+    navSubItemContentRoot: ["navSubItemContentRoot"],
+    skeleton: ["skeleton"],
+    subItemActive: ["subItemActive"],
+    lineLeft: ["lineLeft"],
+    wrapperSideBar: ["wrapperSideBar"],
+    containerLogoButton: ["containerLogoButton"],
+    itemMainActive: ["itemMainActive"],
+    navItemMainTriangleTop: ["navItemMainTriangleTop"],
+    navItemMainTriangleBottom: ["navItemMainTriangleBottom"],
+    navItemRootContentIconTypo: ["navItemRootContentIconTypo"],
+    navSubItemContentBullet: ["navSubItemContentBullet"],
+    containerLogoButtonLogo: ["containerLogoButtonLogo"],
+    containerLogoButtonIcon: ["containerLogoButtonIcon"],
+    collapseButtontriangleTop: ["collapseButtontriangleTop"],
+    collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
+    drawer: ["drawer"],
+    popover: ["popover"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
+const WrapperContentMobile = styled$1("div")(({
+  theme
+}) => ({
+  "& .m4l_image": {
+    display: "flex",
+    gap: theme.spacing(3),
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+}));
+styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "auto",
+  padding: theme.spacing(0, 2)
+}));
+const ContentMobile = () => {
+  const {
+    visible,
+    onToggleVisible,
+    companyLogoSmallUrl,
+    collapsedWidht,
+    collapsed,
+    classes,
+    companyName
+  } = useSideBar();
+  return /* @__PURE__ */ jsxs(Drawer, {
+    open: visible,
+    onClose: onToggleVisible,
+    PaperProps: {
+      sx: {
+        width: collapsedWidht
+      }
+    },
+    className: classes.drawer,
+    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: [/* @__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: "64px",
+            height: "64px",
+            src: companyLogoSmallUrl,
+            alt: "logo"
+          }, "Logo"), !collapsed && /* @__PURE__ */ jsx(Typography, {
+            variant: "subtitleDens",
+            skeletonWidth: "100px",
+            children: companyName
+          })]
+        })
+      }), /* @__PURE__ */ jsx(ContentGroups, {})]
+    })]
+  });
+};
+const SideBar = (props) => {
+  const {
+    collapsed,
+    visible,
+    onToggleCollapse,
+    onToggleVisible,
+    menuData,
+    onClick,
+    companyLogoNormalUrl,
+    companyLogoSmallUrl,
+    isItemActive,
+    collapsedWidht = "280px",
+    unCollapsedWidht = "72px",
+    companyName
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    collapsed,
+    visible
+  };
+  const classes = getSideBarClassesByState(ownerState);
+  return /* @__PURE__ */ jsx(SideBarRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(SideBarProvider, {
+      value: {
+        collapsed,
+        visible,
+        onToggleCollapse,
+        onToggleVisible,
+        menuData,
+        onClick,
+        companyLogoNormalUrl,
+        companyLogoSmallUrl,
+        isItemActive,
+        collapsedWidht,
+        unCollapsedWidht,
+        classes,
+        companyName
+      },
+      children: /* @__PURE__ */ jsxs(WrapperSideBar, {
+        className: classes.wrapperSideBar,
+        width: !collapsed ? collapsedWidht : unCollapsedWidht,
+        visible,
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.lineLeft,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId("lineLeft")
+          } : {}
+        }), isDesktop ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})]
+      })
+    })
+  });
+};
+export {
+  SideBar as S,
+  getNameDataTestId as g,
+  useSideBar as u
+};