@truworth/twc-auth 3.0.7 → 3.0.9

package/build/src/components/ConfirmationModal/index.native.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text } from 'react-native';
+import { Modal } from '@ui-kitten/components';
+import { Colors, RoundedButton } from '@truworth/twc-rn-common';
+import IonIcon from 'react-native-vector-icons/Ionicons';
+const { primary, gray } = Colors;
+const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconColor = primary.primary_main, description }) => {
+    return (_jsx(Modal, { visible: visible, onBackdropPress: onClose, backdropStyle: { backgroundColor: 'rgba(0, 0, 0, 0.25)' }, children: _jsxs(View, { style: { flex: 1, backgroundColor: 'white', padding: 32, marginHorizontal: 16, borderRadius: 12, marginTop: -50 }, children: [iconName &&
+                    _jsx(IonIcon, { name: iconName, size: 64, color: iconColor, style: { alignSelf: 'center', marginBottom: 12 } }), title &&
+                    _jsx(Text, { style: { fontSize: 16, textAlign: 'center', fontWeight: '600', color: gray.gray_900, marginBottom: 24, lineHeight: 20 }, children: title }), description &&
+                    _jsx(Text, { style: { fontSize: 12, textAlign: 'center', fontWeight: '600', color: gray.gray_600, marginTop: -16, marginBottom: 24, lineHeight: 16 }, children: description }), primaryLabel &&
+                    _jsx(RoundedButton, { size: 'large', label: primaryLabel, onPress: () => { onClose(); onProceed?.(); } }), secondaryLabel &&
+                    _jsx(RoundedButton, { size: 'large', type: "text", label: secondaryLabel, containerStyle: { marginTop: primaryLabel ? 8 : 0 }, onPress: onDismiss ? onDismiss : onClose })] }) }));
+};
+export { ConfirmationModal };

package/build/src/components/ConfirmationModal/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/IonIcon/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IonIcon = ({ name, size, className, ...props }) => {
+    const customElementProps = {
+        ...props,
+        name,
+        size,
+        class: className // For the custom element
+    };
+    return _jsx("ion-icon", { ...customElementProps });
+};
+export { IonIcon };

package/build/src/components/IonIcon/index.native.js

@@ -0,0 +1,9 @@
+let __ionIconWarned = false;
+const IonIcon = (_props) => {
+    if (__DEV__ && !__ionIconWarned) {
+        console.warn("[@truworth/twc-auth] IonIcon is web-only");
+        __ionIconWarned = true;
+    }
+    return null;
+};
+export { IonIcon };

package/build/src/components/IonIcon/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/LoadingAnimation/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { motion } from 'framer-motion';
+const LoadingAnimation = ({ height = 230, width = 250, }) => {
+    return (_jsxs("div", { style: {
+            height,
+            width,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            gap: 16,
+        }, children: [_jsx(motion.div, { style: {
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [0, 1, 2].map((i) => (_jsx(motion.div, { style: {
+                        width: 12,
+                        height: 12,
+                        borderRadius: '50%',
+                        backgroundColor: '#26C6DA',
+                    }, animate: {
+                        y: [0, -16, 0],
+                        opacity: [0.5, 1, 0.5],
+                    }, transition: {
+                        duration: 0.8,
+                        repeat: Infinity,
+                        delay: i * 0.15,
+                        ease: 'easeInOut',
+                    } }, i))) }), _jsx(motion.div, { style: {
+                    width: 120,
+                    height: 4,
+                    backgroundColor: '#E0E0E0',
+                    borderRadius: 2,
+                    overflow: 'hidden',
+                }, children: _jsx(motion.div, { style: {
+                        width: '40%',
+                        height: '100%',
+                        backgroundColor: '#26C6DA',
+                        borderRadius: 2,
+                    }, animate: {
+                        x: ['-100%', '250%'],
+                    }, transition: {
+                        duration: 1.2,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                    } }) })] }));
+};
+export { LoadingAnimation };

package/build/src/components/OTPStatusLabel/index.js

@@ -0,0 +1,10 @@
+'use client';
+const OTPStatusLabel = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] We use only OTPStatusLabel for the app");
+        }
+    }
+    return null;
+};
+export { OTPStatusLabel };

package/build/src/components/OTPStatusLabel/index.native.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isIphoneX } from "@truworth/twc-rn-common";
+import { ActivityIndicator, Platform, Text, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import OkayIcon from '../../../assets/okay_icon.svg';
+import CrossIcon from '../../../assets/cross_icon.svg';
+const OTPStatusLabel = ({ status, timer }) => {
+    switch (status) {
+        case 'timer':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, justifyContent: 'center', alignItems: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#FFFFFF', textTransform: 'uppercase' }, children: timer && timer > 0 ? `${timer} seconds` : 'OTP expired' }) }) }));
+        case 'valid':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#44cfb9', '#1EC2C9'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(OkayIcon, {}) }) }) }));
+        case 'invalid':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#F3698B', '#F18A8A'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(CrossIcon, {}) }) }) }));
+        case 'loading':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(View, { style: { alignItems: 'center' }, children: _jsx(ActivityIndicator, { color: 'black' }) }) }) }));
+        default:
+            return null;
+    }
+};
+export { OTPStatusLabel };

package/build/src/components/OTPStatusLabel/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/PasswordCriteria/hooks/usePasswordCriteria.js

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { axiosClient } from "../../../api/axiosClient";
+import { defaultPolicy } from "../../../constants/defaultPolicy";
+const usePasswordCriteria = ({ email, password, onCriteriaChange, onMaxLengthChange }) => {
+    const { maxLength: defaultMaxLength, ...restDefaultPolicy } = defaultPolicy;
+    const [loading, setLoading] = useState(false);
+    const [passwordPolicy, setPasswordPolicy] = useState(restDefaultPolicy);
+    useEffect(() => {
+        if (!email) {
+            setPasswordPolicy(restDefaultPolicy);
+            onMaxLengthChange(defaultMaxLength);
+            setLoading(false);
+            return;
+        }
+        return getPasswordPolicy();
+    }, [email]);
+    const getPasswordPolicy = () => {
+        let isActive = true;
+        if (email) {
+            setPasswordPolicy(restDefaultPolicy);
+            onMaxLengthChange(defaultMaxLength);
+            setLoading(true);
+            axiosClient({
+                url: `/auth/password-policy?email=${encodeURIComponent(email)}`,
+                method: 'GET',
+            }).then(({ data }) => {
+                if (!isActive)
+                    return;
+                const { maxLength, ...rest } = (data || {});
+                // Apply server-provided policy when present, falling back to defaults
+                setPasswordPolicy({
+                    minLength: typeof rest.minLength === 'number' ? rest.minLength : restDefaultPolicy.minLength,
+                    numbers: typeof rest.numbers === 'boolean' ? rest.numbers : restDefaultPolicy.numbers,
+                    uppercase: typeof rest.uppercase === 'boolean' ? rest.uppercase : restDefaultPolicy.uppercase,
+                    lowercase: typeof rest.lowercase === 'boolean' ? rest.lowercase : restDefaultPolicy.lowercase,
+                    specialCharacters: typeof rest.specialCharacters === 'boolean' ? rest.specialCharacters : restDefaultPolicy.specialCharacters,
+                });
+                onMaxLengthChange(typeof maxLength === 'number' ? maxLength : defaultMaxLength);
+            }).catch(err => {
+                if (!isActive)
+                    return;
+                console.warn('password-policy fetch failed', err);
+                setPasswordPolicy(restDefaultPolicy);
+                onMaxLengthChange(defaultMaxLength);
+            }).finally(() => isActive && setLoading(false));
+        }
+        return () => { isActive = false; };
+    };
+    useEffect(() => {
+        onCriteriaChange({
+            minLength: password.length >= passwordPolicy.minLength,
+            specialCharacters: passwordPolicy.specialCharacters ? /[!@#$%^&*(),.?":{}|<>]/.test(password) : true,
+            numbers: passwordPolicy.numbers ? /\d/.test(password) : true,
+            uppercase: passwordPolicy.uppercase ? /[A-Z]/.test(password) : true,
+            lowercase: passwordPolicy.lowercase ? /[a-z]/.test(password) : true,
+        });
+    }, [password, passwordPolicy]);
+    const renderLabel = (criteria) => {
+        switch (criteria) {
+            case 'minLength': return `min ${passwordPolicy.minLength} characters`;
+            case 'specialCharacters': return 'special character';
+            default: return criteria;
+        }
+    };
+    return {
+        loading,
+        passwordPolicy,
+        renderLabel,
+    };
+};
+export { usePasswordCriteria };

package/build/src/components/PasswordCriteria/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { usePasswordCriteria } from "./hooks/usePasswordCriteria";
+import { Check, X } from "lucide-react";
+const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
+    const id = useId();
+    const { passwordPolicy, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const activeRequirementKeys = useMemo(() => {
+        // Include minLength always; include other flags only if enabled by policy
+        return Object.keys(passwordPolicy).filter((key) => {
+            if (key === "minLength")
+                return true;
+            // @ts-ignore boolean flags present on policy
+            return Boolean(passwordPolicy[key]);
+        });
+    }, [passwordPolicy]);
+    const strengthScore = useMemo(() => {
+        return activeRequirementKeys.reduce((acc, key) => acc + (criteria[key] ? 1 : 0), 0);
+    }, [activeRequirementKeys, criteria]);
+    const maxScore = activeRequirementKeys.length || 1;
+    const getStrengthColor = (score) => {
+        const ratio = score / maxScore;
+        if (score === 0)
+            return "bg-border";
+        if (ratio < 0.4)
+            return "bg-red-500";
+        if (ratio < 0.7)
+            return "bg-orange-500";
+        if (ratio < 1)
+            return "bg-amber-500";
+        return "bg-emerald-500";
+    };
+    const getStrengthText = (score) => {
+        if (score === 0)
+            return "Enter a password";
+        const ratio = score / maxScore;
+        if (ratio < 0.4)
+            return "Weak password";
+        if (ratio < 0.8)
+            return "Medium password";
+        return "Strong password";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-border", role: "progressbar", "aria-valuenow": strengthScore, "aria-valuemin": 0, "aria-valuemax": maxScore, "aria-label": "Password strength", children: _jsx("div", { className: `h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`, style: { width: `${(strengthScore / maxScore) * 100}%` } }) }), _jsxs("p", { id: `${id}-description`, className: "mt-2 text-sm font-medium text-foreground", children: [getStrengthText(strengthScore), ". Must contain:"] }), _jsx("ul", { className: "mt-2 space-y-1.5", "aria-label": "Password requirements", children: activeRequirementKeys.map((req, index) => (_jsxs("li", { className: "flex items-center gap-2", children: [criteria[req]
+                            ? _jsx(Check, { size: 16, className: "text-emerald-500", "aria-hidden": "true" })
+                            : _jsx(X, { size: 16, className: "text-muted-foreground/80", "aria-hidden": "true" }), _jsxs("span", { className: `text-xs ${criteria[req] ? "text-emerald-600" : "text-muted-foreground"}`, children: [renderLabel(req), _jsx("span", { className: "sr-only", children: criteria[req] ? " - Requirement met" : " - Requirement not met" })] })] }, index))) })] }));
+};
+export { PasswordCriteria };

package/build/src/components/PasswordCriteria/index.native.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingPlaceholder, Colors } from '@truworth/twc-rn-common';
+import { Text, View } from 'react-native';
+import { usePasswordCriteria } from './hooks/usePasswordCriteria';
+const { gray, utility } = Colors;
+const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
+    const { loading, passwordPolicy, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const getCriteriaColor = (isValid) => (isValid ? utility.success_main : gray.gray_600);
+    const getCriteriaBackground = (isValid) => (isValid ? utility.success_bg : gray.gray_100);
+    return (_jsx(View, { style: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', alignContent: 'space-between', marginTop: 8 }, children: Object.keys(passwordPolicy).map((item, index) => (loading
+            ? _jsx(LoadingPlaceholder, { height: 24, width: renderLabel(item).length * 8, borderRadius: 12, containerStyle: { marginRight: 8, marginTop: 8 } }, index)
+            :
+                _jsx(View, { style: {
+                        marginRight: 8, marginTop: 8, borderRadius: 32,
+                        paddingVertical: 4, paddingHorizontal: 12,
+                        backgroundColor: getCriteriaBackground(Boolean(criteria[item])),
+                    }, children: _jsx(Text, { style: {
+                            fontSize: 12, fontWeight: '500',
+                            color: getCriteriaColor(Boolean(criteria[item])),
+                        }, children: renderLabel(item) }) }, index))) }));
+};
+export { PasswordCriteria };

package/build/src/components/PasswordCriteria/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/ScreenLayout/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Typography } from "@truworth/twc-web-design";
+import { AdvancedTransitionWrapper } from "../AdvancedTransitionWrapper";
+import { ArrowLeft } from "lucide-react";
+const ScreenLayout = ({ children, title, subTitle, buttonProps, onPressBack }) => {
+    return (_jsxs(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: [onPressBack &&
+                _jsx(Button, { label: "Back", size: "large", variant: "link", leftIcon: _jsx(ArrowLeft, {}), className: "p-0 h-auto", onClick: onPressBack }), Boolean(title) &&
+                _jsx(Typography, { type: 'heading', size: 'h5', className: 'mb-2 mt-6', children: title }), Boolean(subTitle) &&
+                _jsx(Typography, { type: 'body', size: 'large', className: "md:mb-8 mb-6 text-gray-400", children: subTitle }), children, Boolean(buttonProps) &&
+                _jsx(Button, { label: "Continue", isFullWidth: true, variant: 'primary', className: "mt-3", ...buttonProps })] }));
+};
+export { ScreenLayout };

package/build/src/components/ScreenLayout/index.native.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View, Text } from 'react-native';
+import { Colors, Header, RoundedButton } from '@truworth/twc-rn-common';
+const { gray } = Colors;
+const ScreenLayout = ({ children, headerTitle, title, subTitle, hideHeader, buttonProps, containerStyle, accessoryRight }) => {
+    return (_jsxs(_Fragment, { children: [!hideHeader &&
+                _jsx(Header, { title: headerTitle, accessoryRight: accessoryRight }), _jsxs(View, { style: [{ paddingVertical: 32, paddingHorizontal: 16 }, containerStyle], children: [Boolean(title) &&
+                        _jsx(Text, { textBreakStrategy: 'simple', style: {
+                                fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                lineHeight: 32, marginBottom: 32,
+                            }, children: title }), Boolean(subTitle) &&
+                        _jsx(Text, { textBreakStrategy: 'simple', style: {
+                                fontSize: 14, fontWeight: '500', color: gray.gray_400,
+                                lineHeight: 20, marginTop: -24, marginBottom: 32,
+                            }, children: subTitle }), children, Boolean(buttonProps) &&
+                        _jsx(RoundedButton, { containerStyle: { marginTop: 32 }, type: buttonProps?.type ?? 'secondary', size: buttonProps?.size ?? 'large', ...buttonProps })] })] }));
+};
+export { ScreenLayout };

package/build/src/components/ScreenLayout/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/SupportDetails/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleHelpIcon } from 'lucide-react';
+import { Flex, Typography } from "@truworth/twc-web-design";
+import { useAuthPackageContext } from "../../hooks/internal/useAuthPackageContext";
+const SupportDetails = () => {
+    const { appConfig } = useAuthPackageContext();
+    return (_jsxs(Flex, { padding: "sm", className: 'rounded-lg bg-gray-100 md:mt-8 mt-6 gap-3', children: [_jsx(CircleHelpIcon, { size: 20, className: "min-w-5 text-primary" }), _jsxs(Typography, { type: "body", size: "small", children: ["For any customer support\u2013related queries, please write to us at", _jsx("a", { href: `mailto:${appConfig.supportEmail}`, className: "text-primary block", children: _jsx("u", { children: appConfig.supportEmail }) })] })] }));
+};
+export { SupportDetails };

package/build/src/components/SupportDetails/index.native.js

@@ -0,0 +1,6 @@
+const SupportDetails = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] SupportDetails is web-only");
+    return null;
+};
+export { SupportDetails };

package/build/src/components/VerifyEmailOTP/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
+import { useEffect, useState } from "react";
+const VerifyEmailOTP = ({ validateOTP, resendOTP, resendOTPCounter, email, status }) => {
+    const [otp, setOtp] = useState('');
+    const [otpError, setOtpError] = useState(false);
+    useEffect(() => {
+        if (status === 'invalid') {
+            setOtpError(true);
+            setOtp('');
+        }
+    }, [status]);
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { type: "body", size: "large", color: "text-gray-400 text-center", children: "OTP sent to" }), _jsx(Typography, { type: "body", size: "large", color: "text-secondary-dark mb-6 text-center", children: email }), _jsx(OTPInput, { value: otp, onChange: (code) => {
+                    setOtp(code);
+                    setOtpError(false);
+                }, error: otpError, maxLength: 6, className: `!w-auto ${'!border-destructive'}` }), otpError &&
+                _jsx(Typography, { type: "utility", size: "medium", className: "mt-1", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), (resendOTPCounter < 3) &&
+                _jsxs(Flex, { align: "center", justify: "between", className: 'mt-7', children: [_jsx(Typography, { type: "body", size: "medium", className: "font-semibold", color: "text-gray-400", children: "Didn't receive OTP?" }), _jsx(Button, { variant: 'link', size: 'small', className: "p-0 h-auto", onClick: resendOTP, children: "Resend Code" })] }), _jsx(Button, { label: "Continue", isFullWidth: true, variant: 'primary', className: "mt-7", onClick: () => validateOTP?.(otp), disabled: (otp?.length ?? 0) < 6 })] }));
+};
+export { VerifyEmailOTP };

package/build/src/components/VerifyEmailOTP/index.native.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { Layout } from "@ui-kitten/components";
+import { Header, Colors, CustomKeyboardAvoidingView } from "@truworth/twc-rn-common";
+import { OTPStatusLabel } from "../OTPStatusLabel/index.native";
+import OTPInputView from "@twotalltotems/react-native-otp-input";
+const { gray } = Colors;
+const VerifyEmailOTP = ({ email, status, validateOTP, resendOTP, resendOTPCounter }) => {
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, showsVerticalScrollIndicator: false, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
+                                    fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                    lineHeight: 32, marginBottom: 32,
+                                }, children: ["OTP sent to ", '\n', email] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, codeInputFieldStyle: {
+                                        fontSize: 20, color: 'black',
+                                        height: 45, width: 30,
+                                        borderWidth: 0, borderBottomWidth: 1,
+                                    }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
+                                        height: 50,
+                                        width: Dimensions.get('window').width - 100,
+                                    }, onCodeFilled: code => validateOTP(code) }) }), resendOTPCounter < 3 &&
+                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 14, fontWeight: '500', color: gray.gray_400, lineHeight: 20 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: resendOTP, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '500', color: '#2cbaa4', lineHeight: 20 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { alignSelf: 'flex-end', width: '100%' }, children: _jsx(OTPStatusLabel, { status: status }) })] })] }));
+};
+export { VerifyEmailOTP };

package/build/src/components/VerifyEmailOTP/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/components/VerifyMobileOTP/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
+const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status }) => {
+    const [otp, setOtp] = useState('');
+    const [otpError, setOtpError] = useState(false);
+    useEffect(() => {
+        if (status === 'invalid') {
+            setOtpError(true);
+            setOtp('');
+        }
+    }, [status]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Typography, { type: 'body', size: 'large', className: 'mb-6 text-gray-400 text-center', children: ["OTP sent to", _jsx("span", { className: 'pl-2 text-secondary-dark', children: phone ? `XXXXXXX${phone.slice(-3)}` : 'your registered mobile number' })] }), _jsx(OTPInput, { value: otp, onChange: (code) => {
+                    setOtp(code);
+                    setOtpError(false);
+                }, error: otpError, maxLength: 6, className: `!w-auto ${otpError ? '!border-destructive' : ''}` }), otpError &&
+                _jsx(Typography, { type: "utility", size: "medium", className: "mt-4", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), timer <= 0 ?
+                _jsxs(Flex, { justify: 'between', align: 'center', className: 'mt-4', children: [_jsx(Typography, { type: 'utility', size: 'medium', children: "Didn't receive OTP?" }), _jsx(Button, { label: 'Re-send OTP', size: 'small', variant: 'link', onClick: () => {
+                                setOtp('');
+                                resendOTP();
+                            } })] })
+                :
+                    _jsxs(Typography, { type: 'utility', size: 'medium', className: 'mt-3', children: ["Resend Code in ", timer, " seconds"] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
+};
+export { VerifyMobileOTP };

package/build/src/components/VerifyMobileOTP/index.native.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Colors, CustomKeyboardAvoidingView, Header } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View, } from 'react-native';
+import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContext';
+import { OTPStatusLabel } from '../OTPStatusLabel/index.native';
+import OTPInputView from '@twotalltotems/react-native-otp-input';
+const { gray } = Colors;
+const VerifyMobileOTP = ({ validateOTP, timer, status, resendOTP, phone }) => {
+    const [otp, setOtp] = useState('');
+    const { otpValue } = useAuthPackageContext();
+    useEffect(() => {
+        if (otp && otp.length == 6) {
+            return validateOTP(otp);
+        }
+    }, [otp]);
+    useEffect(() => {
+        if (otpValue && otpValue.length == 6) {
+            setOtp(otpValue);
+        }
+    }, [otpValue]);
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
+                                    fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                    lineHeight: 32, marginBottom: 32,
+                                }, children: ["OTP sent to ", '\n', phone ? phone.replace(/\d(?=\d{4})/g, 'x') : ''] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, onCodeChanged: text => setOtp(text), codeInputFieldStyle: {
+                                        fontSize: 20, color: 'black', width: 30,
+                                        height: 45, borderWidth: 0, borderBottomWidth: 1,
+                                    }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
+                                        height: 50,
+                                        width: Dimensions.get('window').width - 100,
+                                    }, code: otp ?? '', onCodeFilled: code => setOtp(code) }) }), timer <= 0 &&
+                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { style: { fontSize: 12, color: '#000', fontWeight: '400', opacity: 0.5 }, children: "Did not receive OTP?" }), _jsx(TouchableOpacity, { disabled: timer > 0, onPress: () => {
+                                                setOtp('');
+                                                resendOTP();
+                                            }, children: _jsx(Text, { style: { fontSize: 14, color: '#2cbaa4', fontWeight: '400', opacity: 1 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { width: '100%' }, children: _jsx(OTPStatusLabel, { status: status, timer: timer }) })] })] }));
+};
+export { VerifyMobileOTP };

package/build/src/components/VerifyMobileOTP/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/constants/base-url/index.js

@@ -0,0 +1,5 @@
+const baseUrl = process.env.NEXT_PUBLIC_TWC_API_BASE_URL;
+if (!baseUrl) {
+    throw new Error('NEXT_PUBLIC_TWC_API_BASE_URL environment variable is required');
+}
+export const BASE_URL = baseUrl;

package/build/src/constants/base-url/index.native.js

@@ -0,0 +1 @@
+export const BASE_URL = process.env.BASE_URL;

package/build/src/constants/cdn-url/index.js

@@ -0,0 +1,2 @@
+export const MEMBER_IMAGES_URL = process.env.NEXT_PUBLIC_MEMBER_IMAGES_URL;
+export const CDN_IMAGES_URL = process.env.NEXT_PUBLIC_CDN_IMAGES_URL;

package/build/src/constants/cdn-url/index.native.js

@@ -0,0 +1,5 @@
+const CdnImageUrl = () => {
+    return null;
+};
+export { CdnImageUrl };
+export default CdnImageUrl;

package/build/src/constants/defaultPolicy.js

@@ -0,0 +1,9 @@
+const defaultPolicy = {
+    minLength: 6,
+    maxLength: 30,
+    numbers: true,
+    uppercase: true,
+    lowercase: true,
+    specialCharacters: true,
+};
+export { defaultPolicy };

package/build/src/constants/password-requirements.js

@@ -0,0 +1,7 @@
+export const strongPasswordRequirements = [
+    { regex: /.{6,}/, text: "At least 6 characters" },
+    { regex: /[0-9]/, text: "At least 1 number" },
+    { regex: /[a-z]/, text: "At least 1 lowercase letter" },
+    { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
+    { regex: /[!@#$%^&*()_+]/, text: "At least 1 special character" }
+];

package/build/src/constants/social-login-options.js

@@ -0,0 +1,16 @@
+import { SocialLoginsEnum } from "../enums";
+const socialLoginOptions = [
+    {
+        type: SocialLoginsEnum.Google,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/google-icon.png`,
+    },
+    {
+        type: SocialLoginsEnum.Facebook,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/facebook-icon.png`,
+    },
+    {
+        type: SocialLoginsEnum.Apple,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/apple-icon.png`,
+    }
+];
+export { socialLoginOptions };