@m4l/components 7.0.0 → 7.1.2

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

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState } from "react";
+import { g as getSideBarClassesByState } from "../../classes/index.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/context/sideBarContext/types.d.ts

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { Classes, SideBarProps } from '../../types';
 /**
  * Valor proporcionado por el proveedor del contexto Sidebar.
- * @extends SideBarProps
  */
 export interface SideBarProviderValue extends SideBarProps {
     /**

package/components/SideBar/hooks/useSideBar/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @type Variable que almacena el uso del estado y ayuda a evitar prop drilling
+ * Variable que almacena el uso del estado y ayuda a evitar prop drilling
  */
-declare const useSideBar: () => import("../../context/sideBarContext/types").SideBarProviderValue;
+declare const useSideBar: () => import('../../context/sideBarContext/types').SideBarProviderValue;
 export default useSideBar;

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

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

package/components/SideBar/index.js

@@ -0,0 +1 @@
+

package/components/SideBar/styles.d.ts

@@ -1,20 +1,15 @@
-/// <reference types="react" />
 import { LogoConainerProps } from './types';
 /**
  * Componente estilizado que representa la raíz de la barra lateral.
- *
- * @component
  * @example
  * // Uso del componente
  * <SideBarRoot />
  */
-export declare const SideBarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SideBarRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * Componente estilizado que representa la raíz de la barra lateral.
- *
- * @component
  * @example
  * // Uso del componente
  * <SideBarRoot />
  */
-export declare const LogoContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LogoConainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LogoContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & LogoConainerProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/styles.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles";
+const SideBarRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LSideBar?.styleOverrides || {},
+  ...theme.generalSettings.isMobile ? {
+    backgroundColor: "red!important"
+  } : {
+    backgroundColor: "blue!important"
+  }
+}));
+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.d.ts

@@ -1,5 +1,4 @@
 /**
- *
- * @returns Renderiza el contenido que debe de tener los dispositipos desktop
+ * Renderiza el contenido que debe de tener los dispositipos desktop
  */
 export declare const ContentDesktop: () => import("react/jsx-runtime").JSX.Element;

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

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

@@ -1,13 +1,11 @@
-declare type CollapseButtonProps = {
+type CollapseButtonProps = {
     onToggleCollapse: VoidFunction;
     collapsed: boolean;
 };
 /**
- *
+ * Renderiza el footer del sidebar
  * @param {CollapseButtonProps} props - Propiedades del componente
- *
  * @param {VoidFunction} props.onToggleCollapse - Funcion que se encarga de activar el modo colapsado en desktop
- *
  * @param {VoidFunction} props.collapsed - Variable que guarda el estado de colapsado en desktop
  * @returns
  */

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { C as CollapseButtonRoot } from "./styles.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../../../tests/utils.js";
+import { I as Image } from "../../../../../Image/Image.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.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const CollapseButtonRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerLogoButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CollapseButtonRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerLogoButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/CollapseButton/styles.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/CollapseButton/types.d.ts

@@ -0,0 +1,5 @@
+export interface CollapseButtonProps {
+    onToggleCollapse: VoidFunction;
+    collapsed: boolean;
+}
+export type WrapperCollapseButtonProps = Pick<CollapseButtonProps, 'collapsed'>;

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/ContentComponent/index.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare const ContentComponent: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getNameDataTestId } from "../../../../tests/utils.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
+import { C as ContentGroups } from "../../../ContentGroups/index.js";
+import { F as FooterSidebar } from "../CollapseButton/index.js";
+import clsx from "clsx";
+import { useEnvironment } from "@m4l/core";
+import { a as MENU_COLLAPSED_CONTAINER_SIZE } from "../../../../constants.js";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.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: "text",
+            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.d.ts

@@ -1,5 +1,4 @@
 /**
- *
- *
+ * Renderiza el contenido de los grupos
  */
 export declare const ContentGroups: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { C as ContentGroupsRoot, W as WrapperGroup, a as WrapperGroupTitle } from "./styles.js";
+import { I as ItemListMain } from "./subcomponents/ItemListRoot/index.js";
+import { u as useSideBar } from "../../hooks/useSideBar/index.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../tests/utils.js";
+import { useState } from "react";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const WrapperGroup: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const ContentGroupsRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const WrapperGroupTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const WrapperGroup: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const ContentGroupsRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const WrapperGroupTitle: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/styles.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.d.ts

@@ -1,8 +1,7 @@
 import { NavListRootProps } from './types';
 /**
- *
+ * Renderiza el contenido de la lista principal
  * @param {NavListRootProps} props - Propiedades del componente
- *
  * @param {NavListProps} props.list -
  * @returns
  */

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/index.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.js";
+import { C as ContainerListSubItem } from "./styles.js";
+import { N as NavListSubItem } from "./subcomponents/NavListSub/index.js";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../../../tests/utils.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 = (listToFind) => {
+    const moduleId = listToFind.children ? listToFind.children[0].module_id : void 0;
+    if (moduleId) {
+      childrens.push(moduleId);
+      listToFind.children && findChildren(listToFind.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.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const ContainerListSubItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerListSubItem: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/styles.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.d.ts

@@ -1,2 +1,5 @@
 import { ArrowIconProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function ArrowIcon(props: ArrowIconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { A as ArrowIconRoot } from "./styles.js";
+import { u as useSideBar } from "../../../../../../hooks/useSideBar/index.js";
+import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
+import { I as Icon } from "../../../../../../../Icon/Icon.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.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const ArrowIconRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArrowIconRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/ArrowIcon/styles.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.d.ts

@@ -1,2 +1,5 @@
 import { NavItemRootProps } from './type';
+/**
+ * TODO: Documentar
+ */
 export declare function NavItemMain(props: NavItemRootProps): import("react/jsx-runtime").JSX.Element;