@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J24062025.beta.1

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -1,193 +1,44 @@
-import { b as CLASS_NAME_IS_ROOT, c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../constants.js";
-import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
-import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentComponentStyles = {
   /**
    * Estilos del contenedor principal del sidebar
    */
   contentComponentRoot: ({ theme }) => ({
     position: "relative",
-    display: "flex",
-    flexDirection: "column",
     height: "100%",
-    width: "fit-content",
-    backgroundColor: theme.vars.palette.background.default
+    width: "auto",
+    backgroundColor: theme.vars.palette.background.default,
+    display: "flex",
+    flexDirection: "column"
   }),
   /**
    * Estilos del contenedor que oculta el contenido cuando se encuentra des anclado.
    */
-  contentComponentHide: ({ theme, ownerState }) => {
-    const width = ownerState?.anchored ? ownerState?.expandedWidth : theme.vars.size.baseSpacings.sp4;
-    return {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      transition: "all 0.5s",
-      ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-        width: ownerState?.anchored && ownerState?.isDesktop ? ownerState?.expandedWidth : !ownerState?.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
-        minWidth: width,
-        maxWidth: width,
-        ...ownerState?.isHover && !theme.generalSettings.isMobile && {
-          transition: "all 0.5s",
-          width: `${ownerState?.expandedWidth}!important`,
-          maxWidth: `${ownerState?.expandedWidth}!important`,
-          contentVisibility: "visible",
-          '& [class*="containerFooter"]': {
-            borderWidth: theme.vars.size.baseSpacings["sp0-5"]
-          }
-        }
-      }
-    };
-  },
-  /**
-   * Contenedor que abraza el contenido del menu en primer lugar.
-   */
-  containerTreeItemsAndPromotion: ({ theme, ownerState }) => ({
+  contentComponentHide: ({ theme, ownerState }) => ({
+    width: "100%",
     height: "100%",
-    width: ownerState?.expandedWidth,
-    flex: 1,
     overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    paddingLeft: theme.vars.size.baseSpacings.sp4,
-    paddingRight: theme.vars.size.baseSpacings.sp4,
-    '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "container",
-        (size) => ({
-          height: size,
-          minHeight: size,
-          maxHeight: size
-        })
-      )
-    },
-    "& .M4LMenuItem-root": {
-      border: "unset",
-      paddingLeft: theme.vars.size.baseSpacings.sp2,
-      paddingRight: theme.vars.size.baseSpacings.sp2,
-      "& .M4LTypography-root": {
-        paddingLeft: `${theme.vars.size.baseSpacings.sp2} !important`,
-        ...getTypographyStyles(
-          theme.generalSettings.isMobile,
-          ownerState?.size || "medium",
-          "caption"
-        )
-      }
-    }
-  }),
-  /**
-   * Contenedor que contiene grupo menu item desplegable.
-   */
-  containerNodeMenuItem: ({ theme, ownerState }) => ({
-    marginLeft: theme.vars.size.baseSpacings.sp4,
-    display: "flex",
-    flexDirection: "column",
-    overflow: "visible",
-    '& [class*="M4LMenuItem-root"]:not(.menu-active)': {
-      "& .M4LTypography-root": {
-        color: `${theme.vars.palette.text.secondary}!important`
-      },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.text.secondary}!important`
-      }
-    },
-    [`&.${CLASS_NAME_IS_ROOT}`]: {
-      margin: "unset"
-    },
-    [`& > .M4LMenuItem-root:first-of-type:not(.${CLASS_NAME_MENU_ACTIVE}).${CLASS_NAME_ITEM_IN_TREE_ACTIVE}`]: {
-      borderColor: theme.vars.palette.divider,
-      // Linea de referencia vertical
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: "-25%",
-        bottom: "-25%",
-        height: "150%",
-        left: 0,
-        width: 2,
-        borderLeft: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.border.default,
-        ...ownerState?.isLastSibling && !ownerState?.hasChildren && {
-          height: "75%"
-        }
-      },
-      // Linea de referencia horizontal
-      [`&:not(.${CLASS_NAME_HAS_CHILDREN}):after`]: {
-        content: '""',
-        position: "absolute",
-        margin: "0",
-        left: 1,
-        width: 4,
-        height: 1,
-        borderTop: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.border.default
-      }
-    },
-    [`&.M4LSidebar-containerNodeMenuItem > .M4LMenuItem-root[class*="${CLASS_NAME_ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
-      background: theme.vars.palette.text.primary
-    },
-    [`& > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        height: "25%",
-        top: "25%",
-        bottom: 0,
-        left: 0,
-        width: 2,
-        borderLeft: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.primary.enabled,
-        ...!ownerState?.isLastSibling && !ownerState?.hasChildren && {
-          height: "50%"
+    transition: "all 0.5s",
+    flex: 1,
+    ...!ownerState?.anchored && {
+      width: ownerState?.anchored && ownerState?.isDesktop ? ownerState?.expandedWidth : !ownerState?.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
+      "&:hover": {
+        transition: "all 0.5s",
+        width: ownerState?.expandedWidth,
+        contentVisibility: "visible",
+        '& [class*="containerFooter"]': {
+          borderWidth: theme.vars.size.baseSpacings["sp0-5"]
         }
-      },
-      "&:after": {
-        content: '""',
-        position: "absolute",
-        margin: "0",
-        left: 0,
-        width: theme.vars.size.baseSpacings.sp1,
-        height: 1,
-        borderTop: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.primary.enabled
       }
-    },
-    [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.primary.opacity
-    },
-    "& .MuiCollapse-wrapperInner": {
-      display: "flex",
-      flexDirection: "column",
-      paddingLeft: 0,
-      paddingBottom: theme.vars.size.baseSpacings.sp1,
-      paddingTop: 0,
-      paddingRight: theme.vars.size.baseSpacings.sp1
-    },
-    [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.background.base,
-      borderRadius: theme.vars.size.borderRadius["r1-5"]
     }
   }),
-  containerNodeMenuItemMain: {},
   /**
-   * Estilos del menu item principal.
+   * Contenedor que abraza el contenido del menu en primer lugar.
    */
-  menuItemMain: ({ theme, ownerState }) => ({
-    "& .M4LSideBar-containerArrowIconRoot": {
-      marginLeft: "unset"
-    },
-    "&&& .M4LTypography-root": {
-      ...getTypographyStyles(
-        theme.generalSettings.isMobile,
-        ownerState?.size || "medium",
-        "bodyDens"
-      )
-    }
+  containerComponent: ({ ownerState }) => ({
+    height: "100%",
+    width: ownerState?.expandedWidth,
+    display: "flex",
+    flexDirection: "column"
   })
 };
 export {

package/components/SideBar/subcomponents/ContentGroups/index.d.ts

@@ -0,0 +1,5 @@
+import { ContentGroupsProps } from './types';
+/**
+ * Renderiza el contenido de los grupos
+ */
+export declare const ContentGroups: (contentGroupsProps: ContentGroupsProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/{TreeGroupItems → ContentGroups}/index.js

@@ -1,21 +1,27 @@
-import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
 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 { h as ContainerTreeGroupItemsStyled, i as ContainerContentGroupsStyled, j as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
-import { N as NodeMenuItemMain } from "./subcomponents/NodeMenuItemMain/NodeMenuItemMain.js";
+import { d as ContainerContentGroupsRootStyled, e as ContainerContentGroupsStyled, f as ContainerContentTitleStyled, g as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
+import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
-const TreeGroupItems = (contentGroupsProps) => {
+const ContentGroups = (contentGroupsProps) => {
   const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
-  const isSkeleton = useModuleSkeleton();
   const ownerState = {
     noItems: menuData.length === 0
   };
+  const renderTitle = (title) => {
+    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
+  };
+  const renderItems = (item) => {
+    return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { children: item?.map((list) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, list.title)) });
+  };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(
       MenuItem,
@@ -26,25 +32,21 @@ const TreeGroupItems = (contentGroupsProps) => {
     ) });
   };
   return /* @__PURE__ */ jsx(
-    ContainerTreeGroupItemsStyled,
+    ContainerContentGroupsRootStyled,
     {
       ownerState,
       role: "bodysidebar",
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("content-groups") } : {},
       children: menuData.length > 0 ? menuData.map((itemGroup) => (
         /* Render title section in menusidebar */
-        /* @__PURE__ */ jsx(ContainerContentGroupsStyled, { children: /* @__PURE__ */ jsx(
-          NodeMenuItemMain,
-          {
-            item: itemGroup,
-            size: currentSize,
-            defaultOpen: isSkeleton ? false : true
-          }
-        ) }, itemGroup.title)
+        /* @__PURE__ */ jsxs(ContainerContentGroupsStyled, { children: [
+          renderTitle(itemGroup.title),
+          renderItems(itemGroup.children)
+        ] }, itemGroup.title)
       )) : renderItemsDisabled()
     }
   );
 };
 export {
-  TreeGroupItems as T
+  ContentGroups as C
 };

package/components/SideBar/subcomponents/{TreeGroupItems → ContentGroups}/styles.js

@@ -2,11 +2,10 @@ const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
    */
-  containerTreeGroupItems: ({ theme, ownerState }) => ({
+  containerContentGroupsRoot: ({ theme, ownerState }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
-    flex: 1,
     flexDirection: "column",
     overflowY: "auto",
     padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
@@ -16,11 +15,14 @@ const contentGroupStyles = {
   /**
    * Wrapper for every principal item group in the sidebar
    */
-  containerContentGroups: () => ({
+  containerContentGroups: ({ theme }) => ({
     display: "flex",
     width: "100%",
-    height: "auto",
-    flexDirection: "column"
+    height: "100%",
+    flexDirection: "column",
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px`,
+    flex: 1,
+    overflow: "auto"
   }),
   /**
    * Title wrapper for every principal item group in the sidebar

package/components/SideBar/subcomponents/{TreeGroupItems/subcomponents/NodeMenuItem → ContentGroups/subcomponents/ContainerMenuItemsMain}/index.d.ts

@@ -1,8 +1,8 @@
-import { NodeMenuItemProps } from './types';
+import { NavListSubItemProps } from './types';
 /**
  * MenuItems component renderiza los items del menu con sus respectivos hijos y estados
- * @param {NodeMenuItemProps} props - Propiedades del componente
+ * @param {NavListSubItemProps} props - Propiedades del componente
  * @param {MenuDataType} props.item - Datos del item del menu
  * @param {boolean} props.openSubItem - Estado del item del menu: Abierto - cerrado
  */
-export declare function NodeMenuItem(props: NodeMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContainerMenuItemsMain(props: NavListSubItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Collapse } from "@mui/material";
+import { useState } from "react";
+import { useIsMobile } from "@m4l/graphics";
+import clsx from "clsx";
+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 { A as ArrowIcon } from "./subcomponents/ArrowIcon/index.js";
+import { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
+import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
+import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE, L as LIST_MENU_ITEM } from "../../../../constants.js";
+import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
+function ContainerMenuItemsMain(props) {
+  const { item, size } = props;
+  const { onMenuItemClick, onToggleVisible, urlIconPrefix } = useSideBar();
+  const [openSub, setOpenSub] = useState(props.openSubItem ?? false);
+  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
+  const isMobile = useIsMobile();
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    active: item.active,
+    itemInTreeActive: item.itemInTreeActive,
+    sidebarSize: adjustedSize
+  };
+  const handlerClick = () => {
+    onMenuItemClick(item);
+    setOpenSub(!openSub);
+    if (isMobile && (!hasChildren || hasChildren === void 0)) {
+      onToggleVisible(true);
+    }
+  };
+  const classRoot = getComponentSlotRoot(LIST_MENU_ITEM);
+  return /* @__PURE__ */ jsxs(
+    ContainerMenuItemsStyled,
+    {
+      className: clsx(classRoot),
+      role: "listitem",
+      ownerState,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            className: clsx(item.active ? ITEM_ACTIVE : ITEM_IN_TREE_ACTIVE),
+            label: item.title,
+            selected: item.active || item.itemInTreeActive,
+            startIcon: `${urlIconPrefix}${item.iconUrl}`,
+            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: openSub, active: item.active }) : null,
+            onClick: () => handlerClick(),
+            size: adjustedSize
+          }
+        ),
+        hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: child, size: adjustedSize }, child.title)) }) : null
+      ]
+    }
+  );
+}
+export {
+  ContainerMenuItemsMain as C
+};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.d.ts

@@ -0,0 +1,2 @@
+import { ContainerMenuItemsMainStyles } from '../../../../types';
+export declare const containerMenuItemsMainStyles: ContainerMenuItemsMainStyles;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -0,0 +1,47 @@
+import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
+import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE } from "../../../../constants.js";
+const containerMenuItemsMainStyles = {
+  /**
+   * Style aplicado al contenedor de los items del menú
+   */
+  containerMenuItems: ({ theme, ownerState }) => ({
+    marginLeft: theme.vars.size.baseSpacings.sp4,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "container",
+      (height) => {
+        return {
+          height: "auto",
+          minHeight: height
+        };
+      }
+    ),
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
+      borderColor: theme.vars.palette.divider,
+      "& span": {
+        color: theme.vars.palette.text.primary
+      }
+    },
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
+      background: theme.vars.palette.text.primary
+    },
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
+      borderColor: theme.vars.palette.primary.enabled,
+      "& span": {
+        color: theme.vars.palette.primary.enabled
+      }
+    },
+    "& .MuiCollapse-wrapperInner": {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings["sp0-5"]
+    }
+  })
+};
+export {
+  containerMenuItemsMainStyles as c
+};

package/components/SideBar/subcomponents/{TreeGroupItems → ContentGroups/subcomponents/ContainerMenuItemsMain}/subcomponents/ArrowIcon/index.js

@@ -1,26 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../../../tests/utils.js";
-import { f as PATH_ARROW_DOWN_ICON } from "../../../../constants.js";
-import { k as ContainerArrowIconRootStyled } from "../../../../slots/SideBarSlots.js";
-import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
-import { I as Icon } from "../../../../../Icon/Icon.js";
+import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
+import { c as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
+import { i as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 function ArrowIcon(props) {
   const { openState, active } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useSideBar();
   return /* @__PURE__ */ jsx(
     ContainerArrowIconRootStyled,
     {
-      className: classes.containerArrowIconRoot,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("arrowIconRoot") } : {},
       children: /* @__PURE__ */ jsx(
-        Icon,
+        IconButton,
         {
           src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_DOWN_ICON}`,
           rotationAngle: openState ? 270 : 90,
-          color: active ? "primary.enabled" : "text.primary"
+          color: active ? "primary" : "default"
         }
       )
     }

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/types.d.ts

@@ -0,0 +1,7 @@
+import { Sizes } from '@m4l/styles';
+import { IMenuDataWithState } from '../../../../types';
+export type NavListSubItemProps = {
+    item: IMenuDataWithState;
+    openSubItem?: boolean;
+    size: Sizes;
+};

package/components/SideBar/subcomponents/ContentGroups/types.d.ts

@@ -0,0 +1,4 @@
+import { Sizes } from '@m4l/styles';
+export interface ContentGroupsProps {
+    size?: Sizes;
+}

package/components/SideBar/subcomponents/{Promotion → FooterSidebar}/index.d.ts

@@ -1,4 +1,4 @@
-import { PromotionProps } from './types';
+import { FooterSidebarProps } from './types';
 /**
  * Renderiza el footer del sidebar
  * @param {CollapseButtonProps} props - Propiedades del componente
@@ -6,4 +6,4 @@ import { PromotionProps } from './types';
  * @param {VoidFunction} props.collapsed - Variable que guarda el estado de colapsado en desktop
  * @returns
  */
-export default function Promotion({ anchored }: PromotionProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FooterSidebar({ anchored }: FooterSidebarProps): import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/{Promotion → FooterSidebar}/index.js

@@ -2,25 +2,32 @@ import { jsx } from "react/jsx-runtime";
 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 { d as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
-function Promotion({ anchored }) {
-  const { promotion } = useSideBar();
+import { j as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
+import { I as Image } from "../../../Image/Image.js";
+function FooterSidebar({ anchored }) {
+  const { companyLogoNormalUrl } = useSideBar();
   const ownerState = {
     anchored
   };
-  if (!promotion) {
-    return null;
-  }
   return /* @__PURE__ */ jsx(
     ContainerFooterStyled,
     {
       ownerState,
       role: "footer",
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("footer") } : {},
-      children: promotion
+      children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          width: "auto",
+          height: "40px",
+          src: companyLogoNormalUrl || "",
+          alt: "logo"
+        },
+        "Logo"
+      )
     }
   );
 }
 export {
-  Promotion as P
+  FooterSidebar as F
 };

package/components/SideBar/subcomponents/{Promotion → FooterSidebar}/styles.js

@@ -6,10 +6,10 @@ const footerSideBarStyles = {
     height: "auto",
     display: "grid",
     placeItems: "center",
+    padding: `${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp12}`,
     borderTop: `${theme.vars.size.baseSpacings["sp0-5"]} solid ${theme.vars.palette.border.secondary}`,
     borderWidth: ownerState?.anchored ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp0,
-    transition: "all 0.5s",
-    paddingBottom: theme.vars.size.baseSpacings.sp2
+    transition: "all 0.5s"
   })
 };
 export {

package/components/SideBar/subcomponents/FooterSidebar/types.d.ts

@@ -0,0 +1,5 @@
+export interface FooterSidebarProps {
+    onToggleAnchored: (anchored: boolean) => void;
+    anchored: boolean;
+}
+export type WrapperCollapseButtonProps = Pick<FooterSidebarProps, 'anchored'>;

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { I as Image } from "../../../Image/Image.js";
+const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
+  return /* @__PURE__ */ jsxs(ContainerHeaderSidebarRootStyled, { role: "heading", children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        width: "24px",
+        height: "24px",
+        src: srcIcon,
+        alt: "logo"
+      },
+      "Logo"
+    ),
+    /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", size: "medium", skeletonWidth: 120, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "paragraph", size: "medium", margin: 0, skeletonWidth: 150, children: subtitle })
+    ] })
+  ] });
+};
+export {
+  HeaderSidebar as H
+};

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useFirstRender } from "@m4l/graphics";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { e as ContainerDesktopContentStyled, f as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
+import { m as ContainerDesktopContentStyled, n as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 import { useState, useEffect } from "react";

package/components/SideBar/subcomponents/SideBarDesktop/styles.js

@@ -30,22 +30,14 @@ const sideBarDesktopStyles = {
   /**
    * Container button to achores the sidebar.
    */
-  containerBtnAnchored: ({ theme, ownerState }) => ({
+  containerBtnAnchored: ({ theme }) => ({
     position: "absolute",
     right: "-20px",
     top: "20px",
     zIndex: 1e3,
     padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
     "& .MuiButtonBase-root": {
-      ...!ownerState?.anchored && {
-        "&:before": {
-          content: '""',
-          position: "absolute",
-          inset: 0,
-          backgroundColor: theme.vars.palette.background.default,
-          zIndex: -1
-        }
-      }
+      background: theme.vars.palette.background.default
     },
     "&&& .M4LIconButton-root:hover": {
       backgroundColor: theme.vars.palette.primary.enabled,
@@ -53,6 +45,18 @@ const sideBarDesktopStyles = {
         backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
       }
     }
+    // '&:hover': {
+    //   '& .MuiButtonBase-root': {
+    //     border: `1px solid ${theme.palette.border.default}`,
+    //     background: theme.vars.palette.primary.enabled,
+    //     '& [class*="M4LIcon-root"] > div':{
+    //       backgroundColor: theme.vars.palette.background.default,
+    //     },
+    //   },
+    //   '& .MuiButtonBase-root:active': {
+    //     background: theme.vars.palette.primary.active,
+    //   },
+    // },
   })
 };
 export {