@undefine-ui/design-system 2.11.0 → 2.13.0

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(index_exports, {
   Field: () => Field,
   Form: () => Form,
   Icon: () => Icon,
+  Image: () => Image,
   InfoCircleFill: () => InfoCircleFill,
   InfoCircleOutline: () => InfoCircleOutline,
   KeyCommand: () => KeyCommand,
@@ -157,6 +158,8 @@ __export(index_exports, {
   updateCoreWithSettings: () => updateCoreWithSettings,
   useBoolean: () => useBoolean,
   useCopyToClipboard: () => useCopyToClipboard,
+  useCountdownDate: () => useCountdownDate,
+  useCountdownSeconds: () => useCountdownSeconds,
   useEventListener: () => useEventListener,
   useLocalStorage: () => useLocalStorage,
   usePopover: () => usePopover,
@@ -788,13 +791,89 @@ var useSetState = (initialState) => {
   return memoizedValue;
 };
 
-// src/hooks/useResponsive.ts
+// src/hooks/useCountdown.tsx
 var import_react7 = require("react");
+var useCountdownDate = (date) => {
+  const targetTime = typeof date === "number" ? date : typeof date === "string" ? new Date(date).valueOf() : date.valueOf();
+  const [countdown, setCountdown] = (0, import_react7.useState)({
+    days: "00",
+    hours: "00",
+    minutes: "00",
+    seconds: "00"
+  });
+  const setNewTime = (0, import_react7.useCallback)(() => {
+    const now = Date.now();
+    const distanceToNow = targetTime - now;
+    if (distanceToNow <= 0) {
+      setCountdown({
+        days: "00",
+        hours: "00",
+        minutes: "00",
+        seconds: "00"
+      });
+      return;
+    }
+    const getDays = Math.floor(distanceToNow / (1e3 * 60 * 60 * 24));
+    const getHours = `0${Math.floor(distanceToNow % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60))}`.slice(-2);
+    const getMinutes = `0${Math.floor(distanceToNow % (1e3 * 60 * 60) / (1e3 * 60))}`.slice(-2);
+    const getSeconds = `0${Math.floor(distanceToNow % (1e3 * 60) / 1e3)}`.slice(-2);
+    setCountdown({
+      days: getDays < 10 ? `0${getDays}` : `${getDays}`,
+      hours: getHours,
+      minutes: getMinutes,
+      seconds: getSeconds
+    });
+  }, [targetTime]);
+  (0, import_react7.useEffect)(() => {
+    setNewTime();
+    const interval = setInterval(setNewTime, 1e3);
+    return () => clearInterval(interval);
+  }, [setNewTime]);
+  return countdown;
+};
+var useCountdownSeconds = (initCountdown) => {
+  const [countdown, setCountdown] = (0, import_react7.useState)(initCountdown);
+  const intervalIdRef = (0, import_react7.useRef)(null);
+  const remainingSecondsRef = (0, import_react7.useRef)(initCountdown);
+  const startCountdown = (0, import_react7.useCallback)(() => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current);
+    }
+    remainingSecondsRef.current = initCountdown;
+    setCountdown(initCountdown);
+    intervalIdRef.current = setInterval(() => {
+      remainingSecondsRef.current -= 1;
+      if (remainingSecondsRef.current <= 0) {
+        if (intervalIdRef.current) clearInterval(intervalIdRef.current);
+        setCountdown(0);
+      } else {
+        setCountdown(remainingSecondsRef.current);
+      }
+    }, 1e3);
+  }, [initCountdown]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+      }
+    };
+  }, []);
+  const counting = countdown > 0 && countdown < initCountdown;
+  return {
+    counting,
+    countdown,
+    startCountdown,
+    setCountdown
+  };
+};
+
+// src/hooks/useResponsive.ts
+var import_react8 = require("react");
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"), 1);
 var import_styles = require("@mui/material/styles");
 var useResponsive = (query, start, end) => {
   const theme = (0, import_styles.useTheme)();
-  const getQuery = (0, import_react7.useMemo)(() => {
+  const getQuery = (0, import_react8.useMemo)(() => {
     switch (query) {
       case "up":
         return theme.breakpoints.up(start);
@@ -813,7 +892,7 @@ var useResponsive = (query, start, end) => {
 };
 var useWidth = () => {
   const theme = (0, import_styles.useTheme)();
-  const keys = (0, import_react7.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
+  const keys = (0, import_react8.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
   const width = keys.reduce((output, key) => {
     const matches = (0, import_useMediaQuery.default)(theme.breakpoints.up(key));
     return !output && matches ? key : output;
@@ -822,19 +901,19 @@ var useWidth = () => {
 };
 
 // src/hooks/useEventListener.ts
-var import_react8 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react8.useLayoutEffect : import_react8.useEffect;
+var import_react9 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react9.useLayoutEffect : import_react9.useEffect;
 var useEventListener = ({
   eventName,
   handler,
   element,
   options
 }) => {
-  const savedHandler = (0, import_react8.useRef)(handler);
+  const savedHandler = (0, import_react9.useRef)(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const targetElement = element?.current || window;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
@@ -848,11 +927,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = (0, import_react9.useState)("");
-  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
-  const copy = (0, import_react9.useCallback)(
+  const [copiedText, setCopiedText] = (0, import_react10.useState)("");
+  const [isCopied, setIsCopied] = (0, import_react10.useState)(false);
+  const copy = (0, import_react10.useCallback)(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -872,7 +951,7 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = (0, import_react9.useMemo)(
+  const memoizedValue = (0, import_react10.useMemo)(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
@@ -880,11 +959,11 @@ var useCopyToClipboard = () => {
 };
 
 // src/hooks/useScrollOffsetTop.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var useScrollOffSetTop = (top = 0) => {
-  const elementRef = (0, import_react10.useRef)(null);
-  const [offsetTop, setOffsetTop] = (0, import_react10.useState)(false);
-  const handleScrollChange = (0, import_react10.useCallback)(() => {
+  const elementRef = (0, import_react11.useRef)(null);
+  const [offsetTop, setOffsetTop] = (0, import_react11.useState)(false);
+  const handleScrollChange = (0, import_react11.useCallback)(() => {
     const scrollHeight = Math.round(window.scrollY);
     if (elementRef?.current) {
       const rect = elementRef.current.getBoundingClientRect();
@@ -894,14 +973,14 @@ var useScrollOffSetTop = (top = 0) => {
       setOffsetTop(scrollHeight > top);
     }
   }, [top]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     handleScrollChange();
     window.addEventListener("scroll", handleScrollChange, { passive: true });
     return () => {
       window.removeEventListener("scroll", handleScrollChange);
     };
   }, [handleScrollChange]);
-  const memoizedValue = (0, import_react10.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
+  const memoizedValue = (0, import_react11.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
   return memoizedValue;
 };
 
@@ -6139,20 +6218,226 @@ var Table = (props) => {
   ) });
 };
 
+// src/components/Image/index.tsx
+var import_react12 = require("react");
+var import_Box5 = __toESM(require("@mui/material/Box"), 1);
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"), 1);
+
+// src/components/Image/classes.ts
+var imageClasses = {
+  root: "undefine__image__root",
+  wrapper: "undefine__image__wrapper",
+  overlay: "undefine__image__overlay"
+};
+
+// src/components/Image/index.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Image = (0, import_react12.forwardRef)(function Image2(props, ref) {
+  const {
+    src,
+    alt,
+    lazy = true,
+    fallbackSrc,
+    srcSet,
+    sizes: sizes2,
+    aspectRatio,
+    fit = "cover",
+    position = "center",
+    overlay,
+    withOverlay = !!overlay,
+    loadingIndicator,
+    renderError,
+    observerMargin = "200px",
+    className,
+    sx,
+    onLoad,
+    onError,
+    imgSx,
+    imgProps,
+    ...rest
+  } = props;
+  const imageRef = (0, import_react12.useRef)(null);
+  const [status, setStatus] = (0, import_react12.useState)(lazy ? "idle" : "loading");
+  const [currentSrc, setCurrentSrc] = (0, import_react12.useState)(lazy ? void 0 : src);
+  const [currentSrcSet, setCurrentSrcSet] = (0, import_react12.useState)(lazy ? void 0 : srcSet);
+  const [hasTriedFallback, setHasTriedFallback] = (0, import_react12.useState)(false);
+  const setRefs = (node) => {
+    imageRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  (0, import_react12.useEffect)(() => {
+    setStatus(lazy ? "idle" : "loading");
+    setCurrentSrc(lazy ? void 0 : src);
+    setCurrentSrcSet(lazy ? void 0 : srcSet);
+    setHasTriedFallback(false);
+  }, [lazy, src, srcSet]);
+  (0, import_react12.useEffect)(() => {
+    if (!lazy) {
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") {
+      setCurrentSrc(src);
+      setCurrentSrcSet(srcSet);
+      setStatus("loading");
+      return;
+    }
+    const target = imageRef.current;
+    if (!target) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setCurrentSrc(src);
+            setCurrentSrcSet(srcSet);
+            setStatus("loading");
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: observerMargin, threshold: 0.2 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [lazy, observerMargin, src, srcSet]);
+  const {
+    onLoad: imgOnLoad,
+    onError: imgOnError,
+    loading: imgLoading,
+    ...restImgProps
+  } = imgProps ?? {};
+  const handleLoad = (event) => {
+    setStatus("loaded");
+    imgOnLoad?.(event);
+    onLoad?.(event);
+  };
+  const handleError = (event) => {
+    if (fallbackSrc && !hasTriedFallback) {
+      setHasTriedFallback(true);
+      setCurrentSrc(fallbackSrc);
+      setStatus("loading");
+      return;
+    }
+    setStatus("error");
+    imgOnError?.(event);
+    onError?.(event);
+  };
+  const showLoader = status === "idle" || status === "loading";
+  const showError = status === "error";
+  const loadingAttr = lazy ? "lazy" : imgLoading ?? "eager";
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_Box5.default,
+    {
+      className: imageClasses.root.concat(className ? ` ${className}` : ""),
+      sx: {
+        position: "relative",
+        display: "block",
+        width: 1,
+        lineHeight: 0,
+        overflow: aspectRatio ? "hidden" : void 0,
+        ...aspectRatio && { aspectRatio },
+        ...sx
+      },
+      ...rest,
+      children: [
+        showLoader && (loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_Skeleton.default,
+          {
+            animation: "wave",
+            variant: "rectangular",
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              width: 1,
+              height: 1,
+              borderRadius: 1
+            }
+          }
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_Box5.default,
+          {
+            ref: setRefs,
+            component: "img",
+            className: imageClasses.wrapper,
+            src: currentSrc,
+            srcSet: currentSrcSet,
+            sizes: sizes2,
+            alt,
+            loading: loadingAttr,
+            onLoad: handleLoad,
+            onError: handleError,
+            ...restImgProps,
+            sx: {
+              width: 1,
+              height: aspectRatio ? "100%" : "auto",
+              display: "block",
+              objectFit: fit,
+              objectPosition: position,
+              opacity: status === "loaded" ? 1 : 0,
+              transition: (theme) => theme.transitions.create("opacity", {
+                duration: theme.transitions.duration.shorter
+              }),
+              ...aspectRatio && { position: "absolute", inset: 0 },
+              ...imgSx
+            }
+          }
+        ),
+        withOverlay && !showError && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_Box5.default,
+          {
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none"
+            },
+            children: overlay
+          }
+        ),
+        showError && (renderError ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_Box5.default,
+          {
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              bgcolor: (theme) => theme.vars.palette.grey[200],
+              color: (theme) => theme.vars.palette.text.secondary,
+              fontSize: 12,
+              letterSpacing: 0.2
+            },
+            children: "Image unavailable"
+          }
+        ))
+      ]
+    }
+  );
+});
+
 // src/components/Upload/Upload.tsx
 var import_react_dropzone = require("react-dropzone");
-var import_Box10 = __toESM(require("@mui/material/Box"), 1);
+var import_Box11 = __toESM(require("@mui/material/Box"), 1);
 var import_Stack3 = __toESM(require("@mui/material/Stack"), 1);
 var import_Button3 = __toESM(require("@mui/material/Button"), 1);
 var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"), 1);
 
 // src/components/Upload/components/Placeholder.tsx
 var import_Stack2 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box5 = __toESM(require("@mui/material/Box"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_Box6 = __toESM(require("@mui/material/Box"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var UploadPlaceholder = ({ hasError, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    import_Box5.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    import_Box6.default,
     {
       sx: {
         display: "flex",
@@ -6162,7 +6447,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Icon,
           {
             icon: "CloudUpload",
@@ -6173,11 +6458,11 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack2.default, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Box5.default, { sx: { typography: "h8" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Stack2.default, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box6.default, { sx: { typography: "h8" }, children: [
             "Drag files here or",
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              import_Box5.default,
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              import_Box6.default,
               {
                 component: "span",
                 sx: {
@@ -6189,8 +6474,8 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-            import_Box5.default,
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            import_Box6.default,
             {
               sx: {
                 typography: "bodyMd",
@@ -6211,7 +6496,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-var import_Box6 = __toESM(require("@mui/material/Box"), 1);
+var import_Box7 = __toESM(require("@mui/material/Box"), 1);
 var import_Paper2 = __toESM(require("@mui/material/Paper"), 1);
 var import_Typography3 = __toESM(require("@mui/material/Typography"), 1);
 
@@ -6244,12 +6529,12 @@ var fileData = (file) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var RejectionFiles = ({ files }) => {
   if (!files.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     import_Paper2.default,
     {
       variant: "outlined",
@@ -6264,13 +6549,13 @@ var RejectionFiles = ({ files }) => {
       },
       children: files.map(({ file, errors }) => {
         const { path, size } = fileData(file);
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box6.default, { sx: { my: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Typography3.default, { variant: "subtitle2", noWrap: true, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Box7.default, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Typography3.default, { variant: "subtitle2", noWrap: true, children: [
             path,
             " - ",
             size ? fData(size) : ""
           ] }),
-          errors.map((error2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box6.default, { component: "span", sx: { typography: "caption" }, children: [
+          errors.map((error2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Box7.default, { component: "span", sx: { typography: "caption" }, children: [
             "- ",
             error2.message
           ] }, error2.code))
@@ -6281,12 +6566,12 @@ var RejectionFiles = ({ files }) => {
 };
 
 // src/components/Upload/components/UploadProgress.tsx
-var import_Box7 = __toESM(require("@mui/material/Box"), 1);
+var import_Box8 = __toESM(require("@mui/material/Box"), 1);
 var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var UploadProgress = ({ progress: progress2 = 20 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-    import_Box7.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    import_Box8.default,
     {
       sx: {
         display: "flex",
@@ -6296,8 +6581,8 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Box7.default, { sx: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Box8.default, { sx: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             import_CircularProgress2.default,
             {
               variant: "determinate",
@@ -6310,7 +6595,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             import_CircularProgress2.default,
             {
               variant: "determinate",
@@ -6322,8 +6607,8 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            import_Box7.default,
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            import_Box8.default,
             {
               sx: {
                 top: 0,
@@ -6335,30 +6620,30 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box7.default, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box8.default, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box7.default, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box8.default, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react11 = require("react");
-var import_Box9 = __toESM(require("@mui/material/Box"), 1);
+var import_react13 = require("react");
+var import_Box10 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
 // src/components/Upload/components/SingleFilePreview.tsx
-var import_Box8 = __toESM(require("@mui/material/Box"), 1);
+var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton2 = __toESM(require("@mui/material/IconButton"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SingleFilePreview = ({ file }) => {
   const fileName = typeof file === "string" ? file : file.name;
   const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-  const renderImg = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box8.default,
+  const renderImg = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_Box9.default,
     {
       component: "img",
       alt: fileName,
@@ -6371,8 +6656,8 @@ var SingleFilePreview = ({ file }) => {
       }
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box8.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_Box9.default,
     {
       sx: {
         p: 1,
@@ -6387,7 +6672,7 @@ var SingleFilePreview = ({ file }) => {
   );
 };
 var DeleteButton = ({ sx, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     import_IconButton2.default,
     {
       size: "small",
@@ -6406,15 +6691,15 @@ var DeleteButton = ({ sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react11.useRef)(null);
+  const scrollRef = (0, import_react13.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6426,8 +6711,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
     }
   };
   const showNavigation = files.length > 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Box9.default, { sx: { position: "relative", width: 1 }, children: [
-    showNavigation && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box10.default, { sx: { position: "relative", width: 1 }, children: [
+    showNavigation && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_IconButton3.default,
       {
         size: "small",
@@ -6444,11 +6729,11 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { icon: "NavArrowLeft", width: 20 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "NavArrowLeft", width: 20 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_Box9.default,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_Box10.default,
       {
         ref: scrollRef,
         sx: {
@@ -6466,8 +6751,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
         children: files.map((file, index) => {
           const fileName = typeof file === "string" ? file : file.name;
           const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-            import_Box9.default,
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+            import_Box10.default,
             {
               sx: {
                 position: "relative",
@@ -6478,8 +6763,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_Box9.default,
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  import_Box10.default,
                   {
                     component: "img",
                     alt: fileName,
@@ -6492,7 +6777,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                     }
                   }
                 ),
-                onRemove && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                onRemove && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   DeleteButton,
                   {
                     onClick: (e) => {
@@ -6508,7 +6793,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
         })
       }
     ),
-    showNavigation && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    showNavigation && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_IconButton3.default,
       {
         size: "small",
@@ -6525,14 +6810,14 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { icon: "NavArrowRight", width: 20 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "NavArrowRight", width: 20 })
       }
     )
   ] });
 };
 
 // src/components/Upload/Upload.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Upload = ({
   sx,
   value,
@@ -6559,20 +6844,20 @@ var Upload = ({
   const hasError = isDragReject || !!error2;
   const renderContent = () => {
     if (isUploading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UploadProgress, { progress: uploadProgress });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(UploadProgress, { progress: uploadProgress });
     }
     if (hasFile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SingleFilePreview, { file: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SingleFilePreview, { file: value });
     }
     if (hasFiles) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MultiFilePreview, { files: value, onRemove });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MultiFilePreview, { files: value, onRemove });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UploadPlaceholder, { hasError });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box10.default, { sx: { width: 1, position: "relative", ...sx }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_Box10.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Box11.default, { sx: { width: 1, position: "relative", ...sx }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      import_Box11.default,
       {
         ...shouldShowDropzone ? getRootProps() : {},
         sx: {
@@ -6610,52 +6895,52 @@ var Upload = ({
           }
         },
         children: [
-          shouldShowDropzone && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("input", { ...getInputProps() }),
+          shouldShowDropzone && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", { ...getInputProps() }),
           renderContent()
         ]
       }
     ),
-    hasFile && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DeleteButton, { onClick: onDelete }),
-    hasFiles && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Stack3.default, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
-      onRemoveAll && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    hasFile && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DeleteButton, { onClick: onDelete }),
+    hasFiles && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Stack3.default, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
+      onRemoveAll && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         import_Button3.default,
         {
           variant: "outlined",
           color: "inherit",
           size: "small",
           onClick: onRemoveAll,
-          startIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
           children: "Remove all"
         }
       ),
-      onUpload && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      onUpload && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         import_Button3.default,
         {
           variant: "contained",
           size: "small",
           onClick: onUpload,
-          startIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
           children: "Upload files"
         }
       )
     ] }),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_FormHelperText.default, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RejectionFiles, { files: [...fileRejections] })
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_FormHelperText.default, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RejectionFiles, { files: [...fileRejections] })
   ] });
 };
 
 // src/components/HookForm/Form.tsx
 var import_react_hook_form = require("react-hook-form");
-var import_Box11 = __toESM(require("@mui/material/Box"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_Box12 = __toESM(require("@mui/material/Box"), 1);
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Form = ({
   children,
   onSubmit,
   methods,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_Box11.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_Box12.default,
     {
       component: "form",
       onSubmit: (e) => {
@@ -6675,7 +6960,7 @@ var Form = ({
 // src/components/HookForm/RHFSwitch.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_Stack4 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box12 = __toESM(require("@mui/material/Box"), 1);
+var import_Box13 = __toESM(require("@mui/material/Box"), 1);
 var import_Typography4 = __toESM(require("@mui/material/Typography"), 1);
 var import_Switch2 = __toESM(require("@mui/material/Switch"), 1);
 var import_FormGroup = __toESM(require("@mui/material/FormGroup"), 1);
@@ -6683,7 +6968,7 @@ var import_FormLabel = __toESM(require("@mui/material/FormLabel"), 1);
 var import_FormControl = __toESM(require("@mui/material/FormControl"), 1);
 var import_FormHelperText2 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var RHFSwitch = ({
   name,
   description,
@@ -6695,16 +6980,16 @@ var RHFSwitch = ({
 }) => {
   const { control } = (0, import_react_hook_form2.useFormContext)();
   const baseAriaLabel = `Switch ${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_react_hook_form2.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_Box12.default, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_Box13.default, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           import_FormControlLabel2.default,
           {
-            control: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            control: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               import_Switch2.default,
               {
                 ...field,
@@ -6719,9 +7004,9 @@ var RHFSwitch = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_Stack4.default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_Typography4.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_Typography4.default, { variant: "body2", color: "textBody", children: description })
+            label: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_Stack4.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_Typography4.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_Typography4.default, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -6730,7 +7015,7 @@ var RHFSwitch = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           import_FormHelperText2.default,
           {
             error: !!error2,
@@ -6753,19 +7038,19 @@ var RHFMultiSwitch = ({
 }) => {
   const { control } = (0, import_react_hook_form2.useFormContext)();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_react_hook_form2.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         import_FormControl.default,
         {
           component: "fieldset",
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               import_FormLabel.default,
               {
                 component: "legend",
@@ -6774,12 +7059,12 @@ var RHFMultiSwitch = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_FormGroup.default, { ...other, children: options.map((option) => {
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_FormGroup.default, { ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 import_FormControlLabel2.default,
                 {
-                  control: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  control: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                     import_Switch2.default,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -6802,7 +7087,7 @@ var RHFMultiSwitch = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_FormHelperText2.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_FormHelperText2.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
           ]
         }
       )
@@ -6812,10 +7097,10 @@ var RHFMultiSwitch = ({
 
 // src/components/HookForm/RHFUpload.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   const { control, setValue } = (0, import_react_hook_form3.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_react_hook_form3.Controller,
     {
       name,
@@ -6843,7 +7128,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
         const onRemoveAll = () => {
           setValue(name, [], { shouldValidate: true });
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Upload,
           {
             multiple,
@@ -6867,18 +7152,18 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 var import_react_hook_form4 = require("react-hook-form");
 
 // src/components/OTPInput/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_styles37 = require("@mui/material/styles");
-var import_Box13 = __toESM(require("@mui/material/Box"), 1);
+var import_Box14 = __toESM(require("@mui/material/Box"), 1);
 var import_FormHelperText3 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_InputBase3 = require("@mui/material/InputBase");
 var import_TextField2 = __toESM(require("@mui/material/TextField"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = (0, import_styles37.useTheme)();
-  const [otp, setOtp] = (0, import_react12.useState)(Array(length).fill(""));
-  const inputsRef = (0, import_react12.useRef)([]);
+  const [otp, setOtp] = (0, import_react14.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react14.useRef)([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
     const newOtp = [...otp];
@@ -6941,18 +7226,19 @@ var OTPInput = (props) => {
       onComplete?.(newOtp.join(""));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Box13.default, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      import_Box13.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box14.default, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      import_Box14.default,
       {
         display: "flex",
         alignItems: "center",
         sx: {
+          width: "100%",
           "&:not(:last-of-type)": {
             mr: 1.5
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           import_TextField2.default,
           {
             size: "medium",
@@ -7035,21 +7321,21 @@ var OTPInput = (props) => {
       },
       index
     )) }),
-    error2 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_FormHelperText3.default, { sx: { color: "error.main" }, children: helperText })
+    error2 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_FormHelperText3.default, { sx: { color: "error.main" }, children: helperText })
   ] });
 };
 var OTPInput_default = OTPInput;
 
 // src/components/HookForm/RHFOTPInput.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
   const { control, setValue } = (0, import_react_hook_form4.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_react_hook_form4.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         OTPInput_default,
         {
           length,
@@ -7069,16 +7355,16 @@ var import_react_hook_form5 = require("react-hook-form");
 var import_IconButton4 = __toESM(require("@mui/material/IconButton"), 1);
 var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"), 1);
 var import_TextField3 = __toESM(require("@mui/material/TextField"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
   const { control } = (0, import_react_hook_form5.useFormContext)();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_react_hook_form5.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         import_TextField3.default,
         {
           ...field,
@@ -7099,7 +7385,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_InputAdornment2.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_IconButton4.default, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                endAdornment: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_InputAdornment2.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_IconButton4.default, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -7126,7 +7412,7 @@ var import_FormLabel2 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"), 1);
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"), 1);
 var import_FormHelperText4 = __toESM(require("@mui/material/FormHelperText"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var RHFRadioGroup = ({
   name,
   label,
@@ -7138,13 +7424,13 @@ var RHFRadioGroup = ({
   const { control } = (0, import_react_hook_form6.useFormContext)();
   const labelledby = `${name}-radio-buttons-group-label`;
   const ariaLabel = (val) => `Radio ${val}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_react_hook_form6.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_FormControl2.default, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_FormControl2.default, { component: "fieldset", sx: slotProps?.wrap, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           import_FormLabel2.default,
           {
             id: labelledby,
@@ -7154,11 +7440,11 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_RadioGroup.default, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_RadioGroup.default, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           import_FormControlLabel3.default,
           {
             value: option.value,
-            control: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            control: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               import_Radio2.default,
               {
                 ...slotProps?.radio,
@@ -7170,9 +7456,9 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_Stack5.default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography5.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-              option?.description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography5.default, { variant: "body2", color: "textBody", children: option?.description })
+            label: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_Stack5.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_Typography5.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+              option?.description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_Typography5.default, { variant: "body2", color: "textBody", children: option?.description })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -7180,7 +7466,7 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_FormHelperText4.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_FormHelperText4.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7190,7 +7476,7 @@ var RHFRadioGroup = ({
 var import_react_hook_form7 = require("react-hook-form");
 var import_TextField4 = __toESM(require("@mui/material/TextField"), 1);
 var import_Autocomplete4 = __toESM(require("@mui/material/Autocomplete"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var RHFAutocomplete = ({
   name,
   label,
@@ -7201,12 +7487,12 @@ var RHFAutocomplete = ({
   ...other
 }) => {
   const { control, setValue } = (0, import_react_hook_form7.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_react_hook_form7.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         import_Autocomplete4.default,
         {
           ...field,
@@ -7215,7 +7501,7 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             import_TextField4.default,
             {
               label,
@@ -7236,7 +7522,7 @@ var RHFAutocomplete = ({
 // src/components/HookForm/RHFCheckbox.tsx
 var import_react_hook_form8 = require("react-hook-form");
 var import_Stack6 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box14 = __toESM(require("@mui/material/Box"), 1);
+var import_Box15 = __toESM(require("@mui/material/Box"), 1);
 var import_Typography6 = __toESM(require("@mui/material/Typography"), 1);
 var import_Checkbox3 = __toESM(require("@mui/material/Checkbox"), 1);
 var import_FormGroup2 = __toESM(require("@mui/material/FormGroup"), 1);
@@ -7244,7 +7530,7 @@ var import_FormLabel3 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_FormControl3 = __toESM(require("@mui/material/FormControl"), 1);
 var import_FormHelperText5 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_FormControlLabel4 = __toESM(require("@mui/material/FormControlLabel"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var RHFCheckbox = ({
   name,
   description,
@@ -7256,16 +7542,16 @@ var RHFCheckbox = ({
 }) => {
   const { control } = (0, import_react_hook_form8.useFormContext)();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_react_hook_form8.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Box14.default, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_Box15.default, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_FormControlLabel4.default,
           {
-            control: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            control: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               import_Checkbox3.default,
               {
                 ...field,
@@ -7280,9 +7566,9 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Stack6.default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: description })
+            label: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_Stack6.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -7291,7 +7577,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_FormHelperText5.default, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_FormHelperText5.default, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7307,13 +7593,13 @@ var RHFMultiCheckbox = ({
 }) => {
   const { control } = (0, import_react_hook_form8.useFormContext)();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_react_hook_form8.Controller,
     {
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         import_FormControl3.default,
         {
           component: "fieldset",
@@ -7321,7 +7607,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               import_FormLabel3.default,
               {
                 component: "legend",
@@ -7330,12 +7616,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_FormGroup2.default, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_FormGroup2.default, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 import_FormControlLabel4.default,
                 {
-                  control: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  control: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     import_Checkbox3.default,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -7353,9 +7639,9 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  label: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Stack6.default, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-                    option?.description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: option?.description })
+                  label: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_Stack6.default, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+                    option?.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: option?.description })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -7364,7 +7650,7 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               import_FormHelperText5.default,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
@@ -7394,29 +7680,29 @@ var Field = {
 // src/components/CopyButton/index.tsx
 var import_Tooltip2 = __toESM(require("@mui/material/Tooltip"), 1);
 var import_IconButton5 = __toESM(require("@mui/material/IconButton"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Tooltip2.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_Tooltip2.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     import_IconButton5.default,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
 
 // src/components/LoadingScreen/index.tsx
 var import_Portal = __toESM(require("@mui/material/Portal"), 1);
-var import_Box15 = __toESM(require("@mui/material/Box"), 1);
+var import_Box16 = __toESM(require("@mui/material/Box"), 1);
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"), 1);
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    import_Box15.default,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    import_Box16.default,
     {
       sx: {
         px: 5,
@@ -7429,17 +7715,17 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_Portal.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_Portal.default, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    import_Box15.default,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    import_Box16.default,
     {
       sx: {
         right: 0,
@@ -7455,11 +7741,11 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AnimatedLogo, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_Portal.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_Portal.default, { children: content });
   }
   return content;
 };
@@ -7479,6 +7765,7 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   Field,
   Form,
   Icon,
+  Image,
   InfoCircleFill,
   InfoCircleOutline,
   KeyCommand,
@@ -7592,6 +7879,8 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   updateCoreWithSettings,
   useBoolean,
   useCopyToClipboard,
+  useCountdownDate,
+  useCountdownSeconds,
   useEventListener,
   useLocalStorage,
   usePopover,