@m4l/components 9.1.116 → 9.1.118

package/@types/types.d.ts

@@ -136,7 +136,7 @@ import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/
 import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../components/formatters/CourseFormatter/types';
 import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
 import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
-
+import { AreasViewerOwnerState, AreasViewerType } from '../components/areas/components/AreasViewer/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -205,6 +205,7 @@ declare module '@mui/material/styles' {
     M4LCourseFormatter: CourseFormatterSlotsType;
     M4LNoItemSelected: NoItemSelectedSlotsType;
     M4LActionFormIntro: ActionFormIntroSlotsType;
+    M4LAreasViewer: AreasViewerType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -272,6 +273,7 @@ declare module '@mui/material/styles' {
     M4LCourseFormatter: Partial<CourseFormatterOwnerState>;
     M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
     M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
+    M4LAreasViewer: Partial<AreasViewerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -589,10 +591,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
       variants?: ComponentsVariants['M4LDivider'];
     };
+    M4LAreasViewer?: {
+      defaultProps?: ComponentsPropsList['M4LAreasViewer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LAreasViewer'];
+      variants?: ComponentsVariants['M4LAreasViewer'];
+    };
     M4LCourseFormatter?: {
       defaultProps?: ComponentsPropsList['M4LCourseFormatter'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
       variants?: ComponentsVariants['M4LCourseFormatter'];
     };
-  }
- }
+   }
+}

package/components/PaperForm/PaperForm.js

@@ -4,6 +4,7 @@ import { P as PaperFormRootStyled, C as ContentStyled } from "./slots/PaperFormS
 import { useRef } from "react";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { P as PAPER_FORM_KEY } from "./constants.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { P as PropertyValue } from "../PropertyValue/PropertyValue.js";
 const isPropertyValue = (child) => typeof child === "object" && child !== null && "property" in child && "value" in child;
 const renderChildren = (children) => {
@@ -25,14 +26,22 @@ function PaperForm(props) {
     isForm = false,
     variant = "standard"
   } = props;
+  const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    size: adjustedSize,
+    color,
+    isForm,
+    paperFormVariant: variant
+  };
   return /* @__PURE__ */ jsxs(
     PaperFormRootStyled,
     {
       className: rootClass,
       ref: paperFormRef,
-      ownerState: { isForm, color, variant },
+      ownerState: { ...ownerState },
       ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
       children: [
         /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),

package/components/PaperForm/styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************
@@ -11,8 +12,7 @@ const paperFormStyles = {
     border: `${theme.size.borderStroke.container}`,
     borderColor: theme.vars.palette.border.default,
     width: "100%",
-    height: "auto",
-    overflow: "hidden"
+    height: "auto"
   }),
   /**
    * ************************************************************
@@ -26,10 +26,15 @@ const paperFormStyles = {
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
     overflow: "hidden",
-    height: "auto",
-    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
     borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
-    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity
+    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity,
+    alignSelf: "stretch",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    )
   }),
   /**
    * ************************************************************
@@ -43,8 +48,7 @@ const paperFormStyles = {
     fontSize: theme.typography.body,
     variants: [],
     display: "inline-flex",
-    alignItems: "center",
-    marginTop: "1px"
+    alignItems: "center"
   }),
   /**
    * ************************************************************

package/components/PaperForm/types.d.ts

@@ -25,7 +25,7 @@ interface CommonsProps {
     paperFormVariant?: PaperFormProps['variant'];
 }
 export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
-export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size'> & CommonsProps;
 /**
  * ***********************************
  * Slots para los estilos utilizados

package/components/areas/components/AreasAdmin/classes/index.d.ts

@@ -7,5 +7,5 @@ export declare const areasAdminClasses: AreasAdmninClasses;
 /**
  * Hook personalizado que devuelve las clases de utilidad para el componente AreasAdmin.
  */
-export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "rootContent" | "areaChipRoot" | "areaChipTitle" | "areaContainerChips" | "areaContainerContentChips" | "areaContainerChipsIcon" | "areaChipMobileRoot" | "areaEditPopover" | "areaChipMobileIconContainer" | "areaIconLayer" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows" | "areasPopoverListWindowsIcon" | "areaContentChips", string>;
+export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaContainerContentChips" | "areaChipRoot" | "areaContainerChipEditButton" | "areaChipMobileRoot" | "rootContent" | "areaChipTitle" | "areaContainerChips" | "areaContainerChipsIcon" | "areaEditPopover" | "areaChipMobileIconContainer" | "areaIconLayer" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows" | "areasPopoverListWindowsIcon" | "areaContentChips", string>;
 export type AdminClasses = ReturnType<typeof useAreasAdminUtilityClasses>;

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

@@ -0,0 +1,8 @@
+import { AreasViewerProps } from './types';
+/**
+ * Muestra las áreas cargadas en el store, si no se han cargado muestra un componente indicando la carga.
+ * Se debe visualizar todas las areas, y con display:none para todas menos para la activa, para que no se tengan que estar montando y destruyendo
+ * las ventanas que al cambiar entre áreas
+ * @returns JSX Areas
+ */
+export declare const AreasViewer: (props: AreasViewerProps) => import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/{index.js → AreasViewer.js}

@@ -1,26 +1,38 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { A as AreasViewerRoot } from "./styles.js";
-import { A as Area } from "./subcomponents/Area/index.js";
+import { A as Area } from "./subcomponents/Area/Area.js";
 import { u as useAreasStore } from "../../hooks/useAreas/index.js";
-import { M as MemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/index.js";
+import { M as MemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
 import { shallow } from "zustand/shallow";
 import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
-import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
+import { g as getPropDataTestId, a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { A as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-function AreasViewer() {
+import { A as AreasViewerRootStyled } from "./slots/AreasViewerSlots.js";
+import { A as AREAS_VIEWER_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { A as AreasViewerSlots } from "./slots/AreasViewerEnum.js";
+import clsx from "clsx";
+const AreasViewer = (props) => {
+  const {
+    dataTestId,
+    className
+  } = props;
   const areas = useAreasStore((state) => state.areasIds, shallow);
   const windowsModals = useAreasStore((state) => state.windowsModals);
   const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
   const currentArea = useAreasStore((state) => state.currentAreaId);
   const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
   const { init } = useAreasStore((state) => state.areasActions);
+  const ownerState = {
+    selected: !!currentArea
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      AreasViewerRoot,
+      AreasViewerRootStyled,
       {
-        className: classesRoot,
+        className: clsx(getComponentSlotRoot(AREAS_VIEWER_KEY_COMPONENT), className),
+        ...getPropDataTestId(AREAS_VIEWER_KEY_COMPONENT, AreasViewerSlots.root, dataTestId),
+        ownerState,
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getNameDataTestId(
             AREAS_VIEWER_CLASS_NAME,
@@ -40,7 +52,7 @@ function AreasViewer() {
       return null;
     })
   ] });
-}
+};
 export {
   AreasViewer as A
 };

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

@@ -0,0 +1,2 @@
+import { AreasViewerStyles } from './types';
+export declare const areasViewerStyles: AreasViewerStyles;

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

@@ -0,0 +1,63 @@
+const areasViewerStyles = {
+  /**
+   * Root areas viewer Styles
+   */
+  root: ({ theme }) => ({
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    position: "relative",
+    background: theme.vars.palette.background.neutral,
+    // areaGridLayout
+    "& .M4LAreasViewer-areaGridLayout": {
+      height: "100% !important",
+      overflow: "auto",
+      flexGrow: 1
+    }
+  }),
+  /**
+   * Areas root Styles
+   */
+  areaRoot: ({ ownerState }) => ({
+    display: "none",
+    position: "absolute",
+    flexDirection: "row",
+    inset: 0,
+    overflow: "hidden",
+    justifyContent: "top",
+    alignItems: "flex-start",
+    visibility: "hidden",
+    ...ownerState.selected && {
+      display: "block",
+      visibility: "visible"
+    }
+  }),
+  /**
+   * Inner for hooks Styles
+   */
+  baseArea: () => ({
+    display: "flex",
+    flexDirection: "row",
+    height: "100%",
+    width: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * Window component content Styles
+   */
+  windowContainerComponent: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "auto"
+  }),
+  /**
+   * Wrapper window modal Styles
+   */
+  wrapperWindowModal: ({ theme }) => ({
+    backgroundColor: theme.vars.palette.background.paper
+  })
+};
+export {
+  areasViewerStyles as a
+};

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,8 +1,7 @@
 import { AreasViewerClasses } from './types';
-import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
 /**
  * TODO: Documentar
  */
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaRoot" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowRootContainer" | "windowLinearProgressRoot" | "windowLinearProgressBar" | "windowPopupRoot" | "windowModalRoot" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "panelWindowsSeparator" | "loaderContainer" | "containerComponent" | "selectedWindow" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider", string>;
+export declare const useAreasViewerUtilityClasses: () => Record<"areaGridLayout", string>;
 export type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/index.js

@@ -1,91 +1,13 @@
 import { generateUtilityClasses } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../../utils/index.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../../constants.js";
+import "@mui/base";
+import { A as AREAS_VIEWER_CLASS_NAME } from "../../../constants.js";
 const areasViewerClasses = generateUtilityClasses(
   AREAS_VIEWER_CLASS_NAME,
   [
-    /* elements */
-    "root",
-    "areaRoot",
-    "areaGridLayoutPanelContainer",
-    "areaGridLayout",
-    "areaGridLayoutPopupsContainer",
-    "areasWindowPopUpList",
-    "windowRoot",
-    "windowHeader",
-    "windowHeaderContent",
-    "windowHeaderTitle",
-    "windowHeaderMainActions",
-    "windowHeaderCancelHandle",
-    "windowContent",
-    "windowPopupRoot",
-    "windowModalRoot",
-    "windowLinearProgressRoot",
-    "windowLinearProgressBar",
-    "windowRootContainer",
-    "panelWindowsRoot",
-    "panelWindowsButtonContainer",
-    "panelWindowsSeparator",
-    "containerLinearProgress",
-    "loaderContainer",
-    "containerComponent",
-    /* states or variants of elements */
-    // 'active',
-    "selected",
-    "colapsed",
-    "selectedWindow",
-    "isMobile",
-    "loading",
-    "pinIn",
-    "success",
-    "info",
-    "warning",
-    "error"
+    "areaGridLayout"
   ],
   AREAS_VIEWER_CLASS_NAME
 );
-const useAreasViewerUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.status,
-      ownerState.isMobile && "isMobile",
-      ownerState.isSkeleton && "isSkeleton"
-    ],
-    areaRoot: ["areaRoot"],
-    areasLoadingErrorRoot: ["areasLoadingErrorRoot"],
-    areasLoadingErrorLoading: ["areasLoadingErrorLoading"],
-    areasLoadingError: ["areasLoadingError"],
-    areasLoadingErrorIcon: ["areasLoadingErrorIcon"],
-    areasLoadingErrorTitle: ["areasLoadingErrorTitle"],
-    areasLoadingErrorDescription: ["areasLoadingErrorDescription"],
-    areasLoadingErrorDivider: ["areasLoadingErrorDivider"],
-    areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
-    areaGridLayout: ["areaGridLayout"],
-    areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
-    areasWindowPopUpList: ["areasWindowPopUpList"],
-    windowRoot: ["windowRoot"],
-    windowRootContainer: ["windowRootContainer"],
-    windowHeader: ["windowHeader"],
-    windowHeaderTitle: ["windowHeaderTitle"],
-    windowHeaderMainActions: ["windowHeaderMainActions"],
-    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
-    windowContent: ["windowContent"],
-    windowLinearProgressRoot: ["windowLinearProgressRoot"],
-    windowLinearProgressBar: ["windowLinearProgressBar"],
-    windowPopupRoot: ["windowPopupRoot"],
-    windowModalRoot: ["windowModalRoot"],
-    selectedWindow: ["selectedWindow"],
-    panelWindowsRoot: ["panelWindowsRoot"],
-    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
-    panelWindowsSeparator: ["panelWindowsSeparator"],
-    loaderContainer: ["loaderContainer"],
-    containerComponent: ["containerComponent"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
-};
 export {
-  areasViewerClasses as a,
-  useAreasViewerUtilityClasses as u
+  areasViewerClasses as a
 };

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

@@ -1,37 +1,4 @@
 export interface AreasViewerClasses {
-    root: string;
-    areaRoot: string;
-    areaGridLayoutPanelContainer: string;
     areaGridLayout: string;
-    areaGridLayoutPopupsContainer: string;
-    areasWindowPopUpList: string;
-    windowRoot: string;
-    windowHeader: string;
-    windowHeaderContent: string;
-    windowHeaderTitle: string;
-    windowHeaderMainActions: string;
-    windowHeaderCancelHandle: string;
-    windowContent: string;
-    windowRootContainer: string;
-    windowLinearProgressRoot: string;
-    windowLinearProgressBar: string;
-    windowPopupRoot: string;
-    windowModalRoot: string;
-    panelWindowsRoot: string;
-    panelWindowsButtonContainer: string;
-    panelWindowsSeparator: string;
-    loaderContainer: string;
-    containerComponent: string;
-    selected: string;
-    selectedWindow: string;
-    colapsed: string;
-    isMobile: string;
-    loading: string;
-    pinIn: string;
-    success: string;
-    info: string;
-    warning: string;
-    error: string;
-    containerLinearProgress: string;
 }
 export type AreasViewerClassesKey = keyof AreasViewerClasses;

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

@@ -0,0 +1 @@
+export declare const AREAS_VIEWER_KEY_COMPONENT = "M4LAreasViewer";

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

@@ -0,0 +1,4 @@
+const AREAS_VIEWER_KEY_COMPONENT = "M4LAreasViewer";
+export {
+  AREAS_VIEWER_KEY_COMPONENT as A
+};

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

@@ -0,0 +1,7 @@
+export declare enum AreasViewerSlots {
+    root = "root",
+    areaRoot = "areaRoot",
+    baseArea = "baseArea",
+    windowContainerComponent = "windowContainerComponent",
+    wrapperWindowModal = "wrapperWindowModal"
+}

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.js

@@ -0,0 +1,11 @@
+var AreasViewerSlots = /* @__PURE__ */ ((AreasViewerSlots2) => {
+  AreasViewerSlots2["root"] = "root";
+  AreasViewerSlots2["areaRoot"] = "areaRoot";
+  AreasViewerSlots2["baseArea"] = "baseArea";
+  AreasViewerSlots2["windowContainerComponent"] = "windowContainerComponent";
+  AreasViewerSlots2["wrapperWindowModal"] = "wrapperWindowModal";
+  return AreasViewerSlots2;
+})(AreasViewerSlots || {});
+export {
+  AreasViewerSlots as A
+};

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

@@ -0,0 +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>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<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>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<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>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const WindowContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<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>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.js

@@ -0,0 +1,31 @@
+import { styled } from "@mui/material/styles";
+import { A as AREAS_VIEWER_KEY_COMPONENT } from "../constants.js";
+import { A as AreasViewerSlots } from "./AreasViewerEnum.js";
+import { a as areasViewerStyles } from "../AreasViewer.styles.js";
+const AreasViewerRootStyled = styled("div", {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.root
+})(areasViewerStyles?.root);
+const AreaRootStyled = styled("div", {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.areaRoot
+})(areasViewerStyles?.areaRoot);
+const BaseAreaStyled = styled("div", {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.baseArea
+})(areasViewerStyles?.baseArea);
+const WindowContainerComponentStyled = styled("div", {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.windowContainerComponent
+})(areasViewerStyles?.windowContainerComponent);
+const WrapperWindowModalStyled = styled("div", {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.wrapperWindowModal
+})(areasViewerStyles?.wrapperWindowModal);
+export {
+  AreasViewerRootStyled as A,
+  BaseAreaStyled as B,
+  WindowContainerComponentStyled as W,
+  AreaRootStyled as a,
+  WrapperWindowModalStyled as b
+};

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+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 status = useAreasStore((state) => state.hashAreas[areaId].status);
+  if (status === "init") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AreaRootStyled, { ownerState: { selected }, children: /* @__PURE__ */ jsx(BaseArea, { areaId }) });
+};
+Area.displayName = "Area";
+export {
+  Area as A
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/{index.js → AreaGridLayout.js}

@@ -1,10 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { shallow } from "zustand/shallow";
-import { W as Window } from "../Window/index.js";
+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 { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helpers/helper.js";
+import { d as dragResizeWindowClasses } from "../../../../../../../DragResizeWindow/classes/index.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);
@@ -32,8 +33,8 @@ const AreaGridLayout = (props) => {
       ),
       layouts,
       onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
-      draggableHandle: ".m4l_draggable_handle",
-      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
+      draggableHandle: `.${dragResizeWindowClasses.draggableHandle}`,
+      draggableCancel: `.${dragResizeWindowClasses.draggableCancel}`,
       layoutItemRender: (p) => {
         if (hashLayoutItems.indexOf(p.i) === -1) {
           return /* @__PURE__ */ jsx(Fragment, {});

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

@@ -0,0 +1,5 @@
+import { InnerForHooksProps } from './types';
+/**
+ * Componente encargado de renderizar el área de trabajo.
+ */
+export declare const BaseArea: (props: InnerForHooksProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+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";
+const BaseArea = (props) => {
+  const { areaId } = 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: () => {
+  } }) });
+};
+export {
+  BaseArea as B
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/{index.js → Window.js}

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { M as MemonizedMicroFrontend } from "./subcomponents/MicroFrontend/index.js";
+import { M as MemonizedMicroFrontend } from "./subcomponents/MicroFrontend/MicroFrontend.js";
 import { C as Component } from "./subcomponents/Component/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
 import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
+import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow/useWindow.js";
 import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
 const Window = (props) => {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/{subcomponents/Header → hooks/useHeaderActions}/helper.d.ts

@@ -1,7 +1,7 @@
 import { GetLabelType } from '@m4l/core';
 import { AreaWindowAction, WindowOptions } from '../../../../../../../../types';
 /**
- * TODO: Documentar
+ * Get the main actions for the window
  */
 export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
 type GetMenuActionsType = {
@@ -16,7 +16,7 @@ type GetMenuActionsType = {
     getLabel: GetLabelType;
 };
 /**
- * TODO: Documentar
+ *  Get the menu actions for the window
  */
 export declare function getMenuActions(options: GetMenuActionsType): AreaWindowAction[];
 export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/{subcomponents/Header → hooks/useHeaderActions}/helper.js

@@ -16,7 +16,6 @@ function getMenuActions(options) {
     urlPrefix,
     saveModuleCookies,
     resetModuleCookies,
-    //version,
     windowOptions = { allowPersistCookies: false },
     getLabel
   } = options;
@@ -31,7 +30,6 @@ function getMenuActions(options) {
       onClick: () => saveModuleCookies(windowId),
       disabled: false,
       visibility: "normal",
-      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies), */
       label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_persist_module_cookies)),
       key: "save_cookies"
     };
@@ -43,7 +41,6 @@ function getMenuActions(options) {
       disabled: false,
       visibility: "normal",
       label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_reset_module_cookies)),
-      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies), */
       key: "reset_cookes"
     };
     menuActions.push(resetCookiesAction);

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

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useAreasStore } from "../../../../../../../../hooks/useAreas/index.js";
 import { I as ICONS } from "../../../../../../../../icons.js";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../../../dictionary.js";
-import { g as getMainActions, a as getMenuActions } from "../../subcomponents/Header/helper.js";
+import { g as getMainActions, a as getMenuActions } from "./helper.js";
 import { shallow } from "zustand/shallow";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const useHeaderActions = ({