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

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

package/components/SideBar/types.d.ts

@@ -1,9 +1,8 @@
 import { Sizes } from '@m4l/styles';
-import { ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
+import { ContainerMenuItemsMainSlots, 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.
  */
@@ -73,10 +72,6 @@ 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.
@@ -89,11 +84,12 @@ export interface IMenuDataWithState extends MenuDataType {
 /**
  * OwnerState con las propiedades de estado del sideBar
  */
-export type SideBarSlotsType = SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
+export type SideBarSlotsType = ContainerMenuItemsMainSlots | 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,7 +26,6 @@ const WindowBase = (props) => {
     onMouseDown,
     editionInfo,
     type = "layout",
-    collapsed,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -36,8 +35,7 @@ const WindowBase = (props) => {
     variant: computedVariant,
     size: currentSize,
     type,
-    maximized,
-    collapsed
+    maximized
   };
   return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsxs(
     WindowBaseStyled,
@@ -57,7 +55,6 @@ const WindowBase = (props) => {
             variant,
             selected,
             maximized,
-            collapsed,
             onClose,
             type,
             ...other

package/components/WindowBase/WindowBase.styles.js

@@ -1,4 +1,4 @@
-import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { alpha } from "@mui/material";
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const windowBaseStyles = {
   /**
@@ -64,10 +64,7 @@ const windowBaseStyles = {
     overflow: "auto",
     width: "100%",
     height: "100%",
-    zIndex: 1,
-    ...ownerState?.collapsed && !ownerState?.maximized && {
-      display: "none"
-    }
+    zIndex: 1
   }),
   /**
    * Styles for the header of the window base component.
@@ -102,8 +99,8 @@ const windowBaseStyles = {
         )
       },
       borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
-        background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #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)});`,
         "&::before": {
           content: '""',
           position: "absolute",
@@ -111,7 +108,7 @@ const windowBaseStyles = {
           left: 0,
           width: "100%",
           height: "1px",
-          background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
+          background: `linear-gradient(to left, ${alpha(theme.palette.primary.opacity, 0.06)}, ${alpha(theme.palette.primary.opacity, 0)});`
         }
       } : {
         background: "transparent",
@@ -148,16 +145,7 @@ const windowBaseStyles = {
     textOverflow: "ellipsis",
     paddingLeft: theme.vars.size.baseSpacings.sp2,
     userSelect: "none",
-    cursor: "all-scroll",
-    ...ownerState?.maximized && {
-      "&&&": {
-        ...getTypographyStyles(
-          theme.generalSettings.isMobile,
-          ownerState?.size || "small",
-          "paragraphDens"
-        )
-      }
-    }
+    cursor: "all-scroll"
   }),
   /**
    * Styles for the subtitle container of the header of the window base component.
@@ -244,9 +232,6 @@ 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": {
@@ -261,19 +246,16 @@ const windowBaseStyles = {
         }
       },
       "&.expand-toggle": {
-        ...ownerState?.collapsed && {
-          display: "none"
-        },
         "&:hover": {
-          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColor} !important`,
+          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
           }
         },
         "&:active": {
-          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundHover} !important`,
+          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
           }
         }
       },
@@ -296,7 +278,7 @@ const windowBaseStyles = {
       }
     },
     "& .window-actions:first-child": {
-      marginLeft: `${theme.vars.size.baseSpacings.sp4} !important`
+      marginLeft: `${theme.vars.size.baseSpacings.sp2} !important`
     }
   }),
   /**
@@ -328,9 +310,6 @@ const windowBaseStyles = {
       )
     } : {
       height: "auto!important"
-    },
-    ...ownerState?.collapsed && {
-      display: "none"
     }
   }),
   /**
@@ -347,15 +326,11 @@ const windowBaseStyles = {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flex-start",
+    justifyContent: "flex-end",
     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",
@@ -380,16 +355,6 @@ 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,2 +1 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<string, string>;

package/components/WindowBase/constants.js

@@ -1,8 +1,4 @@
-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_CLASSES as a
+  WINDOW_BASE_KEY_COMPONENT as W
 };

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

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

package/components/WindowBase/slots/WindowBaseEnum.js

@@ -14,7 +14,6 @@ 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,6 +80,3 @@ 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,10 +67,6 @@ 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,
@@ -86,6 +82,5 @@ export {
   HeaderContentStyled as c,
   ContainerTitleSubtitleStyled as d,
   TitleWindowStyled as e,
-  IconsWrapperStyled as f,
-  ContainerLeftActionsStyled as g
+  IconsWrapperStyled as f
 };

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

@@ -7,9 +7,7 @@ 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, g as ContainerLeftActionsStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
-import { a as WINDOW_BASE_CLASSES } from "../../constants.js";
-import clsx from "clsx";
+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";
 const HeaderWindowBase = (props) => {
   const {
     title,
@@ -23,7 +21,6 @@ const HeaderWindowBase = (props) => {
     buildTime,
     variant,
     actions = [],
-    collapsed,
     type
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -102,12 +99,11 @@ const HeaderWindowBase = (props) => {
     maximized,
     variant,
     size,
-    type,
-    collapsed
+    type
   };
   const IconButtonLeftActions = useButtonActions(leftActions);
   const IconButtonRightActions = useButtonActions(rightActions);
-  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(dragResizeWindowRNDClasses.draggableHandle, WINDOW_BASE_CLASSES.headerWindowComponent), ownerState, children: [
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowRNDClasses.draggableHandle, 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: [
@@ -130,7 +126,7 @@ const HeaderWindowBase = (props) => {
         className: dragResizeWindowRNDClasses.draggableCancel,
         ownerState,
         children: [
-          /* @__PURE__ */ jsx(ContainerLeftActionsStyled, { ownerState: { collapsed }, children: IconButtonLeftActions }),
+          IconButtonLeftActions,
           menuActions.length > 0 && /* @__PURE__ */ jsx(
             MenuActionsWindowsStyled,
             {

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

@@ -14,8 +14,7 @@ const useButtonActions = (actions) => {
           onClick: groupAction.onClick || (() => {
           }),
           color: groupAction.color,
-          className: action.className,
-          placement: action.placement
+          className: action.className
         },
         groupAction.key
       )) }, action.key);
@@ -28,8 +27,7 @@ const useButtonActions = (actions) => {
         disabled: action.disabled,
         onClick: action.onClick || (() => {
         }),
-        className: action.className,
-        placement: action.placement
+        className: action.className
       },
       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, placement }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, color, className, selected }: 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, placement }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected, placement })
+  ({ iconUrl, label, disabled, onClick, color, className, selected }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected })
 );
 export {
   MemoizedIconButton as M

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

@@ -1,4 +1,3 @@
-import { TooltipProps } from '../../../mui_extended/Tooltip/types';
 import { IconButtonProps } from '../../../mui_extended/IconButton/types';
 /**
  * Props for the `MemoizedIconButton` component.
@@ -32,8 +31,4 @@ export interface MemoizedIconButtonProps {
      * Whether the button is selected.
      */
     selected?: boolean;
-    /**
-     * Whether the button is collapsed.
-     */
-    placement?: TooltipProps['placement'];
 }

package/components/WindowBase/types.d.ts

@@ -6,7 +6,6 @@ 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.
  */
@@ -79,10 +78,6 @@ export type WindowBaseModuleAction = Omit<ModuleActionMenuItem, 'visibility'> |
 export type WindowBaseAction = WindowBaseModuleAction & {
     place: 'left' | 'right' | 'inside';
     className?: string;
-    /**
-     * Placement of the tooltip.
-     */
-    placement?: TooltipProps['placement'];
 };
 /**
  * Interface representing the main properties of the `WindowBase` component.
@@ -127,11 +122,6 @@ 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.
@@ -208,7 +198,6 @@ 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'];

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

@@ -36,18 +36,6 @@ 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;
   }
@@ -68,7 +56,6 @@ 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,46 +31,45 @@ const useRightActions = ({
     const 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)),
       /**
-       * 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"
     });
     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)),
-      placement: "bottom-end",
+      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)),
       /**
-       * 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"
     });
     return actions;
   }, [

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.vars.palette.border.default,
+    borderColor: theme.palette.border.default,
     borderRadius: "0%",
     backgroundImage: "none",
     position: "absolute",

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

@@ -2,14 +2,12 @@ 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, a as SPLIT_LAYOUT_ICONS } from "./constants.js";
+import { S as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
 import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.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";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
 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]);
@@ -40,8 +38,7 @@ const SplitLayout = (props) => {
           SplitResizeHandleStyled,
           {
             className: `${classes.splitResizeHandle}-${splitPosition}`,
-            ownerState,
-            children: /* @__PURE__ */ jsx(SplitResizeHandleIconStyled, { src: `${host_static_assets}/${environment_assets}/${SPLIT_LAYOUT_ICONS.handleIcon}` })
+            ownerState
           }
         ),
         /* @__PURE__ */ jsx(