@m4l/components 0.1.66 → 0.1.67

package/components/areas/contexts/AreasContext/index.7dc6f386.js

@@ -0,0 +1,230 @@
+import { createContext, useRef, useCallback, useEffect } from "react";
+import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { g as getAreasDictionary } from "../../index.6aec2efe.js";
+import { u as useAreasViewerUtilityClasses, a as useAreasAdminUtilityClasses } from "../../components/index.98d1c90a.js";
+import { jsx } from "react/jsx-runtime";
+const addArea = (state) => {
+  let newName = "";
+  const newId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+  newName = `${state.getLabel(getAreasDictionary("label_new_area"))} ${state.areas.length + 1}`;
+  state.areas.push({ id: newId, name: newName, loadWindows: false });
+  state.currentArea = newId;
+  if (state.loadAreasFromNetwork) {
+    state.networkOperation({
+      method: "POST",
+      endPoint: `areas`,
+      data: { id: newId, name: newName },
+      toastSuccess: false,
+      toastError: false
+    });
+  }
+  return newId;
+};
+const updateOwnerStateClasses = (state) => {
+  state.viwerClasses = useAreasViewerUtilityClasses(state.ownerState);
+  state.adminClasses = useAreasAdminUtilityClasses(state.ownerState);
+};
+const createAreasStore = (initProps) => {
+  const startProps = {
+    viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
+    adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
+    currentArea: "",
+    areas: [],
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          init: () => {
+            if (get().ownerState.status === "init") {
+              if (!get().loadAreasFromNetwork) {
+                get().actions.addArea();
+                set((state) => {
+                  state.ownerState.status = "loaded";
+                  updateOwnerStateClasses(state);
+                });
+              } else {
+                set((state) => {
+                  state.ownerState.status = "loading";
+                  updateOwnerStateClasses(state);
+                  state.networkOperation({
+                    method: "GET",
+                    endPoint: `areas`,
+                    parms: {},
+                    toastSuccess: false
+                  }).then((response) => {
+                    set((otherState) => {
+                      if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+                        otherState.areas = response.data;
+                        otherState.currentArea = response.data[0].id;
+                      } else {
+                        addArea(otherState);
+                      }
+                    });
+                  }).finally(() => {
+                    set((state2) => {
+                      state2.ownerState.status = "loaded";
+                      updateOwnerStateClasses(state2);
+                    });
+                  });
+                });
+              }
+            }
+          },
+          addArea: () => {
+            let newId = "";
+            set((state) => {
+              newId = addArea(state);
+            });
+            return newId;
+          },
+          deleteArea: (areaId) => {
+            set((state) => {
+              const removeIndex = state.areas.findIndex((area) => area.id === areaId);
+              if (removeIndex > -1) {
+                state.areas.splice(removeIndex, 1);
+              }
+              if (state.currentArea === areaId) {
+                if (state.areas.length > 0) {
+                  state.currentArea = state.areas[0].id;
+                } else {
+                  state.currentArea = "";
+                }
+              }
+              if (state.loadAreasFromNetwork) {
+                state.networkOperation({
+                  method: "DELETE",
+                  endPoint: `areas/${areaId}`,
+                  parms: {},
+                  toastSuccess: false,
+                  toastError: false
+                });
+              }
+            });
+          },
+          selectArea: (newAreaId) => {
+            set((state) => {
+              if (state.areas.findIndex((area) => area.id === newAreaId) > -1) {
+                state.currentArea = newAreaId;
+              }
+            });
+          }
+        },
+        internalActions: {
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setAreaLink: (areaId, store) => {
+            set((state) => {
+              const areaIndex = state.areas.findIndex((area) => area.id === areaId);
+              if (areaIndex > -1) {
+                state.areas[areaIndex].store = store;
+                state.areas[areaIndex].linked = true;
+              }
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Areas store` }
+    )
+  );
+};
+const AreasContext = createContext(null);
+function AreasProvider(props) {
+  const {
+    children,
+    loadAreasFromNetwork,
+    loadCookiesFromNetwork,
+    onLoad
+  } = props;
+  const {
+    events_add_listener,
+    events_remove_listener
+  } = useHostTools();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    networkOperation
+  } = useNetwork();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const areasStoreRef = useRef();
+  if (!areasStoreRef.current) {
+    areasStoreRef.current = createAreasStore({
+      getLabel,
+      loadAreasFromNetwork,
+      loadCookiesFromNetwork,
+      networkOperation,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton
+      }
+    });
+    areasStoreRef.current?.getState().actions.init();
+  }
+  const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);
+  const {
+    setHandlerGetLabel
+  } = useStore(areasStoreRef.current, (state) => state.internalActions, shallow);
+  const addWindow = useCallback((newWindow) => {
+    const currentArea = areasStoreRef.current?.getState().currentArea;
+    const areas = areasStoreRef.current?.getState().areas;
+    if (currentArea && areas) {
+      const areaIndex = areas.findIndex((area) => area.id == currentArea);
+      if (areaIndex > -1 && areas[areaIndex].store) {
+        areas[areaIndex].store?.getState().actions.addWindow(newWindow);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (status === "loaded") {
+      onLoad && onLoad();
+    }
+  }, [status]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    return () => {
+      events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    };
+  }, []);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    areasStoreRef.current?.getState().internalActions.setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(AreasContext.Provider, {
+    value: areasStoreRef.current,
+    children
+  });
+}
+export {
+  AreasContext as A,
+  AreasProvider as a
+};

package/components/areas/contexts/AreasContext/types.d.ts

@@ -1,7 +1,7 @@
 import { GetLabelType, NetworkProps } from '@m4l/core';
 import { ReactNode } from 'react';
 import { AreaStore } from '../../components/AreasViewer/subcomponents/Area/contexts/AreaContext/store';
-import { AreaType } from '../../components/AreasViewer/subcomponents/Area/types';
+import { AreaType } from '../../types';
 import { ViwerClasses } from '../../components/AreasViewer/classes';
 import { AdminClasses } from '../../components/AreasAdmin/classes';
 /**

package/components/areas/contexts/index.3e99c2da.js

@@ -0,0 +1,2 @@
+import "./AreasContext/index.7dc6f386.js";
+import "../components/index.98d1c90a.js";

package/components/areas/contexts/index.d.ts

@@ -1,5 +1,5 @@
 export * from './AreasContext';
-export type { DynamicMFParameters } from './DynamicMFParmsContext/types';
-export type { DynamicMFStore } from './DynamicMFParmsContext/store';
-export { WindowToolsMFProvider, WindowToolsMFContext } from './WindowToolsMFContext';
-export type { WindowToolsMF, ModuleAction } from './WindowToolsMFContext/types';
+export type { DynamicMFParameters } from '../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/types';
+export type { DynamicMFStore } from '../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store';
+export { WindowToolsMFProvider, WindowToolsMFContext } from '../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/WindowToolsMFContext';
+export type { WindowToolsMF, ModuleAction } from '../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/WindowToolsMFContext/types';

package/components/areas/hooks/index.1a0b8ab0.js

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { W as WindowContext, b as WindowToolsMFContext } from "../components/index.98d1c90a.js";
+const useWindow = () => {
+  const context = useContext(WindowContext);
+  if (!context)
+    throw new Error("useWindow context must be use inside WindowContext");
+  return context;
+};
+function useWindowStore(selector, equalityFn) {
+  const store = useContext(WindowContext);
+  if (!store)
+    throw new Error("useWindow context must be use inside WindowContext");
+  return useStore(store, selector, equalityFn);
+}
+const useWindowToolsMF = () => {
+  const context = useContext(WindowToolsMFContext);
+  if (!context)
+    throw new Error("useWindowToolsMF context must be use inside WindowToolsMFContext");
+  return context;
+};
+export {
+  useWindow as a,
+  useWindowStore as b,
+  useWindowToolsMF as u
+};

package/components/areas/hooks/useArea/index.443ac11d.js

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { A as AreasContext } from "../../contexts/AreasContext/index.7dc6f386.js";
+import { A as AreaContext } from "../../components/index.98d1c90a.js";
+function useAreas() {
+  const context = useContext(AreasContext);
+  if (!context)
+    throw new Error("useAreas context must be use inside AreasContext");
+  return context;
+}
+function useAreasStore(selector, equalityFn) {
+  const context = useContext(AreasContext);
+  if (!context)
+    throw new Error("useAreasStore context must be use inside AreasContext");
+  return useStore(context, selector, equalityFn);
+}
+const useArea = () => {
+  const context = useContext(AreaContext);
+  if (!context)
+    throw new Error("useArea context must be use inside AreaContext");
+  return context;
+};
+function useAreaStore(selector, equalityFn) {
+  const context = useContext(AreaContext);
+  if (!context)
+    throw new Error("useAreaStore context must be use inside AreaContext");
+  return useStore(context, selector, equalityFn);
+}
+export {
+  useArea as a,
+  useAreas as b,
+  useAreaStore as c,
+  useAreasStore as u
+};

package/components/areas/hooks/useDynamicMFParameters/index.2a963454.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { D as DynamicMFParmsContext } from "../../components/index.98d1c90a.js";
+function useDynamicMFParametersStore(selector, equalityFn) {
+  const store = useContext(DynamicMFParmsContext);
+  if (!store)
+    throw new Error(
+      "useDynamicMFParametersStore context must be use inside DynamicMFParmsContext"
+    );
+  return useStore(store, selector, equalityFn);
+}
+export {
+  useDynamicMFParametersStore as u
+};

package/components/areas/hooks/useDynamicMFParameters/index.d.ts

@@ -1,10 +1,10 @@
-import { DynamicMFState } from '../../contexts/DynamicMFParmsContext/store';
-export declare const useDynamicMFParameters: () => Omit<Omit<import("zustand").StoreApi<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>, "setState"> & {
+import { DynamicMFState } from '../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store';
+export declare const useDynamicMFParameters: () => Omit<Omit<import("zustand").StoreApi<import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions> | ((state: import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions) => import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions> | ((state: import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions) => import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 };

package/components/areas/hooks/useWindowToolsMF/index.d.ts

@@ -1 +1 @@
-export declare const useWindowToolsMF: () => import("../../contexts/WindowToolsMFContext/types").WindowToolsMFContextProps;
+export declare const useWindowToolsMF: () => import("../../components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/WindowToolsMFContext/types").WindowToolsMFContextProps;

package/components/areas/index.6aec2efe.js

@@ -0,0 +1,43 @@
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../Icon/index.321976e8.js";
+import "react/jsx-runtime";
+import "../mui_extended/IconButton/index.d31f1039.js";
+import "clsx";
+import "zustand";
+import "./contexts/AreasContext/index.7dc6f386.js";
+import "./components/index.98d1c90a.js";
+import "zustand/shallow";
+const AREAS_DICTIONARY_ID = "areas";
+function getAreasComponentsDictionary() {
+  return [AREAS_DICTIONARY_ID];
+}
+const LABEL_FILTER_BUTTON = "filter_tooltip";
+const DICCTIONARY = {
+  label_new_area: "label_new_area",
+  label_persist_module_cookies: "label_persist_module_cookies"
+};
+const getAreasDictionary = (key) => {
+  return `${AREAS_DICTIONARY_ID}.${key}`;
+};
+const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
+const AREAS_ADMIN_CLASS_NAME = "M4LAreasAdmin";
+const ICONS = {
+  CLOSE: "close.svg",
+  MAXIMIZE: "maximize.svg",
+  NORMALIZE: "normalize.svg",
+  DELETE_AREA: "delete_area.svg",
+  ADD_AREA: "add_area.svg",
+  EDIT_AREA: "edit_area.svg"
+};
+export {
+  AREAS_VIEWER_CLASS_NAME as A,
+  DICCTIONARY as D,
+  ICONS as I,
+  LABEL_FILTER_BUTTON as L,
+  AREAS_ADMIN_CLASS_NAME as a,
+  AREAS_DICTIONARY_ID as b,
+  getAreasComponentsDictionary as c,
+  getAreasDictionary as g
+};

package/components/areas/{components/AreasViewer/subcomponents/Area/types.d.ts → types.d.ts}

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { DynamicMFParameters } from '../../../../contexts/DynamicMFParmsContext/types';
+import { DynamicMFParameters } from './components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/DynamicMFParmsContext/types';
 import type { Layout } from 'react-grid-layout';
-import { WindowStore } from './subcomponents/Window/contexts/WindowContext/store';
-import { AreaStore } from './contexts/AreaContext/store';
+import { WindowStore } from './components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts/WindowContext/store';
+import { AreaStore } from './components/AreasViewer/subcomponents/Area/contexts/AreaContext/store';
 export declare type WinType = 'microfrontend' | 'component';
 export declare type EmergeType = 'layout' | 'popup' | 'modal';
 export interface MFBaseProps {

package/components/formatters/BooleanFormatter/{index.0edacc9b.js → index.a3c6f613.js}

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.fbeeacc8.js";
+import { I as Icon } from "../../Icon/index.321976e8.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 const BOOLEAN_FORMATTER_DICTIONARY_KEY = `boolean_formatter`;

package/components/formatters/{index.879170b2.js → index.a09541d3.js}

@@ -2,10 +2,10 @@ import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import "react";
-import "../Icon/index.fbeeacc8.js";
+import "../Icon/index.321976e8.js";
 import "@mui/material";
 import "@m4l/graphics";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY, b as BOOLEAN_FORMATTER_DICTIONARY_LABELS } from "./BooleanFormatter/index.0edacc9b.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY, b as BOOLEAN_FORMATTER_DICTIONARY_LABELS } from "./BooleanFormatter/index.a3c6f613.js";
 function getFormatConcatenated(values, separator) {
   const returnSymbol = "";
   if (values === null)

package/components/hook-form/RHFAutocomplete/{index.5f27e28c.js → index.9f9d4ed7.js}

@@ -1,26 +1,26 @@
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { styled as styled$1, Skeleton, generateUtilityClasses, generateUtilityClass, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
-import { I as Image } from "../../Image/index.77396f79.js";
+import { I as Image } from "../../Image/index.c5b14688.js";
 import { useMemo, useState, useEffect } from "react";
-import { T as TEST_PROP_ID } from "../../../vendor.be57c149.js";
+import { T as TEST_PROP_ID } from "../../../vendor.31965c93.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../../mui_extended/Typography/index.eab3d85c.js";
-import { H as HelperText } from "../../HelperText/index.c35dcb93.js";
+import { T as Typography } from "../../mui_extended/Typography/index.1d866b8b.js";
+import { H as HelperText } from "../../HelperText/index.5d8bc10a.js";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import "clsx";
-import "../../Icon/index.fbeeacc8.js";
-import "../../mui_extended/IconButton/index.a5072cd3.js";
-import "../../mui_extended/Accordion/index.0b15f939.js";
+import "../../Icon/index.321976e8.js";
+import "../../mui_extended/IconButton/index.d31f1039.js";
+import "../../mui_extended/Accordion/index.466d66d5.js";
 import "../../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "../../mui_extended/Button/index.b7b70e5f.js";
+import "../../mui_extended/Button/index.680f7d77.js";
 import "@mui/lab";
 import "../../mui_extended/Popover/index.e271e4f0.js";
-import "../../mui_extended/MenuActions/index.3a275abb.js";
-import "../../mui_extended/Pager/index.5a69ab10.js";
+import "../../mui_extended/MenuActions/index.e1749afa.js";
+import "../../mui_extended/Pager/index.bc67d954.js";
 import "../../mui_extended/Tab/index.e0653a0a.js";
 const AutocompleteRoot = styled("div")(({
   theme

package/components/hook-form/RHFAutocompleteAsync/{index.35e17cd6.js → index.af16b28e.js}

@@ -4,8 +4,8 @@ import debounce from "lodash/debounce";
 import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../../vendor.be57c149.js";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.5f27e28c.js";
+import { T as TEST_PROP_ID } from "../../../vendor.31965c93.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.9f9d4ed7.js";
 import { jsx } from "react/jsx-runtime";
 styled("div")(() => ({
   display: "flex",

package/components/hook-form/RHFCheckbox/{index.4f134f09.js → index.938fb1da.js}

@@ -1,12 +1,12 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, Checkbox } from "@mui/material";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../vendor.be57c149.js";
+import { T as TEST_PROP_ID } from "../../../vendor.31965c93.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.c35dcb93.js";
-import { T as Typography } from "../../mui_extended/Typography/index.eab3d85c.js";
+import { H as HelperText } from "../../HelperText/index.5d8bc10a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.1d866b8b.js";
 const WrapperSkeletonCheckBox = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",

package/components/hook-form/RHFPeriod/{index.dcaa0c87.js → index.1b1fafa6.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.c35dcb93.js";
-import { P as Period } from "../../Period/index.0c5bf66f.js";
+import { H as HelperText } from "../../HelperText/index.5d8bc10a.js";
+import { P as Period } from "../../Period/index.c5179eae.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div")(({
   theme

package/components/hook-form/RHFTextField/{index.fc90a570.js → index.e42cd9c0.js}

@@ -1,17 +1,17 @@
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
 import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.a5072cd3.js";
-import { T as TEST_PROP_ID } from "../../../vendor.be57c149.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.d31f1039.js";
+import { T as TEST_PROP_ID } from "../../../vendor.31965c93.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../../Icon/index.fbeeacc8.js";
+import "../../Icon/index.321976e8.js";
 import "clsx";
 import { useFormContext, Controller } from "react-hook-form";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.c2e62d8f.js";
-import { T as Typography } from "../../mui_extended/Typography/index.eab3d85c.js";
-import { H as HelperText } from "../../HelperText/index.c35dcb93.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.3a4700cd.js";
+import { T as Typography } from "../../mui_extended/Typography/index.1d866b8b.js";
+import { H as HelperText } from "../../HelperText/index.5d8bc10a.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/hook-form/RHFUpload/{index.654ad316.js → index.d79721d2.js}

@@ -4,7 +4,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import isString from "lodash/isString";
 import { useDropzone } from "react-dropzone";
 import { styled, alpha } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.77396f79.js";
+import { I as Image } from "../../Image/index.c5b14688.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 const WrapperUploadImage = styled("div")(({

package/components/modal/{WindowBase.230a498f.js → WindowBase.39f1310d.js}

@@ -1,10 +1,10 @@
 import { useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.e103db09.js";
+import { u as useModal } from "../../hooks/useModal/index.2a4b4b65.js";
 import { styled } from "@mui/material/styles";
-import { a as getThemeVariantColor } from "../../utils/index.c2e62d8f.js";
+import { a as getThemeVariantColor } from "../../utils/index.3a4700cd.js";
 import { IconButton } from "@mui/material";
-import { I as Icon } from "../Icon/index.fbeeacc8.js";
+import { I as Icon } from "../Icon/index.321976e8.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperWindowBase = styled("div")(({ theme }) => ({
   display: "flex",

package/components/modal/{WindowConfirm.575b4d41.js → WindowConfirm.993a8ed9.js}

@@ -1,29 +1,30 @@
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.e103db09.js";
-import { A as Actions } from "../CommonActions/components/Actions/index.77574633.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.4d0333c0.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.138101aa.js";
+import { u as useModal } from "../../hooks/useModal/index.2a4b4b65.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.5da399f8.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.1254308b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.dbf2ad66.js";
 import "react-hook-form";
 import { Typography } from "@mui/material";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.b7b70e5f.js";
+import "../mui_extended/Button/index.680f7d77.js";
 import "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "../../react-draggable.4d08d714.js";
-import "../ModalDialog/index.e600b43a.js";
-import "../Resizeable/index.4545dd6a.js";
+import "../../react-draggable.18cf453f.js";
+import "../ModalDialog/index.c07975ed.js";
+import "../Resizeable/index.d3469af2.js";
 import "@m4l/graphics";
 import { styled } from "@mui/material/styles";
-import { I as Icon } from "../Icon/index.fbeeacc8.js";
-import { b as getVariantColor } from "../../utils/index.c2e62d8f.js";
-import { W as WindowBase } from "./WindowBase.230a498f.js";
-import "../mui_extended/IconButton/index.a5072cd3.js";
+import { I as Icon } from "../Icon/index.321976e8.js";
+import { b as getVariantColor } from "../../utils/index.3a4700cd.js";
+import { W as WindowBase } from "./WindowBase.39f1310d.js";
+import "../mui_extended/IconButton/index.d31f1039.js";
 import "zustand";
-import "../areas/index.d7519516.js";
+import "../areas/contexts/AreasContext/index.7dc6f386.js";
+import "../areas/components/index.98d1c90a.js";
 import "zustand/shallow";
 import "@mui/lab";
-import "../mui_extended/Typography/index.eab3d85c.js";
+import "../mui_extended/Typography/index.1d866b8b.js";
 const WrapperMessageIlustration = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/modal/index.c63957d7.js

@@ -0,0 +1,24 @@
+import "@mui/material";
+import "../../react-draggable.18cf453f.js";
+import "react";
+import "../../contexts/ModalContext/index.53e8904e.js";
+import "../ModalDialog/index.c07975ed.js";
+import "../Resizeable/index.d3469af2.js";
+import "react/jsx-runtime";
+import "@m4l/graphics";
+import "@m4l/core";
+import "../CommonActions/components/Actions/index.5da399f8.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.680f7d77.js";
+import "clsx";
+import "react-hook-form";
+import "./WindowBase.39f1310d.js";
+import "../Icon/index.321976e8.js";
+import "../mui_extended/IconButton/index.d31f1039.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.7dc6f386.js";
+import "../areas/components/index.98d1c90a.js";
+import "zustand/shallow";
+import "@mui/lab";
+import "../mui_extended/Typography/index.1d866b8b.js";
+import "./WindowConfirm.993a8ed9.js";