@m4l/components 0.2.26 → 0.2.28

package/components/AccountPopover/{index.e31fc908.js → index.7b7f3962.js}

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { A as Avatar } from "../mui_extended/Avatar/index.75e6ed57.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import { P as Popover } from "../mui_extended/Popover/index.d85de73b.js";
-import { I as Icon } from "../Icon/index.8c744412.js";
+import { I as Icon } from "../Icon/index.1976cb37.js";
 import clsx from "clsx";
 const componentName = "M4LAccountPopover";
 generateUtilityClasses(componentName, [

package/components/AppBar/{index.4945897e.js → index.cb2f1763.js}

@@ -4,9 +4,9 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as Image } from "../Image/index.39b3b9d9.js";
+import { I as Image } from "../Image/index.fd6f2c5f.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.383f5496.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.63a9d74c.js";
 const AppBarRoot = styled("header")(({
   theme
 }) => ({

package/components/CommonActions/components/ActionCancel/{index.33a748be.js → index.e03455db.js}

@@ -1,6 +1,6 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.93389adb.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.389f9b28.js";
+import { B as Button } from "../../../mui_extended/Button/index.c6befaeb.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.16946bfd.js";
 import { jsx } from "react/jsx-runtime";
 const ActionCancel = (props) => {
   const {

package/components/CommonActions/components/ActionFormCancel/{index.9a965204.js → index.9120552e.js}

@@ -1,12 +1,12 @@
 import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.93389adb.js";
+import { B as Button } from "../../../mui_extended/Button/index.c6befaeb.js";
 import { useCallback, useEffect } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.2f1d6a07.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.389f9b28.js";
+import { u as useModal } from "../../../../hooks/useModal/index.66a0c82e.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.16946bfd.js";
 import { jsx } from "react/jsx-runtime";
 import { u as useWindowToolsMF } from "../../../areas/hooks/useWindowToolsMF/index.b7afaf88.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.4501497a.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.67ee36e9.js";
 function ActionFormCancel() {
   const {
     getLabel

package/components/CommonActions/components/ActionFormIntro/{index.7add0125.js → index.48e7d28a.js}

@@ -1,8 +1,8 @@
 import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { L as LoadingButton } from "../../../mui_extended/Button/index.93389adb.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.389f9b28.js";
+import { L as LoadingButton } from "../../../mui_extended/Button/index.c6befaeb.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.16946bfd.js";
 import { jsx } from "react/jsx-runtime";
 function ActionFormIntro(props) {
   const {

package/components/CommonActions/components/ActionIntro/{index.ac7cd0ee.js → index.5ba2ef5f.js}

@@ -1,7 +1,7 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.93389adb.js";
+import { B as Button } from "../../../mui_extended/Button/index.c6befaeb.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.389f9b28.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.16946bfd.js";
 import { jsx } from "react/jsx-runtime";
 const ACTIONINTRO_TEST_ID = "m4lactions";
 const ActionIntro = (props) => {

package/components/DataGrid/formatters/ColumnBooleanFormatter/{index.f731d23f.js → index.ce8c7b9c.js}

@@ -1,6 +1,6 @@
 import { getPropertyByString } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
-import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/index.0703a256.js";
+import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/index.477c6419.js";
 function ColumnBooleanFormatter(props) {
   const {
     fieldValue,

package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/{index.ad82747c.js → index.3a1ae54f.js}

@@ -1,6 +1,6 @@
 import { getPropertyByString } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
-import { C as ConcatenatedFormatter } from "../../../formatters/index.94be7098.js";
+import { C as ConcatenatedFormatter } from "../../../formatters/index.ac0a547b.js";
 function ColumnConcatenatedValueFormatter(props) {
   const {
     fieldValue,

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/{index.64854fdd.js → index.de32e830.js}

@@ -1,5 +1,5 @@
 import { Checkbox } from "@mui/material";
-import { d as dataGridClasses } from "../../index.1c695ed3.js";
+import { d as dataGridClasses } from "../../index.690184a8.js";
 import { jsx } from "react/jsx-runtime";
 function ColumnInteractiveCheckFormatter(props) {
   const {

package/components/DataGrid/{index.1c695ed3.js → index.690184a8.js}

@@ -1,5 +1,5 @@
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.ce0f4d16.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.5791276c.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.86de725b.js";
+import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.a024f67b.js";
 import { styled, SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
 import { u as useRowSelection, S as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.c5377916.js";
@@ -8,7 +8,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { D as DATAGRID_SELECT_COLUMN_KEY, c as componentName, a as DATAGRID_PREFIX_NAME } from "./constants.e334cd50.js";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.4a402633.js";
+import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.339ccf42.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";

package/components/DataGrid/subcomponents/Actions/{index.4a402633.js → index.339ccf42.js}

@@ -1,20 +1,20 @@
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.e6e3aac8.js";
-import { u as useDataGrid, a as useFilters, D as DataGridRoot, b as dictionary } from "../../index.1c695ed3.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.bca14ad9.js";
+import { u as useDataGrid, a as useFilters, D as DataGridRoot, b as dictionary } from "../../index.690184a8.js";
 import { useTheme, styled, Skeleton } from "@mui/material";
 import { b as DATAGRID_ACTIONS_COLUMN_KEY } from "../../constants.e334cd50.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { P as Pager } from "../../../mui_extended/Pager/index.5791276c.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.383f5496.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.a024f67b.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.63a9d74c.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, useCallback } from "react";
 import { D as DataGrid$1 } from "../../../../react-data-grid.c5377916.js";
-import { C as ColumnInteractiveCheckFormatter } from "../../formatters/ColumnInteractiveCheckFormatter/index.64854fdd.js";
-import { u as useModal } from "../../../../hooks/useModal/index.2f1d6a07.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.33a748be.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.ac7cd0ee.js";
+import { C as ColumnInteractiveCheckFormatter } from "../../formatters/ColumnInteractiveCheckFormatter/index.de32e830.js";
+import { u as useModal } from "../../../../hooks/useModal/index.66a0c82e.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.e03455db.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.5ba2ef5f.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { W as WindowBase } from "../../../modal/WindowBase.dd1d2d7b.js";
-import { A as Actions$1 } from "../../../CommonActions/components/Actions/index.389f9b28.js";
+import { W as WindowBase } from "../../../modal/WindowBase.f38260ec.js";
+import { A as Actions$1 } from "../../../CommonActions/components/Actions/index.16946bfd.js";
 function ActionsFormatter(props) {
   const {
     rowActionsGetter,

package/components/DragResizeWindow/{index.f84451f8.js → index.be2fc1e0.js}

@@ -2,7 +2,7 @@ import React__default, { useState, useRef, useCallback, useEffect, useMemo } fro
 import { D as DraggableCore_1 } from "../../react-draggable.ee21cb7e.js";
 import clsx from "clsx";
 import { styled, generateUtilityClasses } from "@mui/material";
-import { M as MAP_ZINDEX_OVER_MAP } from "../../vendor.173d0b89.js";
+import { M as MAP_ZINDEX_OVER_MAP } from "../../vendor.aa97e825.js";
 import "@mui/base";
 import { M as MAP_ZINDEX_OVER_MAP$1 } from "../PopupsProvider/index.3d5ad0ee.js";
 import { R as Resizable } from "../../react-resizable.ee028152.js";

package/components/DynamicFilter/{index.22ba3195.js → index.ad2460cf.js}

@@ -7,26 +7,26 @@ import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/ind
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.389f9b28.js";
-import { g as getRHFAutocompleteComponentsDictionary, R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.993794f8.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.16946bfd.js";
+import { g as getRHFAutocompleteComponentsDictionary, R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.24e4387c.js";
 import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useFormContext, useWatch } from "react-hook-form";
 import { shallow } from "zustand/shallow";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.2396ea4a.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.fb0d1cac.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.f02f1122.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.81c4b52b.js";
 import * as Yup from "yup";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
 import { S as ScrollBar } from "../ScrollBar/index.7dfc2f29.js";
 import clsx from "clsx";
-import { I as IconButton } from "../mui_extended/IconButton/index.383f5496.js";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.e6e3aac8.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.63a9d74c.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.bca14ad9.js";
 import { P as Popover } from "../mui_extended/Popover/index.d85de73b.js";
-import { I as Icon } from "../Icon/index.8c744412.js";
+import { I as Icon } from "../Icon/index.1976cb37.js";
 import { useTheme } from "@mui/material/styles";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.7b2a8723.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.33a748be.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.ac7cd0ee.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.e03455db.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.5ba2ef5f.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 const COMPONENT_PREFIX = "M4LDynamicFilter";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
@@ -1313,6 +1313,7 @@ const ClearFiltersButton = () => {
   } = useEnvironment();
   const {
     clearFilters,
+    fireOnChangeFilters,
     hidePopoverFilter: hidePopupEdit
   } = useDynamicFilter((state) => state.actions);
   const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
@@ -1331,6 +1332,7 @@ const ClearFiltersButton = () => {
   const onClickClearFilters = () => {
     hidePopupEdit(false);
     clearFilters();
+    fireOnChangeFilters();
   };
   if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
     return /* @__PURE__ */ jsx(IconButton, {
@@ -1590,7 +1592,7 @@ function InputFilter() {
       }), /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
         width: "100%",
-        height: 24
+        height: "16px"
       })]
     }), /* @__PURE__ */ jsx(PopoverMenuFields, {
       selectFieldIndex,

package/components/FieldLabel/{index.1da2a28d.js → index.61d55577.js}

@@ -5,7 +5,7 @@ import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { I as Icon } from "../Icon/index.8c744412.js";
+import { I as Icon } from "../Icon/index.1976cb37.js";
 const FieldLabelRoot = styled("label")(({ theme }) => ({
   ...theme.components?.M4LFieldLabel?.styleOverrides
 }));

package/components/GridLayout/subcomponents/Responsive/{index.0fd1b7f8.js → index.d2ec9ddb.js}

@@ -169,6 +169,7 @@ function generateInitialState(props) {
     initialColapsedHeight,
     initialrowHeight
   );
+  console.log("initialLayout", initialLayout);
   if (defaultLayouts[newBreakpoint]) {
     if (isEqualLayout(defaultLayouts[newBreakpoint], initialLayout)) {
       fireOnLoadLayoutChange = false;

package/components/HamburgerMenu/{index.1663edef.js → index.9f99b7c1.js}

@@ -5,8 +5,8 @@ import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { S as SideBar } from "../SideBar/index.141dac10.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.383f5496.js";
+import { S as SideBar } from "../SideBar/index.3ea827ea.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.63a9d74c.js";
 const HamburgerMenuRoot = styled("header")(({
   theme
 }) => ({

package/components/Icon/{index.8c744412.js → index.1976cb37.js}

@@ -1,7 +1,7 @@
-import React__default, { useState, useEffect } from "react";
+import React__default from "react";
 import { useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.141dac10.js";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.3ea827ea.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
@@ -22,8 +22,8 @@ const DivIcon = styled("div", {
   maskRepeat: "no-repeat",
   maskSize: "cover",
   WebkitMaskRepeat: "no-repeat",
-  mask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  mask: `url(${src})`,
+  WebkitMask: `url(${src})`,
   WebkitMaskSize: "cover",
   ...rotationAngle && {
     transform: `rotate(${rotationAngle}deg)`
@@ -64,66 +64,26 @@ function Icon(props) {
     src,
     size = "small",
     rotationAngle,
-    testingProps,
-    className,
-    memorizeResource = true
+    className
   } = props;
-  const [resource, setResource] = useState(testingProps?.resource || void 0);
   const isDesktop = useResponsiveDesktop();
-  if (memorizeResource) {
-    useEffect(() => {
-      let mounted = true;
-      (async function networkOperation() {
-        await fetch(src).then((response) => {
-          return response.text() || "";
-        }).then((xml) => {
-          xml = xml.match(
-            /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
-          )?.toString() || "";
-          if (mounted) {
-            setResource(window.btoa(xml));
-          }
-        }).catch((_err) => {
-        });
-      })();
-      return function clenUp() {
-        mounted = false;
-      };
-    }, [src]);
-  }
   const ownerState = {
     size: isDesktop ? size : "medium",
     rotationAngle
   };
   const classes = useUtilityClasses(ownerState);
-  if (!memorizeResource) {
-    return /* @__PURE__ */ jsx(IconRoot, {
-      className: clsx(classes.root, className),
-      children: /* @__PURE__ */ jsx("img", {
-        src,
-        alt: src,
-        className: ""
-      })
-    });
-  }
   return /* @__PURE__ */ jsx(IconRoot, {
     className: clsx(classes.root, className),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("root")
     } : {},
-    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+    children: /* @__PURE__ */ jsx(DivIcon, {
       className: classes.icon,
-      src: resource,
+      src,
       rotationAngle,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("icon")
       } : {}
-    }) : /* @__PURE__ */ jsx(Skeleton, {
-      variant: "rectangular",
-      className: classes.variantSkeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("variantSkeleton")
-      } : {}
     })
   });
 }

package/components/Icon/types.d.ts

@@ -1,14 +1,9 @@
 export declare type SizeIcon = 'small' | 'extraSmall' | 'medium' | 'large' | 'extraLarge';
-export interface TestingProps {
-    resource: any;
-}
 export interface IconProps {
     src: string;
     size?: SizeIcon;
     rotationAngle?: number;
-    testingProps?: TestingProps;
     className?: string;
-    memorizeResource?: boolean;
 }
 export declare type DivIconProps = Pick<IconProps, 'src' | 'rotationAngle'>;
 export declare type WrapperPlaceHolderProps = {

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

@@ -0,0 +1,7 @@
+import { ImageClassesType } from './types';
+export declare const imageClasses: ImageClassesType;
+export declare function getImagenClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    img: string;
+    root: string;
+};

package/components/Image/{utils/classes → classes}/types.d.ts

@@ -1,10 +1,5 @@
 export interface ImageClassesType {
     root: string;
-    lazyLoad: string;
     img: string;
-    span: string;
-    skeletonImage: string;
-    skeletonCircle: string;
-    loaded: string;
 }
 export declare type ImageClassesKey = keyof ImageClassesType;

package/components/Image/index.fd6f2c5f.js

@@ -0,0 +1,203 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import clsx from "clsx";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx } from "react/jsx-runtime";
+import { useBase, useEnvironment, evaluateWithContext } from "@m4l/core";
+import { c as classes, g as getSize } from "../PrintingSystem/index.02517f9c.js";
+import { Q as QRCode } from "../../node_modules.4d80a09c.js";
+const ImageRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LImage?.styleOverrides
+}));
+const ratioOptions = {
+  "1.168:1": {
+    width: 1.168,
+    height: 1
+  },
+  "16:9": {
+    width: 16,
+    height: 9
+  },
+  "1:1": {
+    width: 1,
+    height: 1
+  },
+  "1:1.168": {
+    width: 1,
+    height: 1.168
+  },
+  "2:1": {
+    width: 2,
+    height: 1
+  },
+  "2:3": {
+    width: 2,
+    height: 3
+  },
+  "3:1": {
+    width: 3,
+    height: 1
+  },
+  "3:2": {
+    width: 3,
+    height: 2
+  },
+  "3:4": {
+    width: 3,
+    height: 4
+  },
+  "4:3": {
+    width: 4,
+    height: 3
+  },
+  "5:2": {
+    width: 5,
+    height: 2
+  }
+};
+const getRatioValues = (ratio) => {
+  const numType = ratioOptions[ratio];
+  const numRef = numType.width / numType.height;
+  if (numRef >= 1) {
+    return {
+      width: "100%",
+      height: `${Math.trunc(numRef * 100)}%`
+    };
+  } else {
+    return {
+      width: `${Math.trunc(numRef * 100)}%`,
+      height: "100%"
+    };
+  }
+};
+const IMAGE_PREFIX = "Image";
+const getNameDataTestId = (KEY) => {
+  return `${IMAGE_PREFIX}-${KEY}`;
+};
+const componentName = "M4LImage";
+generateUtilityClasses(componentName, [
+  "root",
+  "img"
+]);
+function getImagenClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    img: ["img"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getImagenClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function Image(props) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    ratio = "1:1",
+    className
+  } = props;
+  const ratioImage = getRatioValues(ratio);
+  const classes2 = useUtilityClasses();
+  return /* @__PURE__ */ jsx(ImageRoot, {
+    className: clsx(classes2.root, className),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    style: width && height ? {
+      minWidth: width,
+      minHeight: height,
+      width,
+      height
+    } : {
+      width: "100%",
+      height: "100%"
+    },
+    children: /* @__PURE__ */ jsx("img", {
+      alt,
+      src,
+      className: classes2.img,
+      width: !width ? "100%" : ratioImage.width,
+      height: !height ? "100%" : ratioImage.height,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("img")
+      } : {}
+    })
+  });
+}
+const ImageNode = (props) => {
+  const {
+    className,
+    style,
+    src,
+    width = "100%",
+    height = "100%"
+  } = props;
+  const {
+    unitSize,
+    sourceData
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const resourceImg = evaluateWithContext(sourceData, src);
+  return /* @__PURE__ */ jsx("img", {
+    src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
+    className: clsx(classes.imageNodeRoot, className),
+    style: {
+      width: getSize(width, unitSize),
+      height: getSize(height, unitSize),
+      ...style
+    }
+  });
+};
+const convertToPx = (size, magnitud) => {
+  if (isNaN(size)) {
+    return 0;
+  }
+  if (magnitud === "px") {
+    return size;
+  }
+  switch (magnitud) {
+    case "cm":
+      return size * 37.8;
+    case "mm":
+      return size * 3.78;
+    case "in":
+      return size * 96;
+    case "pt":
+      return size * 1.33;
+    case "pc":
+      return size * 16;
+    default:
+      return 100;
+  }
+};
+const QRImageNode = (props) => {
+  const {
+    url,
+    size = 8,
+    color
+  } = props;
+  const {
+    unitSize
+  } = useBase();
+  return /* @__PURE__ */ jsx(QRCode, {
+    value: url,
+    size: convertToPx(size, unitSize),
+    fgColor: color,
+    renderAs: "canvas"
+  });
+};
+export {
+  Image as I,
+  QRImageNode as Q,
+  ImageNode as a
+};

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

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

package/components/Image/types.d.ts

@@ -1,54 +1,14 @@
-import { ReactNode } from 'react';
-export declare type Effect = 'blur' | 'black-and-white' | 'opacity';
-export declare type ScrollPosition = {
-    x: number;
-    y: number;
-};
-export declare type IntersectComponentRef = HTMLSpanElement & {
-    setIsVisible?: (visible: boolean) => void;
-};
-export interface TestingProps {
-    statusLoad?: any;
-    isVisible?: boolean;
-}
-export interface BaseImageProps {
-    width?: string | number;
-    height?: string | number;
-}
-export interface IntersectComponentProps extends BaseImageProps {
-    setIsVisible: (visible: boolean) => void;
-    threshold: number;
-    useIntersectionObserver: boolean;
-    scrollPosition?: ScrollPosition;
-}
-export interface IntersectComponentScrollProps extends IntersectComponentProps {
-    delayMethod?: 'debounce' | 'throttle';
-    delayTime?: number;
-}
-export interface LazyLoadComponentProps extends Pick<ImageProps, 'testingProps'>, Omit<IntersectComponentProps, 'setIsVisible'> {
-    children: ReactNode;
-}
-export declare type SkeletonVariant = 'image' | 'circle';
 export declare type RatioOptions = '1.168:1' | '16:9' | '1:1' | '1:1.168' | '2:1' | '2:3' | '3:1' | '3:2' | '3:4' | '4:3' | '5:2';
 export interface ratioValues {
     width: number;
     height: number;
 }
-export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible' | 'threshold' | 'useIntersectionObserver'> {
+export interface ImageProps {
     src: string;
     alt?: string;
-    threshold?: number;
-    useIntersectionObserver?: boolean;
-    skeletonVariant?: SkeletonVariant;
-    testingProps?: TestingProps;
     ratio?: RatioOptions;
     className?: string;
-}
-export declare type StatusLoad = 'initial' | 'loaded' | 'removed';
-export interface OwnerState {
-    isImageLoaded: boolean;
-}
-export interface BaseProviderIamgeType {
-    classes: any;
+    width?: number | string;
+    height?: number | string;
 }
 export declare const ratioOptions: Record<RatioOptions, ratioValues>;