@m4l/components 0.1.18 → 0.1.20

package/components/Image/index.c9da2d5a.js

@@ -0,0 +1,152 @@
+import { useModuleSkeleton as y } from "@m4l/core";
+import { forwardRef as C, useState as g, useRef as b, useImperativeHandle as k, useEffect as w, useMemo as I } from "react";
+import { jsx as i, Fragment as E, jsxs as S } from "react/jsx-runtime";
+import { styled as v, Skeleton as h } from "@mui/material";
+function L() {
+  return typeof window < "u" && "IntersectionObserver" in window && "isIntersecting" in window.IntersectionObserverEntry.prototype;
+}
+const O = (e) => {
+  e.forEach((t) => {
+    t.isIntersecting && t.target?.setIsVisible(!0);
+  });
+}, m = {}, V = (e) => (m[e] = m[e] || new IntersectionObserver(O, {
+  rootMargin: e + "px"
+}), m[e]);
+console.log("LAZY_LOAD_OBSERVERS", JSON.stringify(m));
+const f = C((e, t) => {
+  const {
+    height: o,
+    width: c,
+    setIsVisible: l,
+    threshold: a
+  } = e, [r] = g(V(a)), n = b(null);
+  k(t, () => n.current), w(() => (r && n.current && (n.current.setIsVisible = l, r.observe(n.current)), () => {
+    r && n.current && r.unobserve(n.current);
+  }), []);
+  const s = {
+    display: "inline-block"
+  };
+  return typeof c < "u" && (s.width = c), typeof o < "u" && (s.height = o, s.minHeight = o), /* @__PURE__ */ i("span", {
+    id: "IntersectComponent",
+    ref: n,
+    style: s
+  });
+});
+f.displayName = "IntersectComponent";
+function M(e) {
+  const {
+    children: t,
+    useIntersectionObserver: o,
+    ...c
+  } = e, [l, a] = g(!(o && L()));
+  return l ? /* @__PURE__ */ i(E, {
+    children: t
+  }) : /* @__PURE__ */ i(f, {
+    useIntersectionObserver: o,
+    setIsVisible: a,
+    ...c
+  });
+}
+const z = v("div", {
+  shouldForwardProp: (e) => e !== "width" && e !== "height"
+})(({
+  height: e,
+  width: t
+}) => ({
+  position: "relative",
+  width: t,
+  height: e,
+  minHeight: e,
+  minWidth: t,
+  "& > img ": {
+    opacity: 0,
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%"
+  },
+  "&.loaded > img": {
+    opacity: 1,
+    transition: "opacity .5s"
+  },
+  "& .skeleton": {
+    opacity: 1,
+    width: t,
+    height: e
+  },
+  "&.loaded .skeleton": {
+    opacity: 0,
+    transition: "opacity .3s"
+  }
+})), B = v("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"
+})), R = (e) => {
+  const {
+    skeletonVariant: t
+  } = e;
+  return t === "image" ? /* @__PURE__ */ i(B, {
+    className: "skeleton",
+    children: /* @__PURE__ */ i(h, {
+      variant: "rectangular",
+      width: "100%",
+      height: "100%"
+    })
+  }) : /* @__PURE__ */ i(h, {
+    variant: "circular",
+    width: "100%",
+    height: "100%",
+    className: "skeleton"
+  });
+};
+function j(e) {
+  const {
+    src: t,
+    alt: o,
+    useIntersectionObserver: c = !0,
+    threshold: l = 100,
+    width: a,
+    height: r,
+    skeletonVariant: n = "image"
+  } = e, s = y(), [d, u] = g("initial");
+  w(() => {
+    let p;
+    return d === "loaded" && !s && (p = setTimeout(() => {
+      u("removed");
+    }, 3e3)), () => {
+      p && clearTimeout(p);
+    };
+  }, [d, s]);
+  const x = () => {
+    u("loaded");
+  };
+  return I(() => {
+    const p = !s && d !== "initial";
+    return console.log("image skeleton", s, n), /* @__PURE__ */ i(z, {
+      width: a,
+      height: r,
+      className: "m4l_image " + (p ? "loaded" : ""),
+      children: /* @__PURE__ */ S(M, {
+        width: a,
+        height: r,
+        useIntersectionObserver: c,
+        threshold: l,
+        children: [d !== "removed" ? /* @__PURE__ */ i(R, {
+          skeletonVariant: n
+        }) : null, /* @__PURE__ */ i("img", {
+          alt: o,
+          src: t,
+          onLoad: x
+        })]
+      })
+    });
+  }, [d, s, t]);
+}
+export {
+  j as I
+};

package/components/Image/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { Props } from './types';
-export declare function Image({ ratio, sx, isSkeleton, width, height, src, ...other }: Props): JSX.Element;
+import { ImageProps } from './types';
+export declare function Image(props: ImageProps): JSX.Element;
 export default Image;

package/components/Image/styles.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import { styleProps } from './types';
-import { WrapperLazyLoadImageProps } from './types';
-export declare const SKTWrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & styleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrapperLazyLoadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperLazyLoadImageProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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

@@ -1,19 +1,34 @@
-import { LazyLoadImageProps } from 'react-lazy-load-image-component';
-import { BoxProps, SxProps } from '@mui/material';
-import { Theme } from '@mui/material/styles';
-export declare type ImageRato = '4/3' | '3/4' | '6/4' | '4/6' | '16/9' | '9/16' | '21/9' | '9/21' | '1/1';
-export declare type IProps = BoxProps & LazyLoadImageProps;
-export interface Props extends IProps {
-    sx?: SxProps<Theme>;
-    ratio?: ImageRato;
-    isSkeleton?: boolean;
-    width?: string;
+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 styleProps {
-    width?: string;
+export interface IntersectComponentProps extends BaseImageProps {
+    setIsVisible: (visible: boolean) => void;
+    threshold: number;
+    useIntersectionObserver: boolean;
+    scrollPosition?: ScrollPosition;
 }
-export interface WrapperLazyLoadImageProps {
-    width?: string | number;
-    height?: string | number;
+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;

package/components/LanguagePopover/styles.d.ts

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

package/components/ModalDialog/{index.0ddffae6.js → index.16024a4e.js}

@@ -1,14 +1,14 @@
 import { Dialog as b, IconButton as w, Paper as v } from "@mui/material";
 import { c as D } from "../../react-draggable.20e95c61.js";
-import { u as $ } from "../../hooks/useModal/index.cdd84702.js";
+import { u as $ } from "../../hooks/useModal/index.8201ccec.js";
 import { styled as s } from "@mui/material/styles";
 import { a as x } from "../../utils/index.214d9542.js";
 import { R as M } from "../Resizeable/index.45995d2b.js";
 import { useResponsiveDesktop as H } from "@m4l/graphics";
 import { useEnvironment as I } from "@m4l/core";
-import { I as C } from "../Icon/index.cbca79b0.js";
+import { I as C } from "../Icon/index.f569765b.js";
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { b as W, g as _ } from "../CommonActions/components/Actions/index.6b25caed.js";
+import { b as W, g as _ } from "../CommonActions/components/Actions/index.a908e4b9.js";
 const j = s(b)(() => ({})), k = s("div")(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",

package/components/NoItemSelected/{index.12f0ca67.js → index.9609a7f7.js}

@@ -1,6 +1,6 @@
 import { useEnvironment as r, useModuleDictionary as l, useModuleSkeleton as p } from "@m4l/core";
 import { styled as c } from "@mui/material/styles";
-import { I as d } from "../Image/index.e790b50b.js";
+import { I as d } from "../Image/index.c9da2d5a.js";
 import { Skeleton as m } from "@mui/material";
 import { useMemo as g } from "react";
 import { jsx as t, jsxs as x } from "react/jsx-runtime";

package/components/NoItemSelected/styles.d.ts

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

package/components/ObjectLogs/{index.64f06b3d.js → index.ac2bfa48.js}

@@ -1,14 +1,14 @@
 import { useState as _, useEffect as f, useCallback as d, useMemo as $ } from "react";
 import { useNetwork as k, useModuleDictionary as y, useEnvironment as h, usePaginate as O } from "@m4l/core";
 import { styled as g } from "@mui/material/styles";
-import { D as R, g as I } from "../DataGrid/index.091572bf.js";
-import { D as L } from "../formatters/DateFormatter/index.ad8d9b8e.js";
+import { D as R, g as I } from "../DataGrid/index.5cbf0dd8.js";
+import { D as L } from "../formatters/DateFormatter/index.08d8823b.js";
 import { Tooltip as G, IconButton as M } from "@mui/material";
 import { R as S } from "../../react-json-view.f56a7f8e.js";
 import { jsx as t, jsxs as A } from "react/jsx-runtime";
-import { u as T } from "../../hooks/useModal/index.cdd84702.js";
-import { I as u } from "../Icon/index.cbca79b0.js";
-import { D as E, g as K } from "../DynamicFilter/index.7efecd5d.js";
+import { u as T } from "../../hooks/useModal/index.8201ccec.js";
+import { I as u } from "../Icon/index.f569765b.js";
+import { D as E, g as K } from "../DynamicFilter/index.8a571617.js";
 const q = g("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Page/index.fc660ee5.js

@@ -0,0 +1,27 @@
+import { Helmet as a } from "react-helmet-async";
+import { useLocales as c } from "@m4l/graphics";
+import { useModuleSkeleton as u } from "@m4l/core";
+import { jsxs as t, Fragment as d, jsx as r } from "react/jsx-runtime";
+const p = (l) => {
+  const {
+    children: o,
+    title: n,
+    meta: m,
+    subtitle: e
+  } = l, {
+    currentLang: s
+  } = c(), i = u();
+  return /* @__PURE__ */ t(d, {
+    children: [!i && /* @__PURE__ */ t(a, {
+      children: [/* @__PURE__ */ r("title", {
+        children: `${n}${e ? ` | ${e}` : ""} `
+      }), /* @__PURE__ */ r("html", {
+        lang: s.value
+      }), m]
+    }), o]
+  });
+};
+p.displayName = "Page";
+export {
+  p as H
+};

package/components/PaperForm/{index.d7c74064.js → index.3f8c7ef2.js}

@@ -1,7 +1,7 @@
 import { styled as r } from "@mui/material/styles";
 import { useModuleSkeleton as s } from "@m4l/core";
 import { Skeleton as d } from "@mui/material";
-import { I as l } from "../Icon/index.cbca79b0.js";
+import { I as l } from "../Icon/index.f569765b.js";
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 const c = r("div")(({
   theme: i

package/components/Period/{index.8423f865.js → index.497b8df4.js}

@@ -1,14 +1,13 @@
 import { useModuleDictionary as Y, useModuleSkeleton as R, useEnvironment as T } from "@m4l/core";
 import { styled as a, Skeleton as d, Autocomplete as $, TextField as x } from "@mui/material";
 import { useMemo as D } from "react";
-import { I as v } from "../Icon/index.cbca79b0.js";
+import { I as v } from "../Icon/index.f569765b.js";
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { g as O } from "../CommonActions/components/Actions/index.6b25caed.js";
+import { g as O } from "../CommonActions/components/Actions/index.a908e4b9.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.3debb608.js";
 import "react-hook-form";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.1688a07c.js";
+import "../../contexts/ModalContext/index.699767c7.js";
 import "@mui/lab";
 const S = a("div")(({
   theme: t,
@@ -70,7 +69,7 @@ const S = a("div")(({
   textAlign: "left"
 }));
 var i = /* @__PURE__ */ ((t) => (t[t.YEARS = 0] = "YEARS", t[t.MONTHS = 1] = "MONTHS", t[t.DAYS = 2] = "DAYS", t))(i || {});
-const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? i.YEARS : t.months && t.months > 0 ? i.MONTHS : t.days && t.days > 0 ? i.DAYS : i.YEARS : i.YEARS, _ = (t) => t ? t.singleValue !== void 0 ? t.singleValue : t.years && t.years > 0 ? t.years : t.months && t.months > 0 ? t.months : t.days && t.days > 0 ? t.days : "" : "", B = (t) => {
+const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? i.YEARS : t.months && t.months > 0 ? i.MONTHS : t.days && t.days > 0 ? i.DAYS : i.YEARS : i.YEARS, _ = (t) => t ? t.singleValue !== void 0 ? t.singleValue : t.years && t.years > 0 ? t.years : t.months && t.months > 0 ? t.months : t.days && t.days > 0 ? t.days : "" : "", z = (t) => {
   const {
     value: s,
     onChange: b,
@@ -151,10 +150,10 @@ const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
     })]
   }));
 };
-function J() {
+function B() {
   return ["period"].concat(O());
 }
 export {
-  B as P,
-  J as g
+  z as P,
+  B as g
 };

package/components/animate/IconButtonAnimate/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
-export declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Pick<IconButtonProps<"button", {}>, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "translate" | "form" | "slot" | "title" | "children" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Pick<IconButtonProps<"button", {}>, "value" | "dir" | "form" | "slot" | "title" | "onChange" | "disabled" | "children" | "aria-label" | "aria-labelledby" | "tabIndex" | "key" | "onFocus" | "onMouseEnter" | "id" | "aria-rowindex" | "onScroll" | "onCopy" | "onPaste" | "aria-describedby" | "onResize" | "type" | "hidden" | "name" | "placeholder" | "action" | "aria-hidden" | "onDragStart" | "onDrag" | "onMouseDown" | "onMouseUp" | "onTouchStart" | "onTouchEnd" | keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "translate" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/animate/features.d.ts

@@ -0,0 +1,2 @@
+export default domMax;
+import { domMax } from "framer-motion";

package/components/animate/variants/bounce.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varBounce: (props?: VariantsType) => {
+export declare const varBounce: (props?: VariantsType | undefined) => {
     in: {
         initial: {};
         animate: {
@@ -7,7 +7,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -23,7 +23,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -32,7 +32,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -44,7 +44,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -53,7 +53,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -65,7 +65,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -74,7 +74,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -86,7 +86,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -95,7 +95,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };

package/components/animate/variants/container.d.ts

@@ -3,7 +3,7 @@ export declare type Props = {
     delayIn?: number;
     staggerOut?: number;
 };
-export declare const varContainer: (props?: Props) => {
+export declare const varContainer: (props?: Props | undefined) => {
     animate: {
         transition: {
             staggerChildren: number;