dhre-ui-kit 0.0.257 → 0.0.259

package/lib/index.d.ts

@@ -18,7 +18,7 @@ interface CustomTextProps extends TextProps {
     style?: StyleProp<TextStyle>;
     textColor?: string;
 }
-declare const _default$l: (props: CustomTextProps) => React$1.JSX.Element;
+declare const _default$k: (props: CustomTextProps) => React$1.JSX.Element;
 
 interface BadgeProps {
     text?: string;
@@ -28,7 +28,7 @@ interface BadgeProps {
     iconStyle?: ViewStyle;
     handleIconPress: () => void;
 }
-declare const _default$k: (props: BadgeProps) => React$1.JSX.Element;
+declare const _default$j: (props: BadgeProps) => React$1.JSX.Element;
 
 interface BottomDrawerProps {
     isModalVisible: boolean;
@@ -74,7 +74,7 @@ interface CustomButtonProps {
     isLoading?: boolean;
 }
 
-declare const _default$j: (props: CustomButtonProps) => React$1.JSX.Element;
+declare const _default$i: (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$i: (props: Props) => React$1.JSX.Element;
+declare const _default$h: (props: Props) => React$1.JSX.Element;
 
 interface TagsProps {
     tags: string[];
@@ -366,7 +366,7 @@ interface AccordionProps {
     titleVariant?: string;
 }
 
-declare const _default$h: (props: AccordionProps) => React$1.JSX.Element;
+declare const _default$g: (props: AccordionProps) => React$1.JSX.Element;
 
 interface ToastProps {
     sucessIcon: React$1.ReactElement;
@@ -421,7 +421,7 @@ interface CustomHeaderProps {
     onRightPress?: () => void;
 }
 
-declare const _default$g: (props: CustomHeaderProps) => React$1.JSX.Element;
+declare const _default$f: (props: CustomHeaderProps) => React$1.JSX.Element;
 
 interface ListItem {
     id: string;
@@ -464,7 +464,7 @@ interface SwipableListProps {
     titleStyle?: TextStyle;
 }
 
-declare const _default$f: (props: SwipableListProps) => React$1.JSX.Element;
+declare const _default$e: (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$e: (props: CustomLoaderProps) => React$1.JSX.Element;
+declare const _default$d: (props: CustomLoaderProps) => React$1.JSX.Element;
 
-declare const _default$d: (props: {
+declare const _default$c: (props: {
     backgroundColor?: string;
     style?: ViewStyle;
 }) => React$1.JSX.Element;
@@ -507,7 +507,7 @@ interface OurOfficesButtonProps$1 {
     time?: string;
     subTitleStyle?: TextStyle;
 }
-declare const _default$c: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
+declare const _default$b: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
 
 interface ContactModalProps {
     phoneNumber: string;
@@ -517,14 +517,14 @@ interface ContactModalProps {
     data: string;
     emailSubject: string;
 }
-declare const _default$b: (props: ContactModalProps) => React$1.JSX.Element;
+declare const _default$a: (props: ContactModalProps) => React$1.JSX.Element;
 
 interface DateRangePickerProps extends CalendarProps {
     onButtonPress: (startDate: string, endDate: string) => void;
     btnTitle?: string;
 }
 
-declare const _default$a: (props: DateRangePickerProps) => React$1.JSX.Element;
+declare const _default$9: (props: DateRangePickerProps) => React$1.JSX.Element;
 
 interface OurOfficesButtonProps {
     leftIcon?: ReactElement<SvgProps>;
@@ -538,7 +538,7 @@ interface OurOfficesButtonProps {
     titleColor?: string;
     descriptionColor?: string;
 }
-declare const _default$9: (props: OurOfficesButtonProps) => React$1.JSX.Element;
+declare const _default$8: (props: OurOfficesButtonProps) => React$1.JSX.Element;
 
 interface NotificationBandgeProps {
     notificationCount?: number;
@@ -564,9 +564,9 @@ interface ScrollableListProps {
     activeTab?: string;
     errorStyle?: object;
 }
-declare const _default$8: (props: ScrollableListProps) => React$1.JSX.Element;
+declare const _default$7: (props: ScrollableListProps) => React$1.JSX.Element;
 
-declare const _default$7: (props: {
+declare const _default$6: (props: {
     title: string;
     feedback: string;
     inputText: string;
@@ -681,7 +681,7 @@ interface TagsComponentProps {
     selectedTagButton?: ViewStyle;
     unselectedTagButton?: ViewStyle;
 }
-declare const _default$6: (props: TagsComponentProps) => React$1.JSX.Element;
+declare const _default$5: (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$5: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
+declare const _default$4: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
 
 interface IProps$1 {
     length?: number;
@@ -723,7 +723,7 @@ type OTPInputHandle = {
     set?: (newOtp: string) => void;
 };
 
-declare const _default$4: (props: IProps$1 & React$1.RefAttributes<OTPInputHandle>) => React$1.JSX.Element;
+declare const OTPInput: React$1.ForwardRefExoticComponent<IProps$1 & React$1.RefAttributes<OTPInputHandle>>;
 
 type StatusType = 'Active' | 'Inactive' | 'Completed' | 'Rejected' | 'Count';
 interface IData {
@@ -1128,4 +1128,4 @@ interface RadioButtonGroupProps {
 
 declare const RadioButtonGroup: React$1.FC<RadioButtonGroupProps>;
 
-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 };
+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 };

package/lib/index.js

@@ -3986,215 +3986,221 @@ const styles$5 = reactNative.StyleSheet.create({
   }
 });
 
-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);
+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 filteredTheme = Object?.keys(theme)?.reduce(
+      (acc, key) => {
+        acc[key] = theme[key][mode];
+        return acc;
+      },
+      {}
+    );
+    const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
+    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();
-      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 () => {
+    }, []);
+    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") {
-        OTPVerify__default["default"].removeListener();
-        OTPVerify.removeListener();
+        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 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 = () => {
+      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 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
+    };
+    const handleKeyPress = (e, index) => {
+      if (e.nativeEvent.key === "Backspace" && index > 0) {
+        otpRefs.current[index - 1]?.focus();
       }
-    }
-  ), /* @__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
+    };
+    React.useEffect(() => {
+      if (otp.length === length) {
+        onComplete?.(otp);
+      }
+    }, [otp]);
+    return /* @__PURE__ */ React__default["default"].createElement(ThemeProvider, null, /* @__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.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
+        },
+        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
       },
-      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(
+      /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: resendText,
+          variant: FontStyle.L2_REGULAR,
+          style: {
+            textDecorationLine: "underline",
+            color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
+            ...resendTextStyle
+          }
+        }
+      )
+    )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        text: resendText,
+        text: errorMessage,
         variant: FontStyle.L2_REGULAR,
         style: {
-          textDecorationLine: "underline",
-          color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
-          ...resendTextStyle
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
         }
       }
-    )
-  )), 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, 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, 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 = React__default["default"].forwardRef(OTPInputComponent);
+    )) : null));
+  }
+);
 OTPInput.displayName = "OTPInput";
-var index$4 = withThemeProvider(OTPInput);
 
 const styles$4 = reactNative.StyleSheet.create({
   stepperContainer: {
@@ -4971,7 +4977,7 @@ exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
 exports.Line = Line;
 exports.NotificationBandge = NotificationBandge;
-exports.OTPInput = index$4;
+exports.OTPInput = OTPInput;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;