@m4l/components 3.1.9 → 4.0.0

package/components/SideBar/classes/index-DwK5vHib.js

@@ -0,0 +1,131 @@
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants-CuvqF81L.js";
+import { g as getComponentUtilityClass } from "../../../utils/index-WXiWKKyo.js";
+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"
+        };
+        */
+  };
+};
+export {
+  getSideBarClassesByState as g
+};

package/components/SideBar/classes/index.d.ts

@@ -4,9 +4,9 @@ export declare const SideBarClasses: SideBarClassesType;
 export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     footer: string;
     root: string;
+    skeleton: string;
     popover: string;
     containerLogo: string;
-    skeleton: string;
     containerSideBarLogo: string;
     contentDesktop: string;
     contentMobile: string;

package/components/SideBar/constants-BRWf1smn.js

@@ -0,0 +1,6 @@
+const MENU_COLLAPSED_SIZE = "14px";
+const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+export {
+  MENU_COLLAPSED_SIZE as M,
+  MENU_COLLAPSED_CONTAINER_SIZE as a
+};

package/components/SideBar/context/sideBarContext/index-MO7cOTFM.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState } from "react";
+import { g as getSideBarClassesByState } from "../../classes/index-DwK5vHib.js";
+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
+      }
+    )
+  );
+};
+export {
+  SideBarProvider as S,
+  SideBarContext as a
+};

package/components/SideBar/hooks/useSideBar/index-CZiP3QRh.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { a as SideBarContext } from "../../context/sideBarContext/index-MO7cOTFM.js";
+const useSideBar = () => useContext(SideBarContext);
+export {
+  useSideBar as u
+};

package/components/SideBar/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/SideBar/styles-CfanC4Xb.js

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material/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)
+}));
+export {
+  SideBarRoot as S
+};

package/components/SideBar/subcomponents/ContentDesktop/index-DEDTBa3D.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useSideBar } from "../../hooks/useSideBar/index-CZiP3QRh.js";
+import { C as ContentComponent } from "./subcomponents/ContentComponent/index-MxIpbLF6.js";
+import { M as MENU_COLLAPSED_SIZE } from "../../constants-BRWf1smn.js";
+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, {}) });
+};
+export {
+  ContentDesktop as C
+};

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/CollapseButton/index-UhoigWQy.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { C as CollapseButtonRoot } from "./styles-Da6-kSdo.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../tests/utils-tW-XG1xE.js";
+import { I as Image } from "../../../../../Image/Image-BjqOt3pz.js";
+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"
+      ) }) })
+    }
+  );
+}
+export {
+  FooterSidebar as F
+};

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/CollapseButton/styles-Da6-kSdo.js

@@ -0,0 +1,10 @@
+import { styled } from "@mui/material";
+const CollapseButtonRoot = styled("div")(() => ({
+  display: "flex"
+}));
+styled("div")(() => ({
+  display: "flex"
+}));
+export {
+  CollapseButtonRoot as C
+};

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/ContentComponent/index-MxIpbLF6.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getNameDataTestId } from "../../../../tests/utils-tW-XG1xE.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock-CF-669v-.js";
+import { C as ContentGroups } from "../../../ContentGroups/index-S2HkF6xA.js";
+import { F as FooterSidebar } from "../CollapseButton/index-UhoigWQy.js";
+import clsx from "clsx";
+import { useEnvironment } from "@m4l/core";
+import { a as MENU_COLLAPSED_CONTAINER_SIZE } from "../../../../constants-BRWf1smn.js";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton-1jvQBFbH.js";
+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 })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ContentComponent as C
+};

package/components/SideBar/subcomponents/ContentGroups/index-S2HkF6xA.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { C as ContentGroupsRoot, W as WrapperGroup, a as WrapperGroupTitle } from "./styles-BejiSnJt.js";
+import { I as ItemListMain } from "./subcomponents/ItemListRoot/index-BwPVd-42.js";
+import { u as useSideBar } from "../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../tests/utils-tW-XG1xE.js";
+import { useState } from "react";
+import { T as Typography } from "../../../mui_extended/Typography/Typography-C_rG8K21.js";
+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") } : {}
+    }
+  );
+};
+export {
+  ContentGroups as C
+};

package/components/SideBar/subcomponents/ContentGroups/styles-BejiSnJt.js

@@ -0,0 +1,29 @@
+import { styled } from "@mui/material/styles";
+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
+  })
+}));
+export {
+  ContentGroupsRoot as C,
+  WrapperGroup as W,
+  WrapperGroupTitle as a
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/index-BwPVd-42.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Collapse } from "@mui/material";
+import { N as NavItemMain } from "./subcomponents/NavItemRoot/index-c8ZHSm8O.js";
+import { C as ContainerListSubItem } from "./styles-_I13xqtq.js";
+import { N as NavListSubItem } from "./subcomponents/NavListSub/index-C8DIt_9z.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../tests/utils-tW-XG1xE.js";
+import clsx from "clsx";
+import { BaseProvider } from "@m4l/core";
+import { useLocation } from "react-router-dom";
+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 })
+    }
+  );
+}
+export {
+  ItemListMain as I
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/styles-_I13xqtq.js

@@ -0,0 +1,9 @@
+import { styled } from "@mui/material/styles";
+const ContainerListSubItem = styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "auto",
+  paddingLeft: theme.spacing(2.75)
+}));
+export {
+  ContainerListSubItem as C
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/ArrowIcon/index-BFSPWIQ2.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { A as ArrowIconRoot } from "./styles-XF6qlczg.js";
+import { u as useSideBar } from "../../../../../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../../../tests/utils-tW-XG1xE.js";
+import { I as Icon } from "../../../../../../../Icon/Icon-_wceDYwV.js";
+function ArrowIcon(props) {
+  const { openState } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { classes } = useSideBar();
+  return /* @__PURE__ */ jsx(
+    ArrowIconRoot,
+    {
+      className: classes.arrowIconRoot,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("arrowIconRoot") } : {},
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
+          rotationAngle: openState ? 90 : 0
+        }
+      )
+    }
+  );
+}
+export {
+  ArrowIcon as A
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/ArrowIcon/styles-XF6qlczg.js

@@ -0,0 +1,9 @@
+import { styled } from "@mui/material";
+const ArrowIconRoot = styled("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+export {
+  ArrowIconRoot as A
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavItemRoot/index-c8ZHSm8O.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { N as NavItemMainRoot } from "./styles-B-bKLBgN.js";
+import { N as NavItemMainContent } from "./subcomponents/NavItemRootContent/index-NbDs8ek_.js";
+import { u as useSideBar } from "../../../../../../hooks/useSideBar/index-CZiP3QRh.js";
+import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../../../tests/utils-tW-XG1xE.js";
+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
+        }
+      )
+    }
+  );
+}
+export {
+  NavItemMain as N
+};