@m4l/components 0.2.35 → 0.2.36

package/components/LoadingError/{index.ee29dd48.js → index.7aaba1cf.js}

@@ -1,12 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { I as ICONS } from "../areas/icons.8266ccc8.js";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.c46da124.js";
-import { I as Icon } from "../Icon/index.ad330e78.js";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { B as Button } from "../mui_extended/Button/index.c3084916.js";
+import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.2ecd571e.js";
+import { I as Icon } from "../Icon/index.ee7b85c9.js";
+import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
+import { B as Button } from "../mui_extended/Button/index.5395d101.js";
 const componentName = "M4LoadingError";
 generateUtilityClasses(componentName, [
   "root",
@@ -43,59 +43,42 @@ const LoadingErrorRoot = styled("div")(({ theme }) => ({
   ...theme?.components?.M4LoadingError?.styleOverrides
 }));
 const LoadingError = (props) => {
-  const {
-    status,
-    action,
-    title,
-    description,
-    recommendation,
-    introMessage,
-    errorIcon
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { status, action, title, description, recommendation, introMessage, errorIcon } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
   const classes = loadingErrorUtilityClasses();
-  return /* @__PURE__ */ jsx(LoadingErrorRoot, {
-    className: classes.root,
-    children: status !== "error" ? /* @__PURE__ */ jsx("div", {
-      className: classes.loadingErrorLoading,
-      children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {})
-    }) : /* @__PURE__ */ jsxs("div", {
-      className: classes.loadingError,
-      children: [/* @__PURE__ */ jsx(Icon, {
+  return /* @__PURE__ */ jsx(LoadingErrorRoot, { className: classes.root, children: status !== "error" ? /* @__PURE__ */ jsx("div", { className: classes.loadingErrorLoading, children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}) }) : /* @__PURE__ */ jsxs("div", { className: classes.loadingError, children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
         className: classes.loadingErrorIcon,
         src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
-      }), /* @__PURE__ */ jsxs("div", {
-        className: classes.titleDescription,
-        children: [/* @__PURE__ */ jsx(Typography, {
-          variant: "h3",
-          skeletonWidth: "100px",
-          className: classes.loadingErrorTitle,
-          children: title ? title : getLabel("loading_error.label_error_title")
-        }), /* @__PURE__ */ jsx(Typography, {
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: classes.titleDescription, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "100px", className: classes.loadingErrorTitle, children: title ? title : getLabel("loading_error.label_error_title") }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
           variant: "subtitle",
           skeletonWidth: "100px",
           className: classes.loadingErrorDescription,
           children: description ? description : getLabel("loading_error.label_error_description")
-        })]
-      }), /* @__PURE__ */ jsx("div", {
-        className: classes.loadingErrorDivider
-      }), /* @__PURE__ */ jsx(Typography, {
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: classes.loadingErrorDivider }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
         variant: "paragraph",
         skeletonWidth: "100px",
         className: classes.loadingErrorTextAction,
         children: recommendation ? recommendation : getLabel("loading_error.label_error_recommendation")
-      }), /* @__PURE__ */ jsx(Button, {
-        onClick: action,
-        children: introMessage ? introMessage : getLabel("loading_error.label_error_intro")
-      })]
-    })
-  });
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { onClick: action, children: introMessage ? introMessage : getLabel("loading_error.label_error_intro") })
+  ] }) });
 };
 const getLoadingErrorComponentsDictionary = () => {
   return ["loading_error"];

package/components/LoadingError/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoadingErrorRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/LoadingError/types.d.ts

@@ -1,4 +1,4 @@
-import { AreaStatus, AreasStatus } from "../areas/contexts/AreasContext/types";
+import { AreaStatus, AreasStatus } from '../areas/contexts/AreasContext/types';
 export interface AreasLoadingErrorProps {
     /**Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación. */
     status: AreasStatus | AreaStatus;

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

@@ -1,4 +1,4 @@
-import { mfLoaderUtilityClasses } from ".";
+import { mfLoaderUtilityClasses } from '.';
 export interface MFLoaderClassesType {
     root: string;
     containerLinearProgress: string;

package/components/MFLoader/{index.3a37407c.js → index.40c419c0.js}

@@ -4,15 +4,15 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import { useNetwork, useEnvironment, useHostTools, axiosOperation } from "@m4l/core";
 import { useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
 import debounce from "lodash/debounce";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinearProgress } from "../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { L as LoadingError } from "../LoadingError/index.ee29dd48.js";
+import { L as LinearProgress } from "../mui_extended/LinearProgress/index.4092bb69.js";
+import { L as LoadingError } from "../LoadingError/index.7aaba1cf.js";
 const componentName = "M4LMFLoader";
 const mfLoaderClasses = generateUtilityClasses(componentName, [
   "root",
@@ -33,17 +33,9 @@ const mfLoaderUtilityClasses = () => {
 };
 const ProggessLoadingMF = (props) => {
   try {
-    const {
-      loadingProgress
-    } = props;
+    const { loadingProgress } = props;
     if (loadingProgress >= 0 && loadingProgress <= 100) {
-      return /* @__PURE__ */ jsx("div", {
-        className: mfLoaderClasses.containerLinearProgress,
-        children: /* @__PURE__ */ jsx(LinearProgress, {
-          variant: "determinate",
-          value: loadingProgress
-        })
-      });
+      return /* @__PURE__ */ jsx("div", { className: mfLoaderClasses.containerLinearProgress, children: /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: loadingProgress }) });
     }
   } catch (error) {
   }
@@ -156,7 +148,9 @@ const MFLoaderRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LMFLoader?.styleOverrides
 }));
 function getDivScritId(prefix, moduleId) {
-  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(
+    Math.random() * 1e3
+  )}`;
   return {
     divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
     scriptId: `script_${moduleId}_${rotational_id}`,
@@ -164,30 +158,16 @@ function getDivScritId(prefix, moduleId) {
   };
 }
 function MFLoader(props) {
-  const {
-    prefix,
-    moduleId,
-    cache = true,
-    debug_port,
-    dynamicMFStore,
-    windowTools
-  } = props;
-  const {
-    hostThemeOptions,
-    fnComponentsOverrides
-  } = useHostTheme();
-  const {
-    networkOperation
-  } = useNetwork();
+  const { prefix, moduleId, cache = true, debug_port, dynamicMFStore, windowTools } = props;
+  const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
+  const { networkOperation } = useNetwork();
   const environment = useEnvironment();
   const hostTools = useHostTools();
   const formatter = useFormatter();
   const [statusLoader, setStatusLoader] = useState("progress");
   const [loadingProgress, setLoadingProgress] = useState(-1);
   const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
-  const {
-    currentLocale
-  } = useLocales();
+  const { currentLocale } = useLocales();
   const classes = mfLoaderUtilityClasses();
   const isFirstRender = useFirstRender([moduleId]);
   const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
@@ -210,30 +190,37 @@ function MFLoader(props) {
       }
     }
   }
-  const renderMicroFrontend = useCallback((newDScript) => {
-    try {
-      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, {
-        ...environment,
-        isMicroFrontend: true,
-        mfProps: {
-          moduleId,
-          debugPort: debug_port
+  const renderMicroFrontend = useCallback(
+    (newDScript) => {
+      try {
+        window[`render_${prefix}_${newDScript.moduleId}`](
+          newDScript.divContainerId,
+          { ...environment, isMicroFrontend: true, mfProps: { moduleId, debugPort: debug_port } },
+          hostTools,
+          currentLocale,
+          { hostThemeOptions, fnComponentsOverrides },
+          axiosOperation,
+          formatter,
+          dynamicMFStore,
+          windowTools
+        );
+      } catch (error) {
+      }
+    },
+    [hostThemeOptions, currentLocale, formatter]
+  );
+  const debouncedSetDivScript = useCallback(
+    debounce(
+      (newName) => {
+        const newDivScript = getDivScritId(prefix, newName);
+        if (newName !== divScript.moduleId) {
+          setDivScript({ ...newDivScript });
         }
-      }, hostTools, currentLocale, {
-        hostThemeOptions,
-        fnComponentsOverrides
-      }, axiosOperation, formatter, dynamicMFStore, windowTools);
-    } catch (error) {
-    }
-  }, [hostThemeOptions, currentLocale, formatter]);
-  const debouncedSetDivScript = useCallback(debounce((newName) => {
-    const newDivScript = getDivScritId(prefix, newName);
-    if (newName !== divScript.moduleId) {
-      setDivScript({
-        ...newDivScript
-      });
-    }
-  }, 200), [divScript]);
+      },
+      200
+    ),
+    [divScript]
+  );
   useEffect(() => {
     if (!isFirstRender) {
       debouncedSetDivScript(moduleId + "");
@@ -247,9 +234,7 @@ function MFLoader(props) {
     window[`observable_${prefix}_${moduleId}`]?.tryAgain();
   }, []);
   useEffect(() => {
-    const dsNowScript = {
-      ...divScript
-    };
+    const dsNowScript = { ...divScript };
     const observableDownload = (event, progress) => {
       setLoadingProgress(progress);
       setStatusLoader(event);
@@ -257,7 +242,12 @@ function MFLoader(props) {
     if (!window[`render_${prefix}_${moduleId}`]) {
       let observableLoaderMF;
       if (!window[`observable_${prefix}_${moduleId}`]) {
-        observableLoaderMF = new ObservableLoaderMF(final_host, dsNowScript.scriptId, networkOperation, !environment.isLocalhost);
+        observableLoaderMF = new ObservableLoaderMF(
+          final_host,
+          dsNowScript.scriptId,
+          networkOperation,
+          !environment.isLocalhost
+        );
         window[`observable_${prefix}_${moduleId}`] = observableLoaderMF;
       } else {
         observableLoaderMF = window[`observable_${prefix}_${moduleId}`];
@@ -276,16 +266,10 @@ function MFLoader(props) {
       renderMicroFrontend(divScript);
     }
   }, [statusLoader]);
-  return /* @__PURE__ */ jsxs(MFLoaderRoot, {
-    id: divScript.divContainerId,
-    className: classes.root,
-    children: [statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, {
-      loadingProgress
-    }) : null, statusLoader === "error" ? /* @__PURE__ */ jsx(LoadingError, {
-      status: statusLoader,
-      action: tryAgainOnError
-    }) : null]
-  });
+  return /* @__PURE__ */ jsxs(MFLoaderRoot, { id: divScript.divContainerId, className: classes.root, children: [
+    statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, { loadingProgress }) : null,
+    statusLoader === "error" ? /* @__PURE__ */ jsx(LoadingError, { status: statusLoader, action: tryAgainOnError }) : null
+  ] });
 }
 MFLoader.defaultProps = {
   document,

package/components/MFLoader/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MFLoaderRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/MFLoader/types.d.ts

@@ -1,5 +1,5 @@
-import { DynamicMFStore, WindowToolsMF } from "../areas";
-import { MFBaseProps } from "../areas/types";
+import { DynamicMFStore, WindowToolsMF } from '../areas';
+import { MFBaseProps } from '../areas/types';
 /**
  * Propiedades para el componente MFLoader, utilizado para cargar microfrontends de manera dinámica.
  */
@@ -13,7 +13,7 @@ export interface MFLoaderProps extends MFBaseProps {
      */
     dynamicMFStore?: DynamicMFStore;
     /**
-    * Herramientas de ventana para el microfrontend.
-    */
+     * Herramientas de ventana para el microfrontend.
+     */
     windowTools: WindowToolsMF;
 }

package/components/ModalDialog/index.42349189.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme, Dialog, Paper } from "@mui/material";
+import { c as cjs } from "../../react-draggable.79b4c69a.js";
+import { u as useModal } from "../../hooks/useModal/index.30674bb7.js";
+import { R as ResizeableWindow } from "../Resizeable/index.5e8e48b1.js";
+import { useIsMobile } from "@m4l/graphics";
+import { m as modalUtilityClasses } from "../modal/index.81eb6def.js";
+import { useState, useEffect } from "react";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.273645af.js";
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, { handle: ".m4l_draggable_handle", cancel: '[class*="MuiDialogContent-root"]', children: /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "unset", maxWidth: "unset" }, ...props }) });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "unset", maxWidth: "unset", height: "100%" }, ...props });
+}
+const ModalDialog = () => {
+  const {
+    open,
+    initialWidth = 600,
+    initialHeigth = 400,
+    maxWidth,
+    maxHeigth,
+    window,
+    fullScreen,
+    variant
+  } = useModal();
+  const isMobile = useIsMobile();
+  const [fullScreenState, setFullScreenState] = useState(fullScreen);
+  useEffect(() => {
+    setFullScreenState(isMobile);
+  }, [isMobile]);
+  const theme = useTheme();
+  const classes = modalUtilityClasses({ variant });
+  const contentComnponent = /* @__PURE__ */ jsx("div", { className: classes.containerWindow, children: typeof window === "function" ? window() : window });
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      className: classes.root,
+      sx: { ...theme.components?.M4LModalDialog?.styleOverrides },
+      "aria-labelledby": "child-modal-title",
+      "aria-describedby": "child-modal-description",
+      PaperComponent: !isMobile ? DragabblePaperComponent : PaperComponent,
+      fullScreen: fullScreenState,
+      disableEnforceFocus: true,
+      children: !isMobile ? /* @__PURE__ */ jsx(
+        ResizeableWindow,
+        {
+          width: initialWidth,
+          height: initialHeigth,
+          maxWidth,
+          maxHeigth,
+          handle: (resizeHandle, ref) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              className: `custom-handle custom-handle-${resizeHandle}`
+            },
+            resizeHandle
+          ),
+          children: contentComnponent
+        }
+      ) : contentComnponent
+    }
+  );
+};
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getCommonActionsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export {
+  ModalDialog as M,
+  defaultModalDialogDictionary as d,
+  getModalDialogComponentsDictionary as g
+};

package/components/NavLink/{index.b75c91e1.js → index.9e847eb5.js}

@@ -1,9 +1,9 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { NavLink as NavLink$1 } from "react-router-dom";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
+import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
 const componentName = "M4LNavLink";
 generateUtilityClasses(componentName, [
   "root"
@@ -28,31 +28,27 @@ const getNameDataTestId = (KEY) => {
   return `${NAVLINK_PREFIX}-${KEY}`;
 };
 const NavLink = (props) => {
-  const {
-    children,
-    text,
-    skeletonWidth,
-    skeletongHeight,
-    ...others
-  } = props;
+  const { children, text, skeletonWidth, skeletongHeight, ...others } = props;
   const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(NavLinkRoot, {
-    className: classes.root,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
-    } : {},
-    children: /* @__PURE__ */ jsxs(NavLink$1, {
-      ...others,
-      children: [/* @__PURE__ */ jsx(Typography, {
-        variant: "action",
-        skeletonWidth,
-        skeletongHeight,
-        children: text
-      }), /* @__PURE__ */ jsx(Fragment, {
+  return /* @__PURE__ */ jsx(
+    NavLinkRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: /* @__PURE__ */ jsx(NavLink$1, { ...others, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "action",
+            skeletonWidth,
+            skeletongHeight,
+            children: text
+          }
+        ),
         children
-      })]
-    })
-  });
+      ] }) })
+    }
+  );
 };
 export {
   NavLink as N

package/components/NavLink/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NavLinkRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/NavLink/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { NavLinkClassesKey } from "../classes/types";
+import { NavLinkClassesKey } from '../classes/types';
 export declare const getNameDataTestId: (KEY: NavLinkClassesKey) => string;

package/components/NavLink/types.d.ts

@@ -1,5 +1,5 @@
-import { NavLinkProps as RouterNavLinkProps } from "react-router-dom";
-import { TypographyProps } from "../mui_extended/Typography/types";
+import { NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
+import { TypographyProps } from '../mui_extended/Typography/types';
 export interface NavLinkProps extends RouterNavLinkProps, Pick<TypographyProps, 'skeletonWidth' | 'skeletongHeight'> {
     text: string;
 }

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

@@ -1,4 +1,4 @@
-import { useNoItemSelectedUtilityClasses } from ".";
+import { useNoItemSelectedUtilityClasses } from '.';
 export interface NoItemSelectedClassesType {
     root: string;
 }

package/components/NoItemSelected/{index.3a479c64.js → index.5a8160fd.js}

@@ -1,20 +1,16 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { I as Image } from "../Image/index.b799c514.js";
+import { I as Image } from "../Image/index.8cc036b1.js";
 import { useMemo } from "react";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-const WrapperNoItemSelected = styled("div")(({
-  theme
-}) => ({
+const WrapperNoItemSelected = styled("div")(({ theme }) => ({
   ...theme.components?.M4LNoItemSelected?.styleOverrides
 }));
 const Img = styled(Image)(() => ({
   display: "flex"
 }));
-const Label = styled("span")(({
-  theme
-}) => ({
+const Label = styled("span")(({ theme }) => ({
   ...theme.typography.body,
   padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`
 }));
@@ -27,9 +23,12 @@ const WrapperSKTNoItemSelected = styled("div")(() => ({
   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`
 }));
 const componentName = "M4LNoItemSelected";
-generateUtilityClasses(componentName, [
-  "root"
-]);
+generateUtilityClasses(
+  componentName,
+  [
+    "root"
+  ]
+);
 function getNoItemSelectedUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
@@ -43,43 +42,18 @@ const useNoItemSelectedUtilityClasses = () => {
   };
 };
 function NoItemSelected(props) {
-  const {
-    image,
-    message
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { image, message } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
   const defaultImage = useMemo(() => {
     return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   }, []);
   const classes = useNoItemSelectedUtilityClasses();
-  return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
-    className: classes.root,
-    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [!message ? /* @__PURE__ */ jsx(Label, {
-        children: getLabel("no_item_selected.message")
-      }) : /* @__PURE__ */ jsx(Label, {
-        children: message
-      }), !image ? /* @__PURE__ */ jsx(Img, {
-        src: defaultImage
-      }) : /* @__PURE__ */ jsx(Img, {
-        src: image
-      })]
-    }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
-      id: "WrapperSKTNoItemSelected",
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rectangular",
-        width: "100%",
-        height: "100%"
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(WrapperNoItemSelected, { className: classes.root, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !message ? /* @__PURE__ */ jsx(Label, { children: getLabel("no_item_selected.message") }) : /* @__PURE__ */ jsx(Label, { children: message }),
+    !image ? /* @__PURE__ */ jsx(Img, { src: defaultImage }) : /* @__PURE__ */ jsx(Img, { src: image })
+  ] }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, { id: "WrapperSKTNoItemSelected", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" }) }) });
 }
 function getNoItemSelectedComponentsDictionary() {
   return ["no_item_selected"];

package/components/NoItemSelected/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<import("../Image").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;