-- CODE language-jsx --
import React from 'react';
import {
 Button,
 Icon,
 RadioButton,
 ScreenContainer,
 withTheme,
} from '@draftbit/ui';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer scrollable={false} hasSafeArea={true}>
     <ScrollView
       contentContainerStyle={styles.scrollViewGc}
       bounces={true}
       showsVerticalScrollIndicator={true}
       showsHorizontalScrollIndicator={true}
     >
       <View
         style={styles.viewVa}
         pointerEvents=""auto""
         hitSlop={{}}
         importantForAccessibility=""auto""
         accessible={true}
       >
         <Text
           style={StyleSheet.flatten([
             theme.typography.headline2,
             { color: theme.colors.strong },
           ])}
         >
           Get Started
         </Text>
       </View>
       <View
         pointerEvents=""auto""
         hitSlop={{}}
         importantForAccessibility=""auto""
         accessible={true}
       >
         <View
           pointerEvents=""auto""
           hitSlop={{}}
           importantForAccessibility=""auto""
           accessible={true}
         >
           <View
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <View
               style={StyleSheet.flatten([
                 styles.viewA7,
                 {
                   borderRadius: theme.borderRadius.global,
                   backgroundColor: theme.colors.background,
                   borderColor: theme.colors.divider,
                 },
               ])}
               hitSlop={{}}
               accessible={true}
               importantForAccessibility=""auto""
               pointerEvents=""auto""
             >
               <View
                 style={styles.viewTm}
                 pointerEvents=""auto""
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 accessible={true}
               >
                 <View
                   style={styles.viewS6}
                   accessible={true}
                   pointerEvents=""auto""
                   importantForAccessibility=""auto""
                   hitSlop={{}}
                 >
                   <Icon
                     style={styles.iconBA}
                     size={32}
                     name=""MaterialCommunityIcons/numeric-1-circle""
                     color={theme.colors.light}
                   />
                 </View>
                 <View
                   style={styles.viewHr}
                   pointerEvents=""auto""
                   importantForAccessibility=""auto""
                   accessible={true}
                   hitSlop={{}}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.headline6,
                       { color: theme.colors.strong },
                     ])}
                   >
                     Option 1
                   </Text>
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.caption,
                       { color: theme.colors.medium },
                     ])}
                   >
                     Description
                   </Text>
                 </View>
               </View>
               <RadioButton
                 style={styles.radioButtonNS}
                 selected={false}
                 color={theme.colors.primary}
                 unselectedColor={theme.colors.medium}
               />
             </View>
           </View>
           <View
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <View
               style={StyleSheet.flatten([
                 styles.viewLs,
                 {
                   borderRadius: theme.borderRadius.global,
                   backgroundColor: theme.colors.background,
                   borderColor: theme.colors.divider,
                 },
               ])}
               hitSlop={{}}
               accessible={true}
               importantForAccessibility=""auto""
               pointerEvents=""auto""
             >
               <View
                 style={styles.viewUy}
                 pointerEvents=""auto""
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 accessible={true}
               >
                 <View
                   style={styles.viewKf}
                   accessible={true}
                   pointerEvents=""auto""
                   importantForAccessibility=""auto""
                   hitSlop={{}}
                 >
                   <Icon
                     style={styles.iconDa}
                     size={32}
                     name=""MaterialCommunityIcons/numeric-2-circle""
                     color={theme.colors.light}
                   />
                 </View>
                 <View
                   style={styles.viewLy}
                   pointerEvents=""auto""
                   importantForAccessibility=""auto""
                   accessible={true}
                   hitSlop={{}}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.headline6,
                       { color: theme.colors.strong },
                     ])}
                   >
                     Option 2
                   </Text>
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.caption,
                       { color: theme.colors.medium },
                     ])}
                   >
                     Description
                   </Text>
                 </View>
               </View>
               <RadioButton
                 style={styles.radioButtonFc}
                 selected={false}
                 color={theme.colors.primary}
                 unselectedColor={theme.colors.medium}
               />
             </View>
           </View>
           <View
             pointerEvents=""auto""
             hitSlop={{}}
             importantForAccessibility=""auto""
             accessible={true}
           >
             <View
               style={StyleSheet.flatten([
                 styles.viewGw,
                 {
                   backgroundColor: theme.colors.background,
                   borderRadius: theme.borderRadius.global,
                   borderColor: theme.colors.divider,
                 },
               ])}
               accessible={true}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
               hitSlop={{}}
             >
               <View
                 style={styles.view9V}
                 pointerEvents=""auto""
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 accessible={true}
               >
                 <View
                   style={styles.viewO5}
                   pointerEvents=""auto""
                   hitSlop={{}}
                   importantForAccessibility=""auto""
                   accessible={true}
                 >
                   <Icon
                     style={styles.icon3R}
                     size={32}
                     color={theme.colors.light}
                     name=""MaterialCommunityIcons/numeric-3-circle""
                   />
                 </View>
                 <View
                   style={styles.viewFg}
                   pointerEvents=""auto""
                   hitSlop={{}}
                   importantForAccessibility=""auto""
                   accessible={true}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.headline6,
                       { color: theme.colors.strong },
                     ])}
                   >
                     Option 3
                   </Text>
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.caption,
                       { color: theme.colors.medium },
                     ])}
                   >
                     Description
                   </Text>
                 </View>
               </View>
               <RadioButton
                 style={styles.radioButtonFm}
                 unselectedColor={theme.colors.medium}
                 selected={false}
                 color={theme.colors.primary}
               />
             </View>
           </View>
         </View>
         <View
           style={styles.viewV3}
           pointerEvents=""auto""
           hitSlop={{}}
           importantForAccessibility=""auto""
           accessible={true}
         >
           <Button
             style={StyleSheet.flatten([
               styles.buttonTq,
               { borderRadius: theme.borderRadius.global },
             ])}
             type=""solid""
           >
             Continue
           </Button>
         </View>
       </View>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewVa: {
   height: '70%',
   alignItems: 'flex-start',
   justifyContent: 'flex-end',
   paddingBottom: 40,
   paddingTop: 20,
 },
 viewS6: {
   marginRight: 14,
   alignContent: 'center',
   minWidth: 32,
   minHeight: 32,
   maxWidth: 32,
   maxHeight: 32,
   alignItems: 'center',
   justifyContent: 'center',
 },
 viewTm: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '75%',
   alignSelf: 'stretch',
 },
 viewA7: {
   paddingLeft: 16,
   flexDirection: 'row',
   marginTop: 8,
   paddingRight: 16,
   paddingBottom: 12,
   paddingTop: 12,
   justifyContent: 'space-between',
   alignItems: 'center',
   marginBottom: 8,
   borderTopWidth: 1,
   borderBottomWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
 },
 viewKf: {
   marginRight: 14,
   alignContent: 'center',
   minWidth: 32,
   minHeight: 32,
   maxWidth: 32,
   maxHeight: 32,
   alignItems: 'center',
   justifyContent: 'center',
 },
 viewUy: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '75%',
   alignSelf: 'stretch',
 },
 viewLs: {
   paddingLeft: 16,
   flexDirection: 'row',
   marginTop: 8,
   paddingRight: 16,
   paddingBottom: 12,
   paddingTop: 12,
   justifyContent: 'space-between',
   alignItems: 'center',
   marginBottom: 8,
   borderBottomWidth: 1,
   borderTopWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
 },
 viewO5: {
   minWidth: 32,
   minHeight: 32,
   maxHeight: 32,
   maxWidth: 32,
   justifyContent: 'center',
   alignItems: 'center',
   marginRight: 14,
   alignContent: 'center',
 },
 view9V: {
   alignSelf: 'stretch',
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '75%',
 },
 viewGw: {
   alignItems: 'center',
   justifyContent: 'space-between',
   flexDirection: 'row',
   paddingLeft: 16,
   paddingTop: 12,
   paddingBottom: 12,
   paddingRight: 16,
   marginBottom: 8,
   marginTop: 8,
   borderBottomWidth: 1,
   borderTopWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
 },
 buttonTq: {
   height: 52,
   justifyContent: 'center',
   alignItems: 'center',
 },
 scrollViewGc: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingBottom: 32,
   paddingTop: 32,
   flexGrow: 1,
   justifyContent: 'flex-end',
 },
 iconBA: {
   height: 32,
   width: 32,
 },
 iconDa: {
   height: 32,
   width: 32,
 },
 icon3R: {
   height: 32,
   width: 32,
 },
 viewHr: {
   alignItems: 'flex-start',
   marginRight: 24,
   width: '80%',
 },
 viewLy: {
   alignItems: 'flex-start',
   marginRight: 24,
   width: '80%',
 },
 viewFg: {
   alignItems: 'flex-start',
   width: '80%',
   marginRight: 24,
 },
 viewV3: {
   marginTop: 24,
 },
 radioButtonNS: {
   height: 24,
   width: 24,
 },
 radioButtonFc: {
   height: 24,
   width: 24,
 },
 radioButtonFm: {
   width: 24,
   height: 24,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);