@m4l/components 9.2.62-B10072025beta.1 → 9.2.62-JT08072025.beta.1

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

@@ -5,7 +5,7 @@ const sideBarDesktopStyles = {
    * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
    */
   containerDesktopContent: ({ theme, ownerState }) => {
-    const width = ownerState?.anchored ? ownerState?.expandedWidth : ownerState?.variant === "host" ? 0 : theme.vars.size.baseSpacings.sp10;
+    const width = ownerState?.anchored ? ownerState?.expandedWidth : theme.vars.size.baseSpacings.sp4;
     return {
       height: "100%",
       position: "relative",
@@ -17,14 +17,42 @@ const sideBarDesktopStyles = {
   /**
    * Styles applied to the root element of the `SideBar` component in desktop mode.
    */
-  containerDesktopRoot: ({ theme }) => ({
+  containerDesktopRoot: ({ ownerState, theme }) => ({
     height: "100%",
-    width: "100%",
+    width: "fit-content",
     overflow: "visible",
-    borderRight: `1px solid ${theme.vars.palette.border.secondary}`,
+    borderRight: `1px solid ${theme.vars.palette.border.default}`,
+    position: !ownerState?.anchored ? "absolute" : "relative",
     inset: 0,
     //add hover effect
     zIndex: 999
+  }),
+  /**
+   * Container button to achores the sidebar.
+   */
+  containerBtnAnchored: ({ theme, ownerState }) => ({
+    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
+        }
+      }
+    },
+    "&&& .M4LIconButton-root:hover": {
+      backgroundColor: theme.vars.palette.primary.enabled,
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
+      }
+    }
   })
 };
 export {

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

@@ -4,7 +4,7 @@ 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 Drawer } from "./subcomponents/Drawer.js";
-import { e as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
+import { g as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 const SideBarMobile = () => {
   const {

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

@@ -3,19 +3,18 @@ import { useModuleDictionary, useModuleSkeleton } 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 { f as ContainerTreeGroupItemsStyled, g as ContainerContentGroupsStyled, h as ContainerContentTitleStyled } from "../../slots/SideBarSlots.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 { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 const TreeGroupItems = (contentGroupsProps) => {
-  const { menuData, anchored } = useSideBar();
+  const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    noItems: menuData.length === 0,
-    anchored
+    noItems: menuData.length === 0
   };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(

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

@@ -1,4 +1,3 @@
-import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
@@ -10,17 +9,9 @@ const contentGroupStyles = {
     flex: 1,
     flexDirection: "column",
     overflowY: "auto",
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
     alignItems: "center",
-    justifyContent: ownerState?.noItems ? "center" : "flex-start",
-    transition: "all 0.5s",
-    paddingTop: theme.vars.size.baseSpacings.sp3,
-    paddingLeft: theme.vars.size.baseSpacings.sp4,
-    paddingRight: theme.vars.size.baseSpacings.sp4,
-    gap: theme.vars.size.baseSpacings.sp4,
-    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-      transition: "all 0.5s",
-      visibility: "hidden"
-    }
+    justifyContent: ownerState?.noItems ? "center" : "flex-start"
   }),
   /**
    * Wrapper for every principal item group in the sidebar
@@ -37,7 +28,6 @@ const contentGroupStyles = {
   containerContentTitle: ({ theme, ownerState }) => ({
     padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp1}`,
     color: theme.vars.palette.text.primary,
-    width: "100%",
     textAlign: "left",
     "& .MuiTypography-root": {
       color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
@@ -72,84 +62,6 @@ const contentGroupStyles = {
     alignSelf: "center",
     lineHeight: 0,
     marginLeft: "auto"
-  }),
-  /**
-   * Styles applied to the container of the adornment icon in the header component
-   */
-  containerAdornmentIcon: ({ theme, ownerState }) => ({
-    overflow: "hidden",
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    width: "fit-content",
-    height: "fit-content",
-    padding: "1px",
-    "& .M4LIcon-root": {
-      width: "fit-content",
-      height: "fit-content",
-      padding: theme.vars.size.baseSpacings["sp0-5"],
-      "& .M4LIcon-icon": {
-        ...getSizeStyles(
-          theme,
-          ownerState?.size || "medium",
-          "case",
-          (sizeValue) => ({
-            width: `${sizeValue}!important`,
-            height: `${sizeValue}!important`,
-            minWidth: `${sizeValue}!important`,
-            minHeight: `${sizeValue}!important`
-          })
-        )
-      }
-    },
-    ...ownerState?.variant !== "itemActive" && ownerState?.variant !== "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.chips.persianGreen.contained.colorTone}!important`
-      }
-    },
-    ...ownerState?.variant === "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.text.secondary}!important`
-      }
-    },
-    ...ownerState?.variant === "main" && {
-      backgroundColor: theme.vars.palette.chips.persianGreen.contained.backgroundColorTone
-    },
-    ...ownerState?.variant === "root" && {
-      backgroundColor: theme.vars.palette.primary.enabled
-    },
-    ...ownerState?.variant === "itemActive" && {
-      boxShadow: theme.vars.customShadows.primary2,
-      background: `linear-gradient(to right, 
-      ${theme.vars.palette.primary.opacityGradient1}, 
-      ${theme.vars.palette.primary.opacityGradient2})`,
-      "& .M4LSideBar-backgroundAdornmentIcon": {
-        background: theme.vars.palette.background.default
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "1.4px",
-        background: theme.vars.palette.primary.enabledOpacity,
-        borderRadius: "5px"
-      },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.primary.enabled}!important`
-      }
-    }
-  }),
-  /**
-   * Styles applied to the background of the adornment icon in the header component
-   */
-  backgroundAdornmentIcon: () => ({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "5px"
   })
 };
 export {

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -6,14 +6,13 @@ 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 "../ArrowIcon/index.js";
 import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
-import { a as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_CLOSED } from "../../../../constants.js";
+import { c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
 function NodeMenuItem(props) {
-  const { item, size, defaultOpen = false, className, isLastSibling = false, isRoot = false } = props;
+  const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
   const { urlIconPrefix, classes } = useSideBar();
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const { currentSize } = useComponentSize(size);
@@ -41,12 +40,11 @@ function NodeMenuItem(props) {
               CLASS_NAME_ITEM_STATE,
               className,
               item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
-              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
-              !isOpen && CLASS_NAME_ITEM_CLOSED
+              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
             ),
             label: item.title,
             selected: item.active,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
+            startIcon: `${urlIconPrefix}${item.iconUrl}`,
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts

@@ -6,5 +6,4 @@ export type NodeMenuItemProps = {
     size: Extract<Sizes, 'small' | 'medium'>;
     className?: string;
     isLastSibling?: boolean;
-    isRoot?: boolean;
 };

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/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/commercial/HamburgerMenu/HamburgerMenu.js

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

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterIconCheckFalseStyled, c as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function getFormatBoolean(presentationType, value = false, getLabel) {
   if (presentationType === "string_yes_no") {
@@ -18,6 +18,9 @@ function getFormatBoolean(presentationType, value = false, getLabel) {
   if (presentationType === "chip_active_inactive") {
     return value ? getLabel(LABEL_BOOLEAN_ACTIVE) : getLabel(LABEL_BOOLEAN_INACTIVE);
   }
+  if (presentationType === "chip_yes_no") {
+    return value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
+  }
   return "";
 }
 function BooleanFormatter(props) {
@@ -29,8 +32,9 @@ function BooleanFormatter(props) {
   const ownerState = { value };
   const memoComponent = useMemo(() => {
     if (presentationType === "check") {
+      const IconComponent = value ? BooleanFormatterIconStyled : BooleanFormatterIconCheckFalseStyled;
       return /* @__PURE__ */ jsx(
-        BooleanFormatterIconStyled,
+        IconComponent,
         {
           ownerState,
           src: value ? srcCheckTrue : srcCheckFalse,
@@ -38,14 +42,13 @@ function BooleanFormatter(props) {
         }
       );
     }
-    if (presentationType === "chip_active_inactive") {
+    if (presentationType === "chip_active_inactive" || presentationType === "chip_yes_no") {
       return /* @__PURE__ */ jsx(
         BooleanFormatterChipStyled,
         {
           label: getFormatBoolean(presentationType, value, getLabel),
           ownerState,
           className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
-          opacity: true,
           color: value ? "primary" : "default",
           variant: "contained"
         }

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -13,7 +13,15 @@ const booleanFormatterStyles = {
    */
   icon: ({ theme }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: theme.vars.palette.chips.default.contained.backgroundColorTone
+      backgroundColor: theme.vars.palette.text.primary
+    }
+  }),
+  /**
+   * Estilos para el icono de false
+   */
+  iconCheckFalse: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.text.secondary
     }
   }),
   chip: {}

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts

@@ -1,5 +1,6 @@
 export declare enum BooleanFormatterSlots {
     icon = "icon",
     root = "root",
-    chip = "chip"
+    chip = "chip",
+    iconCheckFalse = "iconCheckFalse"
 }

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js

@@ -2,6 +2,7 @@ var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
   BooleanFormatterSlots2["icon"] = "icon";
   BooleanFormatterSlots2["root"] = "root";
   BooleanFormatterSlots2["chip"] = "chip";
+  BooleanFormatterSlots2["iconCheckFalse"] = "iconCheckFalse";
   return BooleanFormatterSlots2;
 })(BooleanFormatterSlots || {});
 export {

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -1,6 +1,9 @@
 export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const BooleanFormatterIconCheckFalseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;
 export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -9,6 +9,10 @@ const BooleanFormatterIconStyled = styled(Icon, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
   slot: BooleanFormatterSlots.icon
 })(booleanFormatterStyles?.icon);
+const BooleanFormatterIconCheckFalseStyled = styled(Icon, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.iconCheckFalse
+})(booleanFormatterStyles?.iconCheckFalse);
 const BooleanFormatterRootStyled = styled(Typography, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
   slot: BooleanFormatterSlots.root
@@ -20,5 +24,6 @@ const BooleanFormatterChipStyled = styled(Chip, {
 export {
   BooleanFormatterRootStyled as B,
   BooleanFormatterIconStyled as a,
-  BooleanFormatterChipStyled as b
+  BooleanFormatterIconCheckFalseStyled as b,
+  BooleanFormatterChipStyled as c
 };

package/components/formatters/BooleanFormatter/types.d.ts

@@ -8,7 +8,7 @@ import { Theme } from '@mui/material';
  * - `'string_true_false'`: Displays "True" for `true` and "False" for `false`.
  * - `'check'`: Displays an icon to represent the boolean value.
  */
-export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive';
+export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive' | 'chip_yes_no';
 /**
  * Maps to the keys in `BooleanFormatterSlots`, defining slot-specific styling or customization.
  */

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
-    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
-    //   return {
-    //     ...state,
-    //     selectedOptions: action.payload,
-    //   };
     default:
       return state;
   }

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/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

@@ -20,7 +20,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/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/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -251,7 +251,7 @@ const useDynamicFilterAndSort = (props) => {
                 name: sortApplied.columnKey,
                 type: sort?.type || "string",
                 urlIcon: sort?.urlIcon || "",
-                label: sort?.label || sortApplied.columnKey
+                label: sortApplied.label
               },
               isSet: true,
               fixed: isFixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-B10072025beta.1",
+  "version": "9.2.62-JT08072025.beta.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-B10072025beta.1",
-    "@m4l/styles": "7.1.30-B10072025beta.1",
+    "@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/DataGrid/DataGrid.stories.d.ts

@@ -19,6 +19,10 @@ export declare const DataGridWithEventChangeUserColumn: Story;
  * DataGrid con columns formatters
  */
 export declare const DatagridWithFormatters: Story;
+/**
+ * DataGrid con columns with actions
+ */
+export declare const DatagridWithActions: Story;
 /**
  * DataGrid sin pager
  */

package/storybook/components/DataGrid/helpers/icons.d.ts

@@ -1,3 +1,9 @@
 export declare const icons: {
     roundRefreshIcon: string;
+    roundDeleteIcon: string;
+    addIcon: string;
+    editIcon: string;
+    printIcon: string;
+    activeIcon: string;
+    inactiveIcon: string;
 };

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -7,6 +7,7 @@ export interface SeedProps {
     withConcatenated?: boolean;
     withDate?: boolean;
     withIcon?: boolean;
+    withMultipleIcons?: boolean;
     withInteractiveCheck?: boolean;
     withNestedValue?: boolean;
     withPoints?: boolean;
@@ -15,6 +16,10 @@ export interface SeedProps {
     withSetCheck?: boolean;
     withCesar?: boolean;
     withChipStatus?: boolean;
+    withActions?: boolean;
+    withActionsUser?: boolean;
+    withBooleanStatus?: boolean;
+    withUserType?: boolean;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
@@ -48,6 +53,10 @@ export interface RowType {
         label: string;
         currentStatus: ChipStatusFormatterProps['status'];
     };
+    userType?: {
+        label: string;
+        currentStatus: 'superadmin' | 'admin' | 'user';
+    };
 }
 interface RangesUncertainty {
     cmcMin: number;