@m4l/components 9.2.56 → 9.2.58-beta.1

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/AreaChip.js

@@ -100,7 +100,6 @@ const AreaChip = (props) => {
     /* @__PURE__ */ jsx(
       AreaChipRootStyled,
       {
-        ownerState: {},
         role: "presentation",
         ref: anchorRef,
         onMouseUp: onRippleStop,
@@ -110,12 +109,11 @@ const AreaChip = (props) => {
         children: !isMobile ? /* @__PURE__ */ jsx(
           AreaContainerChipEditButtonStyled,
           {
-            ownerState: {},
             children: /* @__PURE__ */ jsx(
               ChipAreasStyled,
               {
                 opacity: selected ? false : true,
-                color: selected ? "info" : "default",
+                color: selected ? "primary" : "default",
                 ownerState: { ...ownerState },
                 onClick: () => selectArea(areaId),
                 size,
@@ -144,7 +142,6 @@ const AreaChip = (props) => {
     /* @__PURE__ */ jsx(
       EditAreaChipContainerStyled,
       {
-        ownerState: {},
         role: "presentation",
         onClick: (e) => {
           e.stopPropagation();
@@ -167,7 +164,7 @@ const AreaChip = (props) => {
                 values: initialValues,
                 validationSchema,
                 children: [
-                  /* @__PURE__ */ jsx(EditAreaHeaderStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
+                  /* @__PURE__ */ jsx(EditAreaHeaderStyled, { children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
                   /* @__PURE__ */ jsx(
                     RHFTextField,
                     {

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -76,11 +76,10 @@ const ChipMobile = (props) => {
       color: "error"
     }
   ];
-  return /* @__PURE__ */ jsxs(ChipMobileRootStyled, { selected, disabled, ownerState: {}, children: [
+  return /* @__PURE__ */ jsxs(ChipMobileRootStyled, { selected, disabled, children: [
     /* @__PURE__ */ jsxs(
       ChipMobileContentStyled,
       {
-        ownerState: {},
         role: "presentation",
         ref: anchorRef,
         onMouseUp: onRippleStop,
@@ -89,7 +88,7 @@ const ChipMobile = (props) => {
         },
         children: [
           /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false }),
-          /* @__PURE__ */ jsx(NameChipMobileStyled, { ownerState: {}, variant: "body", children: `${areaName}` }),
+          /* @__PURE__ */ jsx(NameChipMobileStyled, { variant: "body", children: `${areaName}` }),
           /* @__PURE__ */ jsx(
             MenuActions,
             {
@@ -132,7 +131,7 @@ const ChipMobile = (props) => {
                 values: initialValues,
                 validationSchema,
                 children: [
-                  /* @__PURE__ */ jsx(EditAreaChipMobileContainerStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
+                  /* @__PURE__ */ jsx(EditAreaChipMobileContainerStyled, { children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
                   /* @__PURE__ */ jsx(
                     RHFTextField,
                     {

package/components/areas/components/AreasAdmin/types.d.ts

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material';
 import { AreasAdminSlots } from './slots/AreasAdminEnum';
 import { AREAS_ADMIN_KEY_COMPONENT } from './constants';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
-import { M4LOverridesStyleRules } from '../../../../../src/@types/augmentations';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type AreasAdminType = keyof typeof AreasAdminSlots;
 export interface AreasAdminProps {
     /**

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -13,18 +13,26 @@ import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoo
 import { A as AreasViewerSlots } from "./slots/AreasViewerEnum.js";
 import clsx from "clsx";
 import { forwardRef } from "react";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 const AreasViewer = forwardRef((props, ref) => {
   const {
     dataTestId,
-    className
+    className,
+    size
   } = props;
   const areas = useAreasStore((state) => state.areasIds, shallow);
   const windowsModals = useAreasStore((state) => state.windowsModalsIds);
   const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
+  const status = useAreasStore((state) => state.ownerState?.status);
   const { init } = useAreasStore((state) => state.areasActions);
+  const { currentSize } = useComponentSize(size);
+  const maximizedId = useAreasStore(
+    (state) => currentArea ? state.hashAreas[currentArea]?.maximizedId : void 0,
+    shallow
+  );
   const ownerState = {
-    selected: !!currentArea
+    selected: !!currentArea,
+    maximized: !!maximizedId
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -42,7 +50,7 @@ const AreasViewer = forwardRef((props, ref) => {
           )
         } : {},
         children: status === "loaded" ? areas.map((area) => {
-          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area }, area);
+          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area, size: currentSize }, area);
         }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => init() })
       }
     ),

package/components/areas/components/AreasViewer/AreasViewer.styles.js

@@ -3,12 +3,12 @@ const areasViewerStyles = {
   /**
    * Root areas viewer Styles
    */
-  root: ({ theme }) => ({
+  root: ({ theme, ownerState }) => ({
     width: "100%",
     height: "100%",
     overflow: "hidden",
     position: "relative",
-    background: theme.vars.palette.background.neutral,
+    background: theme.vars.palette.background.base,
     // areaGridLayout
     "& .M4LAreasViewer-areaGridLayout": {
       height: "100% !important",
@@ -19,7 +19,10 @@ const areasViewerStyles = {
         userSelect: "none",
         touchAction: "none"
       }
-    }
+    },
+    ...ownerState?.maximized ? {
+      background: theme.vars.palette.background.default
+    } : {}
   }),
   /**
    * Areas root Styles
@@ -33,7 +36,7 @@ const areasViewerStyles = {
     justifyContent: "top",
     alignItems: "flex-start",
     visibility: "hidden",
-    ...ownerState.selected && {
+    ...ownerState?.selected && {
       display: "block",
       visibility: "visible"
     }

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.d.ts

@@ -1,15 +1,15 @@
 export declare const AreasViewerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const AreaRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const BaseAreaStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WrapperWindowModalStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../WindowBase/types').WindowBaseProps, keyof import('../../../../WindowBase/types').WindowBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

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

@@ -3,12 +3,12 @@ import { B as BaseArea } from "./subcomponents/BaseArea/BaseArea.js";
 import { u as useAreasStore } from "../../../../hooks/useAreas/index.js";
 import { a as AreaRootStyled } from "../../slots/AreasViewerSlots.js";
 const Area = (props) => {
-  const { selected, areaId } = props;
+  const { selected, areaId, size } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
   if (status === "init") {
     return null;
   }
-  return /* @__PURE__ */ jsx(AreaRootStyled, { ownerState: { selected }, children: /* @__PURE__ */ jsx(BaseArea, { areaId }) });
+  return /* @__PURE__ */ jsx(AreaRootStyled, { ownerState: { selected }, children: /* @__PURE__ */ jsx(BaseArea, { areaId, size }) });
 };
 Area.displayName = "Area";
 export {

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

@@ -4,15 +4,17 @@ import { W as Window } from "../Window/Window.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import clsx from "clsx";
-import { P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, R as RESPONSIVE_ROW_HEIGHTS, a as RESPONSIVE_COLAPSED_HEIGHTS } from "../../../../../../contexts/AreasContext/helpers/helper.js";
+import { P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, R as RESPONSIVE_ROW_HEIGHTS } from "../../../../../../contexts/AreasContext/helpers/helper.js";
 import { M as MemonizePopupsViewer } from "../../../../../../../popups/components/PopupsViewer/PopupsViewer.js";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { d as dragResizeWindowRNDClasses } from "../../../../../../../DragResizeWindowRND/classes/index.js";
+import { useTheme } from "@mui/material";
+import { u as useComponentSize } from "../../../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { w as withSizeProvider } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index.js";
 import { R as Responsive } from "../../../../../../../GridLayout/subcomponents/Responsive/index.js";
 const ResponsiveGridLayout = withSizeProvider(Responsive);
 const AreaGridLayout = (props) => {
-  const { areaId } = props;
+  const { areaId, size } = props;
   const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
   const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
   const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
@@ -22,6 +24,8 @@ const AreaGridLayout = (props) => {
     (state) => state.areaActions,
     shallow
   );
+  const theme = useTheme();
+  const { currentSize } = useComponentSize(size);
   const [gridLayouContainer, setGridLayouContainer] = useState(void 0);
   const onResizeStart = () => {
     if (gridLayouContainer) {
@@ -48,6 +52,18 @@ const AreaGridLayout = (props) => {
       setGridLayouContainer(nodeElement);
     }
   };
+  const RESPONSIVE_HEIGHT_VALUES = useMemo(() => {
+    const dynamicHeight = theme?.size?.[theme?.generalSettings?.isMobile ? "mobile" : "desktop"]?.[currentSize]?.container;
+    const parsedHeight = parseInt(dynamicHeight);
+    const safeHeight = isNaN(parsedHeight) ? 32 : parsedHeight;
+    return {
+      xxs: safeHeight,
+      xs: safeHeight,
+      sm: safeHeight,
+      md: safeHeight,
+      lg: safeHeight
+    };
+  }, [theme, currentSize]);
   return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
@@ -74,7 +90,7 @@ const AreaGridLayout = (props) => {
         return /* @__PURE__ */ jsx(Window, { windowId: p.i, areaId });
       },
       breakpoints,
-      colapsedHeight: RESPONSIVE_COLAPSED_HEIGHTS,
+      colapsedHeight: RESPONSIVE_HEIGHT_VALUES,
       rowHeight: RESPONSIVE_ROW_HEIGHTS,
       cols,
       containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/types.d.ts

@@ -1,3 +1,5 @@
+import { AreasViewerProps } from '../../../../types';
 export type GridLayoutProps = {
     areaId: string;
+    size: AreasViewerProps['size'];
 };

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

@@ -3,10 +3,15 @@ import { A as AreaGridLayout } from "../AreaGridLayout/AreaGridLayout.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { L as LoadingError } from "../../../../../../../LoadingError/LoadingError.js";
 import { B as BaseAreaStyled } from "../../../../slots/AreasViewerSlots.js";
+import { shallow } from "zustand/shallow";
 const BaseArea = (props) => {
-  const { areaId } = props;
+  const { areaId, size } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  return /* @__PURE__ */ jsx(BaseAreaStyled, { ownerState: {}, children: status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
+  const maximizedId = useAreasStore(
+    (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
+    shallow
+  );
+  return /* @__PURE__ */ jsx(BaseAreaStyled, { ownerState: { maximizedId }, children: status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId, size }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
   } }) });
 };
 export {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/types.d.ts

@@ -1,3 +1,5 @@
+import { AreasViewerProps } from '../../../../types';
 export type InnerForHooksProps = {
     areaId: string;
+    size: AreasViewerProps['size'];
 };

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

@@ -7,6 +7,8 @@ import { a as getNameDataTestId } from "../../../../../../../../test/getNameData
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow.js";
 import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";
+import { shallow } from "zustand/shallow";
+import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 const Window = (props) => {
   const { areaId, windowId } = props;
   const {
@@ -28,13 +30,16 @@ const Window = (props) => {
     onTouch,
     memoizedActions
   } = useWindow(windowId, areaId);
+  const maximizedId = useAreasStore(
+    (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
+    shallow
+  );
   if (status === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     WindowBaseStyled,
     {
-      ownerState: {},
       title: `${title}${moduleCount ? `:${moduleCount}` : ""}`,
       iconUrl,
       isLoading: loading,
@@ -44,7 +49,9 @@ const Window = (props) => {
       actions: memoizedActions,
       windowId,
       selected,
+      maximized: !!maximizedId,
       onMouseDown: onTouch,
+      type: emergeType,
       ...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

@@ -46,12 +46,14 @@ const useRightActions = ({
           }
         }
       },
-      disabled: false
+      disabled: false,
+      color: "info",
+      className: "expand-toggle window-actions"
     });
     actions.push({
       place: "right",
       key: "collapseToggle",
-      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
+      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 collapse/expand.
@@ -65,7 +67,9 @@ const useRightActions = ({
           }
         }
       },
-      disabled: !(maximizedId === void 0)
+      disabled: !(maximizedId === void 0),
+      color: "warning",
+      className: "collapse-toggle window-actions"
     });
     return actions;
   }, [

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

@@ -62,7 +62,6 @@ const AreaWindowModal = (props) => {
       children: /* @__PURE__ */ jsx(
         WrapperWindowModalStyled,
         {
-          ownerState: {},
           ref: setContainerRef,
           children: !isMobile ? /* @__PURE__ */ jsx(DraggableComponent, {}) : /* @__PURE__ */ jsx(Window, { ...props })
         }

package/components/areas/components/AreasViewer/subcomponents/Area/types.d.ts

@@ -1,4 +1,6 @@
+import { AreasViewerProps } from '../../types';
 export type AreaProps = {
     areaId: string;
     selected: boolean;
+    size: AreasViewerProps['size'];
 };

package/components/areas/components/AreasViewer/types.d.ts

@@ -3,6 +3,7 @@ import { AreasViewerSlots } from './slots/AreasViewerEnum';
 import { Theme } from '@mui/material';
 import { AREAS_VIEWER_KEY_COMPONENT } from './constants';
 import { AreaProps } from './subcomponents/Area/types';
+import { Sizes } from '@m4l/styles';
 export type AreasViewerType = keyof typeof AreasViewerSlots;
 export interface AreasViewerProps {
     /**
@@ -13,6 +14,10 @@ export interface AreasViewerProps {
      * Clase CSS para sobrescribir los estilos predeterminados.
      */
     className?: string;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
     /**
      * Props adicionales que se pueden pasar.
      */
@@ -20,5 +25,6 @@ export interface AreasViewerProps {
 }
 export type AreasViewerOwnerState = Pick<AreaProps, 'selected'> & {
     isDraggingResizingPopup?: boolean;
+    maximized?: boolean;
 };
 export type AreasViewerStyles = M4LOverridesStyleRules<AreasViewerType, typeof AREAS_VIEWER_KEY_COMPONENT, Theme>;

package/components/areas/contexts/AreasContext/helpers/helper.d.ts

@@ -2,8 +2,8 @@ import { WritableDraft } from 'immer/dist/internal';
 import { Area, AreasStoreStateWithActions } from '../types';
 import { WindowState } from '../../../types';
 import { Layouts } from '../../../../GridLayout/types';
-export declare const PADDING_GRIDLAYOUT = 11;
-export declare const MARGIN_GRIDLAYOUT = 11;
+export declare const PADDING_GRIDLAYOUT = 10;
+export declare const MARGIN_GRIDLAYOUT = 10;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const THROTTLE_RESIZE_TIME = 300;
 export declare const COOKIE_AREAS_ADMIN_CONTAINER_ID = "areas";
@@ -32,13 +32,6 @@ export declare const DEFAULT_LAYOUTS: {
     xs: never[];
     xxs: never[];
 };
-export declare const RESPONSIVE_COLAPSED_HEIGHTS: {
-    xxs: number;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-};
 export declare const RESPONSIVE_ROW_HEIGHTS: {
     xxs: number;
     xs: number;

package/components/areas/contexts/AreasContext/helpers/helper.js

@@ -1,8 +1,8 @@
 import { c as createDynamicMFStore } from "../../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../dictionary.js";
 import { c as addLayoutItemToBreakPointIfNoExists } from "../../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
-const PADDING_GRIDLAYOUT = 11;
-const MARGIN_GRIDLAYOUT = 11;
+const PADDING_GRIDLAYOUT = 10;
+const MARGIN_GRIDLAYOUT = 10;
 const DEBOUCED_SAVE_TIME = 500;
 const COOKIE_AREAS_ADMIN_CONTAINER_ID = "areas";
 const COOKIE_AREAS_ADMIN_ID = "admin";
@@ -12,8 +12,7 @@ const COOKIE_WINDOW_SELECTED = "windowSelected";
 const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 1 };
 const NORMALIZED_COLS = { lg: 64, md: 48, sm: 32, xs: 24, xxs: 1 };
 const DEFAULT_LAYOUTS = { lg: [], md: [], sm: [], xs: [], xxs: [] };
-const RESPONSIVE_COLAPSED_HEIGHTS = { xxs: 48, xs: 48, sm: 40, md: 40, lg: 40 };
-const RESPONSIVE_ROW_HEIGHTS = { xxs: 48, xs: 48, sm: 48, md: 40, lg: 40 };
+const RESPONSIVE_ROW_HEIGHTS = { xxs: 32, xs: 32, sm: 32, md: 32, lg: 32 };
 const DEFAULT_WINDOW = {
   status: "init",
   moduleActions: [],
@@ -197,18 +196,17 @@ export {
   NORMALIZED_COLS as N,
   PADDING_GRIDLAYOUT as P,
   RESPONSIVE_ROW_HEIGHTS as R,
-  RESPONSIVE_COLAPSED_HEIGHTS as a,
-  getDataFromResponse as b,
-  getParmsFromValue as c,
-  COOKIE_BREAKPOINT_LAYOUTS as d,
-  DEFAULT_WINDOW as e,
-  COOKIE_WINDOWS as f,
+  getDataFromResponse as a,
+  getParmsFromValue as b,
+  COOKIE_BREAKPOINT_LAYOUTS as c,
+  DEFAULT_WINDOW as d,
+  COOKIE_WINDOWS as e,
+  deleteLayoutFromBreakPoints as f,
   getCookiesContainer as g,
-  deleteLayoutFromBreakPoints as h,
-  addArea as i,
-  DEFAULT_AREA as j,
-  getSelectedAreaIdFromCookies as k,
-  COOKIE_AREAS_ADMIN_CONTAINER_ID as l,
-  COOKIE_AREAS_ADMIN_ID as m,
+  addArea as h,
+  DEFAULT_AREA as i,
+  getSelectedAreaIdFromCookies as j,
+  COOKIE_AREAS_ADMIN_CONTAINER_ID as k,
+  COOKIE_AREAS_ADMIN_ID as l,
   setColapsedLayoutBreakPoints as s
 };

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

@@ -48,7 +48,7 @@ function AreasProvider(props) {
     }, storeDevtoolsEnabled);
     areasStoreRef.current?.getState().areasActions.init();
   }
-  const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);
+  const status = useStore(areasStoreRef.current, (state) => state.ownerState?.status, shallow);
   const currentModuleId = useStore(areasStoreRef.current, (state) => state.currentModuleId);
   const refCurrentModuleId = useRef("");
   const { setHandlerGetLabel, setExternalState } = useStore(

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

@@ -1,7 +1,7 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { g as getCookiesContainer, b as getDataFromResponse, c as getParmsFromValue, s as setColapsedLayoutBreakPoints, d as COOKIE_BREAKPOINT_LAYOUTS, D as DEBOUCED_SAVE_TIME, e as DEFAULT_WINDOW, M as MARGIN_GRIDLAYOUT, f as COOKIE_WINDOWS, h as deleteLayoutFromBreakPoints, R as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, N as NORMALIZED_COLS, i as addArea, j as DEFAULT_AREA, k as getSelectedAreaIdFromCookies, C as COOKIE_WINDOW_SELECTED, l as COOKIE_AREAS_ADMIN_CONTAINER_ID, m as COOKIE_AREAS_ADMIN_ID } from "./helpers/helper.js";
+import { g as getCookiesContainer, a as getDataFromResponse, b as getParmsFromValue, s as setColapsedLayoutBreakPoints, c as COOKIE_BREAKPOINT_LAYOUTS, D as DEBOUCED_SAVE_TIME, d as DEFAULT_WINDOW, M as MARGIN_GRIDLAYOUT, e as COOKIE_WINDOWS, f as deleteLayoutFromBreakPoints, R as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, N as NORMALIZED_COLS, h as addArea, i as DEFAULT_AREA, j as getSelectedAreaIdFromCookies, C as COOKIE_WINDOW_SELECTED, k as COOKIE_AREAS_ADMIN_CONTAINER_ID, l as COOKIE_AREAS_ADMIN_ID } from "./helpers/helper.js";
 import { c as createDynamicMFStore } from "../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
@@ -37,7 +37,7 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
            * Inicializa el store de areas
            */
           init: () => {
-            if (get().ownerState.status !== "init") {
+            if (get().ownerState?.status !== "init") {
               return;
             }
             if (!get().loadAreasFromNetwork) {
@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -11,
-                    bottom: -11
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/areas/contexts/AreasContext/types.d.ts

@@ -162,7 +162,7 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
     areasActions: {
         /**
          * inicializa el store cargando las áreas de trabajo.
-         * Una vez termina el proceso, actualiza el estado de carga (ownerState.status) a "loaded".
+         * Una vez termina el proceso, actualiza el estado de carga (ownerState?.status) a "loaded".
          * Normalmente es asyncrono en producción por el llamado al endpoint áreas.
          */
         init: () => void;

package/components/areas/icons.d.ts

@@ -2,8 +2,8 @@ export declare const ICONS: {
     CLOSE: string;
     MAXIMIZE: string;
     NORMALIZE: string;
-    COLAPSE: string;
-    UNCOLPASE: string;
+    COLLAPSE: string;
+    UNCOLLPASE: string;
     RESET_COOKIES: string;
     SAVE_COOKIES: string;
     DELETE_AREA: string;

package/components/areas/icons.js

@@ -1,8 +1,8 @@
 const ICONS = {
-  MAXIMIZE: "maximize.svg",
-  NORMALIZE: "normalize.svg",
-  COLAPSE: "colapse.svg",
-  UNCOLPASE: "uncolapse.svg",
+  MAXIMIZE: "window_expand.svg",
+  NORMALIZE: "window_normalize.svg",
+  COLLAPSE: "window_collapse.svg",
+  UNCOLLPASE: "window_uncollapse.svg",
   RESET_COOKIES: "reset_cookies.svg",
   SAVE_COOKIES: "save_cookies.svg",
   DELETE_AREA: "delete_area.svg",

package/components/commercial/SectionCommercial/classes/index.d.ts

@@ -1,8 +1,8 @@
 import { AppBarComercialClassesType } from './types';
-import { OnwerState } from './../types';
+import { OwnerState } from './../types';
 export declare const appBarComercialClasses: AppBarComercialClassesType;
 export declare function getAppBarComercialUtilityClass(slot: string): string;
 /**
  * TODO: Documentar
  */
-export declare const useAppBarComercialUtilityClasses: (ownerState: OnwerState) => Record<"root", string>;
+export declare const useAppBarComercialUtilityClasses: (ownerState: OwnerState) => Record<"root", string>;

package/components/commercial/SectionCommercial/classes/index.js

@@ -17,9 +17,9 @@ const useAppBarComercialUtilityClasses = (ownerState) => {
   const slots = {
     root: [
       "root",
-      ownerState.contentWith === "fullWidth" && "fullWidth",
-      ownerState.contentWith === "boxed" && "boxed",
-      ownerState.columnReverse && "columnReverse"
+      ownerState?.contentWith === "fullWidth" && "fullWidth",
+      ownerState?.contentWith === "boxed" && "boxed",
+      ownerState?.columnReverse && "columnReverse"
     ]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});

package/components/commercial/SectionCommercial/types.d.ts

@@ -5,4 +5,4 @@ export interface SectionComercialProps extends StackProps {
     contentWith?: 'fullWidth' | 'boxed';
     columnReverse?: boolean;
 }
-export type OnwerState = Pick<SectionComercialProps, 'contentWith' | 'columnReverse'>;
+export type OwnerState = Pick<SectionComercialProps, 'contentWith' | 'columnReverse'>;

package/components/extended/React-Resizable/helpers.d.ts

@@ -20,15 +20,8 @@ export declare const getReactResizableStyles: (theme: Theme, ownerState: {
     '&.react-resizable': {
         position: string;
         '& .react-resizable-handle': {
-            display: string;
-        };
-        '&:hover:not(.react-resizable-hide) .react-resizable-handle': {
-            display: string;
-            prop1: number;
-        };
-        '&.M4L-resizing .react-resizable-handle': {
-            display: string;
-            prop1: number;
+            opacity: string;
+            zIndex: number;
         };
     };
     '& .react-resizable-handle-sw': {