dhre-ui-kit 0.0.258 → 0.0.260

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.d.ts CHANGED
@@ -18,7 +18,7 @@ interface CustomTextProps extends TextProps {
18
18
  style?: StyleProp<TextStyle>;
19
19
  textColor?: string;
20
20
  }
21
- declare const _default$l: (props: CustomTextProps) => React$1.JSX.Element;
21
+ declare const _default$k: (props: CustomTextProps) => React$1.JSX.Element;
22
22
 
23
23
  interface BadgeProps {
24
24
  text?: string;
@@ -28,7 +28,7 @@ interface BadgeProps {
28
28
  iconStyle?: ViewStyle;
29
29
  handleIconPress: () => void;
30
30
  }
31
- declare const _default$k: (props: BadgeProps) => React$1.JSX.Element;
31
+ declare const _default$j: (props: BadgeProps) => React$1.JSX.Element;
32
32
 
33
33
  interface BottomDrawerProps {
34
34
  isModalVisible: boolean;
@@ -74,7 +74,7 @@ interface CustomButtonProps {
74
74
  isLoading?: boolean;
75
75
  }
76
76
 
77
- declare const _default$j: (props: CustomButtonProps) => React$1.JSX.Element;
77
+ declare const _default$i: (props: CustomButtonProps) => React$1.JSX.Element;
78
78
 
79
79
  interface CardsProps {
80
80
  topLeftTitle?: string;
@@ -327,7 +327,7 @@ interface Props {
327
327
  onSelectionChange?: (selected: string[]) => void;
328
328
  style?: ViewStyle;
329
329
  }
330
- declare const _default$i: (props: Props) => React$1.JSX.Element;
330
+ declare const _default$h: (props: Props) => React$1.JSX.Element;
331
331
 
332
332
  interface TagsProps {
333
333
  tags: string[];
@@ -366,7 +366,7 @@ interface AccordionProps {
366
366
  titleVariant?: string;
367
367
  }
368
368
 
369
- declare const _default$h: (props: AccordionProps) => React$1.JSX.Element;
369
+ declare const _default$g: (props: AccordionProps) => React$1.JSX.Element;
370
370
 
371
371
  interface ToastProps {
372
372
  sucessIcon: React$1.ReactElement;
@@ -421,7 +421,7 @@ interface CustomHeaderProps {
421
421
  onRightPress?: () => void;
422
422
  }
423
423
 
424
- declare const _default$g: (props: CustomHeaderProps) => React$1.JSX.Element;
424
+ declare const _default$f: (props: CustomHeaderProps) => React$1.JSX.Element;
425
425
 
426
426
  interface ListItem {
427
427
  id: string;
@@ -464,7 +464,7 @@ interface SwipableListProps {
464
464
  titleStyle?: TextStyle;
465
465
  }
466
466
 
467
- declare const _default$f: (props: SwipableListProps) => React$1.JSX.Element;
467
+ declare const _default$e: (props: SwipableListProps) => React$1.JSX.Element;
468
468
 
469
469
  interface TypoTextProps extends TextProps {
470
470
  variant: keyof typeof FONT_STYLES;
@@ -490,9 +490,9 @@ interface CustomLoaderProps {
490
490
  loadingText?: string;
491
491
  }
492
492
 
493
- declare const _default$e: (props: CustomLoaderProps) => React$1.JSX.Element;
493
+ declare const _default$d: (props: CustomLoaderProps) => React$1.JSX.Element;
494
494
 
495
- declare const _default$d: (props: {
495
+ declare const _default$c: (props: {
496
496
  backgroundColor?: string;
497
497
  style?: ViewStyle;
498
498
  }) => React$1.JSX.Element;
@@ -507,7 +507,7 @@ interface OurOfficesButtonProps$1 {
507
507
  time?: string;
508
508
  subTitleStyle?: TextStyle;
509
509
  }
510
- declare const _default$c: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
510
+ declare const _default$b: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
511
511
 
512
512
  interface ContactModalProps {
513
513
  phoneNumber: string;
@@ -517,14 +517,14 @@ interface ContactModalProps {
517
517
  data: string;
518
518
  emailSubject: string;
519
519
  }
520
- declare const _default$b: (props: ContactModalProps) => React$1.JSX.Element;
520
+ declare const _default$a: (props: ContactModalProps) => React$1.JSX.Element;
521
521
 
522
522
  interface DateRangePickerProps extends CalendarProps {
523
523
  onButtonPress: (startDate: string, endDate: string) => void;
524
524
  btnTitle?: string;
525
525
  }
526
526
 
527
- declare const _default$a: (props: DateRangePickerProps) => React$1.JSX.Element;
527
+ declare const _default$9: (props: DateRangePickerProps) => React$1.JSX.Element;
528
528
 
529
529
  interface OurOfficesButtonProps {
530
530
  leftIcon?: ReactElement<SvgProps>;
@@ -538,7 +538,7 @@ interface OurOfficesButtonProps {
538
538
  titleColor?: string;
539
539
  descriptionColor?: string;
540
540
  }
541
- declare const _default$9: (props: OurOfficesButtonProps) => React$1.JSX.Element;
541
+ declare const _default$8: (props: OurOfficesButtonProps) => React$1.JSX.Element;
542
542
 
543
543
  interface NotificationBandgeProps {
544
544
  notificationCount?: number;
@@ -564,9 +564,9 @@ interface ScrollableListProps {
564
564
  activeTab?: string;
565
565
  errorStyle?: object;
566
566
  }
567
- declare const _default$8: (props: ScrollableListProps) => React$1.JSX.Element;
567
+ declare const _default$7: (props: ScrollableListProps) => React$1.JSX.Element;
568
568
 
569
- declare const _default$7: (props: {
569
+ declare const _default$6: (props: {
570
570
  title: string;
571
571
  feedback: string;
572
572
  inputText: string;
@@ -681,7 +681,7 @@ interface TagsComponentProps {
681
681
  selectedTagButton?: ViewStyle;
682
682
  unselectedTagButton?: ViewStyle;
683
683
  }
684
- declare const _default$6: (props: TagsComponentProps) => React$1.JSX.Element;
684
+ declare const _default$5: (props: TagsComponentProps) => React$1.JSX.Element;
685
685
 
686
686
  interface CustomDocumentPickerProps {
687
687
  onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
@@ -697,7 +697,7 @@ interface CustomDocumentPickerProps {
697
697
  deleteIcon: React$1.ReactElement;
698
698
  }
699
699
 
700
- declare const _default$5: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
700
+ declare const _default$4: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
701
701
 
702
702
  interface IProps$1 {
703
703
  length?: number;
@@ -718,8 +718,12 @@ interface IProps$1 {
718
718
  timerToResend?: number;
719
719
  timerIcon?: React.ReactElement;
720
720
  }
721
+ type OTPInputHandle = {
722
+ reset?: () => void;
723
+ set?: (newOtp: string) => void;
724
+ };
721
725
 
722
- declare const _default$4: React$1.ForwardRefExoticComponent<IProps$1 & React$1.RefAttributes<unknown>>;
726
+ declare const OTPInput: React$1.ForwardRefExoticComponent<IProps$1 & React$1.RefAttributes<OTPInputHandle>>;
723
727
 
724
728
  type StatusType = 'Active' | 'Inactive' | 'Completed' | 'Rejected' | 'Count';
725
729
  interface IData {
@@ -1124,4 +1128,4 @@ interface RadioButtonGroupProps {
1124
1128
 
1125
1129
  declare const RadioButtonGroup: React$1.FC<RadioButtonGroupProps>;
1126
1130
 
1127
- 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 };
1131
+ 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 CHANGED
@@ -3986,214 +3986,229 @@ const styles$5 = reactNative.StyleSheet.create({
3986
3986
  }
3987
3987
  });
3988
3988
 
3989
- const OTPInputComponent = ({
3990
- length = 4,
3991
- onComplete,
3992
- resendOTP,
3993
- errorMessage,
3994
- testId = "",
3995
- otpContainerStyle,
3996
- otpHeaderTextStyle,
3997
- textInputStyle,
3998
- resendTextStyle,
3999
- resendOtpColor,
4000
- label = "OTP",
4001
- resendText = "Resend OTP",
4002
- mode,
4003
- disabled,
4004
- maxResendCount = 2,
4005
- timerToResend = 6e4,
4006
- timerIcon
4007
- }, ref) => {
4008
- const [otp, setOTP] = React.useState("");
4009
- const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
4010
- const [activeInput, setActiveInput] = React.useState(null);
4011
- const [resendOTPCount, setResendOTPCount] = React.useState(0);
4012
- const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
4013
- const filteredTheme = mode ? theme[mode] : theme;
4014
- const { theme: theme$1 } = useTheme() || { theme: filteredTheme };
4015
- const [timeLeft, setTimeLeft] = React.useState(60);
4016
- React.useEffect(() => {
4017
- let timer;
4018
- if (!isResendOtpEnable && timeLeft > 0) {
4019
- timer = setInterval(() => {
4020
- setTimeLeft((prevTime) => prevTime - 1);
4021
- }, 1e3);
4022
- } else if (timeLeft === 0) {
4023
- clearInterval(timer);
4024
- }
4025
- return () => clearInterval(timer);
4026
- }, [timeLeft, isResendOtpEnable]);
4027
- const otpRefs = React.useRef(Array(length).fill(null));
4028
- React.useEffect(() => {
4029
- enableResendOtp();
4030
- }, []);
4031
- const onClickResendOTP = () => {
4032
- if (resendOTPCount > maxResendCount - 1) {
4033
- setErrorMessageMaxReachCount(
4034
- "You have exceeded the maximum number of attempts."
4035
- );
4036
- }
4037
- if (resendOTPCount < maxResendCount) {
4038
- setIsResendOtpEnable(false);
4039
- setResendOTPCount(resendOTPCount + 1);
3989
+ const OTPInput = React__default["default"].forwardRef(
3990
+ ({
3991
+ length = 4,
3992
+ onComplete,
3993
+ resendOTP,
3994
+ errorMessage,
3995
+ testId = "",
3996
+ otpContainerStyle,
3997
+ otpHeaderTextStyle,
3998
+ textInputStyle,
3999
+ resendTextStyle,
4000
+ resendOtpColor,
4001
+ label = "OTP",
4002
+ resendText = "Resend OTP",
4003
+ mode,
4004
+ disabled,
4005
+ maxResendCount = 2,
4006
+ timerToResend = 6e4,
4007
+ timerIcon
4008
+ }, ref) => {
4009
+ const [otp, setOTP] = React.useState("");
4010
+ const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
4011
+ const [activeInput, setActiveInput] = React.useState(null);
4012
+ const [resendOTPCount, setResendOTPCount] = React.useState(0);
4013
+ const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
4014
+ const filteredTheme = Object?.keys(theme)?.reduce(
4015
+ (acc, key) => {
4016
+ acc[key] = theme[key][mode];
4017
+ return acc;
4018
+ },
4019
+ {}
4020
+ );
4021
+ const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
4022
+ const [timeLeft, setTimeLeft] = React.useState(60);
4023
+ React.useEffect(() => {
4024
+ let timer;
4025
+ if (!isResendOtpEnable && timeLeft > 0) {
4026
+ timer = setInterval(() => {
4027
+ setTimeLeft((prevTime) => prevTime - 1);
4028
+ }, 1e3);
4029
+ } else if (timeLeft === 0) {
4030
+ clearInterval(timer);
4031
+ }
4032
+ return () => clearInterval(timer);
4033
+ }, [timeLeft, isResendOtpEnable]);
4034
+ const refs = React.useRef([]);
4035
+ refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
4036
+ React.useEffect(() => {
4040
4037
  enableResendOtp();
4041
- resendOTP?.();
4042
- setOTP("");
4043
- }
4044
- };
4045
- const disableResendButton = () => {
4046
- return disabled || resendOTPCount >= maxResendCount;
4047
- };
4048
- const enableResendOtp = () => {
4049
- setTimeout(() => {
4050
- setIsResendOtpEnable(true);
4051
- setTimeLeft(timerToResend / 1e3);
4052
- }, timerToResend);
4053
- };
4054
- React.useEffect(() => {
4055
- if (reactNative.Platform.OS === "android") {
4056
- onStartListeningOtp();
4057
- }
4058
- return () => {
4038
+ }, []);
4039
+ const onClickResendOTP = () => {
4040
+ if (resendOTPCount > maxResendCount - 1) {
4041
+ setErrorMessageMaxReachCount(
4042
+ "You have exceeded the maximum number of attempts."
4043
+ );
4044
+ }
4045
+ if (resendOTPCount < maxResendCount) {
4046
+ setIsResendOtpEnable(false);
4047
+ setResendOTPCount(resendOTPCount + 1);
4048
+ enableResendOtp();
4049
+ resendOTP?.();
4050
+ setOTP("");
4051
+ }
4052
+ };
4053
+ const disableResendButton = () => {
4054
+ if (disabled === true && resendOTPCount >= maxResendCount) {
4055
+ return true;
4056
+ } else {
4057
+ return false;
4058
+ }
4059
+ };
4060
+ const enableResendOtp = () => {
4061
+ setTimeout(() => {
4062
+ setIsResendOtpEnable(true);
4063
+ setTimeLeft(timerToResend / 1e3);
4064
+ }, timerToResend);
4065
+ };
4066
+ React.useEffect(() => {
4059
4067
  if (reactNative.Platform.OS === "android") {
4060
- OTPVerify__default["default"].removeListener();
4061
- OTPVerify.removeListener();
4068
+ onStartListeningOtp();
4062
4069
  }
4070
+ return () => {
4071
+ if (reactNative.Platform.OS === "android") {
4072
+ OTPVerify__default["default"].removeListener();
4073
+ OTPVerify.removeListener();
4074
+ }
4075
+ };
4076
+ }, []);
4077
+ const onStartListeningOtp = async () => {
4078
+ await OTPVerify__default["default"].getOtp();
4079
+ OTPVerify.startOtpListener((message) => {
4080
+ const otpRegex = new RegExp(`(\\d{${length}})`, "g");
4081
+ const otp2 = otpRegex.exec(message)?.[1];
4082
+ setOTP(otp2 ?? "");
4083
+ if (otp2) {
4084
+ refs.current[otp2?.length - 1]?.focus();
4085
+ }
4086
+ });
4063
4087
  };
4064
- }, []);
4065
- const onStartListeningOtp = async () => {
4066
- await OTPVerify__default["default"].getOtp();
4067
- OTPVerify.startOtpListener((message) => {
4068
- const otpRegex = new RegExp(`(\\d{${length}})`, "g");
4069
- const otp2 = otpRegex.exec(message)?.[1];
4070
- setOTP(otp2 ?? "");
4071
- if (otp2) {
4072
- otpRefs.current[otp2?.length - 1]?.focus();
4088
+ React__default["default"].useImperativeHandle(ref, () => ({
4089
+ reset() {
4090
+ setOTP("");
4091
+ refs.current[0]?.focus();
4092
+ },
4093
+ set(newOtp) {
4094
+ setOTP(newOtp);
4095
+ refs.current[newOtp?.length - 1]?.focus();
4073
4096
  }
4074
- });
4075
- };
4076
- const reset = () => {
4077
- setOTP("");
4078
- otpRefs.current[0]?.focus();
4079
- };
4080
- React__default["default"].useImperativeHandle(ref, () => ({
4081
- reset
4082
- }));
4083
- const handleChange = (index, value) => {
4084
- const regex = /^\d+$/;
4085
- if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
4086
- const newOTP = `${otp}${value}`;
4087
- setOTP(newOTP);
4088
- otpRefs.current[index + 1]?.focus();
4089
- } else if (value.length === 0 && index > 0) {
4090
- const newOTP = otp.slice(0, -1);
4091
- setOTP(newOTP);
4092
- otpRefs.current[index - 1]?.focus();
4093
- } else if (value?.length === length) {
4094
- setOTP(value);
4095
- otpRefs.current[length - 1]?.focus();
4096
- } else {
4097
- const newOTP = otp.slice(0, -1);
4098
- setOTP(newOTP);
4099
- otpRefs.current[index]?.focus();
4100
- }
4101
- };
4102
- const handleKeyPress = (e, index) => {
4103
- if (e.nativeEvent.key === "Backspace" && index > 0) {
4104
- otpRefs.current[index - 1]?.focus();
4105
- }
4106
- };
4107
- React.useEffect(() => {
4108
- if (otp.length === length) {
4109
- onComplete?.(otp);
4110
- }
4111
- }, [otp]);
4112
- return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React__default["default"].createElement(
4113
- CustomTypography,
4114
- {
4115
- text: label,
4116
- variant: FontStyle.B4_REGULAR,
4117
- style: {
4118
- color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
4119
- textAlign: "left",
4120
- ...otpHeaderTextStyle
4097
+ }));
4098
+ const handleChange = (index, value) => {
4099
+ const regex = /^\d+$/;
4100
+ if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
4101
+ const newOTP = `${otp}${value}`;
4102
+ setOTP(newOTP);
4103
+ refs.current[index + 1]?.focus();
4104
+ } else if (value.length === 0 && index > 0) {
4105
+ const newOTP = otp.slice(0, -1);
4106
+ setOTP(newOTP);
4107
+ refs.current[index - 1]?.focus();
4108
+ } else if (value?.length === length) {
4109
+ setOTP(value);
4110
+ refs.current[length - 1]?.focus();
4111
+ } else {
4112
+ const newOTP = otp.slice(0, -1);
4113
+ setOTP(newOTP);
4114
+ refs.current[index]?.focus();
4121
4115
  }
4122
- }
4123
- ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
4124
- reactNative.TextInput,
4125
- {
4126
- key: index?.toString(),
4127
- style: {
4128
- ...styles$5.textInputStyle,
4129
- color: theme$1.CONTENT_PRIMARY,
4130
- borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
4131
- ...textInputStyle
4116
+ };
4117
+ const handleKeyPress = (e, index) => {
4118
+ if (e.nativeEvent.key === "Backspace" && index > 0) {
4119
+ refs.current[index - 1]?.focus();
4120
+ }
4121
+ };
4122
+ React.useEffect(() => {
4123
+ if (otp.length === length) {
4124
+ onComplete?.(otp);
4125
+ }
4126
+ }, [otp]);
4127
+ 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(
4128
+ CustomTypography,
4129
+ {
4130
+ text: label,
4131
+ variant: FontStyle.B4_REGULAR,
4132
+ style: {
4133
+ color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
4134
+ textAlign: "left",
4135
+ ...otpHeaderTextStyle
4136
+ }
4137
+ }
4138
+ ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
4139
+ reactNative.TextInput,
4140
+ {
4141
+ key: index?.toString(),
4142
+ style: {
4143
+ ...styles$5.textInputStyle,
4144
+ color: theme$1.CONTENT_PRIMARY,
4145
+ borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
4146
+ ...textInputStyle
4147
+ },
4148
+ onFocus: () => setActiveInput(index),
4149
+ onBlur: () => setActiveInput(null),
4150
+ onKeyPress: (e) => handleKeyPress(e, index),
4151
+ onChangeText: (text) => handleChange(index, text),
4152
+ value: otp[index] ? "\u25CF" : "",
4153
+ placeholder: "",
4154
+ keyboardType: "numeric",
4155
+ ref: (el) => refs.current[index] = el,
4156
+ returnKeyType: otp.length === length ? "done" : "next",
4157
+ importantForAutofill: "yes",
4158
+ textContentType: "oneTimeCode",
4159
+ autoComplete: "sms-otp",
4160
+ selectionColor: theme$1.CONTENT_PRIMARY
4161
+ }
4162
+ ))), !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(
4163
+ CustomTypography,
4164
+ {
4165
+ text: `00:${timeLeft} secs`,
4166
+ variant: FontStyle.L1_REGULAR,
4167
+ style: { color: theme$1.INFO }
4168
+ }
4169
+ )), /* @__PURE__ */ React__default["default"].createElement(
4170
+ reactNative.Pressable,
4171
+ {
4172
+ onPress: onClickResendOTP,
4173
+ style: styles$5.resendOTPStyle,
4174
+ disabled: disableResendButton() || !isResendOtpEnable
4132
4175
  },
4133
- onFocus: () => setActiveInput(index),
4134
- onBlur: () => setActiveInput(null),
4135
- onKeyPress: (e) => handleKeyPress(e, index),
4136
- onChangeText: (text) => handleChange(index, text),
4137
- value: otp[index] ? "\u25CF" : "",
4138
- placeholder: "",
4139
- keyboardType: "numeric",
4140
- ref: (el) => otpRefs.current[index] = el,
4141
- returnKeyType: otp.length === length ? "done" : "next",
4142
- importantForAutofill: "yes",
4143
- textContentType: "oneTimeCode",
4144
- autoComplete: "sms-otp",
4145
- selectionColor: theme$1.CONTENT_PRIMARY
4146
- }
4147
- ))), !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(
4148
- CustomTypography,
4149
- {
4150
- text: `00:${timeLeft} secs`,
4151
- variant: FontStyle.L1_REGULAR,
4152
- style: { color: theme$1.INFO }
4153
- }
4154
- )), /* @__PURE__ */ React__default["default"].createElement(
4155
- reactNative.Pressable,
4156
- {
4157
- onPress: onClickResendOTP,
4158
- style: styles$5.resendOTPStyle,
4159
- disabled: disableResendButton() || !isResendOtpEnable
4160
- },
4161
- /* @__PURE__ */ React__default["default"].createElement(
4176
+ /* @__PURE__ */ React__default["default"].createElement(
4177
+ CustomTypography,
4178
+ {
4179
+ text: resendText,
4180
+ variant: FontStyle.L2_REGULAR,
4181
+ style: {
4182
+ textDecorationLine: "underline",
4183
+ color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
4184
+ ...resendTextStyle
4185
+ }
4186
+ }
4187
+ )
4188
+ )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
4162
4189
  CustomTypography,
4163
4190
  {
4164
- text: resendText,
4191
+ text: errorMessage,
4165
4192
  variant: FontStyle.L2_REGULAR,
4166
4193
  style: {
4167
- textDecorationLine: "underline",
4168
- color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
4169
- ...resendTextStyle
4194
+ alignSelf: "flex-start",
4195
+ color: theme$1.ERROR
4170
4196
  }
4171
4197
  }
4172
- )
4173
- )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
4174
- CustomTypography,
4175
- {
4176
- text: errorMessage,
4177
- variant: FontStyle.L2_REGULAR,
4178
- style: {
4179
- alignSelf: "flex-start",
4180
- color: theme$1.ERROR
4181
- }
4182
- }
4183
- )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
4184
- CustomTypography,
4185
- {
4186
- text: errorMessageMaxReachCount,
4187
- variant: FontStyle.L2_REGULAR,
4188
- style: {
4189
- alignSelf: "flex-start",
4190
- color: theme$1.ERROR
4198
+ )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
4199
+ CustomTypography,
4200
+ {
4201
+ text: errorMessageMaxReachCount,
4202
+ variant: FontStyle.L2_REGULAR,
4203
+ style: {
4204
+ alignSelf: "flex-start",
4205
+ color: theme$1.ERROR
4206
+ }
4191
4207
  }
4192
- }
4193
- )) : null);
4194
- };
4195
- const OTPInput = withThemeProvider(OTPInputComponent);
4196
- var index$4 = React__default["default"].forwardRef(OTPInput);
4208
+ )) : null));
4209
+ }
4210
+ );
4211
+ OTPInput.displayName = "OTPInput";
4197
4212
 
4198
4213
  const styles$4 = reactNative.StyleSheet.create({
4199
4214
  stepperContainer: {
@@ -4970,7 +4985,7 @@ exports.FileUpload = FileUpload;
4970
4985
  exports.FontStyle = FontStyle;
4971
4986
  exports.Line = Line;
4972
4987
  exports.NotificationBandge = NotificationBandge;
4973
- exports.OTPInput = index$4;
4988
+ exports.OTPInput = OTPInput;
4974
4989
  exports.OurOfficesButton = OurOffices;
4975
4990
  exports.PdfView = PdfView;
4976
4991
  exports.PopUp = PopUp;