@web3auth/modal 10.0.0-alpha.2 → 10.0.0-beta.1

package/dist/lib.esm/packages/modal/src/ui/components/Login/LoginOtp/LoginOtp.js

@@ -0,0 +1,115 @@
+import { AUTH_CONNECTION } from '@web3auth/auth';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { getIcons } from '../../../utils.js';
+import OtpInput$1 from '../../Otp/Otp.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+/**
+ * OtpInput component
+ * @param props - OtpInputProps
+ * @returns OtpInput component
+ */
+function OtpInput(props) {
+  const {
+    setShowOtpFlow,
+    handleOtpComplete,
+    authConnection,
+    loginHint = "",
+    errorMessage,
+    otpLoading
+  } = props;
+  const isMobileOtp = useMemo(() => authConnection === AUTH_CONNECTION.SMS_PASSWORDLESS, [authConnection]);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const parsedLoginHint = useMemo(() => {
+    if (authConnection === AUTH_CONNECTION.EMAIL_PASSWORDLESS) return loginHint;
+    const [countryCode, number] = loginHint.includes("-") ? loginHint.split("-") : ["", loginHint];
+    const masked = `${number}`.slice(-Math.floor(number.length / 2)).padStart(`${number}`.length, "*");
+    return `${countryCode} ${masked}`;
+  }, [loginHint, authConnection]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
+        onClick: () => setShowOtpFlow(false),
+        children: /*#__PURE__*/jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 20 20",
+          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          children: /*#__PURE__*/jsx("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414",
+            clipRule: "evenodd"
+          })
+        })
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+      children: [/*#__PURE__*/jsx("img", {
+        src: getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light"),
+        alt: "otp",
+        className: "w3a--size-auto"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "-w3a--mt-6 w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+        children: [/*#__PURE__*/jsx("p", {
+          className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
+          children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
+          children: [/*#__PURE__*/jsx("p", {
+            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
+          }), /*#__PURE__*/jsx("p", {
+            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
+              email: parsedLoginHint
+            })
+          })]
+        })]
+      }), /*#__PURE__*/jsx(OtpInput$1, {
+        length: 6,
+        onComplete: handleOtpComplete,
+        error: Boolean(errorMessage),
+        helperText: errorMessage,
+        loading: otpLoading,
+        disabled: otpLoading
+      })]
+    })]
+  });
+}
+
+/**
+ * LoginOtp component
+ * @param props - LoginOtpProps
+ * @returns LoginOtp component
+ */
+function LoginOtp(props) {
+  const {
+    otpLoading,
+    setShowOtpFlow,
+    handleOtpComplete,
+    authConnection,
+    loginHint,
+    errorMessage
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    children: /*#__PURE__*/jsx(OtpInput, {
+      errorMessage: errorMessage,
+      setShowOtpFlow: setShowOtpFlow,
+      handleOtpComplete: handleOtpComplete,
+      authConnection: authConnection,
+      loginHint: loginHint,
+      otpLoading: otpLoading
+    })
+  });
+}
+
+export { LoginOtp as default };

package/dist/lib.esm/packages/modal/src/ui/components/Login/LoginPasswordLess/LoginPasswordLess.js

@@ -0,0 +1,115 @@
+import { useRef, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { cn, getIcons } from '../../../utils.js';
+import PulseLoader from '../../PulseLoader/PulseLoader.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function LoginPasswordLess(props) {
+  const {
+    isModalVisible,
+    isPasswordLessCtaClicked,
+    setIsPasswordLessCtaClicked,
+    title,
+    placeholder,
+    handleFormSubmit,
+    errorMessage,
+    isDark,
+    isPasswordLessLoading,
+    buttonRadius
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const onInputChange = e => {
+    setInputValue(e.target.value);
+    setIsInputFocused(true);
+  };
+  const handleEnter = e => {
+    const {
+      key
+    } = e;
+    if (key === "Enter") {
+      handleFormSubmit(inputValue);
+      setIsInputFocused(false);
+    }
+  };
+  const onFormSubmit = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleFormSubmit(inputValue);
+    setIsInputFocused(false);
+  };
+  useEffect(() => {
+    if (!isModalVisible) {
+      setIsPasswordLessCtaClicked(false);
+    }
+  }, [isModalVisible, setIsPasswordLessCtaClicked]);
+  useEffect(() => {
+    if (isPasswordLessCtaClicked) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    }
+  }, [isPasswordLessCtaClicked]);
+  if (!isPasswordLessCtaClicked) {
+    return /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: cn("w3a--btn !w3a--justify-between", {
+        "w3a--rounded-full": buttonRadius === "pill",
+        "w3a--rounded-lg": buttonRadius === "rounded",
+        "w3a--rounded-none": buttonRadius === "square"
+      }),
+      onClick: () => {
+        setIsPasswordLessCtaClicked(true);
+      },
+      children: /*#__PURE__*/jsx("p", {
+        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: t("modal.passwordless.title", {
+          title
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: cn("w3a--input", isInputFocused && "!w3a--border-app-primary-600", {
+        "w3a--rounded-full": buttonRadius === "pill",
+        "w3a--rounded-lg": buttonRadius === "rounded",
+        "w3a--rounded-none": buttonRadius === "square"
+      }),
+      children: [/*#__PURE__*/jsx("input", {
+        ref: inputRef,
+        onInput: onInputChange,
+        value: inputValue,
+        placeholder: placeholder,
+        onFocus: () => {
+          setIsInputFocused(true);
+        },
+        onBlur: e => {
+          e.target.placeholder = `${placeholder}`;
+          setIsInputFocused(false);
+        },
+        type: "text",
+        className: cn("w3a--w-full w3a--appearance-none w3a--bg-transparent w3a--text-app-gray-900 w3a--outline-none placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 focus:w3a--outline-none active:w3a--outline-none dark:w3a--text-app-white dark:placeholder:w3a--text-app-gray-500"),
+        onKeyDown: e => handleEnter(e),
+        disabled: isPasswordLessLoading
+      }), isPasswordLessLoading && /*#__PURE__*/jsx(PulseLoader, {}), inputValue && !isPasswordLessLoading && /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: "w3a--icon-animation w3a--appearance-none",
+        onClick: onFormSubmit,
+        children: /*#__PURE__*/jsx("img", {
+          src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+          alt: "arrow"
+        })
+      })]
+    }), errorMessage && !isInputFocused && isPasswordLessCtaClicked && /*#__PURE__*/jsx("p", {
+      className: "w3a--w-full w3a--pl-6 w3a--text-start w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400",
+      children: errorMessage
+    })]
+  });
+}
+
+export { LoginPasswordLess as default };

package/dist/lib.esm/packages/modal/src/ui/components/LoginHint/LoginHint.js

@@ -0,0 +1,50 @@
+import { useState, useMemo } from 'react';
+import { cn } from '../../utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const LoginHint = ({
+  children,
+  content,
+  isDark = false,
+  hideHint = false
+}) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const handleMouseEnter = () => {
+    setShowPopover(true);
+  };
+  const handleMouseLeave = () => {
+    setShowPopover(false);
+  };
+  const triangleStyle = useMemo(() => {
+    const triangleSize = "8px"; // Customize the size of the triangle
+    const triangleColor = isDark ? "#ffffff" : "#1f2a37"; // Customize the color of the triangle
+    return {
+      borderTop: `${triangleSize} solid transparent`,
+      borderRight: "none",
+      borderBottom: `${triangleSize} solid transparent`,
+      borderLeft: `${triangleSize} solid ${triangleColor}`,
+      left: "0%",
+      top: `calc(100% - ${triangleSize})`
+    };
+  }, [isDark]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--relative",
+    "aria-hidden": true,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    onClick: handleMouseLeave,
+    children: [children, showPopover && !hideHint && /*#__PURE__*/jsxs("div", {
+      "data-popover": true,
+      role: "tooltip",
+      className: cn("w3a--absolute w3a--z-[45] w3a--shadow-2xl w3a--rounded-lg w3a--bottom-[100%] w3a--left-[50%] w3a--w-max w3a--text-xs w3a--px-[6px] w3a--py-[3px]", isDark ? "w3a--bg-app-white w3a--text-app-gray-900" : "w3a--bg-app-gray-800 w3a--text-app-gray-100"),
+      children: [content, /*#__PURE__*/jsx("div", {
+        className: "w3a--absolute",
+        style: triangleStyle
+      })]
+    })]
+  });
+};
+
+export { LoginHint as default };

package/dist/lib.esm/packages/modal/src/ui/components/Modal/Modal.js

@@ -0,0 +1,85 @@
+import { useState, useEffect, useMemo } from 'react';
+import { cn } from '../../utils.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * Modal component
+ * @param props - ModalProps
+ * @returns Modal component
+ */
+function Modal(props) {
+  const {
+    children,
+    open,
+    onClose,
+    placement = "center",
+    padding = true,
+    shadow = true,
+    border = false,
+    showCloseIcon = true,
+    borderRadius = "large"
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+      // Give a very small delay for the animation to start from the correct position
+      setTimeout(() => {
+        setIsOpen(true);
+      }, 50);
+    } else {
+      setIsOpen(false);
+      // Remove overflow styling to enable scroll again.
+      document.body.style.overflow = "";
+    }
+  }, [open]);
+  const positions = useMemo(() => ({
+    center: "w3a--top-0 w3a--left-0 w3a--items-center w3a--justify-center",
+    "top-center": "w3a--top-8 w3a--left-0 w3a--items-start w3a--justify-center",
+    "bottom-center": "w3a--bottom-8 w3a--left-0 w3a--items-end w3a--justify-center",
+    left: "sm:w3a--left-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-start",
+    right: "sm:w3a--right-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-end"
+  }), []);
+  const placementClass = useMemo(() => positions[placement], [placement, positions]);
+  const onCloseHandler = () => {
+    if (onClose) onClose();
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: cn("w3a--fixed w3a--z-50 w3a--overflow-hidden w3a--flex w3a--transition-all", placementClass, {
+      "w3a--w-screen w3a--h-screen": isOpen,
+      "w3a--w-0 w3a--h-0 w3a--delay-500": !isOpen
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--w-[356px] [@media(min-width:375px)]:w3a--w-[393px] w3a--h-auto w3a--flex w3a--flex-col w3a--duration-500", {
+        "w3a--translate-y-0 w3a--delay-100": isOpen,
+        "w3a--translate-y-[100vh]": !isOpen,
+        "w3a--p-4": padding,
+        "w3a--shadow-xl sm:w3a--shadow-lg": shadow,
+        "w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": border,
+        "w3a--rounded-[30px]": borderRadius === "large",
+        "w3a--rounded-2xl": borderRadius === "medium",
+        "w3a--rounded-none": borderRadius === "small"
+      }),
+      children: [showCloseIcon && /*#__PURE__*/jsx("div", {
+        className: "w3a--absolute w3a--right-6 w3a--top-[30px] w3a--z-10 w3a--cursor-pointer",
+        children: /*#__PURE__*/jsx("svg", {
+          width: "13",
+          height: "13",
+          viewBox: "0 0 13 13",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          onClick: onCloseHandler,
+          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          children: /*#__PURE__*/jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M0.292787 1.29299C0.480314 1.10552 0.734622 1.0002 0.999786 1.0002C1.26495 1.0002 1.51926 1.10552 1.70679 1.29299L5.99979 5.58599L10.2928 1.29299C10.385 1.19748 10.4954 1.1213 10.6174 1.06889C10.7394 1.01648 10.8706 0.988893 11.0034 0.987739C11.1362 0.986585 11.2678 1.01189 11.3907 1.06217C11.5136 1.11245 11.6253 1.1867 11.7192 1.28059C11.8131 1.37449 11.8873 1.48614 11.9376 1.60904C11.9879 1.73193 12.0132 1.86361 12.012 1.99639C12.0109 2.12917 11.9833 2.26039 11.9309 2.38239C11.8785 2.5044 11.8023 2.61474 11.7068 2.70699L7.41379 6.99999L11.7068 11.293C11.8889 11.4816 11.9897 11.7342 11.9875 11.9964C11.9852 12.2586 11.88 12.5094 11.6946 12.6948C11.5092 12.8802 11.2584 12.9854 10.9962 12.9877C10.734 12.9899 10.4814 12.8891 10.2928 12.707L5.99979 8.41399L1.70679 12.707C1.51818 12.8891 1.26558 12.9899 1.00339 12.9877C0.741188 12.9854 0.490376 12.8802 0.304968 12.6948C0.11956 12.5094 0.0143906 12.2586 0.0121121 11.9964C0.00983372 11.7342 0.110629 11.4816 0.292787 11.293L4.58579 6.99999L0.292787 2.70699C0.105316 2.51946 0 2.26515 0 1.99999C0 1.73483 0.105316 1.48052 0.292787 1.29299V1.29299Z",
+            fill: "currentColor"
+          })
+        })
+      }), children]
+    })
+  });
+}
+
+export { Modal as default };

package/dist/lib.esm/packages/modal/src/ui/components/Otp/Otp.js

@@ -0,0 +1,188 @@
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../localeImport.js';
+import { cn } from '../../utils.js';
+import PulseLoader from '../PulseLoader/PulseLoader.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const OtpInput = /*#__PURE__*/forwardRef(({
+  length,
+  loading,
+  resendTimer = 60,
+  onComplete,
+  onChange,
+  error = false,
+  success = false,
+  disabled = false,
+  classes,
+  helperText = "",
+  onResendTimer,
+  showCta = true,
+  showTimer = true,
+  autoFocus = false,
+  placeholder = "",
+  autoComplete = "one-time-code",
+  type = "text",
+  resendBtnText = ""
+}, ref) => {
+  const [otpArray, setOtpArray] = useState(Array(length).fill(""));
+  const [timer, setTimer] = useState(resendTimer !== null && resendTimer !== void 0 ? resendTimer : 0);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const inputRefs = useRef([]);
+  const isInputValueValid = value => {
+    return /^\d$/.test(value) && value.trim().length === 1;
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" || e.key === "Delete") {
+      e.preventDefault();
+      const newOtpArray = [...otpArray];
+      if (otpArray[index] !== "") {
+        newOtpArray[index] = "";
+      } else if (index > 0) {
+        var _inputRefs$current;
+        (_inputRefs$current = inputRefs.current[index - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.focus();
+        newOtpArray[index - 1] = "";
+      }
+      setOtpArray(newOtpArray);
+      if (onChange) onChange(newOtpArray.join(""));
+    } else if (e.key === "ArrowLeft") {
+      var _inputRefs$current2;
+      e.preventDefault();
+      (_inputRefs$current2 = inputRefs.current[index - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
+    } else if (e.key === "ArrowRight") {
+      var _inputRefs$current3;
+      e.preventDefault();
+      (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
+    } else if (e.key === " " || e.key === "Spacebar" || e.key === "Space" || !isInputValueValid(e.key) && inputRefs.current[index + 1]) {
+      e.preventDefault();
+      inputRefs.current[index + 1].value = "";
+    }
+  };
+  const handleInputChange = (e, index) => {
+    e.preventDefault();
+    const {
+      value
+    } = e.target;
+    if (value && value.length > 1 && value.length === length) {
+      var _inputRefs$current4;
+      const pastedOtp = value.split("");
+      const newOtpArray = [...otpArray];
+      pastedOtp.forEach((key, idx) => {
+        newOtpArray[idx] = key;
+      });
+      setOtpArray(newOtpArray);
+      (_inputRefs$current4 = inputRefs.current[pastedOtp.length === length ? length - 1 : pastedOtp.length]) === null || _inputRefs$current4 === void 0 || _inputRefs$current4.focus();
+      if (onComplete && length === newOtpArray.length) onComplete(newOtpArray.join(""));
+    } else if (isInputValueValid(value)) {
+      const newOtpArray = [...otpArray].slice(0, length);
+      newOtpArray[index] = value;
+      setOtpArray(newOtpArray);
+      const otp = newOtpArray.join("");
+      // Move focus to the next input
+      if (index < length - 1 && inputRefs.current[index + 1]) {
+        var _inputRefs$current5;
+        (_inputRefs$current5 = inputRefs.current[index + 1]) === null || _inputRefs$current5 === void 0 || _inputRefs$current5.focus();
+      }
+      if (onChange) onChange(value);
+      if (onComplete && length === otp.length) onComplete(otp);
+    }
+  };
+  const handlePaste = e => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").slice(0, length);
+    if (pastedData && /^\d+$/.test(pastedData)) {
+      var _inputRefs$current6;
+      const pastedOtp = pastedData.split("");
+      const newOtpArray = [...otpArray];
+      pastedOtp.forEach((key, index) => {
+        newOtpArray[index] = key;
+      });
+      setOtpArray(newOtpArray);
+      (_inputRefs$current6 = inputRefs.current[pastedOtp.length === length ? length - 1 : pastedOtp.length]) === null || _inputRefs$current6 === void 0 || _inputRefs$current6.focus();
+      if (onComplete && length === newOtpArray.length) onComplete(newOtpArray.join(""));
+    }
+  };
+  const handleResendClick = () => {
+    setTimer(resendTimer || 0);
+    if (onResendTimer) onResendTimer();
+  };
+  useEffect(() => {
+    let interval = null;
+    // Start the resend timer
+    if (showCta && showTimer) {
+      interval = window.setInterval(() => {
+        if (timer > 0) {
+          setTimer(prev => prev - 1);
+        } else {
+          clearInterval(interval);
+        }
+      }, 1000);
+    }
+    return () => {
+      clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timer]);
+  useEffect(() => {
+    if (inputRefs && autoFocus) {
+      var _inputRefs$current7;
+      (_inputRefs$current7 = inputRefs.current) === null || _inputRefs$current7 === void 0 || _inputRefs$current7[0].focus();
+    }
+  }, [autoFocus]);
+  const helperTextClass = cn("w3a--text-xs w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-white w3a--mt-2", {
+    "w3a--text-app-red-500 dark:w3a--text-app-red-400": error,
+    "w3a--text-app-green-500 dark:w3a--text-app-green-400": success
+  }, classes === null || classes === void 0 ? void 0 : classes.helperText);
+  const inputKey = new Date().getFullYear();
+  return /*#__PURE__*/jsxs("div", {
+    className: cn("w3a--flex w3a--flex-col w3a--items-center", classes === null || classes === void 0 ? void 0 : classes.root),
+    ref: ref,
+    children: [/*#__PURE__*/jsx("form", {
+      className: cn("w3a--flex w3a--space-x-2", classes === null || classes === void 0 ? void 0 : classes.inputContainer),
+      children: otpArray.map((digit, index) => {
+        var _classes$success, _classes$error, _classes$disabled;
+        return /*#__PURE__*/jsx("input", {
+          id: `${inputKey + index}`,
+          type: type,
+          value: digit,
+          autoComplete: autoComplete,
+          placeholder: Array.isArray(placeholder) ? placeholder[index] : placeholder,
+          inputMode: "numeric",
+          onInput: e => handleInputChange(e, index),
+          onKeyUp: e => handleKeyDown(e, index),
+          onPaste: handlePaste,
+          className: cn("w3a--w-12 w3a--h-[42px] w3a--rounded-full w3a--border w3a--text-center w3a--text-xl w3a--focus:outline-none w3a--active:outline-none w3a--focus:border-app-primary-600 dark:w3a--focus:border-app-primary-500 w3a--border-app-gray-300 dark:w3a--border-app-gray-500 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white", success && ((_classes$success = classes === null || classes === void 0 ? void 0 : classes.success) !== null && _classes$success !== void 0 ? _classes$success : "w3a--border-app-green-400 dark:w3a--border-app-green-500 w3a--focus:w3a--border-app-green-400 dark:w3a--focus:w3a--border-app-green-500"), error && ((_classes$error = classes === null || classes === void 0 ? void 0 : classes.error) !== null && _classes$error !== void 0 ? _classes$error : "w3a--border-app-red-600 dark:w3a--border-app-red-500 w3a--focus:w3a--border-app-red-600 dark:w3a--focus:w3a--border-app-red-500"), disabled && ((_classes$disabled = classes === null || classes === void 0 ? void 0 : classes.disabled) !== null && _classes$disabled !== void 0 ? _classes$disabled : "w3a--border-app-gray-200 w3a--bg-app-gray-200 dark:w3a--border-app-gray-700 w3a--focus:w3a--border-app-gray-200 dark:w3a--focus:w3a--border-app-gray-700 w3a--cursor-not-allowed"), classes === null || classes === void 0 ? void 0 : classes.input),
+          ref: el => {
+            inputRefs.current[index] = el;
+          },
+          disabled: disabled
+        }, `${inputKey + index}`);
+      })
+    }), helperText && /*#__PURE__*/jsx("p", {
+      className: helperTextClass,
+      children: helperText
+    }), loading && /*#__PURE__*/jsx("div", {
+      className: "w3a--mt-3",
+      children: /*#__PURE__*/jsx(PulseLoader, {})
+    }), showCta && !loading && /*#__PURE__*/jsx("div", {
+      className: cn("w3a--flex w3a--items-center w3a--mt-3", classes === null || classes === void 0 ? void 0 : classes.ctaContainer),
+      children: timer > 0 && showTimer ? /*#__PURE__*/jsx("span", {
+        className: cn("w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400", classes === null || classes === void 0 ? void 0 : classes.timerText),
+        children: t("modal.resendTimer", {
+          timer: timer
+        })
+      }) : /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: cn("w3a--text-xs w3a--p-0 w3a--text-app-primary-600 dark:w3a--text-app-primary-500", classes === null || classes === void 0 ? void 0 : classes.resendBtnText),
+        onClick: handleResendClick,
+        disabled: timer > 0 && showTimer,
+        children: resendBtnText || t("modal.resendCode")
+      })
+    })]
+  });
+});
+OtpInput.displayName = "OtpInput";
+
+export { OtpInput as default };

package/dist/lib.esm/packages/modal/src/ui/components/PulseLoader/PulseLoader.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PulseLoader = () => {
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--animate-circle w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200"
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--animate-circle w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400"
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--animate-circle w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600"
+    })]
+  });
+};
+
+export { PulseLoader as default };