@m4l/components 9.2.62-B08072025beta.3 → 9.2.62-B09072025beta.1

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js

@@ -5,16 +5,13 @@ import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
 import { Collapse } from "@mui/material";
 import { N as NodeMenuItem } from "../NodeMenuItem/index.js";
-import { C as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
+import { b as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
-import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 const NodeMenuItemMain = (props) => {
   const { item, size, defaultOpen = false } = props;
-  const { urlIconPrefix } = useSideBar();
   const { currentSize } = useComponentSize(size);
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const isSkeleton = useModuleSkeleton();
@@ -34,8 +31,7 @@ const NodeMenuItemMain = (props) => {
           MenuItemMainStyled,
           {
             label: item.title,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: "main" }),
-            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
+            startIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize
           }
@@ -47,8 +43,7 @@ const NodeMenuItemMain = (props) => {
             size: currentSize,
             className: clsx(CLASS_NAME_IS_ROOT),
             defaultOpen: isSkeleton ? false : true,
-            isLastSibling: item.children?.length === index + 1,
-            isRoot: true
+            isLastSibling: item.children?.length === index + 1
           },
           child.title
         )) })

package/components/SideBar/types.d.ts

@@ -51,6 +51,10 @@ export interface SideBarProps {
      * Slogan de la empresa
      */
     companySlogan?: string;
+    /**
+     * Indica la variación de estilo del componente
+     */
+    variantStyle?: 'variantDefault' | 'variantComercial';
     moduleSelectedId?: string | undefined;
     onMenuItemClick: (item: MenuDataType) => void;
     /**
@@ -70,19 +74,10 @@ export interface SideBarProps {
      */
     urlIconPrefix?: string;
     /**
-     * Variación del componente, puede ser uno de los valores definidos en 'variantDefault' , 'variantComercial'
-     */
-    variant?: SidebarVariants;
-    /**
-     * Componente que se renderiza en el encabezado del sidebar
-     */
-    headerComponent?: ReactElement;
-    /**
-     * Componente que se renderiza en el pie de página del sidebar
+     * Promoción del sidebar, se renderiza en el footer del sidebar
      */
-    footerComponent?: ReactElement;
+    promotion?: ReactElement;
 }
-export type SidebarVariants = 'host' | 'microfrontend';
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
  */
@@ -101,7 +96,7 @@ export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeA
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarDesktopStyles = M4LOverridesStyleRules<SideBarDesktopSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentGroupsStyles = M4LOverridesStyleRules<ContentGroupsSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type HeaderComponentStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
+export type HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarFooterStyles = M4LOverridesStyleRules<SideBarFooterSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarMobileStyles = M4LOverridesStyleRules<SideBarMobileSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentComponentStyles = M4LOverridesStyleRules<ContentComponentSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;

package/components/commercial/HamburgerMenu/HamburgerMenu.js

@@ -44,7 +44,8 @@ const HamburgerMenu = (props) => {
             onToggleVisible: handlerOnVisible,
             anchored: false,
             companyLogoSmallUrl: "",
-            companyName: ""
+            companyName: "",
+            variantStyle: "variantComercial"
           }
         )
       ]

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js

@@ -1,12 +1,11 @@
 import { g as getCommonActionsDictionary } from "../../../../CommonActions/dictionary.js";
-const DICTIONARY_KEY = "rhf_period";
 const dictionary = {
-  LABEL_YEARS: `${DICTIONARY_KEY}.label_years`,
-  LABEL_MONTHS: `${DICTIONARY_KEY}.label_months`,
-  LABEL_DAYS: `${DICTIONARY_KEY}.label_days`
+  LABEL_YEARS: "period.label_years",
+  LABEL_MONTHS: "period.label_months",
+  LABEL_DAYS: "period.label_days"
 };
 function getPeriodComponetsDictionary() {
-  return [DICTIONARY_KEY].concat(getCommonActionsDictionary());
+  return ["period"].concat(getCommonActionsDictionary());
 }
 export {
   dictionary as d,

package/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './BaseModule';
 export * from './Chip';
 export * from './commercial';
 export * from './CommonActions/';
+export * from './ContainerFlow';
 export * from './CommonActions/dictionary';
 export * from './DataGrid';
 export * from './DragResizeWindowRND';

package/components/mui_extended/Accordion/styles.js

@@ -16,7 +16,8 @@ const accordionStyles = {
         borderRadius: "unset"
       },
       margin: "unset",
-      overflow: "visible"
+      overflow: "visible",
+      height: "min-content"
     }
   }),
   /**
@@ -102,10 +103,7 @@ const accordionStyles = {
    * **************************************************************
    */
   accordionDetails: ({ theme, ownerState }) => ({
-    paddingLeft: theme.vars.size.baseSpacings.sp3,
-    paddingRight: theme.vars.size.baseSpacings.sp3,
-    paddingTop: theme.vars.size.baseSpacings.sp1,
-    paddingBottom: theme.vars.size.baseSpacings.sp1,
+    padding: theme.vars.size.baseSpacings.sp4,
     background: theme.vars.palette.background.default,
     display: "flex",
     flexDirection: "column",

package/components/mui_extended/MenuItem/MenuItem.js

@@ -94,7 +94,7 @@ const MenuItem = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, className: MENUITEM_CLASSES.menuItemContainer, children: [
+        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, children: [
           renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
           /* @__PURE__ */ jsx(
             MenuItemTypographyStyled,

package/components/mui_extended/TabContent/TabContent.js

@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
 import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
-  const { children, className, hasBackground = false, ...others } = props;
+  const { children, className, background = false, ...others } = props;
   const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
-  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { hasBackground }, ...others, children });
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -1,3 +1,4 @@
+import { C as CONTAINER_QUERY_NAME } from "./constants.js";
 const tabContentStyles = {
   /**
    * Elemento root referencia a `TabContent`
@@ -9,6 +10,8 @@ const tabContentStyles = {
     paddingRight: 0,
     display: "flex",
     overflow: "auto",
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
     // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,
@@ -20,7 +23,7 @@ const tabContentStyles = {
     boxSizing: "border-box",
     zIndex: "0",
     top: "-1px",
-    ...ownerState?.hasBackground ? {
+    ...ownerState?.background ? {
       backgroundColor: theme.vars.palette.background.base,
       paddingLeft: theme.vars.size.baseSpacings.sp2,
       paddingRight: theme.vars.size.baseSpacings.sp2,

package/components/mui_extended/TabContent/constants.d.ts

@@ -1 +1,2 @@
 export declare const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+export declare const CONTAINER_QUERY_NAME = "container";

package/components/mui_extended/TabContent/constants.js

@@ -1,4 +1,6 @@
 const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+const CONTAINER_QUERY_NAME = "container";
 export {
+  CONTAINER_QUERY_NAME as C,
   TAB_CONTENT_KEY_COMPONENT as T
 };

package/components/mui_extended/TabContent/types.d.ts

@@ -7,6 +7,6 @@ export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;
-    hasBackground?: boolean;
+    background?: boolean;
 }
 export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/components/mui_extended/Typography/Typography.js

@@ -17,6 +17,7 @@ function Typography(props) {
     dataTestid,
     children,
     disabled,
+    ellipsis = false,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -28,7 +29,8 @@ function Typography(props) {
     size: adjustedSize,
     skeletonRows,
     variant,
-    skeleton: isSkeleton
+    skeleton: isSkeleton,
+    ellipsis
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

package/components/mui_extended/Typography/types.d.ts

@@ -43,6 +43,10 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     htmlFor?: string | undefined;
     /** Si esta disabled, el texto pasa a text.disabled */
     disabled?: boolean;
+    /**
+     * Si se activa, el texto se corta y se muestra un elipsis.
+     */
+    ellipsis?: boolean;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
@@ -54,6 +58,7 @@ export interface TypographyOwnerState {
     size: TypographyProps['size'];
     skeletonRows: TypographyProps['skeletonRows'];
     skeleton: boolean;
+    ellipsis: TypographyProps['ellipsis'];
 }
 /**
  * Agrupa la lista de slots del componente.

package/components/mui_extended/Typography/typography.styles.js

@@ -32,7 +32,13 @@ const typographyStyles = {
         theme.generalSettings.isMobile,
         ownerState?.size || "medium",
         ownerState?.variant || "body"
-      )
+      ),
+      // ellipsis 🔤
+      ...ownerState?.ellipsis && {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
     },
     ...ownerState?.skeleton ? {
       width: ownerState?.width ? ownerState?.width : "100%"

package/index.js

@@ -29,31 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
 import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
 import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
+import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
 import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
 import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
-import { C as C2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
+import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
-import { C as C3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
+import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
-import { C as C4 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
+import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
-import { C as C5 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { C as C6 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
+import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
 import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
-import { C as C7 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
+import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
 import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
-import { C as C8 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
+import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
 import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
-import { C as C9 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
+import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
 import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
-import { C as C10 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
+import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
 import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
-import { C as C11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
+import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
 import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
-import { C as C12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
+import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
@@ -74,7 +75,7 @@ import { V } from "./components/extended/React-Window/VariableSizeList/VariableS
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C13 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -84,7 +85,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C14 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Skeleton/Skeleton.js";
@@ -111,10 +112,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C15, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
-import { C as C16 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
@@ -241,22 +242,23 @@ export {
   B2 as BoxIcon,
   B3 as Breadcrumbs,
   B5 as Button,
-  C14 as CheckBox,
+  C15 as CheckBox,
   C as Chip,
-  C16 as ChipStatusFormatter,
-  C13 as CircularProgress,
-  C2 as ColumnBooleanFormatter,
-  C12 as ColumnChipStatusFormatter,
-  C3 as ColumnConcatenatedValueFormatter,
-  C4 as ColumnDateFormatter,
-  C5 as ColumnIconFormatter,
-  C6 as ColumnInteractiveCheckFormatter,
-  C7 as ColumnNestedValueFormatter,
-  C8 as ColumnPointsFormatter,
-  C9 as ColumnPriceFormatter,
-  C10 as ColumnSetCheckFormatter,
-  C11 as ColumnUncertaintyFormatter,
-  C15 as ConcatenatedFormatter,
+  C17 as ChipStatusFormatter,
+  C14 as CircularProgress,
+  C3 as ColumnBooleanFormatter,
+  C13 as ColumnChipStatusFormatter,
+  C4 as ColumnConcatenatedValueFormatter,
+  C5 as ColumnDateFormatter,
+  C6 as ColumnIconFormatter,
+  C7 as ColumnInteractiveCheckFormatter,
+  C8 as ColumnNestedValueFormatter,
+  C9 as ColumnPointsFormatter,
+  C10 as ColumnPriceFormatter,
+  C11 as ColumnSetCheckFormatter,
+  C12 as ColumnUncertaintyFormatter,
+  C16 as ConcatenatedFormatter,
+  C2 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
   e as DATAGRID_SEMANTIC_WIDTHS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-B08072025beta.3",
+  "version": "9.2.62-B09072025beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.2-B08072025beta.3",
-    "@m4l/styles": "7.1.30-B08072025beta.3",
+    "@m4l/graphics": "^7.0.0",
+    "@m4l/styles": "^7.0.0",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/storybook/components/ContainerFlow/ContainerFlow.stories.d.ts

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ContainerFlow } from '../../../src/components/ContainerFlow/ContainerFlow';
+/**
+ * Renderiza un chip para cada color
+ */
+declare const meta: Meta<typeof ContainerFlow>;
+type Story = StoryObj<typeof ContainerFlow>;
+/**
+ * FlexColumn
+ */
+export declare const H001_FlexColumn: Story;
+/**
+ * variante column-flex con 3 wrappers
+ */
+export declare const H002_FlexColumn3Wrappers: Story;
+/**
+ * variante column-flex con 2 wrappers
+ */
+export declare const H003_FlexColumn2Wrappers: Story;
+/**
+ * variante column-flex con 1 wrapper
+ */
+export declare const H004_FlexColumn1Wrappers: Story;
+/**
+ * variante flex-wrap
+ */
+export declare const H005_FlexWrap: Story;
+/**
+ * variante grid-layout
+ */
+export declare const H006_GridLayout: Story;
+export default meta;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn1Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn1Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn2Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn2Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn3Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn3Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexWrap/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexWrap: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderGridLayout/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderGridLayout: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/wrapperItems/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Componente que se encarga de envolver los items del contenedor de items.
+ * @param children - Los items del contenedor de items.
+ * @returns Un componente de tipo div con los estilos del contenedor de items.
+ */
+export declare const WrapperItems: ({ children, width, style }: {
+    children: React.ReactNode;
+    width?: string | number;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SideBar/SideBar.stories.d.ts

@@ -5,13 +5,19 @@ type Story = StoryObj<typeof SideBar>;
 /**
  * SideBar por defecto sin ningún item seleccionado
  */
-export declare const H001_VariantHost: Story;
+export declare const Default: Story;
 /**
- * SideBar por defecto sin ningún item seleccionado
+ * SideBar colapsado por medio del botón de anclaje
+ */
+export declare const CollapsedWithAnchorButton: Story;
+/**
+ * SideBar colapsado con hover sobre el menú
+ */
+export declare const CollapsedWithHoverOnMenu: Story;
+/**
+ * SideBar colapsado retirando hover sobre el menú
  */
-export declare const H002_VariantHost_Collapsed: Story;
-export declare const H003_VariantMicrofrontend: Story;
-export declare const H004_VariantMicrofrontend_Collapsed: Story;
+export declare const CollapsedWithHoverRemoved: Story;
 /**
  * SideBar con items en el menu, con un item seleccionado y 5 anidaciones incluyendo la sección padre de los menu items
  */

package/storybook/components/SideBar/subcomponents/FooterPromotion/FooterPromotion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que renderiza el footer de la promoción del sidebar.
+ */
+export declare const FooterPromotion: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SideBar/subcomponents/FooterPromotion/index.d.ts

@@ -0,0 +1 @@
+export { FooterPromotion } from './FooterPromotion';

package/utils/getSizeStyles/getSizeStyles.d.ts

@@ -24,4 +24,4 @@ export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Size
  * @param property - Propiedad CSS que se desea aplicar (por defecto es 'height').
  * @returns Objeto con los estilos calculados.
  */
-export declare const getSizeStyles: (theme: Theme, size: Sizes, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;
+export declare const getSizeStyles: (theme: Theme, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;

package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.d.ts

@@ -1,5 +0,0 @@
-/**
- * Componente que representa el encabezado del sidebar.
- * @returns {JSX.Element}
- */
-export declare const HeaderComponent: () => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.js

@@ -1,37 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { H as HeaderContainerComponentStyled, B as ButtonAnchoredStyled } from "../../slots/SideBarSlots.js";
-import { useEnvironment } from "@m4l/core";
-import { e as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
-import { useIsMobile } from "@m4l/graphics";
-const HeaderComponent = () => {
-  const {
-    headerComponent,
-    onToggleAnchored,
-    anchored,
-    variant,
-    classes
-  } = useSideBar();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = !useIsMobile();
-  const handleToggleAnchored = () => {
-    onToggleAnchored(!anchored);
-  };
-  return /* @__PURE__ */ jsxs(HeaderContainerComponentStyled, { ownerState: { anchored, variant }, children: [
-    headerComponent && headerComponent,
-    variant === "microfrontend" && isDesktop && /* @__PURE__ */ jsx(
-      ButtonAnchoredStyled,
-      {
-        icon: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`,
-        onClick: handleToggleAnchored,
-        rotationAngle: anchored ? 0 : 180,
-        className: classes.buttonAnchored,
-        variant: "outline",
-        role: "anchored-button"
-      }
-    )
-  ] });
-};
-export {
-  HeaderComponent as H
-};

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

@@ -1 +0,0 @@
-export { HeaderComponent } from './HeaderComponent';

package/components/SideBar/subcomponents/HeaderComponent/styles.d.ts

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

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

@@ -1,44 +0,0 @@
-const headerComponentStyles = {
-  /**
-   * Wrapper para el encabezado del sidebar
-   */
-  headerContainerComponent: ({ theme, ownerState }) => ({
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%",
-    gap: theme.vars.size.baseSpacings.sp3,
-    paddingLeft: theme.vars.size.baseSpacings.sp4,
-    paddingRight: theme.vars.size.baseSpacings.sp4,
-    paddingBottom: theme.vars.size.baseSpacings.sp3,
-    transition: "all 0.5s",
-    "& > div": {
-      transition: "all 0.5s"
-    },
-    "& > div:first-of-type .M4LImage-root": {
-      //minWidth: '140px',
-      minHeight: theme.vars.size.baseSpacings.sp10
-    },
-    ...!ownerState?.anchored && ownerState?.variant !== "host" && {
-      transition: "all 0.5s",
-      height: theme.vars.size.baseSpacings.sp14,
-      justifyContent: "center",
-      alignItems: "center",
-      paddingLeft: theme.vars.size.baseSpacings.sp2,
-      paddingRight: theme.vars.size.baseSpacings.sp2,
-      gap: "unset",
-      "& > div:not(.M4LSideBar-buttonAnchored)": {
-        visibility: "hidden",
-        transition: "all 0.5s"
-      }
-    }
-  }),
-  /**
-   * Styles applied to the button anchored in the header component
-   */
-  buttonAnchored: {}
-};
-export {
-  headerComponentStyles as h
-};