@m4l/components 0.1.84 → 0.1.86

package/components/DynamicFilter/{index.912679cc.js → index.fddefc23.js}

@@ -1,44 +1,45 @@
 import { shallow } from "zustand/shallow";
-import { S as ScrollBar } from "../ScrollBar/index.d4410cb5.js";
+import { S as ScrollBar } from "../ScrollBar/index.65bb2930.js";
 import { useContext, useMemo, useEffect, createContext, useRef, createElement, useState, useCallback } from "react";
 import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { I as IconButton } from "../mui_extended/IconButton/index.62aea582.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.d88a3f2e.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.1af105d6.js";
+import { g as getNameDataTestId } from "../../vendor.7751caf6.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.2493b1b1.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.c53370f6.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import { I as Icon } from "../Icon/index.d1402200.js";
+import { I as Icon } from "../Icon/index.435df215.js";
 import { styled, useTheme } from "@mui/material/styles";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.b9266262.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.e70e8779.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.29517521.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a9420126.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.ea2758ed.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.99a8e55e.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.d995d986.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.98eb4b3b.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.40af964e.js";
-import "../../contexts/ModalContext/index.51da83de.js";
+import "../mui_extended/Button/index.f79eb74e.js";
+import "../../contexts/ModalContext/index.5c908fe3.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
-import "../modal/index.6f281ef8.js";
+import "../modal/index.6cdf65c9.js";
 import "../Image/index.c18ebf5a.js";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.230d1584.js";
-import "../areas/components/AreasAdmin/index.8ab71eb9.js";
-import "../areas/components/AreasViewer/index.933e506b.js";
+import "../areas/contexts/AreasContext/index.8af3058c.js";
+import "../areas/components/AreasAdmin/index.23a09c81.js";
+import "../areas/components/AreasViewer/index.68eb0f6b.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
@@ -46,19 +47,19 @@ import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.c43a95f4.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.d5afb409.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.60c6f592.js";
 import "lodash/debounce";
-import "../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
-import "../hook-form/RHFCheckbox/index.9bf6edb0.js";
-import "../HelperText/index.a47ff233.js";
+import "../hook-form/RHFAutocompleteAsync/index.9a40fb06.js";
+import "../hook-form/RHFCheckbox/index.da4ebb03.js";
+import "../HelperText/index.bbbe24c9.js";
 import "@mui/x-date-pickers";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.a2c1ed2c.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.5a0fa776.js";
-import "../hook-form/RHFPeriod/index.b5204ce2.js";
-import "../Period/index.e129cdec.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.c56219ea.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.413a74ca.js";
+import "../hook-form/RHFPeriod/index.ee6a3d61.js";
+import "../Period/index.32d475b8.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../hook-form/RHFUpload/index.b36539d6.js";
+import "../hook-form/RHFUpload/index.03faa7f0.js";
 import * as Yup from "yup";
 const COMPONENT_PREFIX = "M4LDynamicFilter";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
@@ -116,11 +117,12 @@ const dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "inEdition",
   "isDirty",
   "isInvalid",
-  "noSetted"
+  "noSetted",
+  "isEmpty"
 ]);
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", !ownerState.isValid && "isInvalid", ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
+    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", !ownerState.isValid && "isInvalid", ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton", ownerState.isEmpty && "isEmpty"],
     filterButton: ["filterButton"],
     containerFistRow: ["containerFistRow"],
     containerInputFilter: ["containerInputFilter"],
@@ -897,6 +899,8 @@ const createAreaStore = (initProps) => {
                 initialFiltersApplyed,
                 state.actions.getFieldByName
               );
+              state.ownerState.isEmpty = state.applyedFilters.length > 0 ? false : true;
+              updateOwnerStateClasses(state);
               updateAutomatic(state);
             });
           },
@@ -916,6 +920,10 @@ const createAreaStore = (initProps) => {
               );
               if (index_to_remove > -1) {
                 state.applyedFilters.splice(index_to_remove, 1);
+                if (state.applyedFilters.length === 0) {
+                  state.ownerState.isEmpty = true;
+                  updateOwnerStateClasses(state);
+                }
                 updateAutomatic(state);
               }
             });
@@ -971,6 +979,10 @@ const createAreaStore = (initProps) => {
           addFilter: (newFilter) => {
             set((state) => {
               state.applyedFilters.push(newFilter);
+              if (state.applyedFilters.length > 0) {
+                state.ownerState.isEmpty = false;
+                updateOwnerStateClasses(state);
+              }
               updateAutomatic(state);
             });
           },
@@ -1058,7 +1070,8 @@ function DynamicFilterProvider(props) {
         isDirty: !automatic,
         inEdition: false,
         isValid: true,
-        isMobile: !isDesktop
+        isMobile: !isDesktop,
+        isEmpty: true
       }
     });
     dynamicFilterStoreRef.current.getState().actions.init(initialApplyedFilters);

package/components/GridLayout/{index.c55f16eb.js → index.2383aaf9.js}

@@ -1,13 +1,13 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import clsx from "clsx";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.6c68811f.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.58168132.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { throttle } from "lodash";
+import { useResizeObserver } from "@m4l/graphics";
 import { styled, alpha } from "@mui/material/styles";
 import { r as react_resizable_css } from "../../react-resizable.ba08699a.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import "@m4l/graphics";
-import "lodash";
 const COMPONENT_CLASS_NAME = "M4LGridLayout";
 const DEFAULT_COLS = 12;
 const DEFAULT_ROW_HEIGHT = 20;
@@ -453,8 +453,8 @@ function calcGridItemPosition(positionParams, x, y, w, h, maximize, state) {
     out.height = Math.round(state.resizing.height);
   } else {
     if (maximize === "maximize_me") {
-      out.width = positionParams.containerWidth - 2 * containerPadding[0] - 2;
-      out.height = positionParams.containerHeight - 2 * containerPadding[1] - 2;
+      out.width = positionParams.containerWidth - 2 * containerPadding[0] - 0;
+      out.height = positionParams.containerHeight - 2 * containerPadding[1] - 0;
     } else {
       out.width = calcGridItemWHPx(w, colWidth, containerMargin[0]);
       out.height = calcGridItemWHPx(h, rowHeight, containerMargin[1]);
@@ -551,8 +551,8 @@ const GridLayoutRoot = styled("div")`
     }
 
     .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
-        background: green;
-        opacity: 0.2;
+        background: ${(props) => props.theme.palette.state.toneOp};
+        opacity: 0.5;
         transition-duration: 100ms;
         z-index: 3000;
         -webkit-user-select: none;
@@ -961,6 +961,11 @@ function GridLayout(props) {
       onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
     } catch (error) {
     }
+    console.log("GridLayout onresize");
+    if (e.type !== "touchmove") {
+      e.preventDefault();
+    }
+    e.stopPropagation();
   }, []);
   const localOnResizeStop = useCallback((i, _w, _h, {
     e,
@@ -1126,12 +1131,66 @@ function GridLayout(props) {
     children: [finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)), placeholder()]
   });
 }
+function SizeProvider(ComposedComponent) {
+  return (props) => {
+    const {
+      measureBeforeMount = true,
+      ...rest
+    } = props;
+    const refMounted = useRef(false);
+    const [currentState, setCurrentState] = useState({
+      mounted: false,
+      width: DEFAULT_CONTAINER_WIDTH,
+      height: DEFAULT_CONTAINER_HEIGHT
+    });
+    const onWindowResizeMemo = useMemo(() => () => {
+      const node = elementRef.current;
+      console.log(`oooo`);
+      if (node instanceof HTMLElement && node.clientWidth) {
+        console.log(`onWindowResizeMemo w: ${node.offsetWidth} y:${node.offsetHeight}`);
+        setCurrentState((prev) => ({
+          ...prev,
+          width: node.clientWidth,
+          height: node.offsetHeight
+        }));
+      }
+    }, []);
+    const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
+      leading: false,
+      trailing: true
+    });
+    const onResize = useCallback((_target) => {
+      throttleResize();
+    }, []);
+    const elementRef = useResizeObserver(onResize);
+    useEffect(() => {
+      setCurrentState((prev) => ({
+        ...prev,
+        mounted: true
+      }));
+      refMounted.current = true;
+      onWindowResizeMemo();
+    }, []);
+    if (measureBeforeMount && !currentState.mounted) {
+      return /* @__PURE__ */ jsx("div", {
+        className: clsx(props.className, COMPONENT_CLASS_NAME),
+        style: props.style,
+        ref: elementRef
+      });
+    }
+    return /* @__PURE__ */ jsx(ComposedComponent, {
+      innerRef: elementRef,
+      containerWidth: currentState.width,
+      containerHeight: currentState.height,
+      ...rest
+    });
+  };
+}
 export {
   noop as A,
-  COMPONENT_CLASS_NAME as C,
   DEFAULT_COLS as D,
   GridLayout as G,
-  THROTTLE_RESIZE_TIMEOUT as T,
+  SizeProvider as S,
   calcGridItemWHPx as a,
   calcGridColWidth as b,
   calcXY as c,

package/components/GridLayout/index.d.ts

@@ -4,4 +4,4 @@ export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneL
 export { isEqualLayouts, isEqualLayout } from './utils';
 export type { GridLayoutProps, LayoutItemRenderProps, Layout, LayoutItem, BaseLayoutItem, Layouts, } from './types';
 export type { ContainerChangeEvent } from './subcomponents/Responsive/types';
-export { SizeProvider } from './subcomponents/SizeProvider';
+export { SizeProvider } from './subcomponents/WidthProvider';

package/components/GridLayout/subcomponents/Griditem/{index.6c68811f.js → index.58168132.js}

@@ -1,7 +1,7 @@
 import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { D as DraggableCore_1 } from "../../../../react-draggable.7abb5d0a.js";
 import { R as Resizable } from "../../../../react-resizable.ba08699a.js";
-import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.c55f16eb.js";
+import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.2383aaf9.js";
 import clsx from "clsx";
 import { d as deepEqual } from "../../../../node_modules.d73a220d.js";
 import { jsx, Fragment } from "react/jsx-runtime";

package/components/GridLayout/subcomponents/Responsive/{index.a6e33b8d.js → index.a6642437.js}

@@ -1,4 +1,4 @@
-import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, o as DEFAULT_COLAPSED_HEIGHT, i as DEFAULT_ROW_HEIGHT, z as isEqualLayouts, G as GridLayout, A as noop } from "../../index.c55f16eb.js";
+import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, o as DEFAULT_COLAPSED_HEIGHT, i as DEFAULT_ROW_HEIGHT, z as isEqualLayouts, G as GridLayout, A as noop } from "../../index.2383aaf9.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
 import { d as deepEqual } from "../../../../node_modules.d73a220d.js";

package/components/HelperText/{index.a47ff233.js → index.bbbe24c9.js}

@@ -1,25 +1,26 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.d1402200.js";
+import "../Icon/index.435df215.js";
 import "clsx";
 import { jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/IconButton/index.d88a3f2e.js";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.40af964e.js";
+import "../mui_extended/Button/index.f79eb74e.js";
 import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/MenuActions/index.c53370f6.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const HelperTextRoot = styled("div")(({

package/components/Icon/{index.d1402200.js → index.435df215.js}

@@ -3,7 +3,7 @@ import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.327679a6.js";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.387a2fa1.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
 const IconRoot = styled("div")(({

package/components/LanguagePopover/{index.807f5272.js → index.7d2ccfe4.js}

@@ -3,25 +3,26 @@ import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem }
 import { I as Image } from "../Image/index.c18ebf5a.js";
 import { useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.d1402200.js";
+import "../Icon/index.435df215.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.62aea582.js";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/IconButton/index.d88a3f2e.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { I as ImageButton } from "../mui_extended/Button/index.40af964e.js";
+import { I as ImageButton } from "../mui_extended/Button/index.f79eb74e.js";
 import "../mui_extended/CheckBox.38abccd8.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/MenuActions/index.c53370f6.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const LanguagePopoverRoot = styled("div")(({

package/components/ModalDialog/{index.42e804cf.js → index.b66c43e7.js}

@@ -1,14 +1,14 @@
 import { useTheme, Dialog, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.7abb5d0a.js";
-import { u as useModal } from "../../hooks/useModal/index.7611bf21.js";
+import { u as useModal } from "../../hooks/useModal/index.2387ea76.js";
 import { R as ResizeableWindow } from "../Resizeable/index.9a9c79a4.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon } from "../Icon/index.d1402200.js";
+import { I as Icon } from "../Icon/index.435df215.js";
 import { useEnvironment } from "@m4l/core";
 import { I as ICONS } from "../areas/icons.8266ccc8.js";
-import { m as modalUtilityClasses } from "../modal/index.6f281ef8.js";
+import { m as modalUtilityClasses } from "../modal/index.6cdf65c9.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.e70e8779.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.99a8e55e.js";
 const DragabblePaperComponent = (props) => {
   return /* @__PURE__ */ jsx(cjs.exports, {
     handle: ".m4l_draggable_handle",

package/components/NavLink/{index.ff5a939c.js → index.abbcb9b2.js}

@@ -2,25 +2,26 @@ import { NavLink as NavLink$1 } from "react-router-dom";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.d1402200.js";
+import "../Icon/index.435df215.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/IconButton/index.d88a3f2e.js";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.40af964e.js";
+import "../mui_extended/Button/index.f79eb74e.js";
 import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/MenuActions/index.c53370f6.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const componentName = "M4LNavLink";

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

@@ -0,0 +1 @@
+export declare const componentName = "M4LNoItemSelected";

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

@@ -0,0 +1,6 @@
+import { NoItemSelectedClassesType } from './types';
+export declare const noItemSelectedClasses: NoItemSelectedClassesType;
+export declare function getNoItemSelectedUtilityClass(slot: string): string;
+export declare const useNoItemSelectedUtilityClasses: () => {
+    root: string;
+};

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

@@ -0,0 +1,6 @@
+import { useNoItemSelectedUtilityClasses } from ".";
+export interface NoItemSelectedClassesType {
+    root: string;
+}
+export declare type NoItemSelectedClassesKey = keyof NoItemSelectedClassesType;
+export declare type Classes = ReturnType<typeof useNoItemSelectedUtilityClasses>;

package/components/NoItemSelected/{index.23dfc897.js → index.a2807715.js}

@@ -1,20 +1,14 @@
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
 import { I as Image } from "../Image/index.c18ebf5a.js";
-import { Skeleton } from "@mui/material";
+import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 const WrapperNoItemSelected = styled("div")(({
   theme
 }) => ({
-  width: "100%",
-  maxWidth: "400px",
-  minWidth: "300px",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: theme.spacing(3)
+  ...theme.components?.M4LNoItemSelected?.styleOverrides
 }));
 const Img = styled(Image)(() => ({
   display: "flex"
@@ -34,7 +28,27 @@ const WrapperSKTNoItemSelected = styled("div")(() => ({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
-function NoItemSelected() {
+const componentName = "M4LNoItemSelected";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getNoItemSelectedUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useNoItemSelectedUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getNoItemSelectedUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function NoItemSelected(props) {
+  const {
+    image,
+    message
+  } = props;
   const {
     host_static_assets,
     environment_assets
@@ -43,29 +57,30 @@ function NoItemSelected() {
     getLabel
   } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  const src = useMemo(() => {
+  const defaultImage = useMemo(() => {
     return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   }, []);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
-      id: "WrapperNoItemSelected",
-      children: /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
-        id: "WrapperSKTNoItemSelected",
-        children: /* @__PURE__ */ jsx(Skeleton, {
-          variant: "rectangular",
-          width: "100%",
-          height: "100%"
-        })
+  const classes = useNoItemSelectedUtilityClasses();
+  return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
+    className: classes.root,
+    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [!image ? /* @__PURE__ */ jsx(Img, {
+        src: defaultImage
+      }) : /* @__PURE__ */ jsx(Img, {
+        src: image
+      }), !message ? /* @__PURE__ */ jsx(Label, {
+        children: getLabel("no_item_selected.message")
+      }) : /* @__PURE__ */ jsx(Label, {
+        children: message
+      })]
+    }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
+      id: "WrapperSKTNoItemSelected",
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rectangular",
+        width: "100%",
+        height: "100%"
       })
-    });
-  }
-  return /* @__PURE__ */ jsxs(WrapperNoItemSelected, {
-    id: "WrapperNoItemSelected",
-    children: [/* @__PURE__ */ jsx(Img, {
-      src
-    }), /* @__PURE__ */ jsx(Label, {
-      children: getLabel("no_item_selected.message")
-    })]
+    })
   });
 }
 function getNoItemSelectedComponentsDictionary() {

package/components/NoItemSelected/index.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare function NoItemSelected(): import("react").JSX.Element;
+import { NoItemSelectedProps } from './types';
+export declare function NoItemSelected(props: NoItemSelectedProps): import("react").JSX.Element;

package/components/NoItemSelected/types.d.ts

@@ -0,0 +1,4 @@
+export interface NoItemSelectedProps {
+    image?: string;
+    message?: string;
+}