dhre-ui-kit 0.0.256 → 0.0.258

package/lib/index.d.ts

@@ -18,7 +18,7 @@ interface CustomTextProps extends TextProps {
     style?: StyleProp<TextStyle>;
     textColor?: string;
 }
-declare const _default$k: (props: CustomTextProps) => React$1.JSX.Element;
+declare const _default$l: (props: CustomTextProps) => React$1.JSX.Element;
 
 interface BadgeProps {
     text?: string;
@@ -28,7 +28,7 @@ interface BadgeProps {
     iconStyle?: ViewStyle;
     handleIconPress: () => void;
 }
-declare const _default$j: (props: BadgeProps) => React$1.JSX.Element;
+declare const _default$k: (props: BadgeProps) => React$1.JSX.Element;
 
 interface BottomDrawerProps {
     isModalVisible: boolean;
@@ -74,7 +74,7 @@ interface CustomButtonProps {
     isLoading?: boolean;
 }
 
-declare const _default$i: (props: CustomButtonProps) => React$1.JSX.Element;
+declare const _default$j: (props: CustomButtonProps) => React$1.JSX.Element;
 
 interface CardsProps {
     topLeftTitle?: string;
@@ -327,7 +327,7 @@ interface Props {
     onSelectionChange?: (selected: string[]) => void;
     style?: ViewStyle;
 }
-declare const _default$h: (props: Props) => React$1.JSX.Element;
+declare const _default$i: (props: Props) => React$1.JSX.Element;
 
 interface TagsProps {
     tags: string[];
@@ -366,7 +366,7 @@ interface AccordionProps {
     titleVariant?: string;
 }
 
-declare const _default$g: (props: AccordionProps) => React$1.JSX.Element;
+declare const _default$h: (props: AccordionProps) => React$1.JSX.Element;
 
 interface ToastProps {
     sucessIcon: React$1.ReactElement;
@@ -421,7 +421,7 @@ interface CustomHeaderProps {
     onRightPress?: () => void;
 }
 
-declare const _default$f: (props: CustomHeaderProps) => React$1.JSX.Element;
+declare const _default$g: (props: CustomHeaderProps) => React$1.JSX.Element;
 
 interface ListItem {
     id: string;
@@ -464,7 +464,7 @@ interface SwipableListProps {
     titleStyle?: TextStyle;
 }
 
-declare const _default$e: (props: SwipableListProps) => React$1.JSX.Element;
+declare const _default$f: (props: SwipableListProps) => React$1.JSX.Element;
 
 interface TypoTextProps extends TextProps {
     variant: keyof typeof FONT_STYLES;
@@ -490,9 +490,9 @@ interface CustomLoaderProps {
     loadingText?: string;
 }
 
-declare const _default$d: (props: CustomLoaderProps) => React$1.JSX.Element;
+declare const _default$e: (props: CustomLoaderProps) => React$1.JSX.Element;
 
-declare const _default$c: (props: {
+declare const _default$d: (props: {
     backgroundColor?: string;
     style?: ViewStyle;
 }) => React$1.JSX.Element;
@@ -507,7 +507,7 @@ interface OurOfficesButtonProps$1 {
     time?: string;
     subTitleStyle?: TextStyle;
 }
-declare const _default$b: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
+declare const _default$c: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
 
 interface ContactModalProps {
     phoneNumber: string;
@@ -517,14 +517,14 @@ interface ContactModalProps {
     data: string;
     emailSubject: string;
 }
-declare const _default$a: (props: ContactModalProps) => React$1.JSX.Element;
+declare const _default$b: (props: ContactModalProps) => React$1.JSX.Element;
 
 interface DateRangePickerProps extends CalendarProps {
     onButtonPress: (startDate: string, endDate: string) => void;
     btnTitle?: string;
 }
 
-declare const _default$9: (props: DateRangePickerProps) => React$1.JSX.Element;
+declare const _default$a: (props: DateRangePickerProps) => React$1.JSX.Element;
 
 interface OurOfficesButtonProps {
     leftIcon?: ReactElement<SvgProps>;
@@ -538,7 +538,7 @@ interface OurOfficesButtonProps {
     titleColor?: string;
     descriptionColor?: string;
 }
-declare const _default$8: (props: OurOfficesButtonProps) => React$1.JSX.Element;
+declare const _default$9: (props: OurOfficesButtonProps) => React$1.JSX.Element;
 
 interface NotificationBandgeProps {
     notificationCount?: number;
@@ -564,9 +564,9 @@ interface ScrollableListProps {
     activeTab?: string;
     errorStyle?: object;
 }
-declare const _default$7: (props: ScrollableListProps) => React$1.JSX.Element;
+declare const _default$8: (props: ScrollableListProps) => React$1.JSX.Element;
 
-declare const _default$6: (props: {
+declare const _default$7: (props: {
     title: string;
     feedback: string;
     inputText: string;
@@ -681,7 +681,7 @@ interface TagsComponentProps {
     selectedTagButton?: ViewStyle;
     unselectedTagButton?: ViewStyle;
 }
-declare const _default$5: (props: TagsComponentProps) => React$1.JSX.Element;
+declare const _default$6: (props: TagsComponentProps) => React$1.JSX.Element;
 
 interface CustomDocumentPickerProps {
     onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
@@ -697,7 +697,7 @@ interface CustomDocumentPickerProps {
     deleteIcon: React$1.ReactElement;
 }
 
-declare const _default$4: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
+declare const _default$5: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
 
 interface IProps$1 {
     length?: number;
@@ -718,12 +718,8 @@ interface IProps$1 {
     timerToResend?: number;
     timerIcon?: React.ReactElement;
 }
-type OTPInputHandle = {
-    reset?: () => void;
-    set?: (newOtp: string) => void;
-};
 
-declare const OTPInput: React$1.ForwardRefExoticComponent<IProps$1 & React$1.RefAttributes<OTPInputHandle>>;
+declare const _default$4: React$1.ForwardRefExoticComponent<IProps$1 & React$1.RefAttributes<unknown>>;
 
 type StatusType = 'Active' | 'Inactive' | 'Completed' | 'Rejected' | 'Count';
 interface IData {
@@ -1128,4 +1124,4 @@ interface RadioButtonGroupProps {
 
 declare const RadioButtonGroup: React$1.FC<RadioButtonGroupProps>;
 
-export { _default$g as Accordion, _default$1 as AppointmentCard, _default$j as Badge, BottomDrawer, _default$i as Button, Cards, _default$7 as Category, Checkbox as CheckBox, _default$a as ContactModel, CountryDropDown as CountryPicker, _default$4 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$f as CustomHeader, type CustomHeaderProps, CustomIcon, _default$d as CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$k as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$9 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$6 as FeedbackForm, FileUpload, FontStyle, _default$c as Line, NotificationBandge, OTPInput, _default$8 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$5 as SingleSelectionTags, type SlideButtonHandle, Star as StarRating, _default$3 as Stepper, _default$e as SwipableList, _default$h as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$b as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { _default$h as Accordion, _default$1 as AppointmentCard, _default$k as Badge, BottomDrawer, _default$j as Button, Cards, _default$8 as Category, Checkbox as CheckBox, _default$b as ContactModel, CountryDropDown as CountryPicker, _default$5 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$g as CustomHeader, type CustomHeaderProps, CustomIcon, _default$e as CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$l as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$a as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$7 as FeedbackForm, FileUpload, FontStyle, _default$d as Line, NotificationBandge, _default$4 as OTPInput, _default$9 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$6 as SingleSelectionTags, type SlideButtonHandle, Star as StarRating, _default$3 as Stepper, _default$f as SwipableList, _default$i as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$c as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };

package/lib/index.js

@@ -3986,205 +3986,214 @@ const styles$5 = reactNative.StyleSheet.create({
   }
 });
 
-const OTPInput = React__default["default"].forwardRef(
-  ({
-    length = 4,
-    onComplete,
-    resendOTP,
-    errorMessage,
-    testId = "",
-    otpContainerStyle,
-    otpHeaderTextStyle,
-    textInputStyle,
-    resendTextStyle,
-    resendOtpColor,
-    label = "OTP",
-    resendText = "Resend OTP",
-    mode,
-    disabled,
-    maxResendCount = 2,
-    timerToResend = 6e4,
-    timerIcon
-  }, ref) => {
-    const [otp, setOTP] = React.useState("");
-    const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
-    const [activeInput, setActiveInput] = React.useState(null);
-    const [resendOTPCount, setResendOTPCount] = React.useState(0);
-    const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
-    const [timeLeft, setTimeLeft] = React.useState(60);
-    React.useEffect(() => {
-      let timer;
-      if (!isResendOtpEnable && timeLeft > 0) {
-        timer = setInterval(() => {
-          setTimeLeft((prevTime) => prevTime - 1);
-        }, 1e3);
-      } else if (timeLeft === 0) {
-        clearInterval(timer);
-      }
-      return () => clearInterval(timer);
-    }, [timeLeft, isResendOtpEnable]);
-    const otpRefs = React.useRef(Array(length).fill(null));
-    React.useEffect(() => {
+const OTPInputComponent = ({
+  length = 4,
+  onComplete,
+  resendOTP,
+  errorMessage,
+  testId = "",
+  otpContainerStyle,
+  otpHeaderTextStyle,
+  textInputStyle,
+  resendTextStyle,
+  resendOtpColor,
+  label = "OTP",
+  resendText = "Resend OTP",
+  mode,
+  disabled,
+  maxResendCount = 2,
+  timerToResend = 6e4,
+  timerIcon
+}, ref) => {
+  const [otp, setOTP] = React.useState("");
+  const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
+  const [activeInput, setActiveInput] = React.useState(null);
+  const [resendOTPCount, setResendOTPCount] = React.useState(0);
+  const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
+  const filteredTheme = mode ? theme[mode] : theme;
+  const { theme: theme$1 } = useTheme() || { theme: filteredTheme };
+  const [timeLeft, setTimeLeft] = React.useState(60);
+  React.useEffect(() => {
+    let timer;
+    if (!isResendOtpEnable && timeLeft > 0) {
+      timer = setInterval(() => {
+        setTimeLeft((prevTime) => prevTime - 1);
+      }, 1e3);
+    } else if (timeLeft === 0) {
+      clearInterval(timer);
+    }
+    return () => clearInterval(timer);
+  }, [timeLeft, isResendOtpEnable]);
+  const otpRefs = React.useRef(Array(length).fill(null));
+  React.useEffect(() => {
+    enableResendOtp();
+  }, []);
+  const onClickResendOTP = () => {
+    if (resendOTPCount > maxResendCount - 1) {
+      setErrorMessageMaxReachCount(
+        "You have exceeded the maximum number of attempts."
+      );
+    }
+    if (resendOTPCount < maxResendCount) {
+      setIsResendOtpEnable(false);
+      setResendOTPCount(resendOTPCount + 1);
       enableResendOtp();
-    }, []);
-    const onClickResendOTP = () => {
-      if (resendOTPCount > maxResendCount - 1) {
-        setErrorMessageMaxReachCount(
-          "You have exceeded the maximum number of attempts."
-        );
-      }
-      if (resendOTPCount < maxResendCount) {
-        setIsResendOtpEnable(false);
-        setResendOTPCount(resendOTPCount + 1);
-        enableResendOtp();
-        resendOTP?.();
-        setOTP("");
-      }
-    };
-    const disableResendButton = () => {
-      return disabled || resendOTPCount >= maxResendCount;
-    };
-    const enableResendOtp = () => {
-      setTimeout(() => {
-        setIsResendOtpEnable(true);
-        setTimeLeft(timerToResend / 1e3);
-      }, timerToResend);
-    };
-    React.useEffect(() => {
-      if (reactNative.Platform.OS === "android") {
-        onStartListeningOtp();
-      }
-      return () => {
-        if (reactNative.Platform.OS === "android") {
-          OTPVerify__default["default"].removeListener();
-          OTPVerify.removeListener();
-        }
-      };
-    }, []);
-    const onStartListeningOtp = async () => {
-      await OTPVerify__default["default"].getOtp();
-      OTPVerify.startOtpListener((message) => {
-        const otpRegex = new RegExp(`(\\d{${length}})`, "g");
-        const otp2 = otpRegex.exec(message)?.[1];
-        setOTP(otp2 ?? "");
-        if (otp2) {
-          otpRefs.current[otp2?.length - 1]?.focus();
-        }
-      });
-    };
-    const reset = () => {
+      resendOTP?.();
       setOTP("");
-      otpRefs.current[0]?.focus();
-    };
-    React__default["default"].useImperativeHandle(ref, () => ({
-      reset
-    }));
-    const handleChange = (index, value) => {
-      const regex = /^\d+$/;
-      if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
-        const newOTP = `${otp}${value}`;
-        setOTP(newOTP);
-        otpRefs.current[index + 1]?.focus();
-      } else if (value.length === 0 && index > 0) {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        otpRefs.current[index - 1]?.focus();
-      } else if (value?.length === length) {
-        setOTP(value);
-        otpRefs.current[length - 1]?.focus();
-      } else {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        otpRefs.current[index]?.focus();
-      }
-    };
-    const handleKeyPress = (e, index) => {
-      if (e.nativeEvent.key === "Backspace" && index > 0) {
-        otpRefs.current[index - 1]?.focus();
+    }
+  };
+  const disableResendButton = () => {
+    return disabled || resendOTPCount >= maxResendCount;
+  };
+  const enableResendOtp = () => {
+    setTimeout(() => {
+      setIsResendOtpEnable(true);
+      setTimeLeft(timerToResend / 1e3);
+    }, timerToResend);
+  };
+  React.useEffect(() => {
+    if (reactNative.Platform.OS === "android") {
+      onStartListeningOtp();
+    }
+    return () => {
+      if (reactNative.Platform.OS === "android") {
+        OTPVerify__default["default"].removeListener();
+        OTPVerify.removeListener();
       }
     };
-    React.useEffect(() => {
-      if (otp.length === length) {
-        onComplete?.(otp);
-      }
-    }, [otp]);
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
-      {
-        text: label,
-        variant: FontStyle.B4_REGULAR,
-        style: {
-          textAlign: "left",
-          ...otpHeaderTextStyle
-        }
-      }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.TextInput,
-      {
-        key: index?.toString(),
-        style: {
-          ...styles$5.textInputStyle,
-          ...textInputStyle
-        },
-        onFocus: () => setActiveInput(index),
-        onBlur: () => setActiveInput(null),
-        onKeyPress: (e) => handleKeyPress(e, index),
-        onChangeText: (text) => handleChange(index, text),
-        value: otp[index] ? "\u25CF" : "",
-        placeholder: "",
-        keyboardType: "numeric",
-        ref: (el) => otpRefs.current[index] = el,
-        returnKeyType: otp.length === length ? "done" : "next",
-        importantForAutofill: "yes",
-        textContentType: "oneTimeCode",
-        autoComplete: "sms-otp"
+  }, []);
+  const onStartListeningOtp = async () => {
+    await OTPVerify__default["default"].getOtp();
+    OTPVerify.startOtpListener((message) => {
+      const otpRegex = new RegExp(`(\\d{${length}})`, "g");
+      const otp2 = otpRegex.exec(message)?.[1];
+      setOTP(otp2 ?? "");
+      if (otp2) {
+        otpRefs.current[otp2?.length - 1]?.focus();
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
-      {
-        text: `00:${timeLeft} secs`,
-        variant: FontStyle.L1_REGULAR
+    });
+  };
+  const reset = () => {
+    setOTP("");
+    otpRefs.current[0]?.focus();
+  };
+  React__default["default"].useImperativeHandle(ref, () => ({
+    reset
+  }));
+  const handleChange = (index, value) => {
+    const regex = /^\d+$/;
+    if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
+      const newOTP = `${otp}${value}`;
+      setOTP(newOTP);
+      otpRefs.current[index + 1]?.focus();
+    } else if (value.length === 0 && index > 0) {
+      const newOTP = otp.slice(0, -1);
+      setOTP(newOTP);
+      otpRefs.current[index - 1]?.focus();
+    } else if (value?.length === length) {
+      setOTP(value);
+      otpRefs.current[length - 1]?.focus();
+    } else {
+      const newOTP = otp.slice(0, -1);
+      setOTP(newOTP);
+      otpRefs.current[index]?.focus();
+    }
+  };
+  const handleKeyPress = (e, index) => {
+    if (e.nativeEvent.key === "Backspace" && index > 0) {
+      otpRefs.current[index - 1]?.focus();
+    }
+  };
+  React.useEffect(() => {
+    if (otp.length === length) {
+      onComplete?.(otp);
+    }
+  }, [otp]);
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
+    {
+      text: label,
+      variant: FontStyle.B4_REGULAR,
+      style: {
+        color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
+        textAlign: "left",
+        ...otpHeaderTextStyle
       }
-    )), /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Pressable,
-      {
-        onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
-        disabled: disableResendButton() || !isResendOtpEnable
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.TextInput,
+    {
+      key: index?.toString(),
+      style: {
+        ...styles$5.textInputStyle,
+        color: theme$1.CONTENT_PRIMARY,
+        borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
+        ...textInputStyle
       },
-      /* @__PURE__ */ React__default["default"].createElement(
-        CustomTypography,
-        {
-          text: resendText,
-          variant: FontStyle.L2_REGULAR,
-          style: {
-            textDecorationLine: "underline",
-            ...resendTextStyle
-          }
-        }
-      )
-    )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      onFocus: () => setActiveInput(index),
+      onBlur: () => setActiveInput(null),
+      onKeyPress: (e) => handleKeyPress(e, index),
+      onChangeText: (text) => handleChange(index, text),
+      value: otp[index] ? "\u25CF" : "",
+      placeholder: "",
+      keyboardType: "numeric",
+      ref: (el) => otpRefs.current[index] = el,
+      returnKeyType: otp.length === length ? "done" : "next",
+      importantForAutofill: "yes",
+      textContentType: "oneTimeCode",
+      autoComplete: "sms-otp",
+      selectionColor: theme$1.CONTENT_PRIMARY
+    }
+  ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
+    {
+      text: `00:${timeLeft} secs`,
+      variant: FontStyle.L1_REGULAR,
+      style: { color: theme$1.INFO }
+    }
+  )), /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.Pressable,
+    {
+      onPress: onClickResendOTP,
+      style: styles$5.resendOTPStyle,
+      disabled: disableResendButton() || !isResendOtpEnable
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        text: errorMessage,
+        text: resendText,
         variant: FontStyle.L2_REGULAR,
         style: {
-          alignSelf: "flex-start"
+          textDecorationLine: "underline",
+          color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
+          ...resendTextStyle
         }
       }
-    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
-      {
-        text: errorMessageMaxReachCount,
-        variant: FontStyle.L2_REGULAR,
-        style: {
-          alignSelf: "flex-start"
-        }
+    )
+  )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
+    {
+      text: errorMessage,
+      variant: FontStyle.L2_REGULAR,
+      style: {
+        alignSelf: "flex-start",
+        color: theme$1.ERROR
       }
-    )) : null);
-  }
-);
-OTPInput.displayName = "OTPInput";
+    }
+  )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
+    {
+      text: errorMessageMaxReachCount,
+      variant: FontStyle.L2_REGULAR,
+      style: {
+        alignSelf: "flex-start",
+        color: theme$1.ERROR
+      }
+    }
+  )) : null);
+};
+const OTPInput = withThemeProvider(OTPInputComponent);
+var index$4 = React__default["default"].forwardRef(OTPInput);
 
 const styles$4 = reactNative.StyleSheet.create({
   stepperContainer: {
@@ -4961,7 +4970,7 @@ exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
 exports.Line = Line;
 exports.NotificationBandge = NotificationBandge;
-exports.OTPInput = OTPInput;
+exports.OTPInput = index$4;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;