@m4l/components 1.1.1 → 1.1.2

package/components/modal/{WindowBase.af49e2e8.js → WindowBase.58f9e2b0.js}

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { m as modalUtilityClasses } from "./index.81eb6def.js";
 import { useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { I as Icon } from "../Icon/index.e06c693f.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.97e91dae.js";
-import { u as useModal } from "../../hooks/useModal/index.538e8219.js";
+import { I as Icon } from "../Icon/index.13aaae3c.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.9425bdc5.js";
+import { u as useModal } from "../../hooks/useModal/index.3ad1e014.js";
 const Header = (props) => {
   const { title, onClickCancel, urlIcon, classes } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/modal/{WindowConfirm.141e19a9.js → WindowConfirm.60955735.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { A as Actions } from "../CommonActions/components/Actions/index.84b8fd47.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.2342a37e.js";
 import { Typography } from "@mui/material";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useModal } from "../../hooks/useModal/index.538e8219.js";
-import { I as Image } from "../Image/index.8a3d05d3.js";
+import { u as useModal } from "../../hooks/useModal/index.3ad1e014.js";
+import { I as Image } from "../Image/index.4b51d4ba.js";
 import { m as modalUtilityClasses } from "./index.81eb6def.js";
-import { W as WindowBase } from "./WindowBase.af49e2e8.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.c3cddacf.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.db2b2999.js";
+import { W as WindowBase } from "./WindowBase.58f9e2b0.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.33cf608e.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.0893587b.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };

package/components/mui_extended/Accordion/{index.e76a8701.js → index.e6971e30.js}

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.97e91dae.js";
+import { I as IconButton } from "../IconButton/index.9425bdc5.js";
 import { useEnvironment } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import { ax as AccordionRoot } from "../../../styles/index.7868464e.js";
+import { ax as AccordionRoot } from "../../../styles/index.239f949e.js";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { I as Icon } from "../../Icon/index.e06c693f.js";
-import { T as Typography } from "../Typography/index.8a0f958b.js";
+import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { T as Typography } from "../Typography/index.45e97bdd.js";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [
   "root",

package/components/mui_extended/Avatar/{index.fc674f4b.js → index.8cc99f13.js}

@@ -4,7 +4,7 @@ import { Skeleton, generateUtilityClasses, generateUtilityClass, Avatar as Avata
 import { useModuleSkeleton } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
-import { ay as AvatarRoot } from "../../../styles/index.7868464e.js";
+import { ay as AvatarRoot } from "../../../styles/index.239f949e.js";
 import clsx from "clsx";
 const AVATAR_PREFIX = "M4LAvatar";
 const getNameAvatarDataTestId = (KEY) => {

package/components/mui_extended/Badge/{index.615959af.js → index.07fb40c0.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, Badge as Badge$1 } from "@mui/material";
 import "@mui/base";
-import { az as BadgeRoot } from "../../../styles/index.7868464e.js";
+import { az as BadgeRoot } from "../../../styles/index.239f949e.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 const componentName = "M4LBadge";
 const badgeClasses = generateUtilityClasses(componentName, [

package/components/mui_extended/Button/{index.a391ee9f.js → index.111f830e.js}

@@ -2,14 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import { generateUtilityClasses, generateUtilityClass, Skeleton, IconButton, Tooltip } from "@mui/material";
 import MuiButton from "@mui/material/Button";
-import { aA as ButtonRoot, aB as WrapperImageButton, aC as LoadingButtonRoot } from "../../../styles/index.7868464e.js";
+import { aA as ButtonRoot, aB as WrapperImageButton, aC as LoadingButtonRoot } from "../../../styles/index.239f949e.js";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { useMemo } from "react";
-import { I as Image } from "../../Image/index.8a3d05d3.js";
+import { I as Image } from "../../Image/index.4b51d4ba.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { LoadingButton as LoadingButton$1 } from "@mui/lab";
-import { T as Typography } from "../Typography/index.8a0f958b.js";
+import { T as Typography } from "../Typography/index.45e97bdd.js";
 const componentName$2 = "M4LButton";
 const buttonClasses = generateUtilityClasses(componentName$2, [
   "root",

package/components/mui_extended/{CheckBox.ae30825c.js → CheckBox.a8958eb8.js}

@@ -5,8 +5,8 @@ import { useResponsiveDesktop } from "@m4l/graphics";
 import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { forwardRef } from "react";
-import { aD as CheckBoxRoot } from "../../styles/index.7868464e.js";
-import { F as FieldLabel } from "../FieldLabel/index.a6235bcc.js";
+import { aD as CheckBoxRoot } from "../../styles/index.239f949e.js";
+import { F as FieldLabel } from "../FieldLabel/index.59b9b63a.js";
 const COMPONENT_CLASS_NAME = "M4LCheckBox";
 generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

package/components/mui_extended/IconButton/{index.97e91dae.js → index.9425bdc5.js}

@@ -2,8 +2,8 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.e06c693f.js";
-import { aE as IconButtonRoot } from "../../../styles/index.7868464e.js";
+import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { aE as IconButtonRoot } from "../../../styles/index.239f949e.js";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";

package/components/mui_extended/MenuActions/{index.1092605e.js → index.8b0d69b7.js}

@@ -2,13 +2,13 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default, { useState, useEffect, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
-import { P as Popover } from "../Popover/index.82970357.js";
-import { aF as LabelMemuItem } from "../../../styles/index.7868464e.js";
-import { I as Icon } from "../../Icon/index.e06c693f.js";
+import { P as Popover } from "../Popover/index.5e78a637.js";
+import { aF as LabelMemuItem } from "../../../styles/index.239f949e.js";
+import { I as Icon } from "../../Icon/index.13aaae3c.js";
 import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
-import { B as Badge } from "../Badge/index.615959af.js";
-import { I as IconButton } from "../IconButton/index.97e91dae.js";
+import { B as Badge } from "../Badge/index.07fb40c0.js";
+import { I as IconButton } from "../IconButton/index.9425bdc5.js";
 const ICONS = {
   MENU: "menu.svg"
 };

package/components/mui_extended/Pager/{index.4d510ef5.js → index.cb749e65.js}

@@ -1,14 +1,14 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { aG as PagerRoot } from "../../../styles/index.7868464e.js";
+import { aG as PagerRoot } from "../../../styles/index.239f949e.js";
 import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.97e91dae.js";
+import { I as IconButton } from "../IconButton/index.9425bdc5.js";
 import { useEnvironment } from "@m4l/core";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { T as Typography } from "../Typography/index.8a0f958b.js";
-import { I as Icon } from "../../Icon/index.e06c693f.js";
+import { T as Typography } from "../Typography/index.45e97bdd.js";
+import { I as Icon } from "../../Icon/index.13aaae3c.js";
 const componentName = "M4LPager";
 generateUtilityClasses(componentName, [
   "root",

package/components/mui_extended/Popover/{index.82970357.js → index.5e78a637.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { aH as PopoverRoot } from "../../../styles/index.7868464e.js";
+import { aH as PopoverRoot } from "../../../styles/index.239f949e.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { styled } from "@mui/material/styles";

package/components/mui_extended/Stack/{index.e64a379b.js → index.3674daf7.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { aI as MUISTack } from "../../../styles/index.7868464e.js";
+import { aI as MUISTack } from "../../../styles/index.239f949e.js";
 import clsx from "clsx";
 const componentName = "M4LStack";
 generateUtilityClasses(componentName, [

package/components/mui_extended/Tab/{index.f31eb904.js → index.a94a92c1.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { generateUtilityClasses, generateUtilityClass, Tab as Tab$1, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { aJ as MUITabs, aK as TabContentRoot, aL as TabRoot, aM as SKTTabWrapper } from "../../../styles/index.7868464e.js";
+import { aJ as MUITabs, aK as TabContentRoot, aL as TabRoot, aM as SKTTabWrapper } from "../../../styles/index.239f949e.js";
 import { useModuleSkeleton } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";

package/components/mui_extended/ToggleButton/{index.4afacb33.js → index.a55def3b.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { B as Button, b as buttonClasses } from "../Button/index.a391ee9f.js";
+import { B as Button, b as buttonClasses } from "../Button/index.111f830e.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.548aeace.js";
 const ToggleAbleButton = ({ onToggle, isToggled, ...props }) => {
   return /* @__PURE__ */ jsx(

package/components/mui_extended/ToggleIconButton/{index.621ff8bc.js → index.cd20de81.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.97e91dae.js";
+import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.9425bdc5.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.548aeace.js";
 const ToggleAbleIconButton = ({
   onToggle,

package/components/mui_extended/Typography/{index.8a0f958b.js → index.45e97bdd.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, Typography as Typography$1 } from "@mui/material";
-import { aN as WarpperTypography } from "../../../styles/index.7868464e.js";
+import { aN as WarpperTypography } from "../../../styles/index.239f949e.js";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";

package/components/popups/PopupsProvider/{index.6591c56e.js → index.776c62e7.js}

@@ -2,21 +2,17 @@ import React__default, { createContext, useRef, useEffect, useContext } from "re
 import { createStore, useStore } from "zustand";
 import { jsx } from "react/jsx-runtime";
 import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { p as popupsUtilityClasses } from "../PopupsViewer/index.caf23a5d.js";
 import { cloneDeep } from "lodash";
-const updateOwnerStateClasses = (state) => {
-  state.classes = popupsUtilityClasses(state.ownerState);
-};
 const createPopupsStore = (initProps) => {
   const startProps = {
-    classes: popupsUtilityClasses(initProps.ownerState),
     currentZindex: initProps.baseZindex,
     popupsIds: [],
     hashPopups: {},
+    getContainer: () => initProps.containerElement,
     ...initProps
   };
   return createStore(
@@ -32,11 +28,6 @@ const createPopupsStore = (initProps) => {
               }
             });
           },
-          setState: (status) => {
-            set((state) => {
-              state.ownerState.status = status;
-            });
-          },
           addPopup: (popupProps, options) => {
             if (get().hashPopups[popupProps.popupId]) {
               throw new Error(`Poupup with id ${popupProps.popupId} already exists`);
@@ -130,40 +121,29 @@ const createPopupsStore = (initProps) => {
             set((state) => {
               state.getLabel = newHandler;
             });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-              updateOwnerStateClasses(state);
-            });
           }
         }
       })),
-      { name: `Popups store` }
+      { name: `Popups store: ${initProps.storeId}` }
     )
   );
 };
 const PopupsContext = createContext(null);
 function PopupsProvider(props) {
-  const { children, initialPopups, baseZindex = 0 } = props;
+  const { children, initialPopups, baseZindex = 0, storeId, containerElement } = props;
   const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
   const popupsStoreRef = useRef();
   if (!popupsStoreRef.current) {
     popupsStoreRef.current = createPopupsStore({
       getLabel,
       baseZindex,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton
-      }
+      storeId,
+      containerElement
     });
     popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
   }
-  const { setHandlerGetLabel, setExternalState } = useStore(
+  const { setHandlerGetLabel } = useStore(
     popupsStoreRef.current,
     (state) => state.popupsActions,
     shallow
@@ -173,12 +153,6 @@ function PopupsProvider(props) {
       setHandlerGetLabel(getLabel);
     }
   }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
   return /* @__PURE__ */ jsx(PopupsContext.Provider, { value: popupsStoreRef.current, children: /* @__PURE__ */ jsx(React__default.Fragment, { children }) });
 }
 function usePopupsStore(selector, equalityFn) {

package/components/popups/PopupsViewer/constants.29247547.js

@@ -0,0 +1,4 @@
+const POPUPS_VIEWER_KEY_COMPONENT = "M4LPopupsViewer";
+export {
+  POPUPS_VIEWER_KEY_COMPONENT as P
+};

package/components/popups/PopupsViewer/icons.066abd43.js

@@ -0,0 +1,7 @@
+const POPUPS_ICONS = {
+  CLOSE: "close.svg",
+  EDITION_INFO: "edition_info.svg"
+};
+export {
+  POPUPS_ICONS as P
+};

package/components/popups/PopupsViewer/{index.caf23a5d.js → index.8fe4aa5d.js}

@@ -2,59 +2,28 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { shallow } from "zustand/shallow";
 import { forwardRef } from "react";
-import clsx from "clsx";
 import { useEnvironment } from "@m4l/core";
-import { u as usePopupsStore } from "../PopupsProvider/index.6591c56e.js";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { d as draggableWindowClasses, D as DragResizeWindow } from "../../DragResizeWindow/index.8f5a2e3e.js";
-import { I as Icon } from "../../Icon/index.e06c693f.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.97e91dae.js";
+import { u as usePopupsStore } from "../PopupsProvider/index.776c62e7.js";
+import { P as POPUPS_ICONS } from "./icons.066abd43.js";
+import { P as PopupHeaderContainerStyled, a as PopupHeaderTitleStyled, b as PopupHeaderSubTitleStyled, c as PopupContentEditionInfoStyled, d as PopupDragWindowRootStyled, e as PopupContentRootStyled, f as PopupContentWrapperStyled, R as RootStyled } from "./slots/popupsViewerSlots.aaf546e2.js";
+import { d as draggableWindowClasses } from "../../DragResizeWindow/index.46048367.js";
+import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.9425bdc5.js";
 import { u as useSizeContainer } from "../../../hooks/useSizeContainer/index.3c48670c.js";
-import { styled } from "@mui/material/styles";
-const COMPONENT_CLASS_NAME = "M4LPopupsViewer";
-const popupsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "containerRoot",
-  "popupRoot",
-  "popupHeaderContainer",
-  "popupHeaderTitle",
-  "popupHeaderSubTitle",
-  "popupContentRoot",
-  "popupContentEditionInfo",
-  "popupContentWrapper",
-  "popupHidden",
-  "popupWithSubTitle"
-]);
-function getPopupsUtilityClass(slot) {
-  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
-}
-const popupsUtilityClasses = (_ownerState) => {
-  const slots = {
-    containerRoot: ["containerRoot"],
-    popupsContainer: ["popupsContainer"],
-    popupRoot: ["popupRoot"],
-    popupHeaderContainer: ["popupHeaderContainer"],
-    popupHeaderTitle: ["popupHeaderTitle"],
-    popupHeaderSubTitle: ["popupHeaderSubTitle"],
-    popupContentRoot: ["popupContentRoot"],
-    popupContentEditionInfo: ["popupContentEditionInfo"],
-    popupContentWrapper: ["popupContentWrapper"],
-    popupHidden: ["popupHidden"],
-    popupWithSubTitle: ["popupWithSubTitle"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPopupsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const POPUPS_ICONS = {
-  CLOSE: "close.svg",
-  EDITION_INFO: "edition_info.svg"
-};
 const Header = (props) => {
   const { popupId } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const {
+    status,
+    subTitle,
+    zIndex
+  } = popup || {};
+  const ownerState = {
+    status,
+    subTitle,
+    zIndex
+  };
   const { closePopup } = usePopupsStore((state) => state.popupsActions, shallow);
   const { iconUrl } = popup || {};
   const onClose = () => {
@@ -64,22 +33,14 @@ const Header = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs(
-    "div",
+    PopupHeaderContainerStyled,
     {
-      className: clsx(popupsClasses.popupHeaderContainer, draggableWindowClasses.draggableHandle),
+      ownerState,
+      className: draggableWindowClasses.draggableHandle,
       children: [
         /* @__PURE__ */ jsx(Icon, { src: iconUrl, size: "small" }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              popupsClasses.popupHeaderTitle,
-              popup.subTitle ? popupsClasses.popupWithSubTitle : null
-            ),
-            children: popup.title
-          }
-        ),
-        popup.subTitle && /* @__PURE__ */ jsx("span", { className: popupsClasses.popupHeaderSubTitle, children: popup.subTitle }),
+        /* @__PURE__ */ jsx(PopupHeaderTitleStyled, { ownerState: { ...popup }, children: popup.title }),
+        popup.subTitle && /* @__PURE__ */ jsx(PopupHeaderSubTitleStyled, { ownerState, children: popup.subTitle }),
         /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -96,7 +57,7 @@ const Header = (props) => {
 const EditionInfo = (props) => {
   const { editionInfo } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsxs("div", { className: popupsClasses.popupContentEditionInfo, children: [
+  return /* @__PURE__ */ jsxs(PopupContentEditionInfoStyled, { ownerState: { editionInfo }, children: [
     /* @__PURE__ */ jsx(
       Icon,
       {
@@ -112,6 +73,10 @@ const Popup = forwardRef((props, ref) => {
   const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { setPopupOnTop } = usePopupsStore((state) => state.popupsActions, shallow);
   const {
+    status,
+    subTitle,
+    editionInfo,
+    zIndex,
     draggable = true,
     resizable = true,
     defaultPosition,
@@ -119,6 +84,12 @@ const Popup = forwardRef((props, ref) => {
     onMouseDown,
     ...others
   } = popup || {};
+  const ownerState = {
+    status,
+    subTitle,
+    editionInfo,
+    zIndex
+  };
   const onMouseDownLocal = (e) => {
     setPopupOnTop(popupId);
     if (onMouseDown) {
@@ -129,13 +100,11 @@ const Popup = forwardRef((props, ref) => {
     return null;
   }
   return /* @__PURE__ */ jsxs(
-    DragResizeWindow,
+    PopupDragWindowRootStyled,
     {
+      ownerState,
       ref,
-      className: clsx(
-        popupsClasses.popupRoot,
-        popup.status === "hidden" && popupsClasses.popupHidden
-      ),
+      hidden: popup.status === "hidden",
       onMouseDown: onMouseDownLocal,
       containerElement,
       containerSize,
@@ -147,30 +116,27 @@ const Popup = forwardRef((props, ref) => {
       ...others,
       children: [
         /* @__PURE__ */ jsx(Header, { popupId: popup.popupId }),
-        /* @__PURE__ */ jsxs("div", { className: popupsClasses.popupContentRoot, children: [
+        /* @__PURE__ */ jsxs(PopupContentRootStyled, { ownerState, children: [
           popup.editionInfo && /* @__PURE__ */ jsx(EditionInfo, { editionInfo: popup.editionInfo }),
-          /* @__PURE__ */ jsx("div", { className: popupsClasses.popupContentWrapper, children: popup.functionComponent && popup.functionComponent({ ...popup.componentProps }) })
+          /* @__PURE__ */ jsx(PopupContentWrapperStyled, { ownerState, children: popup.functionComponent && popup.functionComponent({ ...popup.componentProps }) })
         ] })
       ]
     }
   );
 });
-const PopupsViewerRoot = styled("div")`
-  ${(props) => props.theme.components?.M4LPopupsViewer?.styleOverrides}
-`;
-const PopupsViewer = (props) => {
-  const { containerElement } = props;
+const PopupsViewer = () => {
   const popupsIds = usePopupsStore(
     (state) => state.popupsIds.filter((pId) => state.hashPopups[pId].status !== "closing"),
     shallow
   );
+  const baseZindex = usePopupsStore((state) => state.baseZindex, shallow);
+  const containerElement = usePopupsStore((state) => state.getContainer, shallow)();
   const { removePopup } = usePopupsStore((state) => state.popupsActions, shallow);
   const containerSize = useSizeContainer(containerElement);
-  if (!containerElement) {
+  if (!containerElement || !containerSize) {
     return null;
   }
-  return /* @__PURE__ */ jsx(PopupsViewerRoot, { className: popupsClasses.containerRoot, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
-    console.log(`${new Date().toLocaleString()}: Render`);
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
     return /* @__PURE__ */ jsx(
       CSSTransition,
       {
@@ -199,6 +165,5 @@ const PopupsViewer = (props) => {
   }) }) });
 };
 export {
-  PopupsViewer as P,
-  popupsUtilityClasses as p
+  PopupsViewer as P
 };

package/components/popups/PopupsViewer/slots/index.154e4e5f.js

@@ -0,0 +1,14 @@
+var PopupViewerSlots = /* @__PURE__ */ ((PopupViewerSlots2) => {
+  PopupViewerSlots2["root"] = "root";
+  PopupViewerSlots2["popupDragWindowRoot"] = "popupRoot";
+  PopupViewerSlots2["pDWHeaderContainer"] = "pDWHeaderContainer";
+  PopupViewerSlots2["pDWHeaderTitle"] = "pDWHeaderTitle";
+  PopupViewerSlots2["pDWHeaderSubTitle"] = "pDWHeaderSubTitle";
+  PopupViewerSlots2["pDWContentRoot"] = "pDWContentRoot";
+  PopupViewerSlots2["pDWContentEditionInfo"] = "pDWContentEditionInfo";
+  PopupViewerSlots2["pDWContentWrapper"] = "pDWContentWrapper";
+  return PopupViewerSlots2;
+})(PopupViewerSlots || {});
+export {
+  PopupViewerSlots as P
+};

package/components/popups/PopupsViewer/slots/popupsViewerSlots.aaf546e2.js

@@ -0,0 +1,39 @@
+import { styled } from "@mui/material/styles";
+import { P as POPUPS_VIEWER_KEY_COMPONENT } from "../constants.29247547.js";
+import { aO as popupsViewerStyles } from "../../../../styles/index.239f949e.js";
+import { P as PopupViewerSlots } from "./index.154e4e5f.js";
+import { D as DragResizeWindow } from "../../../DragResizeWindow/index.46048367.js";
+const RootStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.root
+);
+const PopupDragWindowRootStyled = styled(DragResizeWindow, { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.popupDragWindowRoot
+);
+const PopupContentEditionInfoStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWContentEditionInfo
+);
+const PopupHeaderContainerStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWHeaderContainer
+);
+const PopupHeaderTitleStyled = styled("span", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWHeaderTitle
+);
+const PopupHeaderSubTitleStyled = styled("span", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWHeaderSubTitle
+);
+const PopupContentRootStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWContentRoot
+);
+const PopupContentWrapperStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
+  popupsViewerStyles?.pDWContentWrapper
+);
+export {
+  PopupHeaderContainerStyled as P,
+  RootStyled as R,
+  PopupHeaderTitleStyled as a,
+  PopupHeaderSubTitleStyled as b,
+  PopupContentEditionInfoStyled as c,
+  PopupDragWindowRootStyled as d,
+  PopupContentRootStyled as e,
+  PopupContentWrapperStyled as f
+};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.d.ts

@@ -13,4 +13,4 @@ export declare const createPopupsStore: (initProps: InitialPopupsStoreProps) =>
         type: unknown;
     } | undefined): void;
 };
-export declare type PopupsStore = ReturnType<typeof createPopupsStore>;
+export declare type PopupsStoreWithActionsType = ReturnType<typeof createPopupsStore>;