@oxyhq/services 5.4.3 → 5.4.5

package/lib/module/ui/screens/SignUpScreen.js

@@ -1,39 +1,583 @@
 "use strict";
 
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
-import { useOxy } from "../context/OxyContext.js";
-import { useThemeColors, createCommonStyles } from "../styles/index.js";
+import { useOxy } from '../context/OxyContext';
+import { useThemeColors } from '../styles';
 import { Ionicons } from '@expo/vector-icons';
-import Svg, { Path, Circle } from 'react-native-svg';
-import { toast } from "../../lib/sonner.js";
+import { toast } from '../../lib/sonner';
+import HighFive from '../../assets/illustrations/HighFive';
+import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import TextField from '../components/internal/TextField';
+
+// Types for better type safety
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Constants
+const USERNAME_MIN_LENGTH = 3;
+const PASSWORD_MIN_LENGTH = 8;
+const VALIDATION_DEBOUNCE_MS = 800;
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
+
+// Email validation regex
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Styles factory function
+const createStyles = (colors, theme) => StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 4,
+    paddingBottom: 20
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  modernHeader: {
+    alignItems: 'flex-start',
+    width: '100%',
+    marginBottom: 24
+  },
+  modernTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  welcomeImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20
+  },
+  welcomeTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  welcomeText: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  stepTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  inputContainer: {
+    width: '100%',
+    marginBottom: 24
+  },
+  premiumInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground
+  },
+  inputIcon: {
+    marginRight: 12
+  },
+  inputContent: {
+    flex: 1
+  },
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
+  modernInput: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%'
+  },
+  validationIndicator: {
+    marginLeft: 8
+  },
+  validationCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationIconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  validationTextContainer: {
+    flex: 1
+  },
+  validationTitle: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 2
+  },
+  validationSubtitle: {
+    fontSize: 11,
+    opacity: 0.8
+  },
+  passwordToggle: {
+    padding: 4
+  },
+  passwordHint: {
+    fontSize: 12,
+    marginTop: 4
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    marginVertical: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+    gap: 8,
+    width: '100%'
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5
+  },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16
+  },
+  footerText: {
+    fontSize: 15
+  },
+  linkText: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    textDecorationLine: 'underline'
+  },
+  userInfoContainer: {
+    padding: 20,
+    marginVertical: 20,
+    borderRadius: 24,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.04,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 4,
+    elevation: 1
+  },
+  userInfoText: {
+    fontSize: 16,
+    marginBottom: 8,
+    textAlign: 'center'
+  },
+  actionButtonsContainer: {
+    marginTop: 24
+  },
+  navigationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
+  },
+  navButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 6,
+    minWidth: 70,
+    borderWidth: 1,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  backButton: {
+    backgroundColor: 'transparent',
+    borderTopLeftRadius: 35,
+    borderBottomLeftRadius: 35,
+    borderTopRightRadius: 12,
+    borderBottomRightRadius: 12
+  },
+  nextButton: {
+    backgroundColor: 'transparent',
+    borderTopRightRadius: 35,
+    borderBottomRightRadius: 35,
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12
+  },
+  navButtonText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 20,
+    marginTop: 8
+  },
+  progressDot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    marginHorizontal: 6,
+    borderWidth: 2,
+    borderColor: '#fff',
+    shadowColor: colors.primary,
+    shadowOpacity: 0.08,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 2,
+    elevation: 1
+  },
+  summaryContainer: {
+    padding: 0,
+    marginBottom: 24,
+    width: '100%'
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    marginBottom: 10
+  },
+  summaryLabel: {
+    fontSize: 15,
+    width: 90
+  },
+  summaryValue: {
+    fontSize: 15,
+    fontWeight: '600',
+    flex: 1
+  }
+});
+
+// Custom hooks for better separation of concerns
+const useFormValidation = oxyServices => {
+  const [validationState, setValidationState] = useState({
+    status: 'idle',
+    message: ''
+  });
+  const validationCache = useRef(new Map());
+  const validateUsername = useCallback(async username => {
+    if (!username || username.length < USERNAME_MIN_LENGTH) {
+      setValidationState({
+        status: 'invalid',
+        message: ''
+      });
+      return false;
+    }
+
+    // Check cache first
+    const cached = validationCache.current.get(username);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < CACHE_DURATION_MS) {
+      const isValid = cached.available;
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : 'Username is already taken'
+      });
+      return isValid;
+    }
+    setValidationState({
+      status: 'validating',
+      message: ''
+    });
+    try {
+      const result = await oxyServices.checkUsernameAvailability(username);
+      const isValid = result.available;
+
+      // Cache the result
+      validationCache.current.set(username, {
+        available: isValid,
+        timestamp: now
+      });
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : result.message || 'Username is already taken'
+      });
+      return isValid;
+    } catch (error) {
+      console.error('Username validation error:', error);
+      setValidationState({
+        status: 'invalid',
+        message: 'Unable to validate username. Please try again.'
+      });
+      return false;
+    }
+  }, [oxyServices]);
+  const validateEmail = useCallback(email => {
+    return EMAIL_REGEX.test(email);
+  }, []);
+  const validatePassword = useCallback(password => {
+    return password.length >= PASSWORD_MIN_LENGTH;
+  }, []);
+  const validatePasswordsMatch = useCallback((password, confirmPassword) => {
+    return password === confirmPassword;
+  }, []);
+
+  // Cleanup cache on unmount
+  useEffect(() => {
+    return () => {
+      validationCache.current.clear();
+    };
+  }, []);
+  return {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  };
+};
+const useFormData = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [passwordVisibility, setPasswordVisibility] = useState({
+    password: false,
+    confirmPassword: false
+  });
+  const updateField = useCallback((field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  }, []);
+  const togglePasswordVisibility = useCallback(field => {
+    setPasswordVisibility(prev => ({
+      ...prev,
+      [field]: !prev[field]
+    }));
+  }, []);
+  const resetForm = useCallback(() => {
+    setFormData({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    });
+    setPasswordVisibility({
+      password: false,
+      confirmPassword: false
+    });
+  }, []);
+  return {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  };
+};
+
+// Reusable components
+const ValidationIndicator = /*#__PURE__*/React.memo(({
+  status,
+  colors,
+  styles
+}) => {
+  if (status === 'validating') {
+    return /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: colors.primary,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'valid') {
+    return /*#__PURE__*/_jsx(Ionicons, {
+      name: "checkmark-circle",
+      size: 22,
+      color: colors.success,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'invalid') {
+    return /*#__PURE__*/_jsx(Ionicons, {
+      name: "close-circle",
+      size: 22,
+      color: colors.error,
+      style: styles.validationIndicator
+    });
+  }
+  return null;
+});
+const ValidationMessage = /*#__PURE__*/React.memo(({
+  validationState,
+  colors,
+  styles
+}) => {
+  if (validationState.status === 'idle' || !validationState.message) return null;
+  const isSuccess = validationState.status === 'valid';
+  const backgroundColor = isSuccess ? colors.success + '10' : colors.error + '10';
+  const borderColor = isSuccess ? colors.success + '30' : colors.error + '30';
+  const iconColor = isSuccess ? colors.success : colors.error;
+  const iconName = isSuccess ? 'checkmark-circle' : 'alert-circle';
+  const title = isSuccess ? 'Username Available' : 'Username Taken';
+  const subtitle = isSuccess ? 'Good choice! This username is available' : validationState.message;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.validationCard, {
+      backgroundColor,
+      borderColor
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.validationIconContainer, {
+        backgroundColor: iconColor + '20'
+      }],
+      children: /*#__PURE__*/_jsx(Ionicons, {
+        name: iconName,
+        size: 16,
+        color: iconColor
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.validationTextContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.validationTitle, {
+          color: iconColor
+        }],
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.validationSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: subtitle
+      })]
+    })]
+  });
+});
+const FormInput = /*#__PURE__*/React.memo(({
+  icon,
+  label,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  keyboardType = 'default',
+  autoCapitalize = 'sentences',
+  autoCorrect = true,
+  testID,
+  colors,
+  styles,
+  borderColor,
+  rightComponent
+}) => /*#__PURE__*/_jsx(View, {
+  style: styles.inputContainer,
+  children: /*#__PURE__*/_jsxs(View, {
+    style: [styles.premiumInputWrapper, {
+      borderColor: borderColor || colors.border,
+      backgroundColor: colors.inputBackground,
+      shadowColor: colors.primary,
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 12,
+      elevation: 3
+    }],
+    children: [/*#__PURE__*/_jsx(Ionicons, {
+      name: icon,
+      size: 22,
+      color: colors.secondaryText,
+      style: styles.inputIcon
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.inputContent,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.modernLabel, {
+          color: colors.secondaryText
+        }],
+        children: label
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: [styles.modernInput, {
+          color: colors.text
+        }],
+        value: value,
+        onChangeText: onChangeText,
+        secureTextEntry: secureTextEntry,
+        keyboardType: keyboardType,
+        autoCapitalize: autoCapitalize,
+        autoCorrect: autoCorrect,
+        testID: testID,
+        placeholderTextColor: "transparent"
+      })]
+    }), rightComponent]
+  })
+}));
+const ProgressIndicator = /*#__PURE__*/React.memo(({
+  currentStep,
+  totalSteps,
+  colors,
+  styles
+}) => /*#__PURE__*/_jsx(View, {
+  style: styles.progressContainer,
+  children: Array.from({
+    length: totalSteps
+  }, (_, index) => /*#__PURE__*/_jsx(View, {
+    style: [styles.progressDot, currentStep === index ? {
+      backgroundColor: colors.primary,
+      width: 24
+    } : {
+      backgroundColor: colors.border
+    }]
+  }, index))
+}));
+
+// Main component
 const SignUpScreen = ({
   navigate,
   goBack,
+  onAuthenticated,
   theme
 }) => {
-  // Form data states
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-
-  // Multi-step form states
-  const [currentStep, setCurrentStep] = useState(0);
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [isValidating, setIsValidating] = useState(false);
-  const [validationStatus, setValidationStatus] = useState('idle');
-
-  // Cache for validation results
-  const validationCache = useRef(new Map());
-  const fadeAnim = useRef(new Animated.Value(1)).current;
-  const slideAnim = useRef(new Animated.Value(0)).current;
-  const heightAnim = useRef(new Animated.Value(400)).current;
-  const [containerHeight, setContainerHeight] = useState(400);
   const {
     signUp,
     isLoading,
@@ -42,109 +586,44 @@ const SignUpScreen = ({
     oxyServices
   } = useOxy();
   const colors = useThemeColors(theme);
-  const commonStyles = createCommonStyles(theme);
-
-  // Memoized styles to prevent rerenders
-  const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
-
-  // Input focus animations
-  const handleInputFocus = useCallback(() => {
-    setIsInputFocused(true);
-  }, []);
-  const handleInputBlur = useCallback(() => {
-    setIsInputFocused(false);
-  }, []);
-
-  // Memoized input change handlers
-  const handleUsernameChange = useCallback(text => {
-    setUsername(text);
-    if (validationStatus === 'invalid') {
-      setErrorMessage('');
-      setValidationStatus('idle');
-    }
-  }, [validationStatus]);
-  const handleEmailChange = useCallback(text => {
-    setEmail(text);
-    setErrorMessage('');
-  }, []);
-  const handlePasswordChange = useCallback(text => {
-    setPassword(text);
-    setErrorMessage('');
-  }, []);
-  const handleConfirmPasswordChange = useCallback(text => {
-    setConfirmPassword(text);
-    setErrorMessage('');
-  }, []);
 
-  // Username availability validation using core services
-  const validateUsername = useCallback(async usernameToValidate => {
-    if (!usernameToValidate || usernameToValidate.length < 3) {
-      setValidationStatus('invalid');
-      return false;
-    }
+  // Form state
+  const {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  } = useFormData();
+  const {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  } = useFormValidation(oxyServices);
 
-    // Check cache first (cache valid for 5 minutes)
-    const cached = validationCache.current.get(usernameToValidate);
-    const now = Date.now();
-    if (cached && now - cached.timestamp < 5 * 60 * 1000) {
-      setValidationStatus(cached.available ? 'valid' : 'invalid');
-      setErrorMessage(cached.available ? '' : 'Username is already taken');
-      return cached.available;
-    }
-    setIsValidating(true);
-    setValidationStatus('validating');
-    try {
-      const result = await oxyServices.checkUsernameAvailability(usernameToValidate);
-      if (result.available) {
-        setValidationStatus('valid');
-        setErrorMessage('');
+  // UI state
+  const [currentStep, setCurrentStep] = useState(0);
+  const [errorMessage, setErrorMessage] = useState('');
 
-        // Cache the result
-        validationCache.current.set(usernameToValidate, {
-          available: true,
-          timestamp: now
-        });
-        return true;
-      } else {
-        setValidationStatus('invalid');
-        setErrorMessage(result.message || 'Username is already taken');
+  // Animation refs
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
 
-        // Cache the result
-        validationCache.current.set(usernameToValidate, {
-          available: false,
-          timestamp: now
-        });
-        return false;
-      }
-    } catch (error) {
-      console.error('Username validation error:', error);
-      setValidationStatus('invalid');
-      setErrorMessage('Unable to validate username. Please try again.');
-      return false;
-    } finally {
-      setIsValidating(false);
-    }
-  }, [oxyServices]);
+  // Memoized styles
+  const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
 
   // Debounced username validation
   useEffect(() => {
-    if (!username || username.length < 3) {
-      setValidationStatus('idle');
-      setErrorMessage('');
+    if (!formData.username || formData.username.length < USERNAME_MIN_LENGTH) {
       return;
     }
     const timeoutId = setTimeout(() => {
-      validateUsername(username);
-    }, 800);
+      validateUsername(formData.username);
+    }, VALIDATION_DEBOUNCE_MS);
     return () => clearTimeout(timeoutId);
-  }, [username, validateUsername]);
-
-  // Cleanup cache on unmount
-  useEffect(() => {
-    return () => {
-      validationCache.current.clear();
-    };
-  }, []);
+  }, [formData.username, validateUsername]);
 
   // Animation functions
   const animateTransition = useCallback(nextStep => {
@@ -176,116 +655,83 @@ const SignUpScreen = ({
       animateTransition(currentStep - 1);
     }
   }, [currentStep, animateTransition]);
-  const validateEmail = useCallback(email => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  }, []);
-  const handleSignUp = useCallback(async () => {
-    if (!username || !email || !password || !confirmPassword) {
-      toast.error('Please fill in all fields');
-      return;
-    }
-    if (!validateEmail(email)) {
-      toast.error('Please enter a valid email address');
-      return;
-    }
-    if (validationStatus !== 'valid') {
-      toast.error('Please enter a valid username');
+
+  // Form validation helpers
+  const isIdentityStepValid = useCallback(() => {
+    return formData.username && formData.email && validateEmail(formData.email) && validationState.status === 'valid';
+  }, [formData.username, formData.email, validateEmail, validationState.status]);
+  const isSecurityStepValid = useCallback(() => {
+    return formData.password && validatePassword(formData.password) && validatePasswordsMatch(formData.password, formData.confirmPassword);
+  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
+
+  // Custom next handlers for validation
+  const handleIdentityNext = useCallback(() => {
+    if (!isIdentityStepValid()) {
+      toast.error('Please enter a valid username and email.');
       return;
     }
-    if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
+    nextStep();
+  }, [isIdentityStepValid, nextStep]);
+  const handleSecurityNext = useCallback(() => {
+    if (!isSecurityStepValid()) {
+      toast.error('Please enter a valid password and confirm it.');
       return;
     }
-    if (password.length < 8) {
-      toast.error('Password must be at least 8 characters long');
+    nextStep();
+  }, [isSecurityStepValid, nextStep]);
+
+  // Sign up handler
+  const handleSignUp = useCallback(async () => {
+    if (!isIdentityStepValid() || !isSecurityStepValid()) {
+      toast.error('Please fill in all fields correctly');
       return;
     }
     try {
       setErrorMessage('');
-      await signUp(username, email, password);
+      const user = await signUp(formData.username, formData.email, formData.password);
       toast.success('Account created successfully! Welcome to Oxy!');
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
+      resetForm();
     } catch (error) {
       toast.error(error.message || 'Sign up failed');
     }
-  }, [username, email, password, confirmPassword, validationStatus, validateEmail, signUp]);
+  }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
 
   // Step components
-  const renderWelcomeStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+  const renderWelcomeStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.welcomeImageContainer,
-      children: /*#__PURE__*/_jsxs(Svg, {
-        width: 220,
-        height: 120,
-        viewBox: "0 0 220 120",
-        children: [/*#__PURE__*/_jsx(Path, {
-          d: "M30 100 Q60 20 110 60 Q160 100 190 40",
-          stroke: colors.primary,
-          strokeWidth: "8",
-          fill: "none"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "60",
-          cy: "60",
-          r: "18",
-          fill: colors.primary,
-          opacity: "0.18"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "110",
-          cy: "60",
-          r: "24",
-          fill: colors.primary,
-          opacity: "0.25"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "170",
-          cy: "50",
-          r: "14",
-          fill: colors.primary,
-          opacity: "0.15"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "110",
-          cy: "60",
-          r: "32",
-          fill: "#fff",
-          opacity: "0.7"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "100",
-          cy: "55",
-          r: "4",
-          fill: colors.primary
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "120",
-          cy: "55",
-          r: "4",
-          fill: colors.primary
-        }), /*#__PURE__*/_jsx(Path, {
-          d: "M104 68 Q110 75 116 68",
-          stroke: colors.primary,
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.welcomeText, {
-        color: colors.text
-      }],
-      children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: colors.primary
+    children: [/*#__PURE__*/_jsx(HighFive, {
+      width: 100,
+      height: 100
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.modernHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.modernTitle, {
+          color: colors.text
+        }],
+        children: "Welcome to Oxy"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.modernSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
+      })]
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Get Started',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        testID: 'welcome-next-button'
       }],
-      onPress: nextStep,
-      testID: "welcome-next-button",
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.buttonText,
-        children: "Get Started"
-      })
+      colors: colors
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/_jsxs(Text, {
@@ -304,257 +750,148 @@ const SignUpScreen = ({
       })]
     })]
   }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
-  const renderIdentityStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+  const renderIdentityStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Who are you?"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Username"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/_jsx(TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Choose a username",
-          placeholderTextColor: colors.placeholder,
-          value: username,
-          onChangeText: handleUsernameChange,
-          autoCapitalize: "none",
-          testID: "username-input"
-        }), validationStatus === 'validating' && /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.primary,
-          style: styles.validationIndicator
-        }), validationStatus === 'valid' && /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 20,
-          color: colors.success,
-          style: styles.validationIndicator
-        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsx(Ionicons, {
-          name: "close-circle",
-          size: 20,
-          color: colors.error,
-          style: styles.validationIndicator
-        })]
-      }), validationStatus === 'valid' && /*#__PURE__*/_jsxs(View, {
-        style: [styles.validationSuccessCard, {
-          backgroundColor: colors.success + '15'
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 16,
-          color: colors.success
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.validationText, {
-            color: colors.success
-          }],
-          children: "Username is available"
-        })]
-      }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsxs(View, {
-        style: [styles.validationErrorCard, {
-          backgroundColor: colors.error + '15'
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "alert-circle",
-          size: 16,
-          color: colors.error
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.validationText, {
-            color: colors.error
-          }],
-          children: errorMessage || 'Username is already taken'
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Email"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: colors.inputBackground,
-          borderColor: colors.border,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.stepTitle, {
           color: colors.text
         }],
-        placeholder: "Enter your email",
-        placeholderTextColor: colors.placeholder,
-        value: email,
-        onChangeText: handleEmailChange,
-        autoCapitalize: "none",
-        keyboardType: "email-address",
-        testID: "email-input"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+        children: "Who are you?"
+      })
+    }), /*#__PURE__*/_jsx(TextField, {
+      icon: "person-outline",
+      label: "Username",
+      value: formData.username,
+      onChangeText: text => {
+        updateField('username', text);
+        setErrorMessage('');
+      },
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "username-input",
+      colors: colors,
+      variant: "filled",
+      error: validationState.status === 'invalid' ? validationState.message : undefined,
+      loading: validationState.status === 'validating',
+      success: validationState.status === 'valid'
+    }), /*#__PURE__*/_jsx(ValidationMessage, {
+      validationState: validationState,
+      colors: colors,
+      styles: styles
+    }), /*#__PURE__*/_jsx(TextField, {
+      icon: "mail-outline",
+      label: "Email",
+      value: formData.email,
+      onChangeText: text => {
+        updateField('email', text);
+      },
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "email-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton, {
-          backgroundColor: colors.primary
-        }],
-        onPress: nextStep,
-        disabled: !username || !email || !validateEmail(email) || validationStatus !== 'valid',
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: '#FFFFFF'
-          }],
-          children: "Next"
-        })
-      })]
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleIdentityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, username, email, validationStatus, errorMessage, handleUsernameChange, handleEmailChange, validateEmail, prevStep, nextStep, styles]);
-  const renderSecurityStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, colors, formData, validationState, updateField, setErrorMessage, prevStep, handleIdentityNext, styles]);
+  const renderSecurityStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Secure your account"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Password"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/_jsx(TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Create a password",
-          placeholderTextColor: colors.placeholder,
-          value: password,
-          onChangeText: handlePasswordChange,
-          secureTextEntry: !showPassword,
-          testID: "password-input"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowPassword(!showPassword),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: showPassword ? 'eye-off' : 'eye',
-            size: 20,
-            color: colors.placeholder
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.passwordHint, {
-          color: colors.secondaryText
-        }],
-        children: "Password must be at least 8 characters long"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.stepTitle, {
           color: colors.text
         }],
-        children: "Confirm Password"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/_jsx(TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Confirm your password",
-          placeholderTextColor: colors.placeholder,
-          value: confirmPassword,
-          onChangeText: handleConfirmPasswordChange,
-          secureTextEntry: !showConfirmPassword,
-          testID: "confirm-password-input"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowConfirmPassword(!showConfirmPassword),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: showConfirmPassword ? 'eye-off' : 'eye',
-            size: 20,
-            color: colors.placeholder
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+        children: "Secure your account"
+      })
+    }), /*#__PURE__*/_jsx(TextField, {
+      icon: "lock-closed-outline",
+      label: "Password",
+      value: formData.password,
+      onChangeText: text => {
+        updateField('password', text);
+      },
+      secureTextEntry: !passwordVisibility.password,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.password && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined
+    }), /*#__PURE__*/_jsxs(Text, {
+      style: [styles.passwordHint, {
+        color: colors.secondaryText
+      }],
+      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
+    }), /*#__PURE__*/_jsx(TextField, {
+      icon: "lock-closed-outline",
+      label: "Confirm Password",
+      value: formData.confirmPassword,
+      onChangeText: text => {
+        updateField('confirmPassword', text);
+      },
+      secureTextEntry: !passwordVisibility.confirmPassword,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "confirm-password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.confirmPassword && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton, {
-          backgroundColor: colors.primary
-        }],
-        onPress: nextStep,
-        disabled: !password || password.length < 8 || password !== confirmPassword,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: '#FFFFFF'
-          }],
-          children: "Next"
-        })
-      })]
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleSecurityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, password, confirmPassword, showPassword, showConfirmPassword, handlePasswordChange, handleConfirmPasswordChange, prevStep, nextStep, styles]);
-  const renderSummaryStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, colors, formData, passwordVisibility, updateField, setErrorMessage, togglePasswordVisibility, prevStep, handleSecurityNext, styles]);
+  const renderSummaryStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Ready to join"
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.stepTitle, {
+          color: colors.text
+        }],
+        children: "Ready to join"
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.summaryContainer,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -568,7 +905,7 @@ const SignUpScreen = ({
           style: [styles.summaryValue, {
             color: colors.text
           }],
-          children: username
+          children: formData.username
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.summaryRow,
@@ -581,66 +918,29 @@ const SignUpScreen = ({
           style: [styles.summaryValue, {
             color: colors.text
           }],
-          children: email
+          children: formData.email
         })]
       })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: colors.primary
-      }],
-      onPress: handleSignUp,
-      disabled: isLoading,
-      testID: "signup-button",
-      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.buttonText,
-        children: "Create Account"
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.navigationButtons,
-      children: /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      })
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Create Account',
+        onPress: handleSignUp,
+        icon: 'checkmark',
+        variant: 'primary',
+        disabled: isLoading,
+        loading: isLoading,
+        testID: 'signup-button'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, username, email, isLoading, handleSignUp, prevStep, styles]);
-  const renderProgressIndicators = useMemo(() => /*#__PURE__*/_jsx(View, {
-    style: styles.progressContainer,
-    children: [0, 1, 2, 3].map(step => /*#__PURE__*/_jsx(View, {
-      style: [styles.progressDot, currentStep === step ? {
-        backgroundColor: colors.primary,
-        width: 24
-      } : {
-        backgroundColor: colors.border
-      }]
-    }, step))
-  }), [currentStep, colors, styles]);
-  const renderCurrentStep = useCallback(() => {
-    switch (currentStep) {
-      case 0:
-        return renderWelcomeStep;
-      case 1:
-        return renderIdentityStep;
-      case 2:
-        return renderSecurityStep;
-      case 3:
-        return renderSummaryStep;
-      default:
-        return renderWelcomeStep;
-    }
-  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
+  }), [fadeAnim, slideAnim, colors, formData, isLoading, handleSignUp, prevStep, styles]);
 
-  // If user is already authenticated, show user info and account center option
+  // If user is already authenticated, show user info
   if (user && isAuthenticated) {
     return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
       style: [styles.container, {
@@ -689,6 +989,22 @@ const SignUpScreen = ({
       })]
     });
   }
+
+  // Render current step
+  const renderCurrentStep = useCallback(() => {
+    switch (currentStep) {
+      case 0:
+        return renderWelcomeStep();
+      case 1:
+        return renderIdentityStep();
+      case 2:
+        return renderSecurityStep();
+      case 3:
+        return renderSummaryStep();
+      default:
+        return renderWelcomeStep();
+    }
+  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
   return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
     style: [styles.container, {
       backgroundColor: colors.background
@@ -701,232 +1017,14 @@ const SignUpScreen = ({
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       keyboardShouldPersistTaps: "handled",
-      children: [renderProgressIndicators, renderCurrentStep()]
+      children: [/*#__PURE__*/_jsx(ProgressIndicator, {
+        currentStep: currentStep,
+        totalSteps: 4,
+        colors: colors,
+        styles: styles
+      }), renderCurrentStep()]
     })]
   });
 };
-
-// Memoized styles creation
-const createStyles = (colors, theme) => StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingTop: 40,
-    paddingBottom: 40
-  },
-  stepContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 500
-  },
-  welcomeImageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 30
-  },
-  welcomeTitle: {
-    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
-    lineHeight: 48,
-    marginBottom: 24,
-    textAlign: 'left',
-    letterSpacing: -1
-  },
-  welcomeText: {
-    fontSize: 16,
-    textAlign: 'left',
-    marginBottom: 30,
-    lineHeight: 24
-  },
-  stepTitle: {
-    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 34,
-    marginBottom: 20,
-    color: colors.primary,
-    maxWidth: '90%',
-    textAlign: 'left'
-  },
-  inputContainer: {
-    marginBottom: 18,
-    width: '100%'
-  },
-  label: {
-    fontSize: 15,
-    marginBottom: 8,
-    fontWeight: '500',
-    letterSpacing: 0.1
-  },
-  input: {
-    height: 48,
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    borderWidth: 1,
-    fontSize: 16,
-    marginBottom: 2
-  },
-  validationIndicator: {
-    position: 'absolute',
-    right: 16,
-    top: 14
-  },
-  validationSuccessCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    gap: 8
-  },
-  validationErrorCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    gap: 8
-  },
-  validationText: {
-    fontSize: 12,
-    fontWeight: '500'
-  },
-  passwordToggle: {
-    position: 'absolute',
-    right: 16,
-    top: 14,
-    padding: 4
-  },
-  passwordHint: {
-    fontSize: 12,
-    marginTop: 4
-  },
-  button: {
-    height: 48,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 24,
-    shadowColor: colors.primary,
-    shadowOpacity: 0.12,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowRadius: 8,
-    elevation: 2,
-    width: '100%'
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontSize: 17,
-    fontWeight: '700',
-    letterSpacing: 0.2
-  },
-  footerTextContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 28
-  },
-  footerText: {
-    fontSize: 15
-  },
-  linkText: {
-    fontSize: 15,
-    fontWeight: '700'
-  },
-  userInfoContainer: {
-    padding: 20,
-    marginVertical: 20,
-    borderRadius: 24,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.04,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 4,
-    elevation: 1
-  },
-  userInfoText: {
-    fontSize: 16,
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  actionButtonsContainer: {
-    marginTop: 24
-  },
-  navigationButtons: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 28,
-    width: '100%'
-  },
-  navButton: {
-    borderRadius: 24,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 28,
-    backgroundColor: '#F3E5F5'
-  },
-  backButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1
-  },
-  nextButton: {
-    minWidth: 100
-  },
-  navButtonText: {
-    fontSize: 16,
-    fontWeight: '700'
-  },
-  progressContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginBottom: 20,
-    marginTop: 8
-  },
-  progressDot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
-    marginHorizontal: 6,
-    borderWidth: 2,
-    borderColor: '#fff',
-    shadowColor: colors.primary,
-    shadowOpacity: 0.08,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 2,
-    elevation: 1
-  },
-  summaryContainer: {
-    padding: 0,
-    marginBottom: 24,
-    width: '100%'
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    marginBottom: 10
-  },
-  summaryLabel: {
-    fontSize: 15,
-    width: 90
-  },
-  summaryValue: {
-    fontSize: 15,
-    fontWeight: '600',
-    flex: 1
-  }
-});
 export default SignUpScreen;
 //# sourceMappingURL=SignUpScreen.js.map