@m4l/components 9.2.61 → 9.2.62

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

@@ -0,0 +1,4 @@
+import { Sizes } from '@m4l/styles';
+export interface TreeGroupItemsProps {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}

package/components/SideBar/types.d.ts

@@ -1,8 +1,9 @@
 import { Sizes } from '@m4l/styles';
-import { ContainerMenuItemsMainSlots, ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
+import { ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
 import { SIDEBAR_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { ReactElement } from 'react';
 /**
  * define la estructura de datos para un elemento de menú en la barra lateral.
  */
@@ -72,6 +73,10 @@ export interface SideBarProps {
      * Prefijo de la url de los iconos
      */
     urlIconPrefix?: string;
+    /**
+     * Promoción del sidebar, se renderiza en el footer del sidebar
+     */
+    promotion?: ReactElement;
 }
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
@@ -84,12 +89,11 @@ export interface IMenuDataWithState extends MenuDataType {
 /**
  * OwnerState con las propiedades de estado del sideBar
  */
-export type SideBarSlotsType = ContainerMenuItemsMainSlots | SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
+export type SideBarSlotsType = SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
 export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeActive'> & {
     [key: string]: any;
 };
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type ContainerMenuItemsMainStyles = M4LOverridesStyleRules<ContainerMenuItemsMainSlots, 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 HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;

package/components/WindowBase/WindowBase.js

@@ -26,6 +26,8 @@ const WindowBase = (props) => {
     onMouseDown,
     editionInfo,
     type = "layout",
+    collapsed,
+    draggable = true,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -35,7 +37,9 @@ const WindowBase = (props) => {
     variant: computedVariant,
     size: currentSize,
     type,
-    maximized
+    maximized,
+    collapsed,
+    draggable
   };
   return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsxs(
     WindowBaseStyled,
@@ -55,8 +59,10 @@ const WindowBase = (props) => {
             variant,
             selected,
             maximized,
+            collapsed,
             onClose,
             type,
+            draggable,
             ...other
           }
         ),

package/components/WindowBase/WindowBase.styles.js

@@ -1,4 +1,4 @@
-import { alpha } from "@mui/material";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const windowBaseStyles = {
   /**
@@ -64,7 +64,10 @@ const windowBaseStyles = {
     overflow: "auto",
     width: "100%",
     height: "100%",
-    zIndex: 1
+    zIndex: 1,
+    ...ownerState?.collapsed && {
+      display: "none"
+    }
   }),
   /**
    * Styles for the header of the window base component.
@@ -78,7 +81,7 @@ const windowBaseStyles = {
       justifyContent: "space-between",
       flexShrink: 0,
       alignSelf: "stretch",
-      cursor: "all-scroll",
+      cursor: ownerState?.draggable ? "all-scroll" : "default",
       position: "relative",
       ...ownerState?.type === "layout" || ownerState?.type === "modal" ? getSizeStyles(
         theme,
@@ -99,8 +102,8 @@ const windowBaseStyles = {
         )
       },
       borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" ? {
-        background: `linear-gradient(to right, ${alpha(theme.palette.primary.opacity, 0.04)}, ${alpha(theme.palette.primary.opacity, 0)});`,
+      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
+        background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #ffffff00);`,
         "&::before": {
           content: '""',
           position: "absolute",
@@ -108,7 +111,7 @@ const windowBaseStyles = {
           left: 0,
           width: "100%",
           height: "1px",
-          background: `linear-gradient(to left, ${alpha(theme.palette.primary.opacity, 0.06)}, ${alpha(theme.palette.primary.opacity, 0)});`
+          background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
         }
       } : {
         background: "transparent",
@@ -145,7 +148,16 @@ const windowBaseStyles = {
     textOverflow: "ellipsis",
     paddingLeft: theme.vars.size.baseSpacings.sp2,
     userSelect: "none",
-    cursor: "all-scroll"
+    cursor: ownerState?.draggable ? "all-scroll" : "default",
+    ...ownerState?.maximized && {
+      "&&&": {
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState?.size || "small",
+          "paragraphDens"
+        )
+      }
+    }
   }),
   /**
    * Styles for the subtitle container of the header of the window base component.
@@ -177,7 +189,7 @@ const windowBaseStyles = {
     overflow: "hidden",
     textOverflow: "ellipsis",
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    cursor: "all-scroll"
+    cursor: ownerState?.draggable ? "all-scroll" : "default"
   }),
   /**
    * Styles for the icon of the header of the window base component.
@@ -232,6 +244,9 @@ const windowBaseStyles = {
       marginRight: theme.vars.size.baseSpacings.sp1,
       marginBottom: ownerState?.type === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
+        ...ownerState?.maximized && {
+          display: "none"
+        },
         "&:hover": {
           backgroundColor: `${theme.vars.palette.chips.orange.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
@@ -246,16 +261,19 @@ const windowBaseStyles = {
         }
       },
       "&.expand-toggle": {
+        ...ownerState?.collapsed && {
+          display: "none"
+        },
         "&:hover": {
-          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColor} !important`,
+          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           }
         },
         "&:active": {
-          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundHover} !important`,
+          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           }
         }
       },
@@ -278,7 +296,7 @@ const windowBaseStyles = {
       }
     },
     "& .window-actions:first-child": {
-      marginLeft: `${theme.vars.size.baseSpacings.sp2} !important`
+      marginLeft: `${theme.vars.size.baseSpacings.sp4} !important`
     }
   }),
   /**
@@ -310,6 +328,9 @@ const windowBaseStyles = {
       )
     } : {
       height: "auto!important"
+    },
+    ...ownerState?.collapsed && {
+      display: "none"
     }
   }),
   /**
@@ -326,11 +347,15 @@ const windowBaseStyles = {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flex-end",
+    justifyContent: "flex-start",
     alignSelf: "stretch",
     gap: theme.vars.size.baseSpacings.sp2,
-    paddingRight: theme.vars.size.baseSpacings.sp3,
     color: theme.vars.palette.text.secondary,
+    zIndex: 1,
+    paddingTop: theme.vars.size.baseSpacings.sp5,
+    paddingBottom: 0,
+    paddingLeft: theme.vars.size.baseSpacings.sp5,
+    paddingRight: theme.vars.size.baseSpacings.sp5,
     "& > span": {
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -355,6 +380,16 @@ const windowBaseStyles = {
       top: "20px !important",
       right: "24px !important"
     }
+  }),
+  /**
+   * Styles for the container of the left actions of the window base component.
+   */
+  containerLeftActions: ({ theme, ownerState }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp1,
+    ...ownerState?.collapsed && {
+      display: "none"
+    }
   })
 };
 export {

package/components/WindowBase/constants.d.ts

@@ -1 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
+export declare const WINDOW_BASE_CLASSES: Record<string, string>;

package/components/WindowBase/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { W as WindowBaseSlots } from "./slots/WindowBaseEnum.js";
 const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
+const WINDOW_BASE_CLASSES = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
 export {
-  WINDOW_BASE_KEY_COMPONENT as W
+  WINDOW_BASE_KEY_COMPONENT as W,
+  WINDOW_BASE_CLASSES as a
 };

package/components/WindowBase/slots/WindowBaseEnum.d.ts

@@ -13,5 +13,6 @@ export declare enum WindowBaseSlots {
     linearProgressIndeterminate = "linearProgressIndeterminate",
     contentEditionInfo = "contentEditionInfo",
     windowContainerComponent = "windowContainerComponent",
-    toastContainer = "toastContainer"
+    toastContainer = "toastContainer",
+    containerLeftActions = "containerLeftActions"
 }

package/components/WindowBase/slots/WindowBaseEnum.js

@@ -14,6 +14,7 @@ var WindowBaseSlots = /* @__PURE__ */ ((WindowBaseSlots2) => {
   WindowBaseSlots2["contentEditionInfo"] = "contentEditionInfo";
   WindowBaseSlots2["windowContainerComponent"] = "windowContainerComponent";
   WindowBaseSlots2["toastContainer"] = "toastContainer";
+  WindowBaseSlots2["containerLeftActions"] = "containerLeftActions";
   return WindowBaseSlots2;
 })(WindowBaseSlots || {});
 export {

package/components/WindowBase/slots/WindowBaseSlots.d.ts

@@ -80,3 +80,6 @@ export declare const WindowContainerComponentStyled: import('@emotion/styled').S
 export declare const ToastContainerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../ToastContainer/types').ToastContainerProps, keyof import('../../ToastContainer/types').ToastContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: any;
 }, {}, {}>;
+export declare const ContainerLeftActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/WindowBase/slots/WindowBaseSlots.js

@@ -67,6 +67,10 @@ const ToastContainerStyled = styled(ToastContainer, {
   name: WINDOW_BASE_KEY_COMPONENT,
   slot: WindowBaseSlots.toastContainer
 })(windowBaseStyles?.toastContainer);
+const ContainerLeftActionsStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.containerLeftActions
+})(windowBaseStyles?.containerLeftActions);
 export {
   ContentWindowStyled as C,
   HeaderWindowComponentStyled as H,
@@ -82,5 +86,6 @@ export {
   HeaderContentStyled as c,
   ContainerTitleSubtitleStyled as d,
   TitleWindowStyled as e,
-  IconsWrapperStyled as f
+  IconsWrapperStyled as f,
+  ContainerLeftActionsStyled as g
 };

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -7,7 +7,9 @@ import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js"
 import { deepEqual } from "fast-equals";
 import { useFormatter } from "@m4l/graphics";
 import { u as useButtonActions } from "./useButtonActions.js";
-import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, d as ContainerTitleSubtitleStyled, e as TitleWindowStyled, P as PointIconStyled, S as SubtitleWindowStyled, f as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
+import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, d as ContainerTitleSubtitleStyled, e as TitleWindowStyled, P as PointIconStyled, S as SubtitleWindowStyled, f as IconsWrapperStyled, g as ContainerLeftActionsStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
+import { a as WINDOW_BASE_CLASSES } from "../../constants.js";
+import clsx from "clsx";
 const HeaderWindowBase = (props) => {
   const {
     title,
@@ -21,7 +23,9 @@ const HeaderWindowBase = (props) => {
     buildTime,
     variant,
     actions = [],
-    type
+    collapsed,
+    type,
+    draggable
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const { dateFormatter } = useFormatter();
@@ -99,11 +103,13 @@ const HeaderWindowBase = (props) => {
     maximized,
     variant,
     size,
-    type
+    type,
+    collapsed,
+    draggable
   };
   const IconButtonLeftActions = useButtonActions(leftActions);
   const IconButtonRightActions = useButtonActions(rightActions);
-  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowRNDClasses.draggableHandle, ownerState, children: [
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(draggable && dragResizeWindowRNDClasses.draggableHandle, WINDOW_BASE_CLASSES.headerWindowComponent), ownerState, children: [
     /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
       iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),
       /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { size, ownerState, children: [
@@ -126,7 +132,7 @@ const HeaderWindowBase = (props) => {
         className: dragResizeWindowRNDClasses.draggableCancel,
         ownerState,
         children: [
-          IconButtonLeftActions,
+          /* @__PURE__ */ jsx(ContainerLeftActionsStyled, { ownerState: { collapsed }, children: IconButtonLeftActions }),
           menuActions.length > 0 && /* @__PURE__ */ jsx(
             MenuActionsWindowsStyled,
             {

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -32,7 +32,7 @@ import { WindowBaseAction, WindowBaseProps } from '../../types';
  * - `selected` modifies the visual appearance to indicate the selected state.
  * @see WindowBaseProps - General properties for the window base.
  */
-export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'type' | 'buildTime' | 'maximized'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'type' | 'buildTime' | 'maximized' | 'draggable'> & {
     actions?: WindowBaseAction[];
 };
 /**

package/components/WindowBase/subcomponents/Header/useButtonActions.js

@@ -14,7 +14,8 @@ const useButtonActions = (actions) => {
           onClick: groupAction.onClick || (() => {
           }),
           color: groupAction.color,
-          className: action.className
+          className: action.className,
+          tooltipProps: action.tooltipProps
         },
         groupAction.key
       )) }, action.key);
@@ -27,7 +28,8 @@ const useButtonActions = (actions) => {
         disabled: action.disabled,
         onClick: action.onClick || (() => {
         }),
-        className: action.className
+        className: action.className,
+        tooltipProps: action.tooltipProps
       },
       action.key
     );

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.d.ts

@@ -6,5 +6,5 @@ import { MemoizedIconButtonProps } from './types';
  * This component renders an `IconButton` with an icon and tooltip.
  * It is memoized to avoid unnecessary re-renders when the props do not change.
  */
-declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, color, className, selected }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, color, className, selected, tooltipProps }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default MemoizedIconButton;

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const MemoizedIconButton = React.memo(
-  ({ iconUrl, label, disabled, onClick, color, className, selected }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected })
+  ({ iconUrl, label, disabled, onClick, color, className, selected, tooltipProps }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected, placement: tooltipProps?.placement })
 );
 export {
   MemoizedIconButton as M

package/components/WindowBase/subcomponents/MemoizedIconButton/types.d.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '../../../mui_extended/Tooltip/types';
 import { IconButtonProps } from '../../../mui_extended/IconButton/types';
 /**
  * Props for the `MemoizedIconButton` component.
@@ -31,4 +32,8 @@ export interface MemoizedIconButtonProps {
      * Whether the button is selected.
      */
     selected?: boolean;
+    /**
+     * Whether the button is collapsed.
+     */
+    tooltipProps?: Omit<TooltipProps, 'sx' | 'children' | 'title'>;
 }

package/components/WindowBase/types.d.ts

@@ -6,6 +6,7 @@ import { Sizes } from '@m4l/styles';
 import { MenuItemAction } from '../MenuActions/types';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { EmergeType } from '../areas/types';
+import { TooltipProps } from '../mui_extended/Tooltip/types';
 /**
  * Opciones para la ventana.
  */
@@ -78,6 +79,10 @@ export type WindowBaseModuleAction = Omit<ModuleActionMenuItem, 'visibility'> |
 export type WindowBaseAction = WindowBaseModuleAction & {
     place: 'left' | 'right' | 'inside';
     className?: string;
+    /**
+     * Props for the tooltip.
+     */
+    tooltipProps?: Omit<TooltipProps, 'sx' | 'children' | 'title'>;
 };
 /**
  * Interface representing the main properties of the `WindowBase` component.
@@ -122,6 +127,11 @@ export interface WindowBaseProps {
      * When `true`, the window may display a visual indicator to denote selection.
      */
     selected?: boolean;
+    /**
+     * Indicates if the window is collapsed.
+     * When `true`, the window may display a visual indicator to denote collapse.
+     */
+    collapsed?: boolean;
     /**
      * Indicates if the window is maximized.
      * When `true`, the window may display a visual indicator to denote maximization.
@@ -180,6 +190,10 @@ export interface WindowBaseProps {
      * Default is `'window'` if not specified.
      */
     type?: EmergeType;
+    /**
+     * Indicates if the window is draggable.
+     */
+    draggable?: boolean;
 }
 /**
  * Type representing the possible values of `WindowBaseSlots`.
@@ -198,10 +212,12 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  */
 export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
     selected?: WindowBaseProps['selected'];
+    collapsed?: WindowBaseProps['collapsed'];
     maximized?: WindowBaseProps['maximized'];
     variant?: WindowBaseProps['variant'];
     size?: WindowBaseProps['size'];
     type?: WindowBaseProps['type'];
+    draggable?: WindowBaseProps['draggable'];
 };
 /**
  * Type for defining custom styles for the `WindowBase` component.

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -36,6 +36,18 @@ const Window = (props) => {
     (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
     shallow
   );
+  const collapsed = useAreasStore(
+    (state) => {
+      const area = areaId ? state.hashAreas[areaId] : void 0;
+      if (area && area.currentBreakpoint && area.layouts && area.layouts[area.currentBreakpoint]) {
+        return area.layouts[area.currentBreakpoint].find(
+          (li) => li.i === windowId
+        )?.colapsed || false;
+      }
+      return false;
+    },
+    shallow
+  );
   if (status === void 0) {
     return null;
   }
@@ -56,6 +68,7 @@ const Window = (props) => {
       maximized: !!maximizedId,
       onMouseDown: onTouch,
       type: emergeType,
+      collapsed,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
           AREAS_VIEWER_CLASS_NAME,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.js

@@ -31,45 +31,51 @@ const useRightActions = ({
     const actions = [];
     actions.push({
       place: "right",
-      key: "maximize",
-      iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
-      label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
+      key: "collapseToggle",
+      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
+      label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
+      tooltipProps: {
+        placement: "bottom-end"
+      },
       /**
-       * Acción de maximize/normalize.
+       * Acción de collapse/expand.
        */
       onClick: () => {
         if (areaId) {
-          if (maximizedId) {
-            normalizeLayouts(areaId);
+          if (collapsed) {
+            unColapseLayoutItem(areaId, windowId);
           } else {
-            maximizeLayout(areaId, windowId);
+            colapseLayoutItem(areaId, windowId);
           }
         }
       },
-      disabled: false,
-      color: "info",
-      className: "expand-toggle window-actions"
+      disabled: !(maximizedId === void 0),
+      color: "warning",
+      className: "collapse-toggle window-actions"
     });
     actions.push({
       place: "right",
-      key: "collapseToggle",
-      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
-      label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
+      key: "maximize",
+      iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
+      label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
+      tooltipProps: {
+        placement: "bottom-end"
+      },
       /**
-       * Acción de collapse/expand.
+       * Acción de maximize/normalize.
        */
       onClick: () => {
         if (areaId) {
-          if (collapsed) {
-            unColapseLayoutItem(areaId, windowId);
+          if (maximizedId) {
+            normalizeLayouts(areaId);
           } else {
-            colapseLayoutItem(areaId, windowId);
+            maximizeLayout(areaId, windowId);
           }
         }
       },
-      disabled: !(maximizedId === void 0),
-      color: "warning",
-      className: "collapse-toggle window-actions"
+      disabled: false,
+      color: "info",
+      className: "expand-toggle window-actions"
     });
     return actions;
   }, [

package/components/areas/contexts/AreasContext/store.js

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

package/components/extended/React-Resizable/helpers.js

@@ -6,7 +6,7 @@ const getReactResizableStyles = (theme, ownerState) => {
     borderStyle: "solid",
     borderWidth: `${borderWith}px`,
     display: ownerState?.disabled ? "none" : "block",
-    borderColor: theme.palette.border.default,
+    borderColor: theme.vars.palette.border.default,
     borderRadius: "0%",
     backgroundImage: "none",
     position: "absolute",

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -2,12 +2,14 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { S as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
+import { S as SPLIT_LAYOUT_KEY_COMPONENT, a as SPLIT_LAYOUT_ICONS } from "./constants.js";
 import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
-import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitResizeHandleIconStyled, d as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { useEnvironment } from "@m4l/core";
 const SplitLayout = (props) => {
   const { firstPart, secondPart, splitPosition, dataTestId, defaultMasterSize = 50, defaultDetailSize = 50 } = props;
   const classes = getComponentClasses(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots);
+  const { host_static_assets, environment_assets } = useEnvironment();
   const firstPartMemo = useMemo(() => {
     return typeof firstPart === "function" ? firstPart() : firstPart;
   }, [firstPart]);
@@ -38,7 +40,8 @@ const SplitLayout = (props) => {
           SplitResizeHandleStyled,
           {
             className: `${classes.splitResizeHandle}-${splitPosition}`,
-            ownerState
+            ownerState,
+            children: /* @__PURE__ */ jsx(SplitResizeHandleIconStyled, { src: `${host_static_assets}/${environment_assets}/${SPLIT_LAYOUT_ICONS.handleIcon}` })
           }
         ),
         /* @__PURE__ */ jsx(