@m4l/components 0.2.35 → 0.2.36

package/components/SideBar/index.b0359a2b.js

@@ -1,916 +0,0 @@
-import { styled, generateUtilityClasses, ListItemText, ListItemButton, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
-import { createContext, useState, useContext, useEffect } from "react";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { styled as styled$1, alpha } from "@mui/material/styles";
-import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.ad330e78.js";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import clsx from "clsx";
-import { useLocation } from "react-router-dom";
-import { I as Image } from "../Image/index.b799c514.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.f8a3021b.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)
-}));
-const componentName = "M4LSideBar";
-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 SIDEBAR_PREFIX = "M4LSideBar";
-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.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
-  })
-}));
-const NavItemMainRoot = styled$1("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$1(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", {
-    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(Fragment, {
-      children: /* @__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("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.palette.text.disabled,
-    ...active && {
-      transform: "scale(1.5)",
-      backgroundColor: theme.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("div")(() => ({
-  display: "flex"
-}));
-styled("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 MENU_COLLAPSED_SIZE = "14px";
-const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
-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("div")(({
-  theme
-}) => ({
-  "& .m4l_image": {
-    display: "flex",
-    gap: theme.spacing(3),
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }
-}));
-styled("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
-};