@m4l/components 9.2.56-beta.2 → 9.2.56-beta.4

package/components/WindowBase/WindowBase.js

@@ -14,6 +14,7 @@ const WindowBase = (props) => {
     children,
     size = "medium",
     selected = false,
+    maximized,
     variant = "outlined",
     version,
     buildTime,
@@ -32,7 +33,8 @@ const WindowBase = (props) => {
     selected,
     variant,
     size: currentSize,
-    type
+    type,
+    maximized
   };
   return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsxs(
     WindowBaseStyled,
@@ -51,6 +53,7 @@ const WindowBase = (props) => {
             size,
             variant,
             selected,
+            maximized,
             onClose,
             type,
             ...other

package/components/WindowBase/WindowBase.styles.js

@@ -5,32 +5,59 @@ const windowBaseStyles = {
    * Styles for the window base wrapper component.
    */
   wrapperWindowBase: ({ theme, ownerState }) => ({
-    position: "relative",
-    height: "100%",
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    borderRadius: ownerState?.variant === "outlined" ? theme.vars.size.borderRadius.r2 : "unset",
-    backgroundColor: theme.vars.palette.background.default,
-    overflow: "hidden",
-    ...ownerState?.variant === "outlined" && {
-      ...ownerState?.selected ? {
-        ...ownerState?.type === "layout" ? {
-          background: `linear-gradient(to bottom, 
-          ${alpha(theme.palette.primary.opacity, 0.25)}, 
-          ${alpha(theme.palette.primary.opacity, 0.1)})`,
-          "&::before": {
-            content: '""',
-            position: "absolute",
-            inset: "2px",
-            background: theme.vars.palette.background.default,
-            borderRadius: "6.7px"
+    "&": {
+      position: "relative",
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      borderRadius: ownerState?.variant === "outlined" ? theme.vars.size.borderRadius.r2 : "unset",
+      backgroundColor: theme.vars.palette.background.default,
+      overflow: "hidden",
+      padding: ownerState?.maximized ? theme.vars.size.baseSpacings.sp3 : 0,
+      ...ownerState?.variant === "outlined" && {
+        ...ownerState?.selected ? {
+          ...ownerState?.type === "layout" ? {
+            background: `linear-gradient(to bottom, 
+            ${alpha(theme.palette.primary.opacity, 0.25)}, 
+            ${alpha(theme.palette.primary.opacity, 0.1)})`,
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              inset: "1px",
+              background: theme.vars.palette.background.default,
+              borderRadius: "6.7px"
+            }
+          } : {
+            boxShadow: `inset 0px 0px 0 1px ${theme.vars.palette?.border.main}`
           }
         } : {
-          boxShadow: `inset 0px 0px 0 1.6px ${theme.vars.palette?.border.main}`
+          boxShadow: ownerState?.type === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
         }
-      } : {
-        boxShadow: ownerState?.type === "popup" || ownerState?.type === "layout" ? `inset 0px 0px 0 1.6px ${theme.vars.palette?.border.default}` : "unset"
+      },
+      ...ownerState?.type === "popup" && {
+        "&&&": {
+          boxShadow: theme.vars.customShadows.z1,
+          border: `1px solid ${theme.vars.palette?.border.secondary}`,
+          borderRadius: theme.vars.size.borderRadius.r1,
+          ...ownerState?.selected && {
+            boxShadow: theme.vars.customShadows.z4,
+            border: `1px solid ${theme.vars.palette?.border.main}`
+          }
+        }
+      },
+      ...ownerState?.maximized && {
+        padding: theme.vars.size.baseSpacings.sp3,
+        paddingTop: theme.vars.size.baseSpacings.sp2,
+        paddingBottom: 0
+      },
+      ...ownerState?.type === "layout" && {
+        ...ownerState?.selected && {
+          boxShadow: theme.vars.customShadows.primary
+        }
+      },
+      ...ownerState?.type === "modal" && {
+        boxShadow: `${theme.vars.customShadows.z3}!important`
       }
     }
   }),
@@ -125,7 +152,7 @@ const windowBaseStyles = {
    */
   headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+    ...ownerState?.selected && ownerState?.type !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -133,7 +160,7 @@ const windowBaseStyles = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
     userSelect: "none",
     cursor: "all-scroll"
   }),
@@ -158,7 +185,7 @@ const windowBaseStyles = {
   headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+    ...ownerState?.selected && ownerState?.type !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -174,7 +201,7 @@ const windowBaseStyles = {
    */
   headerIconWindowBase: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+      ...ownerState?.selected && ownerState?.type !== "modal" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`

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

@@ -16,6 +16,7 @@ const HeaderWindowBase = (props) => {
     iconUrl,
     size,
     selected,
+    maximized,
     version,
     buildTime,
     variant,
@@ -95,6 +96,7 @@ const HeaderWindowBase = (props) => {
   }, [insideActions, version, host_static_assets, environment_assets, buildTime, dateFormatter]);
   const ownerState = {
     selected,
+    maximized,
     variant,
     size,
     type

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'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'type' | 'buildTime' | 'maximized'> & {
     actions?: WindowBaseAction[];
 };
 /**

package/components/WindowBase/types.d.ts

@@ -122,6 +122,11 @@ export interface WindowBaseProps {
      * When `true`, the window may display a visual indicator to denote selection.
      */
     selected?: boolean;
+    /**
+     * Indicates if the window is maximized.
+     * When `true`, the window may display a visual indicator to denote maximization.
+     */
+    maximized?: boolean;
     /**
      * The version label for the window.
      * Useful for displaying version information (e.g., `1.0.0`) in the header or footer.
@@ -193,6 +198,7 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  */
 export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
     selected?: WindowBaseProps['selected'];
+    maximized?: WindowBaseProps['maximized'];
     variant?: WindowBaseProps['variant'];
     size?: WindowBaseProps['size'];
     type?: WindowBaseProps['type'];

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

@@ -13,16 +13,19 @@ 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 { init } = useAreasStore((state) => state.areasActions);
+  const { currentSize } = useComponentSize(size);
   const ownerState = {
     selected: !!currentArea
   };
@@ -42,7 +45,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

@@ -8,7 +8,7 @@ const areasViewerStyles = {
     height: "100%",
     overflow: "hidden",
     position: "relative",
-    background: theme.vars.palette.background.default,
+    background: theme.vars.palette.background.base,
     // areaGridLayout
     "& .M4LAreasViewer-areaGridLayout": {
       height: "100% !important",
@@ -41,12 +41,14 @@ const areasViewerStyles = {
   /**
    * Inner for hooks Styles
    */
-  baseArea: () => ({
+  baseArea: ({ theme, ownerState }) => ({
     display: "flex",
     flexDirection: "row",
     height: "100%",
     width: "100%",
-    overflow: "hidden"
+    overflow: "hidden",
+    padding: theme.vars.size.baseSpacings.sp3,
+    ...ownerState?.maximizedId ? { padding: 0 } : {}
   }),
   /**
    * Wrapper window modal Styles

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, { 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

@@ -49,6 +49,7 @@ const Window = (props) => {
       actions: memoizedActions,
       windowId,
       selected,
+      maximized: !!maximizedId,
       onMouseDown: onTouch,
       type: emergeType,
       variant: maximizedId ? "text" : "outlined",

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

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 = 0;
+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 = 0;
+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/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";
@@ -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/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -11,9 +11,9 @@ const booleanFormatterStyles = {
   /**
    * Styled del icono
    */
-  icon: ({ theme }) => ({
+  icon: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: theme.vars.palette.text.primary
+      backgroundColor: ownerState?.value ? theme.vars.palette.primary.enabled : theme.vars.palette.text.secondary
     }
   }),
   chip: {}

package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.d.ts

@@ -11,7 +11,8 @@ import { RHFAutocompleteAsyncProps } from './types';
  * - Si al componente se le define onChangeFilterParms
  *   - (Test OK) Solo cuando se abre el combo se debe hacer el request .
  *   - (Test OK) Si se abre el combo varias veces, solo se hace el request la primera vez si no han cambiado los parms.
- *   - (Test OK) Si cambian los parms (Normalmente cuando el componente depende de otro componente), al volver a abrir el combo se debe volver a hacer el request.
+ *   - (Test OK in reducer) Si cambian los parms (Normalmente cuando el componente depende de otro componente), las opciones de deben limpiar
+ *   - (Test OK) Si cambian los parms (Normalmente cuando el componente depende de otro componente) cuando se vuelve a abrir el combo se debe volver a hacer el request .
  *   - (Test OK) Si el request esta en curso y se cierra el combo, se debe dejar terminar el request para no perder la respuesta.
  *   - (Test OK) Si el request genera un error, debe dejar las mismas opciones y en el proximo open se debe volver a hacer el request.
  *   - Si es multiple = false

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

@@ -30,7 +30,8 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         parms: action.payload,
         fireFetchCount: 0,
-        firstOpen: true
+        firstOpen: true,
+        options: []
       };
     case actionsType.SET_QUERY_PARAMS:
       if (deepEqual(state.queryParams, action.payload)) {

package/components/mui_extended/Accordion/Accordion.js

@@ -72,7 +72,7 @@ const Accordion = forwardRef((props, ref) => {
                 {
                   ownerState,
                   size,
-                  variant: "body",
+                  variant: "caption",
                   skeletonWidth: skeletonLabelWidth,
                   children: label
                 }

package/components/mui_extended/Accordion/styles.js

@@ -8,8 +8,8 @@ const accordionStyles = {
   accordionRoot: ({ theme, ownerState }) => ({
     "&&&": {
       ...ownerState?.variant === "outlined" && {
-        border: `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}`,
-        borderRadius: ownerState?.variant === "outlined" ? theme.size.borderRadius["r1-5"] : "unset"
+        border: `${theme.size.borderStroke.container} ${theme.vars.palette.border.secondary}`,
+        borderRadius: ownerState?.variant === "outlined" ? theme.size.borderRadius.r2 : "unset"
       },
       ...ownerState?.variant === "text" && {
         borderBottom: ownerState?.expanded ? `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}` : `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}`,
@@ -27,22 +27,25 @@ const accordionStyles = {
   accordionSummary: ({ theme, ownerState }) => ({
     "&&&": {
       paddingLeft: theme.vars.size.baseSpacings.sp2,
-      paddingRight: theme.vars.size.baseSpacings.sp1,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
       gap: theme.vars.size.baseSpacings.sp2,
       display: "flex",
       flexDirection: "row",
       justifyContent: "flex-start",
       alignItems: "center",
-      ...getSizeStyles(theme, ownerState?.size ?? "medium", "container"),
+      ...getSizeStyles(theme, ownerState?.size ?? "medium", "container", (size) => ({
+        minHeight: size,
+        height: size
+      })),
       background: theme.vars.palette.background.default,
       overflow: "hidden",
       borderBottom: ownerState?.expanded && ownerState?.variant === "outlined" ? `${theme.size.borderStroke.container} ${theme.vars.palette.border.disabled}` : "unset",
       borderRadius: "unset",
       ...ownerState?.variant === "outlined" && {
-        borderTopLeftRadius: theme.size.borderRadius["r1-5"],
-        borderTopRightRadius: theme.size.borderRadius["r1-5"],
-        borderBottomLeftRadius: !ownerState?.expanded ? theme.size.borderRadius["r1-5"] : "unset",
-        borderBottomRightRadius: !ownerState?.expanded ? theme.size.borderRadius["r1-5"] : "unset"
+        borderTopLeftRadius: theme.size.borderRadius.r2,
+        borderTopRightRadius: theme.size.borderRadius.r2,
+        borderBottomLeftRadius: !ownerState?.expanded ? theme.size.borderRadius.r2 : "unset",
+        borderBottomRightRadius: !ownerState?.expanded ? theme.size.borderRadius.r2 : "unset"
       },
       "&:hover": {
         background: theme.vars.palette.default.hoverOpacity
@@ -57,6 +60,7 @@ const accordionStyles = {
       "& .MuiAccordionSummary-content": {
         gap: `${theme.vars.size.baseSpacings.sp1}`,
         overflow: "hidden",
+        paddingLeft: theme.vars.size.baseSpacings.sp1,
         "& .MuiTypography-root": {
           overflow: "hidden",
           textOverflow: "ellipsis",

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -16,5 +16,7 @@ type OptionType<T> = T & {
 /**
  * Render option for Autocomplete.
  */
-export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement>, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement> & {
+    key: string;
+}, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const MemoizedMenuItem = memo(MenuItem);
 const renderOption = (optionProps, option) => {
-  const { className, ...otherOptionProps } = optionProps;
+  const { className, key, ...otherOptionProps } = optionProps;
   return /* @__PURE__ */ jsx(
     MemoizedMenuItem,
     {
@@ -15,7 +15,8 @@ const renderOption = (optionProps, option) => {
       startIcon: option.startAdornment,
       endIcon: option.endAdornment,
       size: option.size
-    }
+    },
+    option.label
   );
 };
 export {

package/components/mui_extended/Tab/Tab.styles.js

@@ -75,12 +75,12 @@ const tabStyles = {
       background: theme.vars.palette.background.default,
       border: "unset",
       ".M4LTab-icon div": {
-        backgroundColor: ownerState?.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
+        backgroundColor: ownerState?.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.semanticText
       },
       ".M4LTab-tipography": {
-        color: ownerState?.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
+        color: ownerState?.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.semanticText
       },
-      // Efecto ripple en estado seleccionado
+      // Efecto ripple en estado seleccionado`
       "& .MuiTouchRipple-root": {
         borderTopLeftRadius: theme.vars.size.baseSpacings["sp0-5"],
         borderTopRightRadius: theme.vars.size.baseSpacings["sp0-5"]