@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/lib/module/components/Auth/One/QrLogin/components/QrViewArea.js

@@ -0,0 +1,295 @@
+"use strict";
+
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { View, StyleSheet, Animated, Easing, Dimensions, Platform } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { useInternalTheme } from "../../../../../theme/hook/useInternalTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: SCREEN_W,
+  height: SCREEN_H
+} = Dimensions.get('window');
+
+// ==================== Constants ====================
+const ANIMATION_DURATION = 2000;
+const CORNER_SIZE = 18;
+const CORNER_BORDER_WIDTH = 3;
+const SCAN_LINE_HEIGHT = 3;
+const SCAN_LINE_MARGIN = 12;
+const BOX_WIDTH_RATIO = 0.7;
+const BOX_SIZE_RATIO = 0.9;
+const MAX_BOX_WIDTH = 320;
+const VERTICAL_OFFSET = 40;
+const DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.6)';
+const DEFAULT_SHADOW_COLOR = '#000';
+
+// ==================== Types ====================
+
+// ==================== Helper Functions ====================
+/**
+ * Calculates the scan box dimensions and overlay positions
+ */
+const calculateBoxDimensions = (scanBoxWidth, headerHeight) => {
+  const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * BOX_WIDTH_RATIO, MAX_BOX_WIDTH);
+  const boxW = defaultBoxW * BOX_SIZE_RATIO;
+  const boxH = boxW;
+  const availableHeight = SCREEN_H - headerHeight;
+  const boxTop = Math.max(headerHeight, Math.floor(headerHeight + (availableHeight - boxH) / 2 - scale(VERTICAL_OFFSET)));
+  const topOverlayHeight = Math.max(0, Math.floor(boxTop - headerHeight));
+  const bottomOverlayHeight = Math.max(0, Math.floor(SCREEN_H - (boxTop + boxH)));
+  const leftOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+  const scanBoxRight = leftOverlayWidth + boxW;
+  const rightOverlayWidth = Math.max(0, SCREEN_W - scanBoxRight);
+  return {
+    boxW,
+    boxH,
+    boxTop,
+    topOverlayHeight,
+    bottomOverlayHeight,
+    sideOverlayWidth: leftOverlayWidth,
+    rightOverlayWidth
+  };
+};
+
+/**
+ * Creates overlay style for a specific position
+ */
+const createOverlayStyle = (position, dimensions, headerHeight, overlayColor) => {
+  const baseStyleKey = `overlay${position.charAt(0).toUpperCase() + position.slice(1)}`;
+  const baseStyle = styles[baseStyleKey] || styles.overlaySide;
+  switch (position) {
+    case 'top':
+      return [baseStyle, {
+        top: headerHeight,
+        height: Math.max(0, dimensions.topOverlayHeight),
+        backgroundColor: overlayColor
+      }];
+    case 'bottom':
+      return [baseStyle, {
+        top: dimensions.boxTop + dimensions.boxH,
+        height: Math.max(0, dimensions.bottomOverlayHeight),
+        backgroundColor: overlayColor
+      }];
+    case 'left':
+      return [baseStyle, {
+        left: 0,
+        top: dimensions.boxTop,
+        height: dimensions.boxH,
+        width: Math.max(0, dimensions.sideOverlayWidth),
+        backgroundColor: overlayColor
+      }];
+    case 'right':
+      return [baseStyle, {
+        right: 0,
+        top: dimensions.boxTop,
+        height: dimensions.boxH,
+        width: Math.max(0, dimensions.rightOverlayWidth),
+        backgroundColor: overlayColor
+      }];
+    default:
+      return [baseStyle];
+  }
+};
+
+/**
+ * Creates corner style based on position
+ */
+const createCornerStyle = (position, borderColor, cornerSize, cornerBorderWidth) => {
+  const baseStyle = [styles.corner, styles[`corner_${position}`]];
+  const dynamicStyle = {
+    borderColor,
+    width: cornerSize,
+    height: cornerSize,
+    borderTopWidth: position.startsWith('t') ? cornerBorderWidth : 0,
+    borderBottomWidth: position.startsWith('b') ? cornerBorderWidth : 0,
+    borderLeftWidth: position.endsWith('l') ? cornerBorderWidth : 0,
+    borderRightWidth: position.endsWith('r') ? cornerBorderWidth : 0
+  };
+  return [...baseStyle, dynamicStyle];
+};
+
+/**
+ * Creates animated scan line style
+ */
+const createScanLineStyle = (margin, scanLineHeight, borderColor, shadowColor, translateY) => ({
+  position: 'absolute',
+  top: margin,
+  left: margin,
+  right: margin,
+  height: scanLineHeight,
+  borderRadius: scanLineHeight / 2,
+  backgroundColor: borderColor,
+  transform: [{
+    translateY
+  }],
+  shadowColor,
+  shadowOffset: {
+    width: 0,
+    height: 2
+  },
+  shadowOpacity: 0.4,
+  shadowRadius: 4,
+  elevation: Platform.OS === 'android' ? 5 : 0
+});
+
+// ==================== Custom Hooks ====================
+/**
+ * Hook to manage scan line animation
+ */
+const useScanLineAnimation = lineTravel => {
+  const anim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const animation = Animated.loop(Animated.sequence([Animated.timing(anim, {
+      toValue: 1,
+      duration: ANIMATION_DURATION,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }), Animated.timing(anim, {
+      toValue: 0,
+      duration: ANIMATION_DURATION,
+      easing: Easing.linear,
+      useNativeDriver: true
+    })]));
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+  const translateY = useMemo(() => anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, lineTravel]
+  }), [anim, lineTravel]);
+  return translateY;
+};
+
+// ==================== Component ====================
+const QrViewArea = /*#__PURE__*/React.memo(({
+  scanBoxWidth,
+  headerHeight = 0,
+  theme
+}) => {
+  const {
+    theme: appliedTheme
+  } = useInternalTheme(theme);
+  const {
+    colors
+  } = appliedTheme;
+
+  // Calculate dimensions
+  const boxDimensions = useMemo(() => calculateBoxDimensions(scanBoxWidth, headerHeight), [scanBoxWidth, headerHeight]);
+
+  // Calculate scan line properties
+  const margin = useMemo(() => scale(SCAN_LINE_MARGIN), []);
+  const lineTravel = useMemo(() => Math.max(0, boxDimensions.boxH - margin * 2 - scale(SCAN_LINE_HEIGHT)), [boxDimensions.boxH, margin]);
+
+  // Animation
+  const translateY = useScanLineAnimation(lineTravel);
+
+  // Theme colors
+  const overlayColor = colors.overlay || DEFAULT_OVERLAY_COLOR;
+  const shadowColor = colors.shadow || DEFAULT_SHADOW_COLOR;
+
+  // Corner properties
+  const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
+  const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
+
+  // Create overlay styles
+  const overlayStyles = useMemo(() => ({
+    top: createOverlayStyle('top', boxDimensions, headerHeight, overlayColor),
+    bottom: createOverlayStyle('bottom', boxDimensions, headerHeight, overlayColor),
+    left: createOverlayStyle('left', boxDimensions, headerHeight, overlayColor),
+    right: createOverlayStyle('right', boxDimensions, headerHeight, overlayColor)
+  }), [boxDimensions, headerHeight, overlayColor]);
+
+  // Scan box style
+  const scanBoxStyle = useMemo(() => [styles.scanBox, {
+    top: boxDimensions.boxTop,
+    left: boxDimensions.sideOverlayWidth,
+    width: boxDimensions.boxW,
+    height: boxDimensions.boxH
+  }], [boxDimensions]);
+
+  // Corner style generator
+  const getCornerStyle = useCallback(position => createCornerStyle(position, colors.button, cornerSize, cornerBorderWidth), [colors.button, cornerSize, cornerBorderWidth]);
+
+  // Scan line style
+  const scanLineHeight = useMemo(() => scale(SCAN_LINE_HEIGHT), []);
+  const scanLineStyle = useMemo(() => createScanLineStyle(margin, scanLineHeight, colors.button, shadowColor, translateY), [margin, scanLineHeight, colors.button, shadowColor, translateY]);
+
+  // Corner positions
+  const cornerPositions = ['tl', 'tr', 'bl', 'br'];
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/_jsx(View, {
+      style: overlayStyles.top
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStyles.bottom
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStyles.left
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStyles.right
+    }), /*#__PURE__*/_jsxs(View, {
+      style: scanBoxStyle,
+      pointerEvents: "none",
+      children: [cornerPositions.map(position => /*#__PURE__*/_jsx(View, {
+        style: getCornerStyle(position)
+      }, position)), /*#__PURE__*/_jsx(Animated.View, {
+        style: scanLineStyle
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10
+  },
+  overlayTop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1
+  },
+  overlayBottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1
+  },
+  overlaySide: {
+    position: 'absolute',
+    zIndex: 1
+  },
+  scanBox: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 2
+  },
+  corner: {
+    position: 'absolute',
+    zIndex: 3
+  },
+  corner_tl: {
+    top: 0,
+    left: 0
+  },
+  corner_tr: {
+    top: 0,
+    right: 0
+  },
+  corner_bl: {
+    bottom: 0,
+    left: 0
+  },
+  corner_br: {
+    bottom: 0,
+    right: 0
+  }
+});
+export default QrViewArea;
+//# sourceMappingURL=QrViewArea.js.map

package/lib/module/components/Auth/One/QrLogin/components/QrViewArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useMemo","useCallback","View","StyleSheet","Animated","Easing","Dimensions","Platform","scale","useInternalTheme","jsx","_jsx","jsxs","_jsxs","width","SCREEN_W","height","SCREEN_H","get","ANIMATION_DURATION","CORNER_SIZE","CORNER_BORDER_WIDTH","SCAN_LINE_HEIGHT","SCAN_LINE_MARGIN","BOX_WIDTH_RATIO","BOX_SIZE_RATIO","MAX_BOX_WIDTH","VERTICAL_OFFSET","DEFAULT_OVERLAY_COLOR","DEFAULT_SHADOW_COLOR","calculateBoxDimensions","scanBoxWidth","headerHeight","defaultBoxW","Math","min","boxW","boxH","availableHeight","boxTop","max","floor","topOverlayHeight","bottomOverlayHeight","leftOverlayWidth","scanBoxRight","rightOverlayWidth","sideOverlayWidth","createOverlayStyle","position","dimensions","overlayColor","baseStyleKey","charAt","toUpperCase","slice","baseStyle","styles","overlaySide","top","backgroundColor","left","right","createCornerStyle","borderColor","cornerSize","cornerBorderWidth","corner","dynamicStyle","borderTopWidth","startsWith","borderBottomWidth","borderLeftWidth","endsWith","borderRightWidth","createScanLineStyle","margin","scanLineHeight","shadowColor","translateY","borderRadius","transform","shadowOffset","shadowOpacity","shadowRadius","elevation","OS","useScanLineAnimation","lineTravel","anim","Value","current","animation","loop","sequence","timing","toValue","duration","easing","linear","useNativeDriver","start","stop","interpolate","inputRange","outputRange","QrViewArea","memo","theme","appliedTheme","colors","boxDimensions","overlay","shadow","overlayStyles","bottom","scanBoxStyle","scanBox","getCornerStyle","button","scanLineStyle","cornerPositions","style","container","pointerEvents","children","map","create","absoluteFillObject","zIndex","overlayTop","overlayBottom","justifyContent","alignItems","overflow","corner_tl","corner_tr","corner_bl","corner_br"],"sourceRoot":"../../../../../../../src","sources":["components/Auth/One/QrLogin/components/QrViewArea.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Auth/One/SignUp/SignUp.js

@@ -0,0 +1,362 @@
+"use strict";
+
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, View, Platform, Keyboard, SafeAreaView } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Input } from "../../../Input/Input.js";
+import { Button } from "../../../Button/index.js";
+import { BackgroundLayout } from "../../../BackgroundLayout/BackgroundLayout.js";
+import { Logo } from "../../../Logo/Logo.js";
+import TextButton from "../../../Button/TextButton.js";
+import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
+import { useKeyboard } from "../../../../hooks/useKeyboard.js";
+import HideKeyboard from "../../../Keyboard/HideKeyboard.js";
+import BackBtn from "../../../Button/BackBtn.js";
+import { Text } from "../../../Text/index.js";
+import { RFValue } from 'react-native-responsive-fontsize';
+import { getResponsiveBottomSpacing } from "../../../../utils/Spacing.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Signup = /*#__PURE__*/React.memo(({
+  title = 'Sign Up',
+  onSubmit,
+  onLogin,
+  onTopBackBtnPress,
+  containerStyle,
+  titleStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  topBackBtnStyle,
+  minPasswordLength = 6,
+  loadingSubmitBtn,
+  backgroundImage,
+  logoUri,
+  theme: overrideTheme,
+  text,
+  loginTextProps,
+  loginLinkTextProps,
+  renderLogo,
+  renderSingUpHeader,
+  renderLoginPrompt,
+  renderSubmitButton,
+  renderTopBackBtn
+}) => {
+  const {
+    control,
+    handleSubmit,
+    formState: {
+      errors,
+      isValid,
+      touchedFields
+    },
+    getValues
+  } = useForm({
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    },
+    mode: 'onChange'
+  });
+  const {
+    theme: resolvedTheme
+  } = useInternalTheme(overrideTheme);
+  const {
+    isKeyboardOpen
+  } = useKeyboard();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const handleFormSubmit = useCallback(async data => {
+    if (!onSubmit) return;
+    setIsLoading(true);
+    try {
+      await onSubmit(data);
+    } catch (error) {
+      console.error('Form submission error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSubmit]);
+  const shouldRender = useMemo(() => condition => typeof condition === 'function' || !!condition, []);
+
+  // Memoize gradient split background
+  const gradientSplitBackground = useMemo(() => isKeyboardOpen ? Platform.OS === 'ios' ? 0.19 : 0.14 : 0.3, [isKeyboardOpen]);
+
+  // Memoize disabled state
+  const isDisabled = useMemo(() => loadingSubmitBtn || isLoading, [loadingSubmitBtn, isLoading]);
+  return /*#__PURE__*/_jsx(BackgroundLayout, {
+    theme: overrideTheme,
+    backgroundImage: backgroundImage?.source,
+    gradientSplitBackground: gradientSplitBackground,
+    children: /*#__PURE__*/_jsx(SafeAreaView, {
+      style: styles.safeArea,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.container, containerStyle],
+        children: [shouldRender(renderTopBackBtn || onTopBackBtnPress) && /*#__PURE__*/_jsx(View, {
+          style: styles.topBackBtnWrapper,
+          children: renderTopBackBtn ? renderTopBackBtn({
+            onPress: onTopBackBtnPress ?? (() => {})
+          }) : /*#__PURE__*/_jsx(BackBtn, {
+            theme: overrideTheme,
+            style: topBackBtnStyle,
+            onPress: onTopBackBtnPress
+          })
+        }), /*#__PURE__*/_jsxs(HideKeyboard, {
+          keyboardVerticalOffset: scale(-50),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.centerContent,
+            children: [renderLogo ? renderLogo() : logoUri ? /*#__PURE__*/_jsx(Logo, {
+              logoUri: logoUri,
+              width: 100,
+              height: 100
+            }) : null, renderSingUpHeader ? renderSingUpHeader() : /*#__PURE__*/_jsx(Text, {
+              style: [styles.title, titleStyle],
+              children: title
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.form, formStyle],
+              children: [/*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "username",
+                rules: {
+                  required: 'Username is required',
+                  minLength: {
+                    value: 3,
+                    message: 'At least 3 characters'
+                  }
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(Input.One, {
+                  placeholder: text?.usernamePlaceholder || 'Username',
+                  label: text?.usernameLabel || 'Username',
+                  value: value,
+                  onChangeText: onChange,
+                  onBlur: onBlur,
+                  disabled: isDisabled,
+                  error: !!touchedFields.username && !!errors.username,
+                  errorMessage: errors.username?.message,
+                  inputStyle: inputStyle,
+                  containerStyle: inputContainerStyle,
+                  theme: overrideTheme
+                })
+              }), /*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "email",
+                rules: {
+                  required: 'Email is required',
+                  pattern: {
+                    value: /^\S+@\S+\.\S+$/,
+                    message: 'Enter a valid email address'
+                  }
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(Input.One, {
+                  placeholder: text?.emailPlaceholder || 'Email',
+                  label: text?.emailLabel || 'Email',
+                  value: value,
+                  onChangeText: inputText => {
+                    const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                    onChange(sanitized);
+                  },
+                  onBlur: onBlur,
+                  disabled: isDisabled,
+                  error: !!touchedFields.email && !!errors.email,
+                  errorMessage: errors.email?.message,
+                  inputStyle: inputStyle,
+                  containerStyle: inputContainerStyle,
+                  theme: overrideTheme,
+                  textContentType: "emailAddress",
+                  autoCapitalize: "none",
+                  keyboardType: "email-address",
+                  autoCorrect: false
+                })
+              }), /*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "password",
+                rules: {
+                  required: 'Password is required',
+                  minLength: {
+                    value: minPasswordLength,
+                    message: `Minimum ${minPasswordLength} characters`
+                  }
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(Input.One, {
+                  placeholder: text?.passwordPlaceholder || 'Password',
+                  label: text?.passwordLabel || 'Password',
+                  value: value,
+                  secureTextEntry: true,
+                  onChangeText: inputText => {
+                    const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                    onChange(sanitized);
+                  },
+                  onBlur: onBlur,
+                  disabled: isDisabled,
+                  inputStyle: inputStyle,
+                  error: !!touchedFields.password && !!errors.password,
+                  errorMessage: errors.password?.message,
+                  containerStyle: inputContainerStyle,
+                  textContentType: "none",
+                  autoCapitalize: "none",
+                  spellCheck: false,
+                  autoCorrect: false,
+                  autoComplete: "off",
+                  theme: overrideTheme
+                })
+              }), /*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "confirmPassword",
+                rules: {
+                  required: 'Confirm password is required',
+                  validate: value => value === getValues('password') || 'Passwords do not match'
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(Input.One, {
+                  placeholder: text?.confirmPasswordPlaceholder || 'Confirm Password',
+                  label: text?.confirmPasswordLabel || 'Confirm Password',
+                  value: value,
+                  secureTextEntry: true,
+                  onChangeText: inputText => {
+                    const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                    onChange(sanitized);
+                  },
+                  onBlur: onBlur,
+                  error: !!touchedFields.confirmPassword && !!errors.confirmPassword,
+                  disabled: isDisabled,
+                  errorMessage: errors.confirmPassword?.message,
+                  inputStyle: inputStyle,
+                  containerStyle: inputContainerStyle,
+                  theme: overrideTheme,
+                  textContentType: "none",
+                  autoCapitalize: "none",
+                  spellCheck: false,
+                  autoCorrect: false,
+                  autoComplete: "off"
+                })
+              }), !isKeyboardOpen && (renderSubmitButton ? renderSubmitButton({
+                onPress: handleSubmit(handleFormSubmit),
+                disabled: !isValid || isDisabled,
+                loading: isDisabled
+              }) : /*#__PURE__*/_jsx(Button.Primary, {
+                title: text?.signupButton || 'Sign up',
+                disabled: !isValid || isDisabled,
+                theme: overrideTheme,
+                loading: isDisabled,
+                loadingText: text?.loadingSubmitBtnText || 'Signing up...',
+                onPress: handleSubmit(handleFormSubmit)
+              }))]
+            })]
+          }), !isKeyboardOpen && shouldRender(renderLoginPrompt || onLogin) && (renderLoginPrompt ? renderLoginPrompt() : /*#__PURE__*/_jsx(View, {
+            style: [styles.loginContainerWrapper, {
+              bottom: getResponsiveBottomSpacing(35)
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: styles.loginContainer,
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.loginRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.loginPrompt, loginTextProps],
+                  color: resolvedTheme?.colors?.textPrimary,
+                  children: text?.loginPrompt || `Already have an account?`
+                }), /*#__PURE__*/_jsx(TextButton, {
+                  title: text?.loginLink || 'Login',
+                  onPress: () => {
+                    Keyboard.dismiss();
+                    requestAnimationFrame(() => {
+                      onLogin?.();
+                    });
+                  },
+                  bold: true,
+                  underline: true,
+                  color: resolvedTheme?.colors?.button,
+                  style: loginLinkTextProps
+                })]
+              })
+            })
+          }))]
+        })]
+      })
+    })
+  });
+});
+export default Signup;
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: verticalScale(12)
+  },
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(16),
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  topBackBtnWrapper: {
+    position: 'absolute',
+    top: verticalScale(6),
+    left: 0,
+    zIndex: 10
+  },
+  centerContent: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: RFValue(21),
+    fontWeight: '700',
+    marginTop: verticalScale(5),
+    marginBottom: verticalScale(20)
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(6)
+  },
+  loginContainerWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center'
+  },
+  loginRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  },
+  loginPrompt: {
+    textAlign: 'center',
+    marginRight: 4
+  },
+  loginContainer: {
+    alignItems: 'center'
+  }
+});
+//# sourceMappingURL=SignUp.js.map