@m4l/graphics 0.0.16 → 0.0.18

package/dist/components/index.js

@@ -1,1318 +1,4 @@
-import { Suspense, useMemo, forwardRef, useEffect, useState } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import NProgress from "nprogress";
-import { useTheme, styled } from "@mui/material/styles";
-import { GlobalStyles, Box, Skeleton, Typography as Typography$1, Link, Dialog, Paper, Fab, IconButton, Card, Container, Stack } from "@mui/material";
-import { Link as Link$1 } from "react-router-dom";
-import { AnimatePresence, m, useAnimation, LazyMotion, domMax } from "framer-motion";
-import { u as useInView } from "../node_modules.js";
-import "@mui/lab";
-import { T as Typography$2 } from "./mui_extended/index.js";
-import { useEnvironment, useModuleDictionary, useFlagsPresent } from "@m4l/core";
-import { u as useLocales, a as useResponsive } from "../hooks/index.js";
-import "../contexts/index.js";
-import "react-hook-form";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import "react-lazy-load-image-component/src/effects/blur.css";
-import "@mui/material/useMediaQuery";
-import { Helmet } from "react-helmet-async";
-const Loadable = (Component) => function EmbededLoadable(props) {
-  return /* @__PURE__ */ jsx(Suspense, {
-    fallback: /* @__PURE__ */ jsx("div", {
-      children: "Cargando"
-    }),
-    children: /* @__PURE__ */ jsx(Component, {
-      ...props
-    })
-  });
-};
-function ProgressBarStyle() {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(GlobalStyles, {
-    styles: {
-      "#nprogress": {
-        pointerEvents: "none",
-        "& .bar": {
-          top: 0,
-          left: 0,
-          height: 2,
-          width: "100%",
-          position: "fixed",
-          zIndex: theme.zIndex.snackbar,
-          backgroundColor: theme.palette.primary.main,
-          boxShadow: `0 0 2px ${theme.palette.primary.main}`
-        },
-        "& .peg": {
-          right: 0,
-          opacity: 1,
-          width: 100,
-          height: "100%",
-          display: "block",
-          position: "absolute",
-          transform: "rotate(3deg) translate(0px, -4px)",
-          boxShadow: `0 0 10px ${theme.palette.primary.main}, 0 0 5px ${theme.palette.primary.main}`
-        }
-      }
-    }
-  });
-}
-function ProgressBar() {
-  NProgress.configure({
-    showSpinner: true
-  });
-  useMemo(() => {
-    NProgress.start();
-  }, []);
-  return null;
-}
-const Page = forwardRef((props, ref) => {
-  const {
-    children,
-    title = "",
-    meta,
-    ...other
-  } = props;
-  const {
-    currentLang
-  } = useLocales();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(Helmet, {
-      children: [/* @__PURE__ */ jsx("title", {
-        children: `${title} | Made4Labs`
-      }), /* @__PURE__ */ jsx("html", {
-        lang: currentLang.value
-      }), meta]
-    }), /* @__PURE__ */ jsx(Box, {
-      ref,
-      ...other,
-      children
-    })]
-  });
-});
-Page.displayName = "Page";
-function Typography(props) {
-  const {
-    skeletonProps = {},
-    ...other
-  } = props;
-  const {
-    isSkeleton = "false",
-    width = "100%",
-    height = "14px"
-  } = skeletonProps;
-  return isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
-    variant: "text",
-    width,
-    height
-  }) : /* @__PURE__ */ jsx(Typography$1, {
-    ...other
-  });
-}
-const LinkWithRoute = (props) => {
-  const {
-    to,
-    children,
-    skeletonProps = {},
-    ...other
-  } = props;
-  const {
-    isSkeleton = false,
-    width = "100%",
-    height = "14px"
-  } = skeletonProps;
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width,
-      height
-    });
-  }
-  return /* @__PURE__ */ jsx(Link, {
-    component: Link$1,
-    to,
-    ...other,
-    children
-  });
-};
-const TRANSITION = {
-  duration: 2,
-  ease: [0.43, 0.13, 0.23, 0.96]
-};
-const varPath = {
-  animate: {
-    fillOpacity: [0, 0, 1],
-    pathLength: [1, 0.4, 0],
-    transition: TRANSITION
-  }
-};
-const varTranHover = (props) => {
-  const duration = props?.duration || 0.32;
-  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
-  return { duration, ease };
-};
-const varTranEnter = (props) => {
-  const duration = props?.durationIn || 0.64;
-  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
-  return { duration, ease };
-};
-const varTranExit = (props) => {
-  const duration = props?.durationOut || 0.48;
-  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
-  return { duration, ease };
-};
-const varFade = (props) => {
-  const distance = props?.distance || 120;
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    in: {
-      initial: { opacity: 0 },
-      animate: { opacity: 1, transition: varTranEnter },
-      exit: { opacity: 0, transition: varTranExit }
-    },
-    inUp: {
-      initial: { y: distance, opacity: 0 },
-      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inDown: {
-      initial: { y: -distance, opacity: 0 },
-      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inLeft: {
-      initial: { x: -distance, opacity: 0 },
-      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inRight: {
-      initial: { x: distance, opacity: 0 },
-      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    out: {
-      initial: { opacity: 1 },
-      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outUp: {
-      initial: { y: 0, opacity: 1 },
-      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outDown: {
-      initial: { y: 0, opacity: 1 },
-      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outLeft: {
-      initial: { x: 0, opacity: 1 },
-      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outRight: {
-      initial: { x: 0, opacity: 1 },
-      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
-    }
-  };
-};
-const varZoom = (props) => {
-  const distance = props?.distance || 720;
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    in: {
-      initial: { scale: 0, opacity: 0 },
-      animate: { scale: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { scale: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inUp: {
-      initial: { scale: 0, opacity: 0, translateY: distance },
-      animate: {
-        scale: 1,
-        opacity: 1,
-        translateY: 0,
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        scale: 0,
-        opacity: 0,
-        translateY: distance,
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inDown: {
-      initial: { scale: 0, opacity: 0, translateY: -distance },
-      animate: {
-        scale: 1,
-        opacity: 1,
-        translateY: 0,
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        scale: 0,
-        opacity: 0,
-        translateY: -distance,
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inLeft: {
-      initial: { scale: 0, opacity: 0, translateX: -distance },
-      animate: {
-        scale: 1,
-        opacity: 1,
-        translateX: 0,
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        scale: 0,
-        opacity: 0,
-        translateX: -distance,
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inRight: {
-      initial: { scale: 0, opacity: 0, translateX: distance },
-      animate: {
-        scale: 1,
-        opacity: 1,
-        translateX: 0,
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        scale: 0,
-        opacity: 0,
-        translateX: distance,
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    out: {
-      initial: { scale: 1, opacity: 1 },
-      animate: { scale: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) }
-    },
-    outUp: {
-      initial: { scale: 1, opacity: 1 },
-      animate: {
-        scale: 0,
-        opacity: 0,
-        translateY: -distance,
-        transition: varTranEnter({ durationIn, easeIn })
-      }
-    },
-    outDown: {
-      initial: { scale: 1, opacity: 1 },
-      animate: {
-        scale: 0,
-        opacity: 0,
-        translateY: distance,
-        transition: varTranEnter({ durationIn, easeIn })
-      }
-    },
-    outLeft: {
-      initial: { scale: 1, opacity: 1 },
-      animate: {
-        scale: 0,
-        opacity: 0,
-        translateX: -distance,
-        transition: varTranEnter({ durationIn, easeIn })
-      }
-    },
-    outRight: {
-      initial: { scale: 1, opacity: 1 },
-      animate: {
-        scale: 0,
-        opacity: 0,
-        translateX: distance,
-        transition: varTranEnter({ durationIn, easeIn })
-      }
-    }
-  };
-};
-const varFlip = (props) => {
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    inX: {
-      initial: { rotateX: -180, opacity: 0 },
-      animate: { rotateX: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { rotateX: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inY: {
-      initial: { rotateY: -180, opacity: 0 },
-      animate: { rotateY: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { rotateY: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outX: {
-      initial: { rotateX: 0, opacity: 1 },
-      animate: { rotateX: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outY: {
-      initial: { rotateY: 0, opacity: 1 },
-      animate: { rotateY: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    }
-  };
-};
-const varSlide = (props) => {
-  const distance = props?.distance || 160;
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    inUp: {
-      initial: { y: distance },
-      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inDown: {
-      initial: { y: -distance },
-      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inLeft: {
-      initial: { x: -distance },
-      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inRight: {
-      initial: { x: distance },
-      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outUp: {
-      initial: { y: 0 },
-      animate: { y: -distance, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outDown: {
-      initial: { y: 0 },
-      animate: { y: distance, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outLeft: {
-      initial: { x: 0 },
-      animate: { x: -distance, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outRight: {
-      initial: { x: 0 },
-      animate: { x: distance, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }
-    }
-  };
-};
-const varScale = (props) => {
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    inX: {
-      initial: { scaleX: 0, opacity: 0 },
-      animate: { scaleX: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { scaleX: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    inY: {
-      initial: { scaleY: 0, opacity: 0 },
-      animate: { scaleY: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { scaleY: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    outX: {
-      initial: { scaleX: 1, opacity: 1 },
-      animate: { scaleX: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) }
-    },
-    outY: {
-      initial: { scaleY: 1, opacity: 1 },
-      animate: { scaleY: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) }
-    }
-  };
-};
-const varBounce = (props) => {
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    in: {
-      initial: {},
-      animate: {
-        scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
-        opacity: [0, 1, 1, 1, 1, 1],
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        scale: [0.9, 1.1, 0.3],
-        opacity: [1, 1, 0]
-      }
-    },
-    inUp: {
-      initial: {},
-      animate: {
-        y: [720, -24, 12, -4, 0],
-        scaleY: [4, 0.9, 0.95, 0.985, 1],
-        opacity: [0, 1, 1, 1, 1],
-        transition: { ...varTranEnter({ durationIn, easeIn }) }
-      },
-      exit: {
-        y: [12, -24, 720],
-        scaleY: [0.985, 0.9, 3],
-        opacity: [1, 1, 0],
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inDown: {
-      initial: {},
-      animate: {
-        y: [-720, 24, -12, 4, 0],
-        scaleY: [4, 0.9, 0.95, 0.985, 1],
-        opacity: [0, 1, 1, 1, 1],
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        y: [-12, 24, -720],
-        scaleY: [0.985, 0.9, 3],
-        opacity: [1, 1, 0],
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inLeft: {
-      initial: {},
-      animate: {
-        x: [-720, 24, -12, 4, 0],
-        scaleX: [3, 1, 0.98, 0.995, 1],
-        opacity: [0, 1, 1, 1, 1],
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        x: [0, 24, -720],
-        scaleX: [1, 0.9, 2],
-        opacity: [1, 1, 0],
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    inRight: {
-      initial: {},
-      animate: {
-        x: [720, -24, 12, -4, 0],
-        scaleX: [3, 1, 0.98, 0.995, 1],
-        opacity: [0, 1, 1, 1, 1],
-        transition: varTranEnter({ durationIn, easeIn })
-      },
-      exit: {
-        x: [0, -24, 720],
-        scaleX: [1, 0.9, 2],
-        opacity: [1, 1, 0],
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    },
-    out: {
-      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }
-    },
-    outUp: {
-      animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
-    },
-    outDown: {
-      animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
-    },
-    outLeft: {
-      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
-    },
-    outRight: {
-      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
-    }
-  };
-};
-const varRotate = (props) => {
-  const durationIn = props?.durationIn;
-  const durationOut = props?.durationOut;
-  const easeIn = props?.easeIn;
-  const easeOut = props?.easeOut;
-  return {
-    in: {
-      initial: { opacity: 0, rotate: -360 },
-      animate: { opacity: 1, rotate: 0, transition: varTranEnter({ durationIn, easeIn }) },
-      exit: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) }
-    },
-    out: {
-      initial: { opacity: 1, rotate: 0 },
-      animate: {
-        opacity: 0,
-        rotate: -360,
-        transition: varTranExit({ durationOut, easeOut })
-      }
-    }
-  };
-};
-const varHover = (scale) => ({
-  hover: {
-    scale: scale || 1.1
-  }
-});
-const varContainer = (props) => {
-  const staggerIn = props?.staggerIn || 0.05;
-  const delayIn = props?.staggerIn || 0.05;
-  const staggerOut = props?.staggerIn || 0.05;
-  return {
-    animate: {
-      transition: {
-        staggerChildren: staggerIn,
-        delayChildren: delayIn
-      }
-    },
-    exit: {
-      transition: {
-        staggerChildren: staggerOut,
-        staggerDirection: -1
-      }
-    }
-  };
-};
-const varBgColor = (props) => {
-  const colors = props?.colors || ["#19dcea", "#b22cff"];
-  const duration = props?.duration || 5;
-  const ease = props?.ease || "linear";
-  return {
-    animate: {
-      background: colors,
-      transition: { duration, ease }
-    }
-  };
-};
-const varBgKenburns = (props) => {
-  const duration = props?.duration || 5;
-  const ease = props?.ease || "easeOut";
-  return {
-    top: {
-      animate: {
-        scale: [1, 1.25],
-        y: [0, -15],
-        transformOrigin: ["50% 16%", "top"],
-        transition: { duration, ease }
-      }
-    },
-    right: {
-      animate: {
-        scale: [1, 1.25],
-        x: [0, 20],
-        y: [0, -15],
-        transformOrigin: ["84% 50%", "right"],
-        transition: { duration, ease }
-      }
-    },
-    bottom: {
-      animate: {
-        scale: [1, 1.25],
-        y: [0, 15],
-        transformOrigin: ["50% 84%", "bottom"],
-        transition: { duration, ease }
-      }
-    },
-    left: {
-      animate: {
-        scale: [1, 1.25],
-        x: [0, -20],
-        y: [0, 15],
-        transformOrigin: ["16% 50%", "left"],
-        transition: { duration, ease }
-      }
-    }
-  };
-};
-const varBgPan = (props) => {
-  const colors = props?.colors || ["#ee7752", "#e73c7e", "#23a6d5", "#23d5ab"];
-  const duration = props?.duration || 5;
-  const ease = props?.ease || "linear";
-  const gradient = (deg) => `linear-gradient(${deg}deg, ${colors})`;
-  return {
-    top: {
-      animate: {
-        backgroundImage: [gradient(0), gradient(0)],
-        backgroundPosition: ["center 99%", "center 1%"],
-        backgroundSize: ["100% 600%", "100% 600%"],
-        transition: { duration, ease }
-      }
-    },
-    right: {
-      animate: {
-        backgroundPosition: ["1% center", "99% center"],
-        backgroundImage: [gradient(270), gradient(270)],
-        backgroundSize: ["600% 100%", "600% 100%"],
-        transition: { duration, ease }
-      }
-    },
-    bottom: {
-      animate: {
-        backgroundImage: [gradient(0), gradient(0)],
-        backgroundPosition: ["center 1%", "center 99%"],
-        backgroundSize: ["100% 600%", "100% 600%"],
-        transition: { duration, ease }
-      }
-    },
-    left: {
-      animate: {
-        backgroundPosition: ["99% center", "1% center"],
-        backgroundImage: [gradient(270), gradient(270)],
-        backgroundSize: ["600% 100%", "600% 100%"],
-        transition: { duration, ease }
-      }
-    }
-  };
-};
-function DialogAnimate({
-  open = false,
-  variants,
-  onClose,
-  children,
-  sx,
-  ...other
-}) {
-  return /* @__PURE__ */ jsx(AnimatePresence, {
-    children: open && /* @__PURE__ */ jsx(Dialog, {
-      fullWidth: true,
-      maxWidth: "xs",
-      open,
-      onClose,
-      PaperComponent: (props) => /* @__PURE__ */ jsxs(Box, {
-        component: m.div,
-        ...variants || varFade({
-          distance: 120,
-          durationIn: 0.32,
-          durationOut: 0.24,
-          easeIn: "easeInOut"
-        }).inUp,
-        sx: {
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: [/* @__PURE__ */ jsx(Box, {
-          onClick: onClose,
-          sx: {
-            width: "100%",
-            height: "100%",
-            position: "fixed"
-          }
-        }), /* @__PURE__ */ jsx(Paper, {
-          sx,
-          ...props,
-          children: props.children
-        })]
-      }),
-      ...other,
-      children
-    })
-  });
-}
-function TextAnimate({
-  text,
-  variants,
-  sx,
-  ...other
-}) {
-  return /* @__PURE__ */ jsx(Box, {
-    component: m.h1,
-    sx: {
-      typography: "h1",
-      overflow: "hidden",
-      display: "inline-flex",
-      ...sx
-    },
-    ...other,
-    children: text.split("").map((letter, index) => /* @__PURE__ */ jsx(m.span, {
-      variants: variants || varFade().inUp,
-      children: letter
-    }, index))
-  });
-}
-const FabButtonAnimate = forwardRef(({
-  color = "primary",
-  size = "large",
-  children,
-  sx,
-  sxWrap,
-  ...other
-}, ref) => {
-  const theme = useTheme();
-  if (color === "default" || color === "inherit" || color === "primary" || color === "secondary") {
-    return /* @__PURE__ */ jsx(AnimateWrap$1, {
-      size,
-      sxWrap,
-      children: /* @__PURE__ */ jsx(Fab, {
-        ref,
-        size,
-        color,
-        sx,
-        ...other,
-        children
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(AnimateWrap$1, {
-    size,
-    sxWrap,
-    children: /* @__PURE__ */ jsx(Fab, {
-      ref,
-      size,
-      sx: {
-        boxShadow: theme.customShadows[color],
-        color: theme.palette[color].contrastText,
-        bgcolor: theme.palette[color].main,
-        "&:hover": {
-          bgcolor: theme.palette[color].dark
-        },
-        ...sx
-      },
-      ...other,
-      children
-    })
-  });
-});
-FabButtonAnimate.displayName = "FabButtonAnimate";
-const varSmall$1 = {
-  hover: {
-    scale: 1.07
-  },
-  tap: {
-    scale: 0.97
-  }
-};
-const varMedium$1 = {
-  hover: {
-    scale: 1.06
-  },
-  tap: {
-    scale: 0.98
-  }
-};
-const varLarge$1 = {
-  hover: {
-    scale: 1.05
-  },
-  tap: {
-    scale: 0.99
-  }
-};
-function AnimateWrap$1({
-  size,
-  children,
-  sxWrap
-}) {
-  const isSmall = size === "small";
-  const isLarge = size === "large";
-  return /* @__PURE__ */ jsx(Box, {
-    component: m.div,
-    whileTap: "tap",
-    whileHover: "hover",
-    variants: isSmall && varSmall$1 || isLarge && varLarge$1 || varMedium$1,
-    sx: {
-      display: "inline-flex",
-      ...sxWrap
-    },
-    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 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
-  });
-}
-function MotionInView({
-  children,
-  variants,
-  transition,
-  threshold,
-  ...other
-}) {
-  const controls = useAnimation();
-  const [ref, inView] = useInView({
-    threshold: threshold || 0,
-    triggerOnce: true
-  });
-  useEffect(() => {
-    if (!variants)
-      return;
-    if (inView) {
-      controls.start(Object.keys(variants)[1]);
-    } else {
-      controls.start(Object.keys(variants)[0]);
-    }
-  }, [controls, inView, variants]);
-  return /* @__PURE__ */ jsx(Box, {
-    ref,
-    component: m.div,
-    initial: variants ? Object.keys(variants)[0] : false,
-    animate: controls,
-    variants,
-    transition,
-    ...other,
-    children
-  });
-}
-function MotionContainer({
-  animate,
-  action = false,
-  children,
-  ...other
-}) {
-  if (action) {
-    return /* @__PURE__ */ jsx(Box, {
-      component: m.div,
-      initial: false,
-      animate: animate ? "animate" : "exit",
-      variants: varContainer(),
-      ...other,
-      children
-    });
-  }
-  return /* @__PURE__ */ jsx(Box, {
-    component: m.div,
-    initial: "initial",
-    animate: "animate",
-    exit: "exit",
-    variants: varContainer(),
-    ...other,
-    children
-  });
-}
-const loadFeatures = () => Promise.resolve().then(() => features).then((res) => res.default);
-function MotionLazyContainer({
-  children
-}) {
-  return /* @__PURE__ */ jsx(LazyMotion, {
-    strict: true,
-    features: loadFeatures,
-    children
-  });
-}
-const RootStyle = styled("div")(({
-  theme
-}) => ({
-  [theme.breakpoints.up("md")]: {
-    display: "flex"
-  }
-}));
-const HeaderStyle = styled("header")(({
-  theme
-}) => ({
-  top: 0,
-  zIndex: 9,
-  lineHeight: 0,
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  padding: theme.spacing(2, 2, 0, 2),
-  justifyContent: "space-between",
-  [theme.breakpoints.up("md")]: {
-    alignItems: "flex-start",
-    padding: theme.spacing(7, 7, 0, 7)
-  }
-}));
-const SectionStyle = styled(Card)(({
-  theme
-}) => ({
-  width: "100%",
-  maxWidth: 464,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  margin: theme.spacing(2, 0, 2, 2),
-  "& > div:nth-of-type(2)": {
-    maxHeight: "348px"
-  }
-}));
-const ContentStyle = styled("div")(({
-  theme
-}) => ({
-  maxWidth: 480,
-  margin: "auto",
-  display: "flex",
-  minHeight: "100vh",
-  flexDirection: "column",
-  justifyContent: "center",
-  padding: theme.spacing(12, 0)
-}));
-const TitleContainer = styled("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 5)
-}));
-const ModuleTitleContainer = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  gridGap: theme.spacing(1)
-}));
-styled("div")(({
-  theme
-}) => ({
-  [theme.breakpoints.up("md")]: {
-    display: "flex"
-  }
-}));
-styled("header")(({
-  theme
-}) => ({
-  top: 0,
-  zIndex: 9,
-  lineHeight: 0,
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  padding: theme.spacing(3),
-  justifyContent: "space-between",
-  [theme.breakpoints.up("md")]: {
-    alignItems: "flex-start",
-    padding: theme.spacing(7, 5, 0, 7)
-  }
-}));
-styled("div")(({
-  theme
-}) => ({
-  maxWidth: 480,
-  margin: "auto",
-  display: "flex",
-  minHeight: "100vh",
-  flexDirection: "column",
-  justifyContent: "center",
-  padding: theme.spacing(12, 0)
-}));
-const SKTCompanyLogoMask = styled("div")(({
-  theme
-}) => ({
-  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`,
-  [theme.breakpoints.up("md")]: {
-    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 394.6 97' style='enable-background:new 0 0 394.6 97%3B' xml:space='preserve'%3E%3Cpath d='M54.2 35.1c2.2 0 4.3-0.8 5.8-2.3c1.6-1.5 2.5-3.7 2.6-6c-0.1-2.3-1-4.4-2.6-6c-1.6-1.5-3.7-2.4-5.8-2.4c-2.2 0-4.2 0.8-5.8 2.4c-1.5 1.6-2.5 3.7-2.6 6c0.1 2.3 1 4.4 2.6 6C50 34.3 52 35.2 54.2 35.1z'/%3E%3Cpath d='M58 49.6c-0.3-0.5-0.8-0.9-1.3-1.2C56.2 48.1 55.6 48 55 48s-1.3 0.1-1.8 0.4c-0.5 0.3-1 0.7-1.3 1.2l-3.3 5.2c-0.2 0.4-0.5 0.6-0.8 0.8c-0.3 0.2-0.7 0.3-1.1 0.3c-0.4 0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.5-0.8-0.8L32.7 35.5c-0.3-0.5-0.8-0.9-1.3-1.2s-1.1-0.4-1.7-0.4c-0.6 0-1.2 0.1-1.7 0.4s-1 0.7-1.3 1.2L2.5 74C2.2 74.5 2 75 2 75.6c0 0.6 0.2 1.1 0.5 1.6s0.8 0.9 1.3 1.2c0.5 0.3 1.1 0.4 1.7 0.4h64.9c0.6 0 1.2-0.2 1.7-0.4c0.5-0.3 1-0.7 1.3-1.2c0.3-0.5 0.5-1 0.5-1.6c0-0.6-0.2-1.1-0.5-1.6L58 49.6z'/%3E%3Cpath d='M386.6 41.8H107.5c-3.1 0-5.6 2.5-5.6 5.6v9c0 3.1 2.5 5.6 5.6 5.6h279.1c3.1 0 5.6-2.5 5.6-5.6v-9C392.2 44.3 389.7 41.8 386.6 41.8z'/%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 394.6 97' style='enable-background:new 0 0 394.6 97%3B' xml:space='preserve'%3E%3Cpath d='M54.2 35.1c2.2 0 4.3-0.8 5.8-2.3c1.6-1.5 2.5-3.7 2.6-6c-0.1-2.3-1-4.4-2.6-6c-1.6-1.5-3.7-2.4-5.8-2.4c-2.2 0-4.2 0.8-5.8 2.4c-1.5 1.6-2.5 3.7-2.6 6c0.1 2.3 1 4.4 2.6 6C50 34.3 52 35.2 54.2 35.1z'/%3E%3Cpath d='M58 49.6c-0.3-0.5-0.8-0.9-1.3-1.2C56.2 48.1 55.6 48 55 48s-1.3 0.1-1.8 0.4c-0.5 0.3-1 0.7-1.3 1.2l-3.3 5.2c-0.2 0.4-0.5 0.6-0.8 0.8c-0.3 0.2-0.7 0.3-1.1 0.3c-0.4 0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.5-0.8-0.8L32.7 35.5c-0.3-0.5-0.8-0.9-1.3-1.2s-1.1-0.4-1.7-0.4c-0.6 0-1.2 0.1-1.7 0.4s-1 0.7-1.3 1.2L2.5 74C2.2 74.5 2 75 2 75.6c0 0.6 0.2 1.1 0.5 1.6s0.8 0.9 1.3 1.2c0.5 0.3 1.1 0.4 1.7 0.4h64.9c0.6 0 1.2-0.2 1.7-0.4c0.5-0.3 1-0.7 1.3-1.2c0.3-0.5 0.5-1 0.5-1.6c0-0.6-0.2-1.1-0.5-1.6L58 49.6z'/%3E%3Cpath d='M386.6 41.8H107.5c-3.1 0-5.6 2.5-5.6 5.6v9c0 3.1 2.5 5.6 5.6 5.6h279.1c3.1 0 5.6-2.5 5.6-5.6v-9C392.2 44.3 389.7 41.8 386.6 41.8z'/%3E%3C/svg%3E") no-repeat center / contain`
-  }
-}));
-const SKTWrapperImage = styled("div")(({
-  theme,
-  width
-}) => ({
-  width,
-  height: "100%",
-  padding: theme.spacing(3),
-  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`
-}));
-const WrapperLazyLoadImage = styled("div")(({
-  width,
-  height
-}) => ({
-  width,
-  height,
-  lineHeight: 0,
-  display: "block",
-  overflow: "hidden",
-  "& > span": {
-    width: "100%",
-    height: "100%"
-  },
-  "& .LazyLoadImage": {
-    width: "100%",
-    height: "100%",
-    objectFit: "contain"
-  }
-}));
-function Image({
-  ratio,
-  sx,
-  isSekeleton = false,
-  width,
-  height,
-  src,
-  ...other
-}) {
-  console.log("ImageSkeleton", isSekeleton);
-  const theme = useTheme();
-  const themeMode = theme.palette.mode;
-  if (isSekeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperImage, {
-      width,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rectangular",
-        width: "100%",
-        height: "100%"
-      })
-    });
-  }
-  if (ratio) {
-    return /* @__PURE__ */ jsx(Box, {
-      component: "span",
-      sx: {
-        width: 1,
-        lineHeight: 0,
-        display: "block",
-        overflow: "hidden",
-        position: "relative",
-        pt: getRatio(ratio),
-        "& .wrapper": {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          lineHeight: 0,
-          position: "absolute",
-          backgroundSize: "cover !important"
-        },
-        ...sx
-      },
-      children: /* @__PURE__ */ jsx(WrapperLazyLoadImage, {
-        width,
-        height,
-        id: "WrapperLazyLoadImage",
-        children: /* @__PURE__ */ jsx(LazyLoadImage, {
-          className: "LazyLoadImage",
-          src,
-          placeholderSrc: themeMode === "light" ? "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==" : "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM5MTlFQUI7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==",
-          ...other
-        })
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(WrapperLazyLoadImage, {
-    width,
-    height,
-    id: "WrapperLazyLoadImage",
-    children: /* @__PURE__ */ jsx(LazyLoadImage, {
-      className: "LazyLoadImage",
-      src,
-      placeholderSrc: themeMode === "light" ? "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==" : "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM5MTlFQUI7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==",
-      ...other
-    })
-  });
-}
-function getRatio(ratio = "1/1") {
-  return {
-    "4/3": "calc(100% / 4 * 3)",
-    "3/4": "calc(100% / 3 * 4)",
-    "6/4": "calc(100% / 6 * 4)",
-    "4/6": "calc(100% / 4 * 6)",
-    "16/9": "calc(100% / 16 * 9)",
-    "9/16": "calc(100% / 9 * 16)",
-    "21/9": "calc(100% / 21 * 9)",
-    "9/21": "calc(100% / 9 * 21)",
-    "1/1": "100%"
-  }[ratio];
-}
-const CompanyLogo = (props) => {
-  const {
-    size = "small",
-    isSkeleton,
-    ...other
-  } = props;
-  const height = size === "small" ? "50px" : "auto";
-  const width = size === "small" ? "50px" : "380px";
-  const {
-    host_static_assets,
-    environment
-  } = useEnvironment();
-  const mdUp = useResponsive("up", "md");
-  console.log("CompanyLogoSkeleton", isSkeleton);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTCompanyLogoMask, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rectangular",
-        width: mdUp ? 380 : 50,
-        height: mdUp ? 97 : 50
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Image, {
-    src: `${host_static_assets}/${environment}/frontend/commons/assets/icons/${size === "small" ? "isotipo_m4l.svg" : "logotipo_m4l.svg"}`,
-    effect: "opacity",
-    width,
-    height,
-    ...other
-  });
-};
-function LanguagePopover(props) {
-  const {
-    isSkeleton
-  } = props;
-  const {
-    allLang,
-    currentLang,
-    onChangeLang
-  } = useLocales();
-  const [open, setOpen] = useState(null);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, {
-      variant: "circular",
-      width: 20,
-      height: 20
-    });
-  }
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx(IconButtonAnimate, {
-      onClick: handleOpen,
-      sx: {
-        width: 40,
-        height: 40,
-        ...open && {
-          bgcolor: "action.selected"
-        }
-      },
-      children: /* @__PURE__ */ jsx(Image, {
-        src: currentLang.icon,
-        alt: currentLang.label
-      })
-    })
-  });
-}
-const ModuleWrapper = (props) => {
-  const {
-    children
-  } = props;
-  const {
-    getLabel,
-    getModuleLabel
-  } = useModuleDictionary();
-  const mdUp = useResponsive("up", "md");
-  const isSkeleton = !useFlagsPresent(["dictionary_loaded", "style_loaded"]);
-  return /* @__PURE__ */ jsx(Page, {
-    title: getModuleLabel(),
-    children: /* @__PURE__ */ jsxs(RootStyle, {
-      children: [/* @__PURE__ */ jsxs(HeaderStyle, {
-        id: "HeaderStyle",
-        children: [/* @__PURE__ */ jsx(CompanyLogo, {
-          size: mdUp ? "normal" : "small",
-          isSkeleton
-        }), /* @__PURE__ */ jsx(LanguagePopover, {
-          isSkeleton
-        })]
-      }), mdUp && /* @__PURE__ */ jsxs(SectionStyle, {
-        id: "SectionStyle",
-        children: [/* @__PURE__ */ jsx(TitleContainer, {
-          id: "module_leyend",
-          children: /* @__PURE__ */ jsx(Typography$2, {
-            variant: "h3",
-            sx: {
-              px: 5,
-              mt: 10,
-              mb: 5
-            },
-            skeletonProps: {
-              isSkeleton,
-              width: "30%",
-              height: "18px"
-            },
-            children: getLabel("module_leyend")
-          })
-        }), /* @__PURE__ */ jsx(Image, {
-          isSekeleton: isSkeleton,
-          width: "100%",
-          height: "auto",
-          src: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/domain/host/login/assets/img/illustration_login.png",
-          alt: "illustration module",
-          effect: "opacity"
-        })]
-      }), /* @__PURE__ */ jsx(Container, {
-        maxWidth: "sm",
-        id: "formContainer",
-        children: /* @__PURE__ */ jsxs(ContentStyle, {
-          children: [/* @__PURE__ */ jsx(Stack, {
-            direction: "row",
-            alignItems: "center",
-            sx: {
-              mb: 5
-            },
-            children: /* @__PURE__ */ jsxs(ModuleTitleContainer, {
-              children: [/* @__PURE__ */ jsx(Typography$2, {
-                variant: "h4",
-                skeletonProps: {
-                  isSkeleton,
-                  width: "35%",
-                  height: "36px"
-                },
-                children: getModuleLabel()
-              }), /* @__PURE__ */ jsx(Typography$2, {
-                sx: {
-                  color: "text.secondary"
-                },
-                skeletonProps: {
-                  isSkeleton,
-                  width: "60%",
-                  height: "21px"
-                },
-                children: getLabel("module_description")
-              })]
-            })
-          }), children]
-        })
-      })]
-    })
-  });
-};
-const features = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: domMax
-}, Symbol.toStringTag, { value: "Module" }));
-export { DialogAnimate as D, FabButtonAnimate as F, IconButtonAnimate as I, Loadable as L, ModuleWrapper as M, ProgressBar as P, Typography as T, ProgressBarStyle as a, Page as b, LinkWithRoute as c, TextAnimate as d, MotionInView as e, MotionContainer as f, MotionLazyContainer as g, TRANSITION as h, varFade as i, varZoom as j, varFlip as k, varSlide as l, varScale as m, varBounce as n, varRotate as o, varHover as p, varContainer as q, varTranHover as r, varTranEnter as s, varTranExit as t, varBgColor as u, varPath as v, varBgKenburns as w, varBgPan as x };
+import "@mui/material/styles";
+import "@mui/material";
+import "react/jsx-runtime";
+import "./Page/index.js";