@m4l/components 9.2.56-beta.3 → 9.2.56-beta.5

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -20,6 +20,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly default: {
         readonly semanticText: string;
@@ -40,6 +42,8 @@ export declare const colorsLight: {
         readonly activeOpacity: string;
         readonly opacity: string;
         readonly toneOpacity: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly divider: string;
     readonly text: {
@@ -129,6 +133,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly success: {
         readonly focusVisible: string;
@@ -149,6 +155,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly warning: {
         readonly focusVisible: string;
@@ -169,6 +177,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly error: {
         readonly focusVisible: string;
@@ -189,6 +199,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
 } | {
     readonly mode: "dark";
@@ -212,6 +224,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly default: {
         readonly semanticText: string;
@@ -232,6 +246,8 @@ export declare const colorsLight: {
         readonly activeOpacity: string;
         readonly opacity: string;
         readonly toneOpacity: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly text: {
         readonly primary: string;
@@ -321,6 +337,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly success: {
         readonly focusVisible: string;
@@ -341,6 +359,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly warning: {
         readonly focusVisible: string;
@@ -361,6 +381,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly error: {
         readonly focusVisible: string;
@@ -381,6 +403,8 @@ export declare const colorsLight: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
 };
 export declare const colorsDark: {
@@ -405,6 +429,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly default: {
         readonly semanticText: string;
@@ -425,6 +451,8 @@ export declare const colorsDark: {
         readonly activeOpacity: string;
         readonly opacity: string;
         readonly toneOpacity: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly divider: string;
     readonly text: {
@@ -514,6 +542,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly success: {
         readonly focusVisible: string;
@@ -534,6 +564,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly warning: {
         readonly focusVisible: string;
@@ -554,6 +586,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly error: {
         readonly focusVisible: string;
@@ -574,6 +608,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
 } | {
     readonly mode: "dark";
@@ -597,6 +633,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly default: {
         readonly semanticText: string;
@@ -617,6 +655,8 @@ export declare const colorsDark: {
         readonly activeOpacity: string;
         readonly opacity: string;
         readonly toneOpacity: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly text: {
         readonly primary: string;
@@ -706,6 +746,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly success: {
         readonly focusVisible: string;
@@ -726,6 +768,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly warning: {
         readonly focusVisible: string;
@@ -746,6 +790,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
     readonly error: {
         readonly focusVisible: string;
@@ -766,6 +812,8 @@ export declare const colorsDark: {
         readonly opacity: string;
         readonly toneOpacity: string;
         readonly semanticText: string;
+        readonly opacityGradient1: string;
+        readonly opacityGradient2: string;
     };
 };
 export declare const generalColors: string[];

package/components/DataGrid/Datagrid.styles.js

@@ -47,6 +47,11 @@ const dataGridStyles = {
     "&& .M4lclassCssSpecificity": {
       fontWeight: 400
       //Se utiliza directamente el valor porque no está tokenizado
+    },
+    '& [role="row"]:last-of-type': {
+      "& .rdg-cell": {
+        boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${theme.vars.palette?.border.secondary}`
+      }
     }
   }),
   customHeader: ({ ownerState }) => ({
@@ -83,7 +88,11 @@ const dataGridStyles = {
     display: "flex",
     flexDirection: "row",
     gap: theme.vars.size.baseSpacings["sp0-5"],
-    alignItems: "center"
+    alignItems: "center",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette?.border.disabled,
+    padding: theme.vars.size.baseSpacings.sp1
   }),
   /**
    * Estilos para el contenedor de las acciones derecho
@@ -247,9 +256,9 @@ const dataGridStyles = {
       position: "relative",
       height: "100%",
       overflow: "hidden",
-      borderRadius: theme.vars.size.borderRadius.r1,
+      borderRadius: theme.vars.size.borderRadius.r2,
       border: theme.vars.size.borderStroke.container,
-      borderColor: theme.vars.palette?.border.default,
+      borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
         border: "none",
         background: theme.vars.palette.background.default,
@@ -431,14 +440,32 @@ const dataGridStyles = {
         textAlign: "start",
         display: "inline",
         justifyContent: "center",
-        alignItems: "center"
+        alignItems: "center",
+        "& .M4LBooleanFormatter-root": {
+          marginRight: "auto"
+        },
+        "& .MuiCheckbox-root": {
+          marginRight: "auto"
+        }
       },
       "& .rdg-cell.rdg-cell-align-center": {
         textAlign: "center",
-        alignContent: "center"
+        alignContent: "center",
+        "& .M4LBooleanFormatter-root": {
+          margin: "0 auto"
+        },
+        "& .MuiCheckbox-root": {
+          margin: "auto"
+        }
       },
       "& .rdg-cell.rdg-cell-align-right": {
-        textAlign: "right"
+        textAlign: "right",
+        "& .M4LBooleanFormatter-root": {
+          marginLeft: "auto"
+        },
+        "& .MuiCheckbox-root": {
+          marginLeft: "auto"
+        }
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
         textAlign: "start",

package/components/PropertyValue/PropertyValue.styles.js

@@ -47,7 +47,7 @@ const propertyValueStyles = {
       paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
       borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
       "&:hover": !ownerState?.isForm && {
-        background: theme.vars.palette.background?.hover
+        background: theme.vars.palette.default?.hoverOpacity
       },
       ...semanticStyle,
       [`@container ${CONTAINER_QUERY_NAME} (min-width: 0px) and (max-width: 400px)`]: {

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,53 @@ 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",
+      ...ownerState?.variant === "outlined" && {
+        ...ownerState?.selected ? {
+          ...ownerState?.type === "layout" ? {
+            background: `linear-gradient(to bottom, 
+            ${theme.vars.palette.primary.opacityGradient1}, 
+            ${theme.vars.palette.primary.opacityGradient2})`,
+            "&::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?.type === "layout" && {
+        ...ownerState?.selected && !ownerState?.maximized ? {
+          boxShadow: theme.vars.customShadows.primary
+        } : {}
+      },
+      ...ownerState?.type === "modal" && {
+        boxShadow: `${theme.vars.customShadows.z3}!important`
       }
     }
   }),
@@ -59,17 +80,14 @@ const windowBaseStyles = {
       alignSelf: "stretch",
       cursor: "all-scroll",
       position: "relative",
-      ...ownerState?.type === "popup" ? {
-        ...getSizeStyles(
-          theme,
-          ownerState?.size,
-          "action",
-          (size) => ({
-            minHeight: size,
-            height: "auto"
-          })
-        )
-      } : ownerState?.type === "modal" ? {
+      ...ownerState?.type === "layout" || ownerState?.type === "modal" ? getSizeStyles(
+        theme,
+        ownerState?.size,
+        "container",
+        (size) => ({
+          minHeight: size
+        })
+      ) : {
         ...getSizeStyles(
           theme,
           ownerState?.size,
@@ -79,15 +97,7 @@ const windowBaseStyles = {
             height: "auto"
           })
         )
-      } : {},
-      ...ownerState?.type === "layout" ? getSizeStyles(
-        theme,
-        ownerState?.size,
-        "container",
-        (size) => ({
-          minHeight: size
-        })
-      ) : {},
+      },
       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)});`,
@@ -125,7 +135,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 +143,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 +168,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 +184,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/AreasAdmin/AreasAdmin.styles.js

@@ -62,9 +62,12 @@ const areasAdminStyles = {
   /**
    * Root area container chip edit button
    */
-  areaContainerChipEditButton: () => ({
+  areaContainerChipEditButton: ({ theme }) => ({
     display: "flex",
-    flexDirection: "row"
+    flexDirection: "row",
+    "& .M4LIcon-icon": {
+      backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
+    }
   }),
   /**
    * Chip areas Styles
@@ -79,6 +82,9 @@ const areasAdminStyles = {
     "&:hover > .M4LAreasAdmin-menuActionsChip": {
       opacity: 1,
       pointerEvents: "auto"
+    },
+    "& .M4LIcon-icon": {
+      backgroundColor: ownerState?.isAreaSelected ? `${theme.vars.palette.primary.contrastText}!important` : `${theme.vars.palette.text.secondary}!important`
     }
   }),
   /**
@@ -90,7 +96,10 @@ const areasAdminStyles = {
       theme,
       ownerState?.size || "small",
       "action"
-    )
+    ),
+    "& .M4LIcon-icon": {
+      backgroundColor: `${theme.vars.palette.text.primary}!important`
+    }
   }),
   /**
    * Menu actions Styles

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 { 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.default,
+    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

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

@@ -33,7 +33,8 @@ function BooleanFormatter(props) {
         BooleanFormatterIconStyled,
         {
           ownerState,
-          src: value ? srcCheckTrue : srcCheckFalse
+          src: value ? srcCheckTrue : srcCheckFalse,
+          className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className)
         }
       );
     }
@@ -43,6 +44,7 @@ function BooleanFormatter(props) {
         {
           label: getFormatBoolean(presentationType, value, getLabel),
           ownerState,
+          className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
           opacity: true,
           color: value ? "primary" : "default",
           variant: "contained"

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

@@ -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/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/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"]

package/components/mui_extended/TabContent/TabContent.js

@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
 import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
-  const { children, className, ...others } = props;
+  const { children, className, background = false, ...others } = props;
   const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
-  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ...others, children });
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -2,14 +2,16 @@ const tabContentStyles = {
   /**
    * Elemento root referencia a `TabContent`
    */
-  root: ({ theme }) => ({
-    padding: theme.vars.size.baseSpacings.sp3,
+  root: ({ theme, ownerState }) => ({
+    paddingTop: "11px",
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
     display: "flex",
     overflow: "hidden",
     // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,
-    background: theme.vars.palette.background.base,
     position: "relative",
     flex: 1,
     flexGrow: 1,
@@ -18,6 +20,9 @@ const tabContentStyles = {
     boxSizing: "border-box",
     zIndex: "0",
     top: "-1px",
+    ...ownerState?.background ? {
+      backgroundColor: theme.vars.palette.background.default
+    } : {},
     "& .M4LStack-root": {
       gap: `${theme.vars.size.baseSpacings.sp2} !important`
     },

package/components/mui_extended/TabContent/types.d.ts

@@ -7,5 +7,6 @@ export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;
+    background?: boolean;
 }
 export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/components/popups/components/PopupsViewer/PopupsViewer.styles.js

@@ -19,13 +19,13 @@ const popupsViewerStyles = {
    * id: 'global',
    * },
    */
-  popupDragWindowRoot: ({ theme, ownerState }) => ({
+  popupDragWindowRoot: ({ ownerState }) => ({
     display: "flex",
     flexDirection: "column",
     position: "relative",
     width: "100%",
     height: "100%",
-    backgroundColor: theme.vars.palette.background.default,
+    backgroundColor: "transparent",
     zIndex: ownerState?.zIndex || 0,
     "&.fade-enter": {
       opacity: 0

package/hooks/useDynamicFilterAndSort/icons.d.ts

@@ -1,6 +1,6 @@
 export declare const ICON_PATH_FILTER = "frontend/components/data_grid/assets/icons/filter.svg";
 export declare const ICON_PATH_SORT = "frontend/components/data_grid/assets/icons/sort.svg";
-export declare const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
+export declare const ASSETS_URL = "frontend/components/DynamincFilterAndSort/assets/icons";
 export declare const ASSETS: {
-    readonly refresh: "frontend/components/Dynamic_sort/assets/icons/restart.svg";
+    readonly refresh: "frontend/components/DynamincFilterAndSort/assets/icons/refresh.svg";
 };

package/hooks/useDynamicFilterAndSort/icons.js

@@ -1,8 +1,8 @@
 const ICON_PATH_FILTER = "frontend/components/data_grid/assets/icons/filter.svg";
 const ICON_PATH_SORT = "frontend/components/data_grid/assets/icons/sort.svg";
-const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
+const ASSETS_URL = "frontend/components/DynamincFilterAndSort/assets/icons";
 const ASSETS = {
-  refresh: `${ASSETS_URL}/restart.svg`
+  refresh: `${ASSETS_URL}/refresh.svg`
 };
 export {
   ASSETS as A,

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -109,7 +109,8 @@ const useDynamicFilterAndSort = (props) => {
           {
             icon: refreshIconUrl,
             "aria-label": "refresh",
-            onClick: onRefresh
+            onClick: onRefresh,
+            variant: "outline"
           }
         ),
         rightActions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.56-beta.3",
+  "version": "9.2.56-beta.5",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.1-beta.3",
-    "@m4l/styles": "7.1.28-beta.3",
+    "@m4l/graphics": "7.1.1-beta.5",
+    "@m4l/styles": "7.1.28-beta.5",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",