@aws-amplify/ui-react-native 1.2.21 → 1.2.23

package/lib/Authenticator/Defaults/SignUp/SignUp.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@aws-amplify/ui");
+const common_1 = require("../../common");
+const hooks_1 = require("../../hooks");
+const COMPONENT_NAME = 'SignUp';
+const { getCreateAccountText, getCreatingAccountText, getSignInTabText, getSignUpTabText, } = ui_1.authenticatorTextUtil;
+const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, hideSignIn, isPending, toSignIn, validationErrors, ...rest }) => {
+    const { disableFormSubmit, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+        validationErrors,
+    });
+    const disabled = hasValidationErrors || disableFormSubmit;
+    const headerText = getSignUpTabText();
+    const primaryButtonText = isPending
+        ? getCreatingAccountText()
+        : getCreateAccountText();
+    const secondaryButtonText = getSignInTabText();
+    const buttons = (0, react_1.useMemo)(() => ({
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
+        links: hideSignIn
+            ? undefined
+            : [{ children: secondaryButtonText, onPress: toSignIn }],
+    }), [
+        disabled,
+        handleFormSubmit,
+        hideSignIn,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
+    return (<common_1.DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} isPending={isPending} validationErrors={fieldValidationErrors}/>);
+};
+SignUp.Footer = common_1.DefaultFooter;
+SignUp.FormFields = common_1.DefaultTextFormFields;
+SignUp.Header = common_1.DefaultHeader;
+SignUp.displayName = COMPONENT_NAME;
+exports.default = SignUp;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignUp = void 0;
+var SignUp_1 = require("./SignUp");
+Object.defineProperty(exports, "SignUp", { enumerable: true, get: function () { return __importDefault(SignUp_1).default; } });

package/lib/Authenticator/Defaults/VerifyUser/VerifyUser.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@aws-amplify/ui");
+const common_1 = require("../../common");
+const hooks_1 = require("../../hooks");
+const COMPONENT_NAME = 'VerifyUser';
+const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = ui_1.authenticatorTextUtil;
+const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, validationErrors, ...rest }) => {
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+        validationErrors,
+    });
+    const headerText = getVerifyContactText();
+    const skipText = getSkipText();
+    const verifyText = getVerifyText();
+    const bodyText = getAccountRecoveryInfoText();
+    const buttons = (0, react_1.useMemo)(() => ({
+        primary: { children: verifyText, disabled, onPress: handleFormSubmit },
+        links: [{ children: skipText, onPress: skipVerification }],
+    }), [disabled, handleFormSubmit, skipText, skipVerification, verifyText]);
+    return (<common_1.DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
+};
+VerifyUser.Footer = common_1.DefaultFooter;
+VerifyUser.FormFields = common_1.DefaultRadioFormFields;
+VerifyUser.Header = common_1.DefaultHeader;
+VerifyUser.displayName = COMPONENT_NAME;
+exports.default = VerifyUser;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyUser = void 0;
+var VerifyUser_1 = require("./VerifyUser");
+Object.defineProperty(exports, "VerifyUser", { enumerable: true, get: function () { return __importDefault(VerifyUser_1).default; } });

package/lib/Authenticator/Defaults/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyUser = exports.SignUp = exports.SignIn = exports.SetupTOTP = exports.ResetPassword = exports.ForceNewPassword = exports.ConfirmVerifyUser = exports.ConfirmSignUp = exports.ConfirmSignIn = exports.ConfirmResetPassword = void 0;
+var ConfirmResetPassword_1 = require("./ConfirmResetPassword");
+Object.defineProperty(exports, "ConfirmResetPassword", { enumerable: true, get: function () { return ConfirmResetPassword_1.ConfirmResetPassword; } });
+var ConfirmSignIn_1 = require("./ConfirmSignIn");
+Object.defineProperty(exports, "ConfirmSignIn", { enumerable: true, get: function () { return ConfirmSignIn_1.ConfirmSignIn; } });
+var ConfirmSignUp_1 = require("./ConfirmSignUp");
+Object.defineProperty(exports, "ConfirmSignUp", { enumerable: true, get: function () { return ConfirmSignUp_1.ConfirmSignUp; } });
+var ConfirmVerifyUser_1 = require("./ConfirmVerifyUser");
+Object.defineProperty(exports, "ConfirmVerifyUser", { enumerable: true, get: function () { return ConfirmVerifyUser_1.ConfirmVerifyUser; } });
+var ForceNewPassword_1 = require("./ForceNewPassword");
+Object.defineProperty(exports, "ForceNewPassword", { enumerable: true, get: function () { return ForceNewPassword_1.ForceNewPassword; } });
+var ResetPassword_1 = require("./ResetPassword");
+Object.defineProperty(exports, "ResetPassword", { enumerable: true, get: function () { return ResetPassword_1.ResetPassword; } });
+var SetupTOTP_1 = require("./SetupTOTP");
+Object.defineProperty(exports, "SetupTOTP", { enumerable: true, get: function () { return SetupTOTP_1.SetupTOTP; } });
+var SignIn_1 = require("./SignIn");
+Object.defineProperty(exports, "SignIn", { enumerable: true, get: function () { return SignIn_1.SignIn; } });
+var SignUp_1 = require("./SignUp");
+Object.defineProperty(exports, "SignUp", { enumerable: true, get: function () { return SignUp_1.SignUp; } });
+var VerifyUser_1 = require("./VerifyUser");
+Object.defineProperty(exports, "VerifyUser", { enumerable: true, get: function () { return VerifyUser_1.VerifyUser; } });

package/lib/Authenticator/Defaults/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/DefaultContainer/DefaultContainer.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const theme_1 = require("../../../theme");
+const utils_1 = require("../../../utils");
+const styles_1 = require("./styles");
+// prevent bounce when `ScrollView` content is less than height of screnn
+const ALWAYS_BOUNCE_VERTICAL = false;
+const BEHAVIOR = utils_1.platform.IS_IOS ? 'padding' : 'height';
+// prevent keyboard dismiss when press is handled by `ScrollView` children,
+// otherwise dismiss
+const KEYBOARD_SHOULD_PERSIST_TAPS = 'handled';
+function DefaultContainer({ alwaysBounceVertical = ALWAYS_BOUNCE_VERTICAL, behavior = BEHAVIOR, children, keyboardAvoidingViewStyle, keyboardShouldPersistTaps = KEYBOARD_SHOULD_PERSIST_TAPS, keyboardVerticalOffset, scrollViewContentContainerStyle, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const themedStyle = (0, react_1.useMemo)(() => {
+        const { bottom, left, right, top } = insets;
+        return (0, styles_1.getThemedStyles)(theme, {
+            paddingBottom: bottom,
+            paddingLeft: left,
+            paddingRight: right,
+            paddingTop: top,
+        });
+    }, [insets, theme]);
+    return (<react_native_1.KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset} style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}>
+      <react_native_1.ScrollView {...rest} alwaysBounceVertical={alwaysBounceVertical} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentContainerStyle={[
+            themedStyle.scrollViewContentContainer,
+            scrollViewContentContainerStyle,
+        ]} style={[themedStyle.scrollView, style]}>
+        {children}
+      </react_native_1.ScrollView>
+    </react_native_1.KeyboardAvoidingView>);
+}
+exports.default = DefaultContainer;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../../theme");
+const styles_1 = require("./styles");
+function InnerContainer({ children, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getInnerContainerStyles)(theme);
+    return (<react_native_1.View {...rest} style={themedStyle.container}>
+      {children}
+    </react_native_1.View>);
+}
+exports.default = InnerContainer;

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnerContainer = exports.DefaultContainer = void 0;
+var DefaultContainer_1 = require("./DefaultContainer");
+Object.defineProperty(exports, "DefaultContainer", { enumerable: true, get: function () { return __importDefault(DefaultContainer_1).default; } });
+var InnerContainer_1 = require("./InnerContainer");
+Object.defineProperty(exports, "InnerContainer", { enumerable: true, get: function () { return __importDefault(InnerContainer_1).default; } });

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInnerContainerStyles = exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = ({ tokens: { colors } }, insetPadding) => {
+    return react_native_1.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
+    });
+};
+exports.getThemedStyles = getThemedStyles;
+const getInnerContainerStyles = ({ tokens: { space }, }) => react_native_1.StyleSheet.create({
+    container: {
+        marginHorizontal: space.medium,
+        // TDOO: add theme override
+    },
+});
+exports.getInnerContainerStyles = getInnerContainerStyles;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/DefaultContent/DefaultContent.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const primitives_1 = require("../../../primitives");
+const theme_1 = require("../../../theme");
+const styles_1 = require("./styles");
+function useThemedStyles(getStyle) {
+    const theme = (0, theme_1.useTheme)();
+    return (0, react_1.useMemo)(() => getStyle(theme), [getStyle, theme]);
+}
+function DefaultContent({ body, buttons: { primary, links, secondary }, error, fields, Footer, FormFields, isPending, Header, headerText, validationErrors, }) {
+    const themedStyles = useThemedStyles(styles_1.getDefaultStyle);
+    const linkButtons = (0, react_1.useMemo)(() => links?.length ? (<react_native_1.View style={themedStyles.linksContainer}>
+          {links.map((button) => (<react_1.Fragment key={`${button.children}`}>
+              <primitives_1.Button {...button} style={themedStyles.link} variant="link"/>
+            </react_1.Fragment>))}
+        </react_native_1.View>) : null, [links, themedStyles]);
+    return (<>
+      <Header style={themedStyles.header}>{headerText}</Header>
+      {body ? (typeof body === 'string' ? (<primitives_1.Label style={themedStyles.body}>{body}</primitives_1.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 ? (<primitives_1.ErrorMessage iconStyle={themedStyles.errorMessageIcon} labelStyle={themedStyles.errorMessageLabel} style={themedStyles.errorMessage} testID="amplify__error-message">
+          {error}
+        </primitives_1.ErrorMessage>) : null}
+      <primitives_1.Button {...primary} variant="primary" textStyle={themedStyles.buttonPrimaryLabel} style={themedStyles.buttonPrimary} testID="amplify__button"/>
+      {secondary ? (<primitives_1.Button {...secondary} textStyle={themedStyles.buttonSecondaryLabel} style={themedStyles.buttonSecondary}/>) : null}
+      {linkButtons}
+      <Footer style={themedStyles.footer}/>
+    </>);
+}
+exports.default = DefaultContent;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultContent = void 0;
+var DefaultContent_1 = require("./DefaultContent");
+Object.defineProperty(exports, "DefaultContent", { enumerable: true, get: function () { return __importDefault(DefaultContent_1).default; } });

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultStyle = void 0;
+const react_native_1 = require("react-native");
+const getDefaultStyle = ({ tokens: { colors, fontSizes, space }, }) => react_native_1.StyleSheet.create({
+    body: {
+        fontSize: fontSizes.medium,
+        paddingHorizontal: space.small,
+    },
+    buttonPrimary: {
+        margin: space.small,
+    },
+    buttonPrimaryLabel: {},
+    buttonSecondary: {
+        marginHorizontal: space.medium,
+    },
+    buttonSecondaryLabel: {},
+    errorMessage: {
+        marginHorizontal: space.small,
+    },
+    errorMessageIcon: {},
+    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',
+    },
+});
+exports.getDefaultStyle = getDefaultStyle;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/DefaultFooter/DefaultFooter.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+function DefaultFooter({ children, ...rest }) {
+    return children ? <react_native_1.View {...rest}>{children}</react_native_1.View> : null;
+}
+exports.default = DefaultFooter;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultFooter = void 0;
+var DefaultFooter_1 = require("./DefaultFooter");
+Object.defineProperty(exports, "DefaultFooter", { enumerable: true, get: function () { return __importDefault(DefaultFooter_1).default; } });

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_1 = require("@aws-amplify/ui");
+const primitives_1 = require("../../../primitives");
+const censorContactInformation = (name, value) => {
+    let censoredVal = value;
+    if (name === 'email') {
+        const splitEmail = value.split('@');
+        const censoredName = (0, ui_1.censorAllButFirstAndLast)(splitEmail[0]);
+        censoredVal = `${censoredName}@${splitEmail[1]}`;
+    }
+    else if (name === 'phone_number') {
+        censoredVal = (0, ui_1.censorPhoneNumber)(value);
+    }
+    return censoredVal;
+};
+const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
+    return (<primitives_1.RadioGroup disabled={isPending} style={style}>
+      {(fields ?? []).map(({ name, value, ...props }) => (<primitives_1.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}/>))}
+    </primitives_1.RadioGroup>);
+};
+DefaultRadioFormFields.displayName = 'FormFields';
+exports.default = DefaultRadioFormFields;

package/lib/Authenticator/common/DefaultFormFields/DefaultTextFormFields.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const Field_1 = tslib_1.__importDefault(require("./Field"));
+const FieldErrors_1 = require("./FieldErrors");
+const DefaultTextFormFields = ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending = false, style, validationErrors, }) => {
+    const formFields = (fields ?? []).map(({ name, type, ...field }) => {
+        const errors = validationErrors ? (0, ui_1.getErrors)(validationErrors?.[name]) : [];
+        const hasError = errors?.length > 0;
+        return (<react_1.Fragment key={name}>
+        <Field_1.default {...field} disabled={isPending} error={hasError} fieldStyle={fieldStyle} key={name} style={fieldContainerStyle} type={type}/>
+        <FieldErrors_1.FieldErrors errors={errors} errorStyle={fieldErrorStyle} style={fieldErrorsContainer}/>
+      </react_1.Fragment>);
+    });
+    return <react_native_1.View style={style}>{formFields}</react_native_1.View>;
+};
+DefaultTextFormFields.displayName = 'FormFields';
+exports.default = DefaultTextFormFields;

package/lib/Authenticator/common/DefaultFormFields/Field.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const primitives_1 = require("../../../primitives");
+const utils_1 = require("../../../utils");
+const { IS_IOS } = utils_1.platform;
+// to prevent issues with iOS when multiple `TextInput` components have `secureTextEntry`
+// set to `true`, insert a "hidden" `TextInput` after each `PasswordField`
+// Issue reference: https://github.com/facebook/react-native/issues/21911
+const HIDDEN_INPUT_PROPS = {
+    // prevent iOS screen reader from picking up element
+    accessibilityElementsHidden: true,
+    // prevent `TextInput` from capturing touch events
+    pointerEvents: 'none',
+    // this workaround requires the `height` and `width` applied to the `TextInput`
+    // are greater than `0`
+    // NOTE: do not attempt to set an opacity value here to further hide the element,
+    // it will cause the issues mitigated by this workaround to re-surface
+    style: { backgroundColor: 'transparent', height: 0.1, width: 0.1 },
+};
+const HiddenInput = () => <react_native_1.TextInput {...HIDDEN_INPUT_PROPS}/>;
+const Field = ({ type, ...rest }) => {
+    const isPassword = type === 'password';
+    const Field = isPassword
+        ? primitives_1.PasswordField
+        : type === 'phone'
+            ? primitives_1.PhoneNumberField
+            : primitives_1.TextField;
+    return IS_IOS && isPassword ? (<>
+      <Field {...rest}/>
+      <HiddenInput />
+    </>) : (<Field {...rest}/>);
+};
+Field.displayName = 'Field';
+exports.default = Field;

package/lib/Authenticator/common/DefaultFormFields/FieldErrors.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldErrors = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const FieldErrors = ({ errors, errorStyle, style, }) => {
+    if (!errors || !errors.length) {
+        return null;
+    }
+    return (<react_native_1.View style={style}>
+      {errors.map((error) => (<react_native_1.Text key={error} style={errorStyle}>
+          {error}
+        </react_native_1.Text>))}
+    </react_native_1.View>);
+};
+exports.FieldErrors = FieldErrors;

package/lib/Authenticator/common/DefaultFormFields/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTextFormFields = exports.DefaultRadioFormFields = void 0;
+var DefaultRadioFormFields_1 = require("./DefaultRadioFormFields");
+Object.defineProperty(exports, "DefaultRadioFormFields", { enumerable: true, get: function () { return __importDefault(DefaultRadioFormFields_1).default; } });
+var DefaultTextFormFields_1 = require("./DefaultTextFormFields");
+Object.defineProperty(exports, "DefaultTextFormFields", { enumerable: true, get: function () { return __importDefault(DefaultTextFormFields_1).default; } });

package/lib/Authenticator/common/DefaultFormFields/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/DefaultHeader/DefaultHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Heading_1 = require("../../../primitives/Heading");
+function DefaultHeader({ children, level = 3, ...rest }) {
+    return children ? (<Heading_1.Heading {...rest} level={level}>
+      {children}
+    </Heading_1.Heading>) : null;
+}
+exports.default = DefaultHeader;

package/lib/Authenticator/common/DefaultHeader/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultHeader = void 0;
+var DefaultHeader_1 = require("./DefaultHeader");
+Object.defineProperty(exports, "DefaultHeader", { enumerable: true, get: function () { return __importDefault(DefaultHeader_1).default; } });

package/lib/Authenticator/common/DefaultHeader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/FederatedProviderButton/FederatedProviderButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const primitives_1 = require("../../../primitives");
+const hooks_1 = require("../../../hooks");
+const styles_1 = require("./styles");
+function FederatedProviderButton({ children, source, style, textStyle, ...rest }) {
+    const pressableStyle = (0, hooks_1.usePressableContainerStyles)({
+        containerStyle: styles_1.styles.container,
+        overrideStyle: style,
+    });
+    return (<primitives_1.Button {...rest} style={pressableStyle}>
+      <primitives_1.Icon source={source} style={styles_1.styles.icon} size={20}/>
+      <primitives_1.Label style={[styles_1.styles.label, textStyle]}>{children}</primitives_1.Label>
+    </primitives_1.Button>);
+}
+exports.default = FederatedProviderButton;

package/lib/Authenticator/common/FederatedProviderButton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FederatedProviderButton = void 0;
+var FederatedProviderButton_1 = require("./FederatedProviderButton");
+Object.defineProperty(exports, "FederatedProviderButton", { enumerable: true, get: function () { return __importDefault(FederatedProviderButton_1).default; } });

package/lib/Authenticator/common/FederatedProviderButton/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const react_native_1 = require("react-native");
+exports.styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        borderRadius: 4,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        paddingVertical: 8,
+        width: '100%',
+    },
+    icon: {
+        paddingHorizontal: 16,
+    },
+    label: {
+        fontWeight: '400',
+    },
+});

package/lib/Authenticator/common/FederatedProviderButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const assets_1 = require("../../../assets");
+const FederatedProviderButton_1 = require("../FederatedProviderButton");
+const primitives_1 = require("../../../primitives");
+const styles_1 = require("./styles");
+function FederatedProviderButtons({ socialProviders, toFederatedSignIn, }) {
+    const providerButtons = (0, react_1.useMemo)(() => socialProviders?.map((provider) => {
+        const providerIconSource = assets_1.icons[`${provider}Logo`];
+        const handlePress = () => {
+            toFederatedSignIn({ provider });
+        };
+        return (<FederatedProviderButton_1.FederatedProviderButton key={provider} onPress={handlePress} source={providerIconSource} style={styles_1.styles.button}>
+            {`Sign In with ${(0, ui_1.capitalize)(provider)}`}
+          </FederatedProviderButton_1.FederatedProviderButton>);
+    }), [socialProviders, toFederatedSignIn]);
+    return providerButtons?.length ? (<react_native_1.View style={styles_1.styles.container}>
+      {providerButtons}
+      <primitives_1.Divider labelStyle={styles_1.styles.text}>Or</primitives_1.Divider>
+    </react_native_1.View>) : null;
+}
+exports.default = FederatedProviderButtons;

package/lib/Authenticator/common/FederatedProviderButtons/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FederatedProviderButtons = void 0;
+var FederatedProviderButtons_1 = require("./FederatedProviderButtons");
+Object.defineProperty(exports, "FederatedProviderButtons", { enumerable: true, get: function () { return __importDefault(FederatedProviderButtons_1).default; } });

package/lib/Authenticator/common/FederatedProviderButtons/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.styles = {
+    button: { marginVertical: 8 },
+    container: { paddingVertical: 4 },
+    text: { paddingVertical: 8, textAlign: 'center' },
+};

package/lib/Authenticator/common/FederatedProviderButtons/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/common/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DefaultContainer"), exports);
+tslib_1.__exportStar(require("./DefaultContent"), exports);
+tslib_1.__exportStar(require("./DefaultFooter"), exports);
+tslib_1.__exportStar(require("./DefaultFormFields"), exports);
+tslib_1.__exportStar(require("./DefaultHeader"), exports);
+tslib_1.__exportStar(require("./FederatedProviderButton"), exports);
+tslib_1.__exportStar(require("./FederatedProviderButtons"), exports);