@m4l/components 0.2.35 → 1.0.0

package/components/SideBar/index.629ba840.js

@@ -0,0 +1,849 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled, alpha } from "@mui/material/styles";
+import { createContext, useState, useContext, useEffect } from "react";
+import { generateUtilityClasses, ListItemText, styled as styled$1, ListItemButton, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { a2 as componentName, a3 as SIDEBAR_PREFIX, T as TEST_PROP_ID, a4 as MENU_COLLAPSED_CONTAINER_SIZE, a5 as MENU_COLLAPSED_SIZE } from "../areas/constants.5387d83e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
+import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { I as Icon, A as ArrowIcon, a as IconButton } from "../Icon/index.d5fed418.js";
+import { T as Typography } from "../../vendor.a1ce6777.js";
+import clsx from "clsx";
+import { useLocation } from "react-router-dom";
+import { I as Image } from "../Image/index.36a3d440.js";
+import { useResponsive } from "@m4l/styles";
+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)
+}));
+generateUtilityClasses(
+  componentName,
+  [
+    "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",
+    "collapsed",
+    "visible",
+    "subItemActive",
+    "itemMainActive",
+    "variantDefault",
+    "variantComercial",
+    "overlapping"
+  ]
+);
+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
+  };
+};
+const initialState = {
+  collapsed: false,
+  visible: true,
+  onToggleCollapse: () => {
+  },
+  onToggleVisible: () => {
+  },
+  onToggleOverlay: () => {
+  },
+  overlay: false,
+  menuData: [],
+  companyLogoNormalUrl: "",
+  companyLogoSmallUrl: "",
+  onClick: () => {
+  },
+  isItemActive: () => false,
+  expandedWidth: "",
+  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 /* @__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 useSideBar$1 = useSideBar;
+const getNameDataTestId = (KEY) => {
+  return `${SIDEBAR_PREFIX}-${KEY}`;
+};
+const WrapperGroup = styled("ul")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  listStyle: "none",
+  padding: "0px"
+}));
+const ContentGroupsRoot = styled("ul")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}));
+const WrapperGroupTitle = styled("li")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.overline,
+  paddingTop: theme.spacing(3),
+  paddingLeft: theme.spacing(2),
+  paddingBottom: theme.spacing(1),
+  color: theme.vars.palette.text.primary,
+  transition: theme.transitions.create("opacity", {
+    duration: theme.transitions.duration.shorter
+  })
+}));
+const NavItemMainRoot = styled("div", {
+  shouldForwardProp: (prop) => prop !== "activeRoot"
+})(({ activeRoot, theme }) => ({
+  ...activeRoot && {
+    ...theme.colorSchemes.finalTheme.typography.subtitle2,
+    color: theme.vars.palette.primary.main,
+    backgroundColor: alpha(
+      theme.colorSchemes.finalTheme.palette.primary.main,
+      theme.vars.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 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$1();
+  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$1();
+  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 ContainerListSubItem = styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "auto",
+  paddingLeft: theme.spacing(2.75)
+}));
+const NavListSubItemRoot = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const NavSubItemContentRoot = styled(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("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.vars.palette.text.disabled,
+    ...active && {
+      transform: "scale(1.5)",
+      backgroundColor: theme.vars.palette.primary.main
+    }
+  }
+}));
+const NavSubItemContent = (props) => {
+  const { item, onClick, closePopover = () => {
+  }, setOpenSub, openSub } = props;
+  const { title, icon_url } = item;
+  const { isItemActive, onToggleVisible, classes } = useSideBar$1();
+  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$1();
+  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$1();
+  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$1();
+  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$1();
+  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") } : {}
+    }
+  );
+};
+const CollapseButtonRoot = styled$1("div")(() => ({
+  display: "flex"
+}));
+styled$1("div")(() => ({
+  display: "flex"
+}));
+function FooterSidebar(_props) {
+  const { classes, companyLogoNormalUrl } = useSideBar$1();
+  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 ContentComponent = () => {
+  const { collapsed, onToggleCollapse, classes, onToggleOverlay, overlay } = useSideBar$1();
+  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$1();
+  const areaExpandMenuSize = collapsed ? !overlay ? MENU_COLLAPSED_SIZE : expandedWidth : expandedWidth;
+  return /* @__PURE__ */ jsx("div", { className: classes.areaExpandMenu, style: { width: areaExpandMenuSize }, children: /* @__PURE__ */ jsx(ContentComponent, {}) });
+};
+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 Drawer = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(Drawer$1, { ...props, children });
+};
+const ContentMobile = () => {
+  const {
+    visible,
+    onToggleVisible,
+    companyLogoSmallUrl,
+    expandedWidth,
+    collapsed,
+    classes,
+    companyName
+  } = useSideBar$1();
+  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 /* @__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,
+            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$1 as u
+};