@m4l/graphics 0.0.12 → 0.0.15

package/dist/components/index.js

@@ -0,0 +1,1318 @@
+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 };