@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/dist/Authenticator/Defaults/SignIn/SignIn.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { DefaultFooter, DefaultTextFormFields, DefaultHeader, DefaultContent, } from '../../common';
+import { useFieldValues } from '../../hooks';
+const COMPONENT_NAME = 'SignIn';
+const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, toResetPassword, toSignUp, ...rest }) => {
+    const { getSignInTabText, getSignInText, getSignUpTabText, getForgotPasswordText, } = authenticatorTextUtil;
+    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+    });
+    const headerText = getSignInTabText();
+    const forgotPasswordText = getForgotPasswordText(true);
+    const signInText = getSignInText();
+    const signUpText = getSignUpTabText();
+    const buttons = useMemo(() => {
+        const forgotPassword = {
+            children: forgotPasswordText,
+            onPress: toResetPassword,
+        };
+        return {
+            primary: { children: signInText, onPress: handleFormSubmit },
+            links: hideSignUp
+                ? [forgotPassword]
+                : [forgotPassword, { children: signUpText, onPress: toSignUp }],
+        };
+    }, [
+        forgotPasswordText,
+        handleFormSubmit,
+        hideSignUp,
+        signInText,
+        signUpText,
+        toResetPassword,
+        toSignUp,
+    ]);
+    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText}/>);
+};
+SignIn.Footer = DefaultFooter;
+SignIn.FormFields = DefaultTextFormFields;
+SignIn.Header = DefaultHeader;
+SignIn.displayName = COMPONENT_NAME;
+export default SignIn;

package/dist/Authenticator/Defaults/SignIn/index.d.ts

@@ -0,0 +1 @@
+export { default as SignIn } from './SignIn';

package/dist/Authenticator/Defaults/SignIn/index.js

@@ -0,0 +1 @@
+export { default as SignIn } from './SignIn';

package/dist/Authenticator/Defaults/SignUp/SignUp.d.ts

@@ -0,0 +1,3 @@
+import { DefaultSignUpComponent } from '../types';
+declare const SignUp: DefaultSignUpComponent;
+export default SignUp;

package/dist/Authenticator/Defaults/SignUp/SignUp.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, } from '../../common';
+import { useFieldValues } from '../../hooks';
+const COMPONENT_NAME = 'SignUp';
+const { getCreateAccountText, getCreatingAccountText, getSignInTabText, getSignUpTabText, } = authenticatorTextUtil;
+const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hideSignIn, isPending, toSignIn, ...rest }) => {
+    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+    });
+    const headerText = getSignUpTabText();
+    const primaryButtonText = isPending
+        ? getCreatingAccountText()
+        : getCreateAccountText();
+    const secondaryButtonText = getSignInTabText();
+    const buttons = useMemo(() => ({
+        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        links: hideSignIn
+            ? undefined
+            : [{ children: secondaryButtonText, onPress: toSignIn }],
+    }), [
+        handleFormSubmit,
+        hideSignIn,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
+    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} isPending={isPending}/>);
+};
+SignUp.Footer = DefaultFooter;
+SignUp.FormFields = DefaultTextFormFields;
+SignUp.Header = DefaultHeader;
+SignUp.displayName = COMPONENT_NAME;
+export default SignUp;

package/dist/Authenticator/Defaults/SignUp/index.d.ts

@@ -0,0 +1 @@
+export { default as SignUp } from './SignUp';

package/dist/Authenticator/Defaults/SignUp/index.js

@@ -0,0 +1 @@
+export { default as SignUp } from './SignUp';

package/dist/Authenticator/Defaults/VerifyUser/VerifyUser.d.ts

@@ -0,0 +1,3 @@
+import { DefaultVerifyUserComponent } from '../types';
+declare const VerifyUser: DefaultVerifyUserComponent;
+export default VerifyUser;

package/dist/Authenticator/Defaults/VerifyUser/VerifyUser.js

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { DefaultContent, DefaultFooter, DefaultHeader, DefaultRadioFormFields, } from '../../common';
+import { useFieldValues } from '../../hooks';
+const COMPONENT_NAME = 'VerifyUser';
+const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
+const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, ...rest }) => {
+    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+    });
+    const headerText = getVerifyContactText();
+    const skipText = getSkipText();
+    const verifyText = getVerifyText();
+    const bodyText = getAccountRecoveryInfoText();
+    const buttons = useMemo(() => ({
+        primary: { children: verifyText, onPress: handleFormSubmit },
+        links: [{ children: skipText, onPress: skipVerification }],
+    }), [handleFormSubmit, skipText, skipVerification, verifyText]);
+    return (<DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText}/>);
+};
+VerifyUser.Footer = DefaultFooter;
+VerifyUser.FormFields = DefaultRadioFormFields;
+VerifyUser.Header = DefaultHeader;
+VerifyUser.displayName = COMPONENT_NAME;
+export default VerifyUser;

package/dist/Authenticator/Defaults/VerifyUser/index.d.ts

@@ -0,0 +1 @@
+export { default as VerifyUser } from './VerifyUser';

package/dist/Authenticator/Defaults/VerifyUser/index.js

@@ -0,0 +1 @@
+export { default as VerifyUser } from './VerifyUser';

package/dist/Authenticator/Defaults/index.d.ts

@@ -0,0 +1,11 @@
+export { ConfirmResetPassword } from './ConfirmResetPassword';
+export { ConfirmSignIn } from './ConfirmSignIn';
+export { ConfirmSignUp } from './ConfirmSignUp';
+export { ConfirmVerifyUser } from './ConfirmVerifyUser';
+export { ForceNewPassword } from './ForceNewPassword';
+export { ResetPassword } from './ResetPassword';
+export { SetupTOTP } from './SetupTOTP';
+export { SignIn } from './SignIn';
+export { SignUp } from './SignUp';
+export { VerifyUser } from './VerifyUser';
+export { Components, DefaultComponents } from './types';

package/dist/Authenticator/Defaults/index.js

@@ -0,0 +1,10 @@
+export { ConfirmResetPassword } from './ConfirmResetPassword';
+export { ConfirmSignIn } from './ConfirmSignIn';
+export { ConfirmSignUp } from './ConfirmSignUp';
+export { ConfirmVerifyUser } from './ConfirmVerifyUser';
+export { ForceNewPassword } from './ForceNewPassword';
+export { ResetPassword } from './ResetPassword';
+export { SetupTOTP } from './SetupTOTP';
+export { SignIn } from './SignIn';
+export { SignUp } from './SignUp';
+export { VerifyUser } from './VerifyUser';

package/dist/Authenticator/Defaults/types.d.ts

@@ -0,0 +1,103 @@
+import { AuthenticatorComponentOverrides, AuthenticatorComponentDefaults } from '@aws-amplify/ui-react-core';
+import { RadioFieldOptions, TextFieldOptionsType } from '../hooks';
+export interface ConfirmResetPasswordStyle {
+}
+export interface ConfirmSignInStyle {
+}
+export interface ConfirmSignUpStyle {
+}
+export interface ConfirmVerifyUserStyle {
+}
+export interface ForceNewPasswordStyle {
+}
+export interface ResetPasswordStyle {
+}
+export interface SetupTOTPStyle {
+}
+export interface SignInStyle {
+}
+export interface SignUpStyle {
+}
+export interface VerifyUserStyle {
+}
+export declare type DefaultComponents<FieldType = {}, Props = {}> = AuthenticatorComponentDefaults<FieldType, Props>;
+export declare type DefaultConfirmResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ConfirmResetPasswordStyle;
+}>['ConfirmResetPassword'];
+export declare type DefaultConfirmSignInComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ConfirmSignInStyle;
+}>['ConfirmSignIn'];
+export declare type DefaultConfirmSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ConfirmSignUpStyle;
+}>['ConfirmSignUp'];
+export declare type DefaultConfirmVerifyUserComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ConfirmVerifyUserStyle;
+}>['ConfirmVerifyUser'];
+export declare type DefaultForceNewPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ForceNewPasswordStyle;
+}>['ForceNewPassword'];
+export declare type DefaultResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: ResetPasswordStyle;
+}>['ResetPassword'];
+export declare type DefaultSetupTOTPComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: SetupTOTPStyle;
+}>['SetupTOTP'];
+export declare type DefaultSignInComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: SignInStyle;
+}>['SignIn'];
+export declare type DefaultSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+    style?: SignUpStyle;
+}>['SignUp'];
+export declare type DefaultVerifyUserComponent = DefaultComponents<RadioFieldOptions, {
+    style?: VerifyUserStyle;
+}>['VerifyUser'];
+/**
+ * Custom Authenticator components
+ */
+declare type OverrideComponents<FieldType = {}, Props = {}> = AuthenticatorComponentOverrides<FieldType, Props>;
+declare type ConfirmSignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ConfirmSignInStyle;
+} & P>['ConfirmSignIn'];
+declare type ConfirmSignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ConfirmSignUpStyle;
+} & P>['ConfirmSignUp'];
+declare type ConfirmResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ConfirmResetPasswordStyle;
+} & P>['ConfirmResetPassword'];
+declare type ConfirmVerifyUserComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ConfirmVerifyUserStyle;
+} & P>['ConfirmVerifyUser'];
+declare type ForceNewPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ForceNewPasswordStyle;
+} & P>['ForceNewPassword'];
+declare type ResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: ResetPasswordStyle;
+} & P>['ResetPassword'];
+declare type SetupTOTPComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: SetupTOTPStyle;
+} & P>['SetupTOTP'];
+declare type SignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: SignInStyle;
+} & P>['SignIn'];
+declare type SignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+    style?: SignUpStyle;
+} & P>['SignUp'];
+declare type VerifyUserComponent<P = {}> = OverrideComponents<RadioFieldOptions, {
+    style?: VerifyUserStyle;
+} & P>['VerifyUser'];
+/**
+ * Override `Authenticator` components param
+ */
+export interface Components {
+    ConfirmSignIn?: ConfirmSignInComponent;
+    ConfirmSignUp?: ConfirmSignUpComponent;
+    ConfirmResetPassword?: ConfirmResetPasswordComponent;
+    ConfirmVerifyUser?: ConfirmVerifyUserComponent;
+    ForceNewPassword?: ForceNewPasswordComponent;
+    ResetPassword?: ResetPasswordComponent;
+    SetupTOTP?: SetupTOTPComponent;
+    SignIn?: SignInComponent;
+    SignUp?: SignUpComponent;
+    VerifyUser?: VerifyUserComponent;
+}
+export {};

package/dist/Authenticator/Defaults/types.js

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

package/dist/Authenticator/common/DefaultContainer/DefaultContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContainerProps } from './types';
+export default function DefaultContainer({ alwaysBounceVertical, behavior, children, keyboardAvoidingViewStyle, keyboardShouldPersistTaps, keyboardVerticalOffset, scrollViewContentContainerStyle, style, ...rest }: ContainerProps): JSX.Element | null;

package/dist/Authenticator/common/DefaultContainer/DefaultContainer.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { KeyboardAvoidingView, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDeviceOrientation } from '../../../hooks';
+import { useTheme } from '../../../theme';
+import { platform } from '../../../utils';
+import { getThemedStyles } from './styles';
+// prevent bounce when `ScrollView` content is less than height of screnn
+const ALWAYS_BOUNCE_VERTICAL = false;
+const BEHAVIOR = platform.IS_IOS ? 'padding' : 'height';
+// prevent keyboard dismiss when press is handled by `ScrollView` children,
+// otherwise dismiss
+const KEYBOARD_SHOULD_PERSIST_TAPS = 'handled';
+// TEMPORARY: value to prevent initial `TextField` from being pushed too high
+// in default use case
+const KEYBOARD_VERTICAL_OFFSET = platform.IS_IOS ? -160 : -80;
+export default function DefaultContainer({ alwaysBounceVertical = ALWAYS_BOUNCE_VERTICAL, behavior = BEHAVIOR, children, keyboardAvoidingViewStyle, keyboardShouldPersistTaps = KEYBOARD_SHOULD_PERSIST_TAPS, keyboardVerticalOffset, scrollViewContentContainerStyle, style, ...rest }) {
+    const theme = useTheme();
+    const { isPortraitMode } = useDeviceOrientation();
+    const insets = useSafeAreaInsets();
+    const verticalOffset = keyboardVerticalOffset ?? isPortraitMode
+        ? KEYBOARD_VERTICAL_OFFSET
+        : undefined;
+    const themedStyle = useMemo(() => {
+        const { bottom, left, right, top } = insets;
+        return getThemedStyles(theme, {
+            paddingBottom: bottom,
+            paddingLeft: left,
+            paddingRight: right,
+            paddingTop: top,
+        });
+    }, [insets, theme]);
+    return (<KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={verticalOffset} style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}>
+      <ScrollView {...rest} alwaysBounceVertical={alwaysBounceVertical} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentContainerStyle={[
+            themedStyle.scrollViewContentContainer,
+            scrollViewContentContainerStyle,
+        ]} style={[themedStyle.scrollView, style]}>
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>);
+}

package/dist/Authenticator/common/DefaultContainer/InnerContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContainerProps } from './types';
+export default function InnerContainer({ children, ...rest }: ContainerProps): JSX.Element | null;

package/dist/Authenticator/common/DefaultContainer/InnerContainer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../../theme';
+import { getInnerContainerStyles } from './styles';
+export default function InnerContainer({ children, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getInnerContainerStyles(theme);
+    return (<View {...rest} style={themedStyle.container}>
+      {children}
+    </View>);
+}

package/dist/Authenticator/common/DefaultContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DefaultContainer } from './DefaultContainer';
+export { default as InnerContainer } from './InnerContainer';
+export { DefaultContainerComponent } from './types';

package/dist/Authenticator/common/DefaultContainer/index.js

@@ -0,0 +1,2 @@
+export { default as DefaultContainer } from './DefaultContainer';
+export { default as InnerContainer } from './InnerContainer';

package/dist/Authenticator/common/DefaultContainer/styles.d.ts

@@ -0,0 +1,5 @@
+import { ViewStyle } from 'react-native';
+import { StrictTheme } from 'src/theme';
+import { ContainerStyles, InnerContainerStyles } from './types';
+export declare const getThemedStyles: ({ tokens: { colors } }: StrictTheme, insetPadding: Pick<ViewStyle, 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop'>) => Required<ContainerStyles>;
+export declare const getInnerContainerStyles: ({ tokens: { space }, }: StrictTheme) => InnerContainerStyles;

package/dist/Authenticator/common/DefaultContainer/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = ({ tokens: { colors } }, insetPadding) => {
+    return StyleSheet.create({
+        keyboardAvoidingView: {
+            alignContent: 'center',
+            backgroundColor: colors.background.primary,
+            justifyContent: 'center',
+            flex: 1,
+            // TDOO: add theme override
+        },
+        scrollViewContentContainer: {
+            ...insetPadding,
+            alignContent: 'center',
+            justifyContent: 'center',
+            flexGrow: 1,
+            // TDOO: add theme override
+        },
+        scrollView: {}, // TDOO: add theme override
+    });
+};
+export const getInnerContainerStyles = ({ tokens: { space }, }) => StyleSheet.create({
+    container: {
+        marginHorizontal: space.medium,
+        // TDOO: add theme override
+    },
+});

package/dist/Authenticator/common/DefaultContainer/types.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { KeyboardAvoidingViewProps, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+export interface ContainerStyles {
+    keyboardAvoidingView?: ViewStyle;
+    scrollViewContentContainer?: ViewStyle;
+    scrollView?: ViewStyle;
+}
+export interface ContainerProps extends ScrollViewProps, Pick<KeyboardAvoidingViewProps, 'behavior' | 'keyboardVerticalOffset'> {
+    children: React.ReactNode;
+    keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
+    scrollViewContentContainerStyle?: StyleProp<ViewStyle>;
+}
+export declare type DefaultContainerComponent<P = {}> = React.ComponentType<ContainerProps & P>;
+export interface InnerContainerStyles {
+    container: ViewStyle;
+}

package/dist/Authenticator/common/DefaultContainer/types.js

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

package/dist/Authenticator/common/DefaultContent/DefaultContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldOptionsType, RadioFieldOptions } from '../../hooks';
+import { DefaultContentProps } from './types';
+export default function DefaultContent<FieldsType extends TextFieldOptionsType | RadioFieldOptions>({ body, buttons: { primary, links, secondary }, error, fields, Footer, FormFields, isPending, Header, headerText, validationErrors, }: DefaultContentProps<FieldsType>): JSX.Element;

package/dist/Authenticator/common/DefaultContent/DefaultContent.js

@@ -0,0 +1,29 @@
+import React, { Fragment, useMemo } from 'react';
+import { View } from 'react-native';
+import { Button, Label, ErrorMessage } from '../../../primitives';
+import { useTheme } from '../../../theme';
+import { getDefaultStyle } from './styles';
+function useThemedStyles(getStyle) {
+    const theme = useTheme();
+    return useMemo(() => getStyle(theme), [getStyle, theme]);
+}
+export default function DefaultContent({ body, buttons: { primary, links, secondary }, error, fields, Footer, FormFields, isPending, Header, headerText, validationErrors, }) {
+    const themedStyles = useThemedStyles(getDefaultStyle);
+    const linkButtons = useMemo(() => links?.length ? (<View style={themedStyles.linksContainer}>
+          {links.map((button) => (<Fragment key={`${button.children}`}>
+              <Button {...button} style={themedStyles.link} variant="link"/>
+            </Fragment>))}
+        </View>) : null, [links, themedStyles]);
+    return (<>
+      <Header style={themedStyles.header}>{headerText}</Header>
+      {body ? (typeof body === 'string' ? (<Label style={themedStyles.body}>{body}</Label>) : (body)) : null}
+      <FormFields fieldContainerStyle={themedStyles.fieldContainer} fieldErrorsContainer={themedStyles.fieldErrorsContainer} fieldErrorStyle={themedStyles.fieldError} fieldLabelStyle={themedStyles.fieldLabel} fieldStyle={themedStyles.fieldStyle} fields={fields} isPending={isPending} validationErrors={validationErrors} style={themedStyles.formFields}/>
+      {error ? (<ErrorMessage style={themedStyles.errorMessage} labelStyle={themedStyles.errorMessageLabel}>
+          {error}
+        </ErrorMessage>) : null}
+      <Button {...primary} variant="primary" textStyle={themedStyles.buttonPrimaryLabel} style={themedStyles.buttonPrimary}/>
+      {secondary ? (<Button {...secondary} textStyle={themedStyles.buttonSecondaryLabel} style={themedStyles.buttonSecondary}/>) : null}
+      {linkButtons}
+      <Footer style={themedStyles.footer}/>
+    </>);
+}

package/dist/Authenticator/common/DefaultContent/index.d.ts

@@ -0,0 +1 @@
+export { default as DefaultContent } from './DefaultContent';

package/dist/Authenticator/common/DefaultContent/index.js

@@ -0,0 +1 @@
+export { default as DefaultContent } from './DefaultContent';

package/dist/Authenticator/common/DefaultContent/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../../theme';
+import { DefaultContentStyle } from './types';
+export declare const getDefaultStyle: ({ tokens: { colors, fontSizes, space }, }: StrictTheme) => Required<DefaultContentStyle>;

package/dist/Authenticator/common/DefaultContent/styles.js

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+export const getDefaultStyle = ({ tokens: { colors, fontSizes, space }, }) => StyleSheet.create({
+    body: {
+        fontSize: fontSizes.medium,
+        paddingHorizontal: space.small,
+    },
+    buttonPrimary: {
+        marginHorizontal: space.medium,
+        marginVertical: space.small,
+    },
+    buttonPrimaryLabel: {},
+    buttonSecondary: {
+        marginHorizontal: space.medium,
+    },
+    buttonSecondaryLabel: {},
+    errorMessage: {
+        marginVertical: space.small,
+    },
+    errorMessageLabel: {},
+    fieldContainer: {
+        paddingHorizontal: space.small,
+    },
+    fieldErrorsContainer: {
+        paddingHorizontal: space.medium,
+        paddingVertical: space.xs,
+    },
+    fieldError: {
+        color: colors.font.error,
+        paddingVertical: 1,
+    },
+    fieldLabel: {},
+    fieldStyle: {},
+    footer: {},
+    formFields: {
+        paddingBottom: space.xs,
+    },
+    header: {
+        marginVertical: space.small,
+        paddingHorizontal: space.small,
+    },
+    link: {
+        marginVertical: space.xs,
+        minWidth: '50%',
+    },
+    linksContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+    },
+});

package/dist/Authenticator/common/DefaultContent/types.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { AuthenticatorComponentDefaultProps, AuthenticatorHeaderComponent, AuthenticatorFooterComponent, AuthenticatorMachineContext, AuthenticatorRouteComponentName } from '@aws-amplify/ui-react-core';
+import { ButtonProps } from '../../../primitives';
+import { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from '../../common';
+import { TextFieldOptionsType, RadioFieldOptions } from '../../hooks';
+export interface DefaultContentStyle {
+    body?: TextStyle;
+    buttonPrimary?: ViewStyle;
+    buttonPrimaryLabel?: TextStyle;
+    buttonSecondary?: ViewStyle;
+    buttonSecondaryLabel?: TextStyle;
+    errorMessage?: ViewStyle;
+    errorMessageLabel?: TextStyle;
+    fieldErrorsContainer?: ViewStyle;
+    fieldContainer?: ViewStyle;
+    fieldError?: TextStyle;
+    fieldLabel?: TextStyle;
+    fieldStyle?: TextStyle;
+    footer?: TextStyle;
+    formFields?: ViewStyle;
+    header?: TextStyle;
+    link?: ViewStyle;
+    linksContainer?: ViewStyle;
+}
+export declare type DefaultContentStyleProps = {
+    [Key in keyof DefaultContentStyle]: StyleProp<DefaultContentStyle[Key]>;
+} & DefaultFormFieldsStyle;
+declare type DefaultComponentProps<FieldsType> = AuthenticatorComponentDefaultProps<FieldsType>[AuthenticatorRouteComponentName];
+declare type AuthenticatorButtonProps = Omit<ButtonProps, 'children'> & {
+    children: string;
+};
+declare type DefaultButtons = {
+    primary: AuthenticatorButtonProps;
+    secondary?: AuthenticatorButtonProps;
+    links?: AuthenticatorButtonProps[];
+};
+export declare type DefaultContentProps<FieldsType extends TextFieldOptionsType | RadioFieldOptions | unknown = unknown> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'Footer' | 'isPending'> & {
+    buttons: DefaultButtons;
+    body?: React.ReactNode;
+    fields: FieldsType[];
+    headerText: string;
+    Footer: AuthenticatorFooterComponent<{
+        style?: StyleProp<TextStyle>;
+    }>;
+    FormFields: DefaultFormFieldsComponent<FieldsType>;
+    Header: AuthenticatorHeaderComponent<{
+        style?: StyleProp<TextStyle>;
+    }>;
+    validationErrors?: AuthenticatorMachineContext['validationErrors'];
+};
+export {};

package/dist/Authenticator/common/DefaultContent/types.js

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

package/dist/Authenticator/common/DefaultFooter/DefaultFooter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DefaultFooterProps } from './types';
+export default function DefaultFooter({ children, ...rest }: DefaultFooterProps): JSX.Element | null;

package/dist/Authenticator/common/DefaultFooter/DefaultFooter.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+export default function DefaultFooter({ children, ...rest }) {
+    return children ? <View {...rest}>{children}</View> : null;
+}

package/dist/Authenticator/common/DefaultFooter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DefaultFooter } from './DefaultFooter';
+export { DefaultFooterProps } from './types';

package/dist/Authenticator/common/DefaultFooter/index.js

@@ -0,0 +1 @@
+export { default as DefaultFooter } from './DefaultFooter';

package/dist/Authenticator/common/DefaultFooter/types.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from 'react-native';
+export interface DefaultFooterProps extends ViewProps {
+}

package/dist/Authenticator/common/DefaultFooter/types.js

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

package/dist/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.d.ts

@@ -0,0 +1,3 @@
+import { DefaultRadioFormFieldsComponent } from './types';
+declare const DefaultFormFields: DefaultRadioFormFieldsComponent;
+export default DefaultFormFields;

package/dist/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui';
+import { Radio, RadioGroup } from '../../../primitives';
+const censorContactInformation = (name, value) => {
+    let censoredVal = value;
+    if (name === 'email') {
+        const splitEmail = value.split('@');
+        const censoredName = censorAllButFirstAndLast(splitEmail[0]);
+        censoredVal = `${censoredName}@${splitEmail[1]}`;
+    }
+    else if (name === 'phone_number') {
+        censoredVal = censorPhoneNumber(value);
+    }
+    return censoredVal;
+};
+const DefaultFormFields = ({ fields, isPending, fieldContainerStyle, fieldLabelStyle, style, }) => {
+    return (<RadioGroup disabled={isPending} style={style}>
+      {fields.map(({ name, value, ...props }) => (<Radio {...props} key={value} 
+        // value has to be name, because Auth is only interested in the
+        // string "email" or "phone_number", not the actual value
+        value={name} label={censorContactInformation(name, value)} labelStyle={fieldLabelStyle} style={fieldContainerStyle}/>))}
+    </RadioGroup>);
+};
+export default DefaultFormFields;

package/dist/Authenticator/common/DefaultFormFields/DefaultTextFormFields.d.ts

@@ -0,0 +1,3 @@
+import { DefaultTextFormFieldsComponent } from './types';
+declare const DefaultTextFormFields: DefaultTextFormFieldsComponent;
+export default DefaultTextFormFields;