@m4l/components 0.1.40 → 0.1.41

package/components/DynamicFilter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DynamicFilterProps } from './types';
+export declare const DynamicFilter: (props: DynamicFilterProps) => JSX.Element;

package/components/DynamicFilter/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface WrapperProps {
+    inEdition: boolean;
+}
+export declare const WrapperFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFilterMobile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerFistRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/components/DynamicFilter/types.d.ts

@@ -0,0 +1,67 @@
+import { Maybe } from '@m4l/core';
+export declare type FieldType = 'number' | 'string' | 'boolean' | 'datetime';
+export declare type OperandType = number | string | boolean | Date | [] | object;
+export declare type Operator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';
+export declare const OPERATORS: Array<Operator>;
+export declare type StringOperator = 'c' | 'nc';
+export declare const STRING_OPERATORS: Array<StringOperator>;
+export declare type NumberOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export declare const NUMBER_OPERATORS: Array<NumberOperator>;
+export declare type BooleanOperator = 'e' | 'ne';
+export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;
+export declare type DateTimeOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export declare const DATE_TIME_OPERATORS: Array<DateTimeOperator>;
+export declare type FieldPresence = 'initialized' | 'fixed' | 'optional';
+export interface Field {
+    name: string;
+    label: string;
+    type: FieldType;
+    multiple?: boolean;
+    presence?: FieldPresence;
+    urlIcon: string;
+    defaultOperand1?: Maybe<OperandType>;
+    defaultOperand2?: Maybe<OperandType>;
+}
+export interface OptionOperator<T> {
+    id: T;
+    label: string;
+}
+export interface BaseApplyFilter {
+    id: number;
+    n: string;
+    isSetted: boolean;
+    fixed: boolean;
+}
+export interface ValuesFilter {
+    o: Operator;
+    labelOperator: string;
+    labelOperands: string | number;
+    o1?: Maybe<OperandType>;
+    o2?: Maybe<OperandType>;
+}
+export interface FormValuesFilter<T> {
+    valueOperator?: Maybe<OptionOperator<T>>;
+    valueOperand1?: Maybe<any>;
+    valueOperand2?: Maybe<any>;
+}
+export interface RawFilterFieldApply {
+    n: string;
+    o: Operator;
+    o1: Maybe<OperandType>;
+    o2: Maybe<OperandType>;
+}
+export declare type FilterFieldApply = BaseApplyFilter & ValuesFilter;
+export declare type InitialFilterFieldApply = Omit<FilterFieldApply, 'id' | 'fixed' | 'isSetted' | 'labelOperator'>;
+export declare type FilterToAddApply = Omit<FilterFieldApply, 'id' | 'labelOperator'>;
+export declare type FilterToEditApply = Omit<FilterFieldApply, 'labelOperator'>;
+export interface FilterFormFieldApply extends BaseApplyFilter, ValuesFilter, FormValuesFilter<Operator> {
+}
+export declare const ALL_FIELDS: Field;
+export interface DynamicFilterProps {
+    isSkeleton?: boolean;
+    automatic?: boolean;
+    withAllField?: boolean;
+    fields: Array<Field>;
+    initialFilters?: Array<InitialFilterFieldApply>;
+    onChangeFilter: (initialFilters: Array<InitialFilterFieldApply>, rawFilters: Array<RawFilterFieldApply>) => void;
+}

package/components/ErrorLabel/index.c8615f16.js

@@ -0,0 +1,20 @@
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const Wrapper = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  margin: "8px 14px 0 14px"
+}));
+const ErrorLabel = (props) => {
+  const {
+    message
+  } = props;
+  return /* @__PURE__ */ jsx(Wrapper, {
+    children: message
+  });
+};
+export {
+  ErrorLabel as E
+};

package/components/ErrorLabel/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ErrorLabelProps } from './types';
+export declare const ErrorLabel: (props: ErrorLabelProps) => JSX.Element;
+export default ErrorLabel;

package/components/ErrorLabel/styles.d.ts

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

package/components/HelmetPage/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HelmetPageProps } from './types';
+export declare const HelmetPage: {
+    (props: HelmetPageProps): JSX.Element;
+    displayName: string;
+};

package/components/HelmetPage/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface HelmetPageProps {
+    children: ReactNode;
+    meta?: ReactNode;
+    title: string;
+    subtitle?: string;
+}

package/components/Icon/index.8d754623.js

@@ -0,0 +1,153 @@
+import { m } from "framer-motion";
+import { forwardRef, useState, useMemo, useEffect } from "react";
+import { IconButton, Box, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../utils/index.899eb67b.js";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
+})(({
+  size,
+  src,
+  bgColor,
+  rotationAngle,
+  angleTransition
+}) => ({
+  maskPosition: "center!important",
+  maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
+  width: size,
+  height: size,
+  backgroundColor: bgColor,
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  },
+  ...angleTransition && rotationAngle && {
+    transition: `transform ${angleTransition}s ease-in-out`
+  }
+}));
+const WrapperPlaceHolder = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+function Icon(props) {
+  const {
+    src,
+    size = "small",
+    bgColor = "action.active",
+    rotationAngle,
+    angleTransition
+  } = props;
+  const [resource, setResource] = useState(void 0);
+  const theme = useTheme();
+  const finalSize = useMemo(() => {
+    switch (size) {
+      case "extra-small":
+        return "12px";
+      case "small":
+        return "16px";
+      case "medium":
+        return "18px";
+      case "large":
+        return "22px";
+    }
+    return size;
+  }, [size]);
+  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 placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
+    className: "m4l_icon",
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      src: resource,
+      size: finalSize,
+      bgColor: getPaletteColor(theme.palette, bgColor),
+      rotationAngle,
+      angleTransition
+    }) : /* @__PURE__ */ jsx("img", {
+      src: placeHolder,
+      alt: "icon_svg",
+      width: finalSize,
+      height: finalSize
+    })
+  });
+}
+export {
+  Icon as I,
+  IconButtonAnimate as a
+};

package/components/Icon/index.d.ts

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

package/components/Icon/styles.d.ts

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

package/components/Icon/types.d.ts

@@ -0,0 +1,11 @@
+export declare type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+export interface IconProps {
+    src: string;
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
+    size?: SizeIcon;
+    rotationAngle?: number;
+    angleTransition?: number;
+}
+export declare type WrapperPlaceHolderProps = {
+    size: string;
+};

package/components/Image/index.93d5f37f.js

@@ -0,0 +1,190 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { styled, Skeleton as Skeleton$1 } from "@mui/material";
+function isIntersectionObserverAvailable() {
+  return typeof window !== "undefined" && "IntersectionObserver" in window && "isIntersecting" in window.IntersectionObserverEntry.prototype;
+}
+const checkIntersections = (entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target?.setIsVisible(true);
+    }
+  });
+};
+const LAZY_LOAD_OBSERVERS = {};
+const getObserver = (threshold) => {
+  LAZY_LOAD_OBSERVERS[threshold] = LAZY_LOAD_OBSERVERS[threshold] || new IntersectionObserver(checkIntersections, {
+    rootMargin: threshold + "px"
+  });
+  return LAZY_LOAD_OBSERVERS[threshold];
+};
+const BasicIntersectComponent = forwardRef((props, ref) => {
+  const {
+    height,
+    width,
+    setIsVisible,
+    threshold
+  } = props;
+  const [observer] = useState(getObserver(threshold));
+  const intersectComponentRef = useRef(null);
+  useImperativeHandle(ref, () => intersectComponentRef.current);
+  useEffect(() => {
+    if (observer && intersectComponentRef.current) {
+      intersectComponentRef.current.setIsVisible = setIsVisible;
+      observer.observe(intersectComponentRef.current);
+    }
+    return () => {
+      if (observer && intersectComponentRef.current) {
+        observer.unobserve(intersectComponentRef.current);
+      }
+    };
+  }, []);
+  const styleProp = {
+    display: "inline-block"
+  };
+  if (typeof width !== "undefined") {
+    styleProp.width = width;
+  }
+  if (typeof height !== "undefined") {
+    styleProp.height = height;
+    styleProp.minHeight = height;
+  }
+  return /* @__PURE__ */ jsx("span", {
+    id: "IntersectComponent",
+    ref: intersectComponentRef,
+    style: styleProp
+  });
+});
+BasicIntersectComponent.displayName = "IntersectComponent";
+function LazyLoadComponent(props) {
+  const {
+    children,
+    useIntersectionObserver,
+    ...other
+  } = props;
+  const [isVisible, setIsVisible] = useState(!(useIntersectionObserver && isIntersectionObserverAvailable()));
+  if (isVisible) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(BasicIntersectComponent, {
+    useIntersectionObserver,
+    setIsVisible,
+    ...other
+  });
+}
+const WrapperImage = styled("div", {
+  shouldForwardProp: (props) => props !== "width" && props !== "height"
+})(({
+  height,
+  width
+}) => ({
+  position: "relative",
+  width,
+  height,
+  minHeight: height,
+  minWidth: width,
+  "& > img ": {
+    opacity: 0,
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%"
+  },
+  "&.loaded > img": {
+    opacity: 1,
+    transition: "opacity .5s"
+  },
+  "& .skeleton": {
+    opacity: 1,
+    width,
+    height
+  },
+  "&.loaded .skeleton": {
+    opacity: 0,
+    transition: "opacity .3s"
+  }
+}));
+const WrapperSkeletonImage = 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`,
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+const Skeleton = (props) => {
+  const {
+    skeletonVariant
+  } = props;
+  return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
+    className: "skeleton",
+    children: /* @__PURE__ */ jsx(Skeleton$1, {
+      variant: "rectangular",
+      width: "100%",
+      height: "100%"
+    })
+  }) : /* @__PURE__ */ jsx(Skeleton$1, {
+    variant: "circular",
+    width: "100%",
+    height: "100%",
+    className: "skeleton"
+  });
+};
+function Image(props) {
+  const {
+    src,
+    alt,
+    useIntersectionObserver = true,
+    threshold = 100,
+    width,
+    height,
+    skeletonVariant = "image"
+  } = props;
+  const isSKeleton = useModuleSkeleton();
+  const [statusLoad, setStatusLoad] = useState("initial");
+  useEffect(() => {
+    let timer;
+    if (statusLoad === "loaded" && !isSKeleton) {
+      timer = setTimeout(() => {
+        setStatusLoad("removed");
+      }, 3e3);
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [statusLoad, isSKeleton]);
+  const onLoad = () => {
+    setStatusLoad("loaded");
+  };
+  const lazyLoadComponent = useMemo(() => {
+    const isImageLoaded = !isSKeleton && statusLoad !== "initial";
+    return /* @__PURE__ */ jsx(WrapperImage, {
+      width,
+      height,
+      className: "m4l_image " + (isImageLoaded ? "loaded" : ""),
+      children: /* @__PURE__ */ jsxs(LazyLoadComponent, {
+        width,
+        height,
+        useIntersectionObserver,
+        threshold,
+        children: [statusLoad !== "removed" ? /* @__PURE__ */ jsx(Skeleton, {
+          skeletonVariant
+        }) : null, /* @__PURE__ */ jsx("img", {
+          alt,
+          src,
+          onLoad
+        })]
+      })
+    });
+  }, [statusLoad, isSKeleton, src]);
+  return lazyLoadComponent;
+}
+export {
+  Image as I
+};

package/components/Image/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ImageProps } from './types';
+export declare function Image(props: ImageProps): JSX.Element;
+export default Image;

package/components/Image/styles.d.ts

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

package/components/Image/subcomponents/BasicIntersectComponent/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IntersectComponentProps } from '../../types';
+export declare const BasicIntersectComponent: import("react").ForwardRefExoticComponent<IntersectComponentProps & import("react").RefAttributes<HTMLSpanElement>>;

package/components/Image/subcomponents/LazyLoadComponent/index.d.ts

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

package/components/Image/subcomponents/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SkeletonProps } from './types';
+export declare const Skeleton: (props: SkeletonProps) => JSX.Element;

package/components/Image/subcomponents/Skeleton/styles.d.ts

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

package/components/Image/subcomponents/Skeleton/types.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonVariant } from '../../types';
+export interface SkeletonProps {
+    skeletonVariant: SkeletonVariant;
+}

package/components/Image/types.d.ts

@@ -0,0 +1,34 @@
+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 BaseImageProps {
+    width: string;
+    height?: string;
+}
+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 Omit<IntersectComponentProps, 'setIsVisible'> {
+    children: ReactNode;
+}
+export declare type SkeletonVariant = 'image' | 'circle';
+export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible' | 'threshold' | 'useIntersectionObserver'> {
+    src: string;
+    alt?: string;
+    threshold?: number;
+    useIntersectionObserver?: boolean;
+    skeletonVariant?: SkeletonVariant;
+}

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

@@ -0,0 +1 @@
+export declare function isIntersectionObserverAvailable(): boolean;