@aws-amplify/ui-react-native 1.2.28 → 2.0.1

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

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../../theme';
 import { FederatedProviderButtonStyle } from './types';
-export declare const styles: FederatedProviderButtonStyle;
+export declare const getThemedStyles: (theme: StrictTheme) => FederatedProviderButtonStyle;

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

@@ -1,5 +1,15 @@
-export const styles = {
-    button: { marginVertical: 8 },
-    container: { paddingVertical: 4 },
-    text: { paddingVertical: 8, textAlign: 'center' },
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { space } = theme.tokens;
+    return StyleSheet.create({
+        button: {
+            marginVertical: space.xs,
+        },
+        dividerLabel: {
+            textAlign: 'center',
+        },
+        container: {
+            marginHorizontal: space.small,
+        },
+    });
 };

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

@@ -1,9 +1,11 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 import { AuthenticatorMachineContext } from '@aws-amplify/ui-react-core';
-export interface FederatedProviderButtonsProps extends Pick<AuthenticatorMachineContext, 'socialProviders' | 'toFederatedSignIn'> {
+export interface FederatedProviderButtonsProps extends Pick<AuthenticatorMachineContext, 'route' | 'socialProviders' | 'toFederatedSignIn'>, ViewProps {
+    buttonStyle?: StyleProp<ViewStyle>;
+    dividerLabelStyle?: StyleProp<TextStyle>;
 }
 export interface FederatedProviderButtonStyle {
     button: ViewStyle;
     container: ViewStyle;
-    text: TextStyle;
+    dividerLabel: TextStyle;
 }

package/dist/Authenticator/hooks/useFieldValues/useFieldValues.js

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { getSanitizedTextFields, getSanitizedRadioFields, isRadioFieldOptions, runFieldValidation, } from './utils';
 const logger = new Logger('Authenticator');
 export default function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {

package/dist/Authenticator/hooks/useFieldValues/utils.js

@@ -1,4 +1,4 @@
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { authenticatorTextUtil, isString, isUnverifiedContactMethodType, isValidEmail, UnverifiedContactMethodType, } from '@aws-amplify/ui';
 import { isAuthenticatorComponentRouteKey, } from '@aws-amplify/ui-react-core';
 import { KEY_ALLOW_LIST } from './constants';

package/dist/Authenticator/types.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 import { DefaultContainerComponent } from './common';
 import { Components } from './Defaults';
-type SupportedAuthenticatorMachineOptions = Omit<AuthenticatorMachineOptions, 'socialProviders' | 'formFields'>;
+type SupportedAuthenticatorMachineOptions = Omit<AuthenticatorMachineOptions, 'formFields'>;
 export interface AuthenticatorProps extends SupportedAuthenticatorMachineOptions {
     children?: React.ReactNode;
     Container?: DefaultContainerComponent;

package/dist/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.js

@@ -1,6 +1,6 @@
 import { Linking } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-const logger = new Logger('Notifications.InAppMessaging');
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
+const logger = new Logger('InAppMessaging');
 const handleMessageLinkAction = async (url) => {
     let supported = false;
     try {

package/dist/InAppMessaging/hooks/useMessageImage/useMessageImage.d.ts

@@ -1,4 +1,4 @@
-import { MessageImage, MessageLayout } from '@aws-amplify/ui-react-core-notifications';
+import { InAppMessageImage, InAppMessageLayout } from '@aws-amplify/ui-react-core-notifications';
 import { UseMessageImage } from './types';
 /**
  * Handles prefetching and dimension setting for message images
@@ -7,4 +7,4 @@ import { UseMessageImage } from './types';
  * @param layout message layout
  * @returns message image dimensions and rendering related booleans
  */
-export default function useMessageImage(image: MessageImage | undefined, layout: MessageLayout): UseMessageImage;
+export default function useMessageImage(image: InAppMessageImage | undefined, layout: InAppMessageLayout): UseMessageImage;

package/dist/InAppMessaging/hooks/useMessageImage/useMessageImage.js

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { Image } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { ImagePrefetchStatus } from './types';
 import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 /**
  * Handles prefetching and dimension setting for message images
  *

package/dist/InAppMessaging/hooks/useMessageImage/utils.d.ts

@@ -1,4 +1,4 @@
-import { MessageLayout } from '@aws-amplify/ui-react-core-notifications';
+import { InAppMessageLayout } from '@aws-amplify/ui-react-core-notifications';
 import { ImageDimensions, ImageLoadingState } from './types';
 export declare const prefetchNetworkImage: (url: string) => Promise<ImageLoadingState>;
-export declare const getLayoutImageDimensions: (imageHeight: number, imageWidth: number, layout: MessageLayout) => ImageDimensions;
+export declare const getLayoutImageDimensions: (imageHeight: number, imageWidth: number, layout: InAppMessageLayout) => ImageDimensions;

package/dist/InAppMessaging/hooks/useMessageImage/utils.js

@@ -1,7 +1,7 @@
 import { Image } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { BANNER_IMAGE_SCREEN_SIZE, CAROUSEL_IMAGE_SCREEN_SIZE, FULL_SCREEN_IMAGE_SCREEN_SIZE, MODAL_IMAGE_SCREEN_SIZE, } from './constants';
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 const inAppMessageImageSizes = {
     BOTTOM_BANNER: BANNER_IMAGE_SCREEN_SIZE,
     MIDDLE_BANNER: BANNER_IMAGE_SCREEN_SIZE,

package/dist/InAppMessaging/hooks/useMessageProps/types.d.ts

@@ -1,5 +1,5 @@
 import { ColorValue, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { MessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
+import { InAppMessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
 import { ButtonProps } from '../../../primitives';
 import { ImageDimensions } from '../useMessageImage';
 /**
@@ -35,7 +35,7 @@ export interface MessageStyleParams {
     /**
      * message specific layout
      */
-    layout: MessageLayout;
+    layout: InAppMessageLayout;
     /**
      * style params to derive resolved style from
      */

package/dist/InAppMessaging/hooks/useMessageProps/utils.d.ts

@@ -1,4 +1,4 @@
-import { MessageComponentBaseProps, MessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
+import { InAppMessageLayout, MessageComponentBaseProps, MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
 import { MessageButtonStyleParams, MessageButtonStyleProps, MessageComponentStyles, MessageContainerAndWrapperStyle, MessageStyleParams } from './types';
 /**
  * Parse and assign appropriate button container and text style from style objects params
@@ -13,7 +13,7 @@ export declare const getComponentButtonStyle: ({ styleParams, buttonType, }: Mes
  * @param {InAppMessageLayout} layout - message layout
  * @returns {Boolean} boolean indicating whether entire screen should be filled
  */
-export declare const shouldFillDeviceScreen: (layout: MessageLayout) => boolean;
+export declare const shouldFillDeviceScreen: (layout: InAppMessageLayout) => boolean;
 /**
  * Parse and assign appropriate message container and wrapper style from style params
  *

package/dist/InAppMessaging/index.d.ts

@@ -1,2 +1,2 @@
-export { InAppMessagingProvider, useInAppMessaging, } from '@aws-amplify/ui-react-core-notifications';
+export { InAppMessage, InAppMessageAction, InAppMessageButton, InAppMessageContent, InAppMessageImage, InAppMessageLayout, InAppMessagingProvider, InAppMessageStyle, InAppMessageTextAlign, useInAppMessaging, } from '@aws-amplify/ui-react-core-notifications';
 export { BannerMessageProps, CarouselMessageProps, FullScreenMessageProps, ModalMessageProps, InAppMessageDisplay, MessageComponents, withInAppMessaging, } from './components';

package/dist/InAppMessaging/index.js

@@ -1,2 +1,3 @@
+// re-export in-app types from '@aws-amplify/ui-react-core-notifications'
 export { InAppMessagingProvider, useInAppMessaging, } from '@aws-amplify/ui-react-core-notifications';
 export { InAppMessageDisplay, withInAppMessaging, } from './components';

package/dist/assets/icons/icons.ts

@@ -1,3 +1,6 @@
+// disable `@typescript-eslint/no-var-requires` for this file
+// .png icons will be removed in favor of .svg icons
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {

package/dist/primitives/Button/styles.js

@@ -5,8 +5,10 @@ export const getThemedStyles = (theme) => {
     return StyleSheet.create({
         container: {
             alignItems: 'center',
-            backgroundColor: colors.transparent,
             justifyContent: 'center',
+            flexDirection: 'row',
+            gap: space.small,
+            backgroundColor: colors.transparent,
             paddingVertical: space.small,
             paddingHorizontal: space.medium,
             borderRadius: radii.small,
@@ -18,7 +20,7 @@ export const getThemedStyles = (theme) => {
             ...components?.button?.containerDefault,
         },
         containerPrimary: {
-            backgroundColor: colors.brand.primary[80],
+            backgroundColor: colors.primary[80],
             ...components?.button?.containerPrimary,
         },
         containerLink: {

package/dist/primitives/Carousel/Carousel.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dimensions, FlatList, View, } from 'react-native';
-import { isFunction } from '@aws-amplify/ui';
 import CarouselPageIndicator from './CarouselPageIndicator';
 import { VIEWABILITY_CONFIG } from './constants';
 import { styles } from './styles';
@@ -37,16 +36,7 @@ export default function Carousel(props) {
             updateOrientation(window.width);
         };
         const subscription = Dimensions.addEventListener('change', orientationHandler);
-        // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
-        // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
-        return () => {
-            if (isFunction(subscription?.remove)) {
-                subscription.remove();
-            }
-            else {
-                Dimensions.removeEventListener('change', orientationHandler);
-            }
-        };
+        return subscription.remove;
     }, [updateOrientation]);
     const carouselRenderItem = (renderInfo) => (<View style={{ width }}>{renderItem(renderInfo)}</View>);
     if (!data?.length) {

package/dist/primitives/Divider/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 export const getThemedStyles = (theme) => {
     const { tokens, components } = theme;
-    const { colors, fontSizes, space } = tokens;
+    const { colors, fontSizes, space, borderWidths } = tokens;
     return StyleSheet.create({
         container: {
             alignItems: 'center',
@@ -12,12 +12,13 @@ export const getThemedStyles = (theme) => {
             fontSize: fontSizes.medium,
             margin: space.medium,
             textAlign: 'center',
+            color: colors.font.tertiary,
             ...components?.divider?.label,
         },
         line: {
-            backgroundColor: colors.black,
+            backgroundColor: colors.border.secondary,
             flex: 1,
-            height: StyleSheet.hairlineWidth,
+            height: borderWidths.small,
             ...components?.divider?.line,
         },
     });

package/dist/primitives/ErrorMessage/ErrorMessage.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ErrorMessageProps } from './types';
 export declare const CLOSE_BUTTON_TEST_ID = "authenticator--error-message--close-button";
-export default function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }: ErrorMessageProps): JSX.Element;
+export default function ErrorMessage({ accessible, accessibilityRole, children, iconStyle, labelStyle, onDismiss, style, ...rest }: ErrorMessageProps): JSX.Element;

package/dist/primitives/ErrorMessage/ErrorMessage.js

@@ -6,10 +6,10 @@ import { IconButton } from '../IconButton';
 import { useTheme } from '../../theme';
 import { getThemedStyles } from './styles';
 export const CLOSE_BUTTON_TEST_ID = 'authenticator--error-message--close-button';
-export default function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
+export default function ErrorMessage({ accessible = true, accessibilityRole = 'alert', children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme);
-    return (<View {...rest} accessibilityRole="alert" style={[themedStyle.container, style]}>
+    return (<View {...rest} accessible={accessible} accessibilityRole={accessibilityRole} style={[themedStyle.container, style]}>
       <Icon size={20} source={icons.error} style={[themedStyle.icon, iconStyle]}/>
       <Text style={[themedStyle.label, labelStyle]}>{children}</Text>
       {onDismiss ? (<IconButton onPress={onDismiss} size={20} source={icons.close} style={themedStyle.icon} testID={CLOSE_BUTTON_TEST_ID}/>) : null}

package/dist/primitives/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IconProps } from './types';
-export default function Icon({ accessibilityRole, animated, color, size, style, ...rest }: IconProps): JSX.Element;
+export default function Icon({ accessible, accessibilityRole, animated, color, size, style, ...rest }: IconProps): JSX.Element;

package/dist/primitives/Icon/Icon.js

@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { Animated, Image } from 'react-native';
 import { useTheme } from '../../theme';
 import { getThemedStyles } from './styles';
-export default function Icon({ accessibilityRole = 'image', animated, color, size, style, ...rest }) {
+export default function Icon({ accessible = true, accessibilityRole = 'image', animated, color, size, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = useMemo(() => getThemedStyles(theme, color, size), [theme, color, size]);
     const imageProps = {
         ...rest,
+        accessible,
         accessibilityRole,
         style: [themedStyle.icon, style],
     };

package/dist/primitives/Icon/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { iconSizes } from './constants';
 const logger = new Logger('Icon-logger');
 const getIconSize = (size) => {

package/dist/primitives/Radio/styles.js

@@ -26,7 +26,7 @@ export const getThemedStyles = (theme) => {
             ...components?.radio?.radioContainer,
         },
         radioDot: {
-            backgroundColor: colors.brand.primary[80],
+            backgroundColor: colors.primary[80],
             borderRadius: ROUNDED_BORDER_RADIUS,
             ...components?.radio?.radioDot,
         },

package/dist/primitives/RadioGroup/RadioGroup.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RadioGroupProps } from './types';
-export default function RadioGroup<T>({ accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): JSX.Element;
+export default function RadioGroup<T>({ accessible, accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): JSX.Element;

package/dist/primitives/RadioGroup/RadioGroup.js

@@ -5,7 +5,7 @@ import { useTheme } from '../../theme';
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
 import { getThemedStyles } from './styles';
-export default function RadioGroup({ accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
+export default function RadioGroup({ accessible = true, accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme);
     const [value, setValue] = useState(initialValue);
@@ -27,7 +27,7 @@ export default function RadioGroup({ accessibilityRole = 'radiogroup', children,
         onChange?.(nextValue);
     }, [onChange]);
     return (<View {...rest} style={[themedStyle.container, containerStyle, style]}>
-      <View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+      <View accessible={accessible} accessibilityRole={accessibilityRole} style={childContainerStyle}>
         {Children.map(children, (child) => {
             if (isValidElement(child)) {
                 const { disabled: childDisabled, onChange: childOnChange, value: childValue, size: childSize, } = child.props;

package/dist/primitives/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TabsProps } from './types';
-export default function Tabs({ children, indicatorPosition, onChange, selectedIndex, style, ...rest }: TabsProps): JSX.Element;
+export default function Tabs({ accessible, accessibilityRole, children, indicatorPosition, onChange, selectedIndex, style, ...rest }: TabsProps): JSX.Element;

package/dist/primitives/Tabs/Tabs.js

@@ -2,13 +2,13 @@ import React, { Children, cloneElement, isValidElement } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../../theme';
 import { getThemedStyles } from './styles';
-export default function Tabs({ children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
+export default function Tabs({ accessible = true, accessibilityRole = 'tablist', children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme, indicatorPosition);
     const handleOnChange = (nextIndex) => {
         onChange?.(nextIndex);
     };
-    return (<View {...rest} accessibilityRole="tablist" style={[themedStyle.tabList, style]}>
+    return (<View {...rest} accessible={accessible} accessibilityRole={accessibilityRole} style={[themedStyle.tabList, style]}>
       {Children.map(children, (child, index) => {
             if (isValidElement(child)) {
                 return cloneElement(child, {

package/dist/primitives/Tabs/styles.js

@@ -4,12 +4,12 @@ export const getThemedStyles = (theme, indicatorPosition) => {
     const selectedTabBorderStyles = {};
     const tabBorderStyles = {};
     if (indicatorPosition && indicatorPosition === 'top') {
-        selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+        selectedTabBorderStyles.borderTopColor = colors.primary[80];
         tabBorderStyles.borderTopWidth = borderWidths.medium;
         tabBorderStyles.borderTopColor = colors.border.secondary;
     }
     else {
-        selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+        selectedTabBorderStyles.borderBottomColor = colors.primary[80];
         tabBorderStyles.borderBottomWidth = borderWidths.medium;
         tabBorderStyles.borderBottomColor = colors.border.secondary;
     }
@@ -46,7 +46,7 @@ export const getThemedStyles = (theme, indicatorPosition) => {
         },
         selected: {
             backgroundColor: colors.background.primary,
-            color: colors.brand.primary[80],
+            color: colors.primary[80],
             ...selectedTabBorderStyles,
             ...components?.tabs?.selected,
         },

package/dist/utils/platform.d.ts

@@ -11,9 +11,8 @@ declare const _default: {
     };
     OS: "ios";
     isPad: boolean;
-    isTVOS: boolean;
-    Version: string;
     isTV: boolean;
+    Version: string;
     isTesting: boolean;
     select<T>(specifics: ({
         ios?: T | undefined;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.28";
+export declare const VERSION = "2.0.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.28';
+export const VERSION = '2.0.1';

package/lib/Authenticator/Authenticator.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const ui_react_core_1 = require("@aws-amplify/ui-react-core");
-const ui_1 = require("@aws-amplify/ui");
 const hooks_1 = require("../hooks");
 const common_1 = require("./common");
 const hooks_2 = require("./hooks");
@@ -16,8 +15,8 @@ const DEFAULTS = {
     ConfirmSignUp: Defaults_1.ConfirmSignUp,
     ConfirmVerifyUser: Defaults_1.ConfirmVerifyUser,
     ForceNewPassword: Defaults_1.ForceNewPassword,
-    ResetPassword: Defaults_1.ResetPassword,
-    SetupTOTP: Defaults_1.SetupTOTP,
+    ForgotPassword: Defaults_1.ForgotPassword,
+    SetupTotp: Defaults_1.SetupTotp,
     SignIn: Defaults_1.SignIn,
     SignUp: Defaults_1.SignUp,
     VerifyUser: Defaults_1.VerifyUser,
@@ -28,22 +27,26 @@ const routePropSelector = ({ route, }) => [
 function Authenticator({ children, components: overrides, Container = common_1.DefaultContainer, Footer, Header, ...options }) {
     (0, hooks_1.useDeprecationWarning)({
         message: 'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
-        shouldWarn: !!options?.passwordSettings,
+        // shouldWarn: !!options?.passwordSettings,
+        /**
+         * @migration turn off until getConfig returns zero config
+         */
+        shouldWarn: false,
+    });
+    (0, ui_react_core_1.useSetUserAgent)({
+        componentName: 'Authenticator',
+        packageName: 'react-native',
+        version: version_1.VERSION,
     });
-    react_1.default.useEffect(() => {
-        (0, ui_1.configureComponent)({
-            packageName: '@aws-amplify/ui-react-native',
-            version: version_1.VERSION,
-        });
-    }, []);
     (0, ui_react_core_1.useAuthenticatorInitMachine)(options);
-    const { authStatus, fields, route } = (0, ui_react_core_1.useAuthenticator)(routePropSelector);
+    const { fields, route } = (0, ui_react_core_1.useAuthenticator)(routePropSelector);
     const components = (0, react_1.useMemo)(
     // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
     () => (0, ui_react_core_1.resolveAuthenticatorComponents)(DEFAULTS, overrides), [overrides]);
     const { Component, props } = (0, ui_react_core_1.useAuthenticatorRoute)({ components });
     const typedFields = (0, hooks_2.getRouteTypedFields)({ fields, route });
-    if (authStatus === 'authenticated') {
+    const isAuthenticatedRoute = route === 'authenticated' || route === 'signOut';
+    if (isAuthenticatedRoute) {
         return children ? <>{children}</> : null;
     }
     return (<react_native_safe_area_context_1.SafeAreaProvider>
@@ -64,8 +67,8 @@ Authenticator.ConfirmSignIn = Defaults_1.ConfirmSignIn;
 Authenticator.ConfirmSignUp = Defaults_1.ConfirmSignUp;
 Authenticator.ConfirmVerifyUser = Defaults_1.ConfirmVerifyUser;
 Authenticator.ForceNewPassword = Defaults_1.ForceNewPassword;
-Authenticator.ResetPassword = Defaults_1.ResetPassword;
-Authenticator.SetupTOTP = Defaults_1.SetupTOTP;
+Authenticator.ForgotPassword = Defaults_1.ForgotPassword;
+Authenticator.SetupTotp = Defaults_1.SetupTotp;
 Authenticator.SignIn = Defaults_1.SignIn;
 Authenticator.SignUp = Defaults_1.SignUp;
 Authenticator.VerifyUser = Defaults_1.VerifyUser;

package/lib/Authenticator/Defaults/{ResetPassword/ResetPassword.js → ForgotPassword/ForgotPassword.js}

@@ -5,9 +5,9 @@ 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 = 'ResetPassword';
+const COMPONENT_NAME = 'ForgotPassword';
 const { getResetYourPasswordText, getSendCodeText, getSendingText, getBackToSignInText, } = ui_1.authenticatorTextUtil;
-const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
+const ForgotPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
     const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
         componentName: COMPONENT_NAME,
         fields,
@@ -35,8 +35,8 @@ const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPendi
     ]);
     return (<common_1.DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
 };
-ResetPassword.Footer = common_1.DefaultFooter;
-ResetPassword.FormFields = common_1.DefaultTextFormFields;
-ResetPassword.Header = common_1.DefaultHeader;
-ResetPassword.displayName = COMPONENT_NAME;
-exports.default = ResetPassword;
+ForgotPassword.Footer = common_1.DefaultFooter;
+ForgotPassword.FormFields = common_1.DefaultTextFormFields;
+ForgotPassword.Header = common_1.DefaultHeader;
+ForgotPassword.displayName = COMPONENT_NAME;
+exports.default = ForgotPassword;

package/lib/Authenticator/Defaults/ForgotPassword/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.ForgotPassword = void 0;
+var ForgotPassword_1 = require("./ForgotPassword");
+Object.defineProperty(exports, "ForgotPassword", { enumerable: true, get: function () { return __importDefault(ForgotPassword_1).default; } });

package/lib/Authenticator/Defaults/{SetupTOTP/SetupTOTP.js → SetupTotp/SetupTotp.js}

@@ -7,9 +7,9 @@ const primitives_1 = require("../../../primitives");
 const common_1 = require("../../common");
 const hooks_1 = require("../../hooks");
 const styles_1 = require("./styles");
-const COMPONENT_NAME = 'SetupTOTP';
-const { getBackToSignInText, getConfirmingText, getConfirmText, getSetupTOTPText, getSetupTOTPInstructionsText, } = ui_1.authenticatorTextUtil;
-const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, validationErrors, ...rest }) => {
+const COMPONENT_NAME = 'SetupTotp';
+const { getBackToSignInText, getConfirmingText, getConfirmText, getSetupTotpText, getSetupTotpInstructionsText, } = ui_1.authenticatorTextUtil;
+const SetupTotp = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, validationErrors, ...rest }) => {
     const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
         componentName: COMPONENT_NAME,
         fields,
@@ -18,12 +18,12 @@ const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending,
         handleSubmit,
         validationErrors,
     });
-    const headerText = getSetupTOTPText();
+    const headerText = getSetupTotpText();
     const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
     const secondaryButtonText = getBackToSignInText();
     const body = (<>
       <primitives_1.Label style={styles_1.styles.secretKeyText}>
-        {getSetupTOTPInstructionsText()}
+        {getSetupTotpInstructionsText()}
       </primitives_1.Label>
       <primitives_1.Label selectable style={styles_1.styles.secretKeyText}>
         {totpSecretCode}
@@ -45,8 +45,8 @@ const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending,
     ]);
     return (<common_1.DefaultContent {...rest} body={body} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
 };
-SetupTOTP.Footer = common_1.DefaultFooter;
-SetupTOTP.FormFields = common_1.DefaultTextFormFields;
-SetupTOTP.Header = common_1.DefaultHeader;
-SetupTOTP.displayName = COMPONENT_NAME;
-exports.default = SetupTOTP;
+SetupTotp.Footer = common_1.DefaultFooter;
+SetupTotp.FormFields = common_1.DefaultTextFormFields;
+SetupTotp.Header = common_1.DefaultHeader;
+SetupTotp.displayName = COMPONENT_NAME;
+exports.default = SetupTotp;

package/lib/Authenticator/Defaults/{SetupTOTP → SetupTotp}/index.js

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetupTOTP = void 0;
-var SetupTOTP_1 = require("./SetupTOTP");
-Object.defineProperty(exports, "SetupTOTP", { enumerable: true, get: function () { return __importDefault(SetupTOTP_1).default; } });
+exports.SetupTotp = void 0;
+var SetupTotp_1 = require("./SetupTotp");
+Object.defineProperty(exports, "SetupTotp", { enumerable: true, get: function () { return __importDefault(SetupTotp_1).default; } });

package/lib/Authenticator/Defaults/SignIn/SignIn.js

@@ -6,7 +6,7 @@ const ui_1 = require("@aws-amplify/ui");
 const common_1 = require("../../common");
 const hooks_1 = require("../../hooks");
 const COMPONENT_NAME = 'SignIn';
-const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, toResetPassword, toSignUp, validationErrors, ...rest }) => {
+const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, socialProviders, toFederatedSignIn, toForgotPassword, toSignUp, validationErrors, ...rest }) => {
     const { getSignInTabText, getSignInText, getSignUpTabText, getForgotPasswordText, } = ui_1.authenticatorTextUtil;
     const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
         componentName: COMPONENT_NAME,
@@ -20,10 +20,11 @@ const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, to
     const forgotPasswordText = getForgotPasswordText(true);
     const signInText = getSignInText();
     const signUpText = getSignUpTabText();
+    const body = socialProviders ? (<common_1.FederatedProviderButtons route="signIn" socialProviders={socialProviders} toFederatedSignIn={toFederatedSignIn}/>) : null;
     const buttons = (0, react_1.useMemo)(() => {
         const forgotPassword = {
             children: forgotPasswordText,
-            onPress: toResetPassword,
+            onPress: toForgotPassword,
         };
         return {
             primary: { children: signInText, disabled, onPress: handleFormSubmit },
@@ -38,10 +39,10 @@ const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, to
         hideSignUp,
         signInText,
         signUpText,
-        toResetPassword,
+        toForgotPassword,
         toSignUp,
     ]);
-    return (<common_1.DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
+    return (<common_1.DefaultContent {...rest} body={body} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
 };
 SignIn.Footer = common_1.DefaultFooter;
 SignIn.FormFields = common_1.DefaultTextFormFields;