@m4l/components 0.1.73 → 0.1.75

package/@types/export.d.ts

@@ -35,6 +35,9 @@ import { RHFDateTimeProps } from '../components/hook-form/RHFDateTime/types';
 import { RHFDateTimeClassesKey } from '../components/hook-form/RHFDateTime/classes/types';
 import { AreasAdminClassesKey } from '../components/areas/components/AreasAdmin/classes/types';
 import { AreasViewerClassesKey } from '../components/areas/components/AreasViewer/classes/types';
+import { AppBarProps } from 'src/components/AppBar/types';
+import { AccountPopoverProps } from 'src/components/AccountPopover/types';
+import { SplitLayoutProps } from 'src/components/SplitLayout';
 
 export {};
 
@@ -47,6 +50,7 @@ declare module '@mui/material/styles' {
         M4LRHFTextFieldPassword: RHFTextFieldPasswordProps;
         M4LRHFAutocomplete: RHFAutocompleteProps;
         M4LRHFAutocompleteAsync: RHFAutocompleteAsyncProps;
+        M4LRHFDateTime: RHFDateTimeProps;
         M4LIcon: IconProps;
         M4LIconButton: IconButtonProps;
         M4LanguagePopover: undefined;
@@ -60,7 +64,11 @@ declare module '@mui/material/styles' {
         M4LoadingButton: MuiLabLoadingButtonProps;
         M4LNavLink: NavLinkProps;
         M4LSideBar: SideBarProps;
-        M4LRHFDateTime: RHFDateTimeProps;
+        M4LAppBar: AppBarProps;
+        M4LAvatar: AvatarProps;
+        M4LAccountPopover: AccountPopoverProps;
+        M4LSplitLayout: SplitLayoutProps;
+        
     }
 
     interface ComponentNameToClassKey {
@@ -84,11 +92,19 @@ declare module '@mui/material/styles' {
         M4LoadingButton: LoadingbuttonClassesKey;
         M4LNavLink: ButtonBaseClassKey;
         M4LSideBar: SideBarClassesKey;
+        M4LAppBar: AppBarClassesKey;
         M4LSideBarPopover: SideBarClassesKey;
         M4LSideBarDrawer: SideBarClassesKey;
         M4LRHFDateTime: RHFDateTimeClassesKey;
         M4LAreasViewer: AreasViewerClassesKey;
         M4LAreasAdmin: AreasAdminClassesKey;
+        M4LAvatar: AvatarClassesKey;
+        M4LAccountPopover: AccountPopoverClassesKey;
+        M4LAccountPopoverPopover: AccountPopoverClassesKey;
+        M4LModuleLayout: ModuleLayoutClassesKey;
+        M4LMasterDetailLayout: MasterDetailLayoutClassesKey;
+        M4LSplitLayout: SplitLayoutClassesKey;
+        M4LCommonActions: CommonActionsClassesKey;
     }
 
     interface Components {
@@ -184,6 +200,10 @@ declare module '@mui/material/styles' {
             styleOverrides?: ComponentsOverrides<Theme>['M4LSideBar'];
             defaultProps?: ComponentsProps['M4LSideBar'];
         };
+        M4LAppBar?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAppBar'];
+            defaultProps?: ComponentsProps['M4LAppBar'];
+        };
         M4LSideBarPopover?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LSideBarPopover'];
             defaultProps?: ComponentsProps['M4LSideBarPopover'];
@@ -204,5 +224,30 @@ declare module '@mui/material/styles' {
         M4LAreasAdmin?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
         };
+        M4LAvatar?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAvatar'];
+            defaultProps?: ComponentsProps['M4LAvatar'];
+        };
+        M4LAccountPopover?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
+            defaultProps?: ComponentsProps['M4LAccountPopover'];
+        };
+        M4LAccountPopoverPopover?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopoverPopover'];
+        };
+        M4LModuleLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LModuleLayout'];
+        };
+        M4LMasterDetailLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['MasterDetailLayout'];
+        };
+        M4LSplitLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LSplitLayout'];
+            defaultProps?: ComponentsProps['M4LSplitLayout'];
+        };
+        M4LCommonActions?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LCommonActions'];
+            defaultProps?: ComponentsProps['M4LCommonActions'];
+        };
     }
 }

package/components/AccountPopover/classes/constants.d.ts

@@ -1 +1 @@
-export declare const componentName = "M4LAcountPopover";
+export declare const componentName = "M4LAccountPopover";

package/components/AccountPopover/classes/index.d.ts

@@ -1,7 +1,13 @@
 import { AccountPopoverClassesType } from './types';
 export declare const accountPopoverClasses: AccountPopoverClassesType;
 export declare function getAccountPopoverClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useAccountPopoverUtilityClasses: () => {
     root: string;
     containerUserInfo: string;
+    popover: string;
+    containerAppVersion: string;
+    containerMenuItems: string;
+    containerProgress: string;
+    logOut: string;
+    menuItem: string;
 };

package/components/AccountPopover/classes/types.d.ts

@@ -1,5 +1,13 @@
+import { useAccountPopoverUtilityClasses } from ".";
 export interface AccountPopoverClassesType {
     root: string;
     containerUserInfo: string;
+    popover: string;
+    containerAppVersion: string;
+    containerMenuItems: string;
+    containerProgress: string;
+    logOut: string;
+    menuItem: string;
 }
-export declare type AppBarClassesKey = keyof AccountPopoverClassesType;
+export declare type AccountPopoverClassesKey = keyof AccountPopoverClassesType;
+export declare type Classes = ReturnType<typeof useAccountPopoverUtilityClasses>;

package/components/AccountPopover/index.93aefccd.js

@@ -0,0 +1,265 @@
+import { useModuleDictionary, useNetwork } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { styled, generateUtilityClasses, generateUtilityClass, useTheme } from "@mui/material";
+import "../Icon/index.f9119f5e.js";
+import "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.3b05af71.js";
+import "@m4l/graphics";
+import "../mui_extended/Accordion/index.03bd0e2a.js";
+import { A as Avatar } from "../mui_extended/Avatar/index.1e1a91a3.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.aebbab34.js";
+import "../Image/index.8aae9322.js";
+import "@mui/lab";
+import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
+import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ca5ce35a.js";
+import "../mui_extended/Pager/index.80ec975a.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
+import { unstable_composeClasses } from "@mui/base";
+const PRIMARY_NAME = ["A", "N", "H", "L", "Q", "9", "8"];
+const INFO_NAME = ["F", "G", "T", "I", "J", "1", "2", "3"];
+const SUCCESS_NAME = ["K", "D", "Y", "B", "O", "4", "5"];
+const WARNING_NAME = ["P", "E", "R", "S", "C", "U", "6", "7"];
+const ERROR_NAME = ["V", "W", "X", "M", "Z"];
+function getFirstCharacter(name) {
+  return name && name.charAt(0).toUpperCase();
+}
+function getAvatarColor(name) {
+  if (PRIMARY_NAME.includes(getFirstCharacter(name)))
+    return "primary";
+  if (INFO_NAME.includes(getFirstCharacter(name)))
+    return "info";
+  if (SUCCESS_NAME.includes(getFirstCharacter(name)))
+    return "success";
+  if (WARNING_NAME.includes(getFirstCharacter(name)))
+    return "warning";
+  if (ERROR_NAME.includes(getFirstCharacter(name)))
+    return "error";
+  return "default";
+}
+function createAvatar(name) {
+  return {
+    name: getFirstCharacter(name),
+    color: getAvatarColor(name)
+  };
+}
+function MyAvatar({
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: "",
+      alt: "full_name",
+      color: "default",
+      ...other,
+      children: createAvatar("").name
+    }
+  );
+}
+const AcountPopOverRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LAccountPopover?.styleOverrides
+}));
+const componentName = "M4LAccountPopover";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerUserInfo",
+  "popover",
+  "containerAppVersion",
+  "containerMenuItems",
+  "containerProgress",
+  "logOut",
+  "menuItem"
+]);
+function getAccountPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAccountPopoverUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerUserInfo: ["containerUserInfo"],
+    popover: ["popover"],
+    containerAppVersion: ["containerAppVersion"],
+    containerMenuItems: ["containerMenuItems"],
+    containerProgress: ["containerProgress"],
+    logOut: ["logOut"],
+    menuItem: ["menuItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAccountPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const MenuPopOver = (props) => {
+  const {
+    setOpen,
+    open,
+    data,
+    handleClick: onClick,
+    version,
+    handleLogOut,
+    classes,
+    userData
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const theme = useTheme();
+  const handleClick = (item) => {
+    onClick(item);
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  return /* @__PURE__ */ jsxs(Popover, {
+    open: Boolean(open),
+    anchorEl: open,
+    onClose: handleClose,
+    onBlur: handleClose,
+    className: classes.popover,
+    arrowType: "top-right",
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("popover")
+    } : {},
+    sx: {
+      ml: "26px",
+      mt: "10px",
+      maxWidth: "200px",
+      width: "200px",
+      ...theme.components?.M4LAccountPopoverPopover?.styleOverrides
+    },
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: classes.containerUserInfo,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerUserInfo")
+      } : {},
+      children: [/* @__PURE__ */ jsx(Typography, {
+        variant: "subtitle2",
+        noWrap: true,
+        children: `${userData?.first_name} ${userData?.last_name}`
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "body2",
+        sx: {
+          color: "text.secondary"
+        },
+        noWrap: true,
+        children: userData?.email
+      })]
+    }), /* @__PURE__ */ jsx("div", {
+      className: classes.containerAppVersion,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAppVersion")
+      } : {},
+      children: /* @__PURE__ */ jsx(Typography, {
+        variant: "subtitle2",
+        noWrap: true,
+        children: `${getLabel("version")} ${version}`
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      className: classes.containerMenuItems,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerMenuItems")
+      } : {},
+      children: data ? data.length !== 0 && data.map((option) => /* @__PURE__ */ jsx("div", {
+        onClick: () => handleClick(option),
+        className: classes.menuItem,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("menuItem")
+        } : {},
+        children: option.title
+      }, option.title)) : /* @__PURE__ */ jsx("div", {
+        className: classes.containerProgress,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerProgress")
+        } : {},
+        children: /* @__PURE__ */ jsx(CircularProgress, {
+          size: "20px"
+        })
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      onClick: handleLogOut,
+      className: classes.logOut,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("logOut")
+      } : {},
+      children: getLabel("logout")
+    })]
+  });
+};
+const AccountPopover = (props) => {
+  const {
+    handleClick,
+    version,
+    handleLogOut,
+    userData
+  } = props;
+  const [open, setOpen] = useState(null);
+  const [asyncState, setAsyncState] = useState("unLoad");
+  const [menuData, setMenuData] = useState([]);
+  const {
+    networkOperation
+  } = useNetwork();
+  useEffect(() => {
+    let mounted = true;
+    if (open && asyncState === "unLoad") {
+      setAsyncState("loading");
+      networkOperation({
+        method: "GET",
+        endPoint: `menus`,
+        parms: {
+          position: 1
+        }
+      }).then((response) => {
+        if (mounted) {
+          setAsyncState("loaded");
+          setMenuData(response.data);
+        }
+      }).catch((_error) => {
+        console.error("AccountData network request error - get menus", _error);
+      });
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const classes = useAccountPopoverUtilityClasses();
+  return /* @__PURE__ */ jsxs(AcountPopOverRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("root")
+    } : {},
+    onClick: handleOpen,
+    children: [/* @__PURE__ */ jsx(MyAvatar, {}), /* @__PURE__ */ jsx(MenuPopOver, {
+      open,
+      setOpen,
+      data: menuData,
+      handleClick,
+      version,
+      handleLogOut,
+      classes,
+      userData
+    })]
+  });
+};
+export {
+  AccountPopover as A
+};

package/components/AccountPopover/subcomponents/PopOver/types.d.ts

@@ -1,9 +1,10 @@
+import { Classes } from "../../classes/types";
 import { AccountPopoverProps, UserMenuData } from "../../types";
 declare type open = HTMLElement | null;
 export interface PopOverProps extends AccountPopoverProps {
     setOpen: (element: open) => void;
     open: open;
     data: Array<UserMenuData> | [];
-    classes: any;
+    classes: Classes;
 }
 export {};

package/components/AccountPopover/types.d.ts

@@ -1,3 +1,4 @@
+import { Maybe } from "@m4l/core";
 import { DomainCountry } from "@m4l/core";
 export declare type asyncTypes = 'unLoad' | 'loading' | 'loaded';
 export interface UserMenuData {
@@ -21,8 +22,20 @@ export interface userData {
     entry_application_id: number;
     avatar_url: string;
 }
+interface User {
+    email: string;
+    id: number;
+    first_name: string;
+    last_name: string;
+    account_id: number;
+    domain_country: DomainCountry;
+    avatar_url?: Maybe<string>;
+}
+declare type AuthUser = Maybe<User>;
 export interface AccountPopoverProps {
     handleClick: (item: UserMenuData) => void;
     handleLogOut: VoidFunction;
     version: string;
+    userData: AuthUser;
 }
+export {};

package/components/AppBar/classes/index.d.ts

@@ -1,6 +1,8 @@
 import { AppBarClassesType } from './types';
 export declare const appBarClasses: AppBarClassesType;
 export declare function getAppBarClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useAppBarUtilityClasses: () => {
     root: string;
+    containerChilds: string;
+    iconMenuToggle: string;
 };

package/components/AppBar/classes/types.d.ts

@@ -1,4 +1,8 @@
+import { useAppBarUtilityClasses } from ".";
 export interface AppBarClassesType {
     root: string;
+    containerChilds: string;
+    iconMenuToggle: string;
 }
 export declare type AppBarClassesKey = keyof AppBarClassesType;
+export declare type Classes = ReturnType<typeof useAppBarUtilityClasses>;

package/components/AppBar/index.cc974d56.js

@@ -0,0 +1,85 @@
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useEnvironment } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { I as IconButton } from "../mui_extended/IconButton/index.3b05af71.js";
+import "../Icon/index.f9119f5e.js";
+import "react";
+import "clsx";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.03bd0e2a.js";
+import "../mui_extended/Avatar/index.1e1a91a3.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.aebbab34.js";
+import "../Image/index.8aae9322.js";
+import "@mui/lab";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ca5ce35a.js";
+import "../mui_extended/Pager/index.80ec975a.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+const AppBarRoot = styled("header")(({
+  theme
+}) => ({
+  ...theme.components?.M4LAppBar?.styleOverrides
+}));
+const APPBAR_PREFIX = "M4LAppBar";
+const getNameDataTestId = (KEY) => {
+  return `${APPBAR_PREFIX}-${KEY}`;
+};
+const componentName = "M4LAppBar";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerChilds",
+  "iconMenuToggle"
+]);
+function getAppBarClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAppBarUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerChilds: ["containerChilds"],
+    iconMenuToggle: ["iconMenuToggle"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAppBarClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AppBar = (props) => {
+  const {
+    onToggleVisible,
+    children
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const classes = useAppBarUtilityClasses();
+  return /* @__PURE__ */ jsxs(AppBarRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: [!isDesktop ? /* @__PURE__ */ jsx(IconButton, {
+      tooltip: "test",
+      className: classes.iconMenuToggle,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/settings/assets/icons/options.svg`,
+      onClick: onToggleVisible
+    }) : null, /* @__PURE__ */ jsx("div", {
+      className: classes.containerChilds,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("containerChilds")
+      } : {},
+      children
+    })]
+  });
+};
+export {
+  AppBar as A
+};

package/components/AppBar/tests/constants.d.ts

@@ -1 +1 @@
-export declare const ICON_PREFIX = "M4LAppBar";
+export declare const APPBAR_PREFIX = "M4LAppBar";

package/components/AppBar/types.d.ts

@@ -1,9 +1,10 @@
-import { AccountPopoverProps } from "../AccountPopover/types";
+import { ReactNode } from "react";
 export declare type RootStyleProps = {
     isCollapse: boolean;
     isOffset: boolean;
     isSideBarVisible: boolean;
 };
-export interface AppBarProps extends AccountPopoverProps {
+export interface AppBarProps {
     onToggleVisible: VoidFunction;
+    children: ReactNode;
 }

package/components/CommonActions/classes/index.d.ts

@@ -1,4 +1,4 @@
 import { CommonActionsClassesType } from './types';
 export declare const commonActionsClasses: CommonActionsClassesType;
 export declare function getCommonActionsUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => Record<"root" | "skeleton" | "actionCancel" | "actionFormCancel" | "actionIntro" | "wrapperActions", string>;
+export declare const useCommonActionsUtilityClasses: () => Record<"root" | "skeleton" | "actionCancel" | "actionFormCancel" | "actionFormIntro" | "actionIntro" | "wrapperActions", string>;

package/components/CommonActions/classes/types.d.ts

@@ -1,11 +1,12 @@
-import { useUtilityClasses } from ".";
+import { useCommonActionsUtilityClasses } from ".";
 export interface CommonActionsClassesType {
     root: string;
     actionCancel: string;
     actionFormCancel: string;
+    actionFormIntro: string;
     actionIntro: string;
     wrapperActions: string;
     skeleton: string;
 }
 export declare type CommonActionsClassesKey = keyof CommonActionsClassesType;
-export declare type Classes = ReturnType<typeof useUtilityClasses>;
+export declare type Classes = ReturnType<typeof useCommonActionsUtilityClasses>;

package/components/CommonActions/components/ActionCancel/{index.583dd385.js → index.574ea031.js}

@@ -1,12 +1,12 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.1cb53ba2.js";
-import { u as useUtilityClasses } from "../Actions/index.665b1d56.js";
+import { B as Button } from "../../../mui_extended/Button/index.aebbab34.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.37ffde59.js";
 import { jsx } from "react/jsx-runtime";
 const ActionCancel = (props) => {
   const {
     getLabel
   } = useModuleDictionary();
-  const classes = useUtilityClasses();
+  const classes = useCommonActionsUtilityClasses();
   return /* @__PURE__ */ jsx(Button, {
     variant: "outlined",
     color: "inherit",

package/components/CommonActions/components/ActionFormCancel/{index.673cb6bc.js → index.e62db5d3.js}

@@ -1,39 +1,39 @@
 import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { B as Button } from "../../../mui_extended/Button/index.1cb53ba2.js";
+import { B as Button } from "../../../mui_extended/Button/index.aebbab34.js";
 import { useCallback } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.97628a64.js";
-import "../../../../react-draggable.64706389.js";
-import "../../../ModalDialog/index.1e6150f6.js";
-import "../../../Resizeable/index.949b18ff.js";
+import { u as useModal } from "../../../../hooks/useModal/index.26075cdd.js";
+import "../../../../react-draggable.e625b0d1.js";
+import "../../../ModalDialog/index.f652ea12.js";
+import "../../../Resizeable/index.41a8048b.js";
 import { jsx } from "react/jsx-runtime";
 import "@m4l/graphics";
-import "../../../Icon/index.4eeb3de9.js";
+import "../../../Icon/index.f9119f5e.js";
 import "clsx";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.a9e351fa.js";
-import "../../../modal/WindowBase.e59ef8a1.js";
-import "../../../mui_extended/IconButton/index.89428485.js";
-import "../../../mui_extended/Accordion/index.9c36b7a5.js";
-import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.023e293f.js";
+import "../../../modal/WindowBase.c223e4da.js";
+import "../../../mui_extended/IconButton/index.3b05af71.js";
+import "../../../mui_extended/Accordion/index.03bd0e2a.js";
+import "../../../mui_extended/Avatar/index.1e1a91a3.js";
 import "react-router-dom";
-import "../../../Image/index.52c84d9f.js";
+import "../../../Image/index.8aae9322.js";
 import "@mui/lab";
-import "../../../mui_extended/Typography/index.1ff05abe.js";
+import "../../../mui_extended/Typography/index.443590d6.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/MenuActions/index.d426f50b.js";
-import "../../../mui_extended/Pager/index.2c081f2c.js";
+import "../../../mui_extended/MenuActions/index.ca5ce35a.js";
+import "../../../mui_extended/Pager/index.80ec975a.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.9c35425b.js";
-import "../../../areas/components/AreasAdmin/index.b26ee1b2.js";
+import "../../../areas/contexts/AreasContext/index.d98b89fc.js";
+import "../../../areas/components/AreasAdmin/index.158621e0.js";
 import "zustand/shallow";
 import "../../../ScrollBar/index.bbe48f4d.js";
-import "../../../areas/components/AreasViewer/index.d33b4a7d.js";
+import "../../../areas/components/AreasViewer/index.621c0de4.js";
 import "../../../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { u as useWindowToolsMF } from "../../../areas/hooks/useWindowToolsMF/index.b7afaf88.js";
-import { u as useUtilityClasses } from "../Actions/index.665b1d56.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.37ffde59.js";
 function ActionFormCancel() {
   const {
     getLabel
@@ -70,7 +70,7 @@ function ActionFormCancel() {
       onConfirmQuit();
     }
   }, [getLabel, isDirty, openModal]);
-  const classes = useUtilityClasses();
+  const classes = useCommonActionsUtilityClasses();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",