-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Button,
 Divider,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import {
 Image,
 KeyboardAvoidingView,
 ScrollView,
 StyleSheet,
 Text,
 TextInput,
 View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const [collaboratoremail, setCollaboratoremail] = React.useState(undefined);
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewFu}
       keyboardVerticalOffset={0}
       behavior=""height""
       enabled={true}
     >
       <ScrollView
         contentContainerStyle={styles.scrollViewYz}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={true}
         bounces={true}
       >
         <View style={styles.viewTn}>
           <Image
             style={styles.image5A}
             resizeMode=""contain""
             source={Images.WorkspaceIconPlaceholder}
           />
           <Text
             style={StyleSheet.flatten([
               styles.textYI,
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             Invite Collaborators
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textZ5,
               theme.typography.subtitle1,
               { color: theme.colors.medium },
             ])}
           >
             Add a collaborator to your team.
           </Text>
         </View>
         <View
           style={styles.viewOp}
           accessible={true}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           hitSlop={{}}
         >
           <View
             hitSlop={{}}
             importantForAccessibility=""auto""
             pointerEvents=""auto""
             accessible={true}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textVi,
                 theme.typography.caption,
                 { color: theme.colors.strong },
               ])}
               textBreakStrategy=""highQuality""
               ellipsizeMode=""tail""
               accessible={true}
               allowFontScaling={true}
             >
               Add Collaborator
             </Text>
             <View
               style={styles.viewIo}
               accessible={true}
               pointerEvents=""auto""
               hitSlop={{}}
               importantForAccessibility=""auto""
             >
               <TextInput
                 style={StyleSheet.flatten([
                   styles.textInputKI,
                   {
                     backgroundColor: theme.colors.background,
                     borderColor: theme.colors.divider,
                     borderRadius: theme.borderRadius.global,
                     color: theme.colors.strong,
                   },
                 ])}
                 value={collaboratoremail}
                 clearButtonMode=""while-editing""
                 autoCapitalize=""none""
                 returnKeyType=""done""
                 placeholder=""Email""
                 textContentType=""emailaddress""
                 placeholderTextColor={theme.colors.medium}
                 onChangeText={collaboratoremail =>
                   setCollaboratoremail(collaboratoremail)
                 }
                 spellcheck={true}
                 allowFontScaling={true}
                 keyboardType=""email-address""
                 enablesReturnKeyAutomatically={false}
               />
             </View>
           </View>
           <View
             style={styles.viewYa}
             hitSlop={{}}
             importantForAccessibility=""auto""
             pointerEvents=""auto""
             accessible={true}
           >
             <Button
               style={StyleSheet.flatten([
                 styles.buttonJv,
                 { borderRadius: theme.borderRadius.global },
               ])}
               type=""solid""
               icon=""FontAwesome/send""
             >
               Send Invite
             </Button>
           </View>
         </View>
         <View
           style={styles.viewGf}
           hitSlop={{}}
           accessible={true}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
         >
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline5,
               { color: theme.colors.strong },
             ])}
             ellipsizeMode=""tail""
             textBreakStrategy=""highQuality""
             accessible={true}
             allowFontScaling={true}
           >
             Team
           </Text>
         </View>
         <View
           style={styles.viewN2}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           hitSlop={{}}
           accessible={true}
         >
           <Touchable>
             <View
               style={styles.viewF4}
               accessible={true}
               importantForAccessibility=""auto""
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <View
                 style={styles.viewRp}
                 importantForAccessibility=""auto""
                 accessible={true}
                 pointerEvents=""auto""
                 hitSlop={{}}
               >
                 <Image
                   style={styles.imageTi}
                   source={Images.ProfilePlaceholder}
                   resizeMode=""contain""
                 />
                 <View
                   style={styles.view20}
                   hitSlop={{}}
                   importantForAccessibility=""auto""
                   pointerEvents=""auto""
                   accessible={true}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.subtitle1,
                       { color: theme.colors.medium },
                     ])}
                     textBreakStrategy=""highQuality""
                     accessible={true}
                     allowFontScaling={true}
                     ellipsizeMode=""tail""
                   >
                     Team Member Name
                   </Text>
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.caption,
                       { color: theme.colors.light },
                     ])}
                     textBreakStrategy=""highQuality""
                     accessible={true}
                     allowFontScaling={true}
                     ellipsizeMode=""tail""
                   >
                     teammate@email.com
                   </Text>
                 </View>
               </View>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.caption,
                   { color: theme.colors.light },
                 ])}
                 accessible={true}
                 textBreakStrategy=""highQuality""
                 ellipsizeMode=""tail""
                 allowFontScaling={true}
               >
                 Owner
               </Text>
             </View>
             <Divider
               style={styles.dividerSG}
               color={theme.colors.divider}
               height={1}
             />
           </Touchable>
           <Touchable>
             <View
               style={styles.viewZj}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
               accessible={true}
               hitSlop={{}}
             >
               <View
                 style={styles.viewOd}
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 accessible={true}
                 pointerEvents=""auto""
               >
                 <Image
                   style={styles.imageKb}
                   resizeMode=""contain""
                   source={Images.ProfilePlaceholder}
                 />
                 <View
                   style={styles.viewLp}
                   pointerEvents=""auto""
                   importantForAccessibility=""auto""
                   hitSlop={{}}
                   accessible={true}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.subtitle1,
                       { color: theme.colors.medium },
                     ])}
                     textBreakStrategy=""highQuality""
                     allowFontScaling={true}
                     ellipsizeMode=""tail""
                     accessible={true}
                   >
                     Team Member Name
                   </Text>
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.caption,
                       { color: theme.colors.light },
                     ])}
                     textBreakStrategy=""highQuality""
                     accessible={true}
                     allowFontScaling={true}
                     ellipsizeMode=""tail""
                   >
                     teammate@email.com
                   </Text>
                 </View>
               </View>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.caption,
                   { color: theme.colors.light },
                 ])}
                 allowFontScaling={true}
                 accessible={true}
                 ellipsizeMode=""tail""
                 textBreakStrategy=""highQuality""
               >
                 Admin
               </Text>
             </View>
             <Divider
               style={styles.dividerDc}
               height={1}
               color={theme.colors.divider}
             />
           </Touchable>
         </View>
       </ScrollView>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 textVi: {
   textTransform: 'uppercase',
 },
 buttonJv: {
   height: 54,
   justifyContent: 'center',
   alignItems: 'center',
 },
 viewRp: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '100%',
   maxWidth: '80%',
 },
 viewF4: {
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
 },
 viewOd: {
   width: '100%',
   flexDirection: 'row',
   maxWidth: '80%',
   alignItems: 'flex-start',
 },
 viewZj: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 scrollViewYz: {
   flexGrow: 1,
 },
 keyboardAvoidingViewFu: {
   flexGrow: 1,
 },
 viewTn: {
   paddingBottom: 34,
   paddingTop: 34,
   paddingLeft: 32,
   paddingRight: 32,
 },
 image5A: {
   marginBottom: 24,
   marginTop: 24,
   height: 54,
   width: 54,
 },
 textInputKI: {
   height: 54,
   borderTopWidth: 1,
   borderBottomWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   paddingLeft: 14,
   paddingRight: 14,
 },
 imageTi: {
   width: 42,
   height: 42,
   marginRight: 14,
 },
 imageKb: {
   marginRight: 14,
   height: 42,
   width: 42,
 },
 viewIo: {
   paddingTop: 12,
   marginBottom: 12,
   paddingBottom: 12,
 },
 viewYa: {
   marginBottom: 14,
 },
 viewOp: {
   paddingBottom: 14,
   paddingRight: 32,
   paddingLeft: 32,
 },
 view20: {
   paddingLeft: 14,
   paddingRight: 34,
   marginRight: 14,
 },
 viewLp: {
   paddingLeft: 14,
   paddingRight: 34,
   marginRight: 14,
 },
 textYI: {
   marginBottom: 6,
 },
 dividerSG: {
   marginBottom: 24,
   marginTop: 24,
   height: 1,
 },
 dividerDc: {
   marginBottom: 24,
   height: 1,
   marginTop: 24,
 },
 viewGf: {
   width: '100%',
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingRight: 32,
   paddingLeft: 32,
   marginTop: 24,
   marginBottom: 14,
 },
 textZ5: {
   textAlign: 'left',
 },
 viewN2: {
   paddingLeft: 32,
   paddingRight: 32,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);