@undefine-ui/design-system 2.10.1 → 2.12.0

package/dist/index.cjs

@@ -56,10 +56,12 @@ __export(index_exports, {
   NavArrowDown: () => NavArrowDown,
   NavArrowLeft: () => NavArrowLeft,
   NavArrowRight: () => NavArrowRight,
+  OTPInput: () => OTPInput,
   RHFAutocomplete: () => RHFAutocomplete,
   RHFCheckbox: () => RHFCheckbox,
   RHFMultiCheckbox: () => RHFMultiCheckbox,
   RHFMultiSwitch: () => RHFMultiSwitch,
+  RHFOTPInput: () => RHFOTPInput,
   RHFRadioGroup: () => RHFRadioGroup,
   RHFSwitch: () => RHFSwitch,
   RHFTextField: () => RHFTextField,
@@ -155,6 +157,8 @@ __export(index_exports, {
   updateCoreWithSettings: () => updateCoreWithSettings,
   useBoolean: () => useBoolean,
   useCopyToClipboard: () => useCopyToClipboard,
+  useCountdownDate: () => useCountdownDate,
+  useCountdownSeconds: () => useCountdownSeconds,
   useEventListener: () => useEventListener,
   useLocalStorage: () => useLocalStorage,
   usePopover: () => usePopover,
@@ -786,13 +790,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);
@@ -811,7 +891,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;
@@ -820,19 +900,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;
@@ -846,11 +926,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");
@@ -870,7 +950,7 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = (0, import_react9.useMemo)(
+  const memoizedValue = (0, import_react10.useMemo)(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
@@ -878,11 +958,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();
@@ -892,14 +972,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;
 };
 
@@ -4512,7 +4592,7 @@ var MuiTextField = {
         lineHeight: 1.153,
         position: "relative",
         fontSize: theme.typography.h8.fontSize,
-        fontWeight: theme.typography.fontWeightMedium,
+        fontWeight: `${theme.typography.fontWeightMedium} !important`,
         marginBottom: theme.spacing(1),
         color: `${theme.vars.palette.icon.black} !important`,
         // Focused state
@@ -6344,7 +6424,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
@@ -6412,7 +6492,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react11.useRef)(null);
+  const scrollRef = (0, import_react12.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6861,22 +6941,223 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   );
 };
 
-// src/components/HookForm/RHFTextField.tsx
+// src/components/HookForm/RHFOTPInput.tsx
 var import_react_hook_form4 = require("react-hook-form");
-var import_IconButton4 = __toESM(require("@mui/material/IconButton"), 1);
-var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"), 1);
+
+// src/components/OTPInput/index.tsx
+var import_react13 = require("react");
+var import_styles37 = require("@mui/material/styles");
+var import_Box13 = __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 OTPInput = (props) => {
+  const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
+  const theme = (0, import_styles37.useTheme)();
+  const [otp, setOtp] = (0, import_react13.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react13.useRef)([]);
+  const handleChange = (value, index) => {
+    if (!/^[0-9]$/.test(value) && value !== "") return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    onChange?.(newOtp.join(""));
+    if (value && index < length - 1) {
+      inputsRef.current[index + 1]?.focus();
+    }
+    if (newOtp.every((val) => val !== "")) {
+      onComplete?.(newOtp.join(""));
+    }
+  };
+  const handleKeyDown = (event, index) => {
+    if (event.key === "Backspace") {
+      if (otp[index] === "") {
+        if (index > 0) {
+          inputsRef.current[index - 1]?.focus();
+          setOtp((prevOtp) => {
+            const newOtp = [...prevOtp];
+            newOtp[index - 1] = "";
+            return newOtp;
+          });
+        }
+      } else {
+        setOtp((prevOtp) => {
+          const newOtp = [...prevOtp];
+          newOtp[index] = "";
+          return newOtp;
+        });
+      }
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      if (index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      if (index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handlePaste = (event) => {
+    event.preventDefault();
+    const pasteData = event.clipboardData.getData("text");
+    if (!/^\d+$/.test(pasteData)) return;
+    const newOtp = [...otp];
+    for (let i = 0; i < length; i++) {
+      if (pasteData[i]) {
+        newOtp[i] = pasteData[i];
+      } else {
+        newOtp[i] = "";
+      }
+    }
+    setOtp(newOtp);
+    onChange?.(newOtp.join(""));
+    const filled = newOtp.filter((otp2) => otp2 !== "");
+    inputsRef.current[filled.length]?.focus();
+    if (newOtp.every((val) => val !== "")) {
+      inputsRef.current[filled.length - 1]?.focus();
+      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,
+      {
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          "&:not(:last-of-type)": {
+            mr: 1.5
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_TextField2.default,
+          {
+            size: "medium",
+            value: otp[index],
+            onChange: (e) => handleChange(e.target.value, index),
+            onKeyDown: (e) => handleKeyDown(e, index),
+            onPaste: handlePaste,
+            inputRef: (el) => inputsRef.current[index] = el,
+            error: error2,
+            slotProps: {
+              htmlInput: {
+                maxLength: 1,
+                inputMode: "numeric",
+                autoComplete: "one-time-code"
+              }
+            },
+            sx: {
+              [`& .${import_InputBase3.inputBaseClasses.root}`]: {
+                borderRadius: theme.radius["radius-lg"],
+                backgroundColor: "transparent",
+                border: `1px solid ${theme.vars.palette.border.default}`,
+                transition: theme.transitions.create(
+                  ["background-color", "border-color", "box-shadow"],
+                  {
+                    duration: theme.transitions.duration.short
+                  }
+                ),
+                // Remove default underline
+                "&::before, &::after": {
+                  display: "none"
+                },
+                // Hover state
+                "&:hover": {
+                  backgroundColor: "transparent",
+                  borderColor: theme.vars.palette.border.default
+                },
+                // Focus state
+                [`&.${import_InputBase3.inputBaseClasses.focused}`]: {
+                  backgroundColor: theme.vars.palette.common.white,
+                  border: `1px solid ${theme.vars.palette.border.default}`,
+                  boxShadow: `0 0 0 2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+                },
+                // Error state
+                [`&.${import_InputBase3.inputBaseClasses.error}`]: {
+                  backgroundColor: theme.vars.palette.error[100],
+                  borderColor: theme.vars.palette.error[300],
+                  "&:hover": {
+                    backgroundColor: theme.vars.palette.error[100],
+                    borderColor: theme.vars.palette.error[300]
+                  },
+                  [`&.${import_InputBase3.inputBaseClasses.focused}`]: {
+                    backgroundColor: theme.vars.palette.error[100],
+                    border: `1px solid ${theme.vars.palette.border.default}`,
+                    boxShadow: `0 0 0 2px ${varAlpha(theme.vars.palette.error["300Channel"], 1)}`
+                  }
+                },
+                // Disabled state
+                [`&.${import_InputBase3.inputBaseClasses.disabled}`]: {
+                  backgroundColor: theme.vars.palette.surface.disable,
+                  borderColor: theme.vars.palette.surface.disable,
+                  color: theme.vars.palette.text.disabled,
+                  "&:hover": {
+                    backgroundColor: theme.vars.palette.surface.disable,
+                    borderColor: theme.vars.palette.surface.disable
+                  }
+                }
+              },
+              "& .MuiFilledInput-input": {
+                padding: "0px !important",
+                borderRadius: theme.radius["radius-lg"],
+                fontWeight: 600,
+                width: { xs: 44 },
+                height: { xs: 44 },
+                textAlign: "center"
+              },
+              ...rest.sx
+            }
+          }
+        )
+      },
+      index
+    )) }),
+    error2 && /* @__PURE__ */ (0, import_jsx_runtime53.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 RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
+  const { control, setValue } = (0, import_react_hook_form4.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    import_react_hook_form4.Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        OTPInput_default,
+        {
+          length,
+          onChange: field.onChange,
+          onComplete: (otp) => setValue(name, otp),
+          error: Boolean(error2),
+          helperText: error2?.message ?? helperText,
+          ...rest
+        }
+      )
+    }
+  );
+};
+
+// src/components/HookForm/RHFTextField.tsx
+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 RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
-  const { control } = (0, import_react_hook_form4.useFormContext)();
+  const { control } = (0, import_react_hook_form5.useFormContext)();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-    import_react_hook_form4.Controller,
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    import_react_hook_form5.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        import_TextField2.default,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        import_TextField3.default,
         {
           ...field,
           fullWidth: true,
@@ -6896,7 +7177,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_InputAdornment2.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_IconButton4.default, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                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)(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -6914,7 +7195,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
 };
 
 // src/components/HookForm/RHFRadioGroup.tsx
-var import_react_hook_form5 = require("react-hook-form");
+var import_react_hook_form6 = require("react-hook-form");
 var import_Stack5 = __toESM(require("@mui/material/Stack"), 1);
 var import_Typography5 = __toESM(require("@mui/material/Typography"), 1);
 var import_Radio2 = __toESM(require("@mui/material/Radio"), 1);
@@ -6922,8 +7203,8 @@ var import_FormControlLabel3 = __toESM(require("@mui/material/FormControlLabel")
 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_FormHelperText3 = __toESM(require("@mui/material/FormHelperText"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_FormHelperText4 = __toESM(require("@mui/material/FormHelperText"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var RHFRadioGroup = ({
   name,
   label,
@@ -6932,16 +7213,16 @@ var RHFRadioGroup = ({
   slotProps,
   ...other
 }) => {
-  const { control } = (0, import_react_hook_form5.useFormContext)();
+  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_runtime54.jsx)(
-    import_react_hook_form5.Controller,
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    import_react_hook_form6.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_FormControl2.default, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      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)(
           import_FormLabel2.default,
           {
             id: labelledby,
@@ -6951,11 +7232,11 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_RadioGroup.default, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_RadioGroup.default, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           import_FormControlLabel3.default,
           {
             value: option.value,
-            control: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            control: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               import_Radio2.default,
               {
                 ...slotProps?.radio,
@@ -6967,9 +7248,9 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Stack5.default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Typography5.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-              option?.description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Typography5.default, { variant: "body2", color: "textBody", children: option?.description })
+            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 })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -6977,17 +7258,17 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_FormHelperText3.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_FormHelperText4.default, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
 };
 
 // src/components/HookForm/RHFAutocomplete.tsx
-var import_react_hook_form6 = require("react-hook-form");
-var import_TextField3 = __toESM(require("@mui/material/TextField"), 1);
+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_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var RHFAutocomplete = ({
   name,
   label,
@@ -6997,13 +7278,13 @@ var RHFAutocomplete = ({
   handleChange,
   ...other
 }) => {
-  const { control, setValue } = (0, import_react_hook_form6.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-    import_react_hook_form6.Controller,
+  const { control, setValue } = (0, import_react_hook_form7.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    import_react_hook_form7.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         import_Autocomplete4.default,
         {
           ...field,
@@ -7012,8 +7293,8 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            import_TextField3.default,
+          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            import_TextField4.default,
             {
               label,
               placeholder,
@@ -7031,17 +7312,17 @@ var RHFAutocomplete = ({
 };
 
 // src/components/HookForm/RHFCheckbox.tsx
-var import_react_hook_form7 = require("react-hook-form");
+var import_react_hook_form8 = require("react-hook-form");
 var import_Stack6 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box13 = __toESM(require("@mui/material/Box"), 1);
+var import_Box14 = __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);
 var import_FormLabel3 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_FormControl3 = __toESM(require("@mui/material/FormControl"), 1);
-var import_FormHelperText4 = __toESM(require("@mui/material/FormHelperText"), 1);
+var import_FormHelperText5 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_FormControlLabel4 = __toESM(require("@mui/material/FormControlLabel"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var RHFCheckbox = ({
   name,
   description,
@@ -7051,18 +7332,18 @@ var RHFCheckbox = ({
   slotProps,
   ...other
 }) => {
-  const { control } = (0, import_react_hook_form7.useFormContext)();
+  const { control } = (0, import_react_hook_form8.useFormContext)();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    import_react_hook_form7.Controller,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react_hook_form8.Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_Box13.default, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Box14.default, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_FormControlLabel4.default,
           {
-            control: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            control: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               import_Checkbox3.default,
               {
                 ...field,
@@ -7077,9 +7358,9 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_Stack6.default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: description })
+            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 })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -7088,7 +7369,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_FormHelperText4.default, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_FormHelperText5.default, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7102,15 +7383,15 @@ var RHFMultiCheckbox = ({
   row,
   ...other
 }) => {
-  const { control } = (0, import_react_hook_form7.useFormContext)();
+  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_runtime56.jsx)(
-    import_react_hook_form7.Controller,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react_hook_form8.Controller,
     {
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         import_FormControl3.default,
         {
           component: "fieldset",
@@ -7118,7 +7399,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               import_FormLabel3.default,
               {
                 component: "legend",
@@ -7127,12 +7408,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_FormGroup2.default, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_FormGroup2.default, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 import_FormControlLabel4.default,
                 {
-                  control: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  control: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                     import_Checkbox3.default,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -7150,9 +7431,9 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  label: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_Stack6.default, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography6.default, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-                    option?.description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_Typography6.default, { variant: "body2", color: "textBody", children: option?.description })
+                  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 })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -7161,8 +7442,8 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              import_FormHelperText4.default,
+            (!!error2 || helperText) && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              import_FormHelperText5.default,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
                 ...slotProps?.formHelperText,
@@ -7178,6 +7459,7 @@ var RHFMultiCheckbox = ({
 
 // src/components/HookForm/fields.ts
 var Field = {
+  OTP: RHFOTPInput,
   Switch: RHFSwitch,
   Upload: RHFUpload,
   Text: RHFTextField,
@@ -7190,29 +7472,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_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_Tooltip2.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_Tooltip2.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_IconButton5.default,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.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_Box14 = __toESM(require("@mui/material/Box"), 1);
+var import_Box15 = __toESM(require("@mui/material/Box"), 1);
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_Box14.default,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_Box15.default,
     {
       sx: {
         px: 5,
@@ -7225,17 +7507,17 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Portal.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_Portal.default, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_Box14.default,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_Box15.default,
     {
       sx: {
         right: 0,
@@ -7251,11 +7533,11 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AnimatedLogo, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Portal.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_Portal.default, { children: content });
   }
   return content;
 };
@@ -7287,10 +7569,12 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   NavArrowDown,
   NavArrowLeft,
   NavArrowRight,
+  OTPInput,
   RHFAutocomplete,
   RHFCheckbox,
   RHFMultiCheckbox,
   RHFMultiSwitch,
+  RHFOTPInput,
   RHFRadioGroup,
   RHFSwitch,
   RHFTextField,
@@ -7386,6 +7670,8 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   updateCoreWithSettings,
   useBoolean,
   useCopyToClipboard,
+  useCountdownDate,
+  useCountdownSeconds,
   useEventListener,
   useLocalStorage,
   usePopover,