@aws-amplify/ui-react-native 1.2.20 → 1.2.22

package/dist/Authenticator/Defaults/ResetPassword/ResetPassword.js

@@ -4,13 +4,14 @@ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ResetPassword';
 const { getResetYourPasswordText, getSendCodeText, getSendingText, getBackToSignInText, } = authenticatorTextUtil;
-const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, ...rest }) => {
-    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
+const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
+        validationErrors,
     });
     const headerText = getResetYourPasswordText();
     const primaryButtonText = isPending ? getSendingText() : getSendCodeText();
@@ -29,7 +30,7 @@ const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPendi
         secondaryButtonText,
         toSignIn,
     ]);
-    return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
+    return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
 };
 ResetPassword.Footer = DefaultFooter;
 ResetPassword.FormFields = DefaultTextFormFields;

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

@@ -1,3 +1,14 @@
-import { DefaultSetupTOTPComponent } from '../types';
-declare const SetupTOTP: DefaultSetupTOTPComponent;
+/// <reference types="react" />
+import { DefaultFooter, DefaultHeader } from '../../common';
+import { DefaultSetupTOTPProps } from '../types';
+declare const SetupTOTP: {
+    ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, validationErrors, ...rest }: DefaultSetupTOTPProps): JSX.Element;
+    Footer: typeof DefaultFooter;
+    FormFields: {
+        ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: import("../../common/DefaultFormFields/types").DefaultTextFormFieldsProps): JSX.Element;
+        displayName: string;
+    };
+    Header: typeof DefaultHeader;
+    displayName: string;
+};
 export default SetupTOTP;

package/dist/Authenticator/Defaults/SetupTOTP/SetupTOTP.js

@@ -6,13 +6,14 @@ import { useFieldValues } from '../../hooks';
 import { styles } from './styles';
 const COMPONENT_NAME = 'SetupTOTP';
 const { getBackToSignInText, getConfirmingText, getConfirmText, getSetupTOTPText, getSetupTOTPInstructionsText, } = authenticatorTextUtil;
-const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, ...rest }) => {
-    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
+const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, validationErrors, ...rest }) => {
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
+        validationErrors,
     });
     const headerText = getSetupTOTPText();
     const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
@@ -39,7 +40,7 @@ const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending,
         secondaryButtonText,
         toSignIn,
     ]);
-    return (<DefaultContent {...rest} body={body} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
+    return (<DefaultContent {...rest} body={body} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
 };
 SetupTOTP.Footer = DefaultFooter;
 SetupTOTP.FormFields = DefaultTextFormFields;

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

@@ -1,3 +1,14 @@
-import { DefaultSignInComponent } from '../types';
-declare const SignIn: DefaultSignInComponent;
+/// <reference types="react" />
+import { DefaultFooter, DefaultHeader } from '../../common';
+import { DefaultSignInProps } from '../types';
+declare const SignIn: {
+    ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, toResetPassword, toSignUp, validationErrors, ...rest }: DefaultSignInProps): JSX.Element;
+    Footer: typeof DefaultFooter;
+    FormFields: {
+        ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: import("../../common/DefaultFormFields/types").DefaultTextFormFieldsProps): JSX.Element;
+        displayName: string;
+    };
+    Header: typeof DefaultHeader;
+    displayName: string;
+};
 export default SignIn;

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

@@ -3,14 +3,15 @@ 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 SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, toResetPassword, toSignUp, validationErrors, ...rest }) => {
     const { getSignInTabText, getSignInText, getSignUpTabText, getForgotPasswordText, } = authenticatorTextUtil;
-    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
+        validationErrors,
     });
     const headerText = getSignInTabText();
     const forgotPasswordText = getForgotPasswordText(true);
@@ -37,7 +38,7 @@ const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, to
         toResetPassword,
         toSignUp,
     ]);
-    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText}/>);
+    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
 };
 SignIn.Footer = DefaultFooter;
 SignIn.FormFields = DefaultTextFormFields;

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

@@ -1,3 +1,14 @@
-import { DefaultSignUpComponent } from '../types';
-declare const SignUp: DefaultSignUpComponent;
+/// <reference types="react" />
+import { DefaultFooter, DefaultHeader } from '../../common';
+import { DefaultSignUpProps } from '../types';
+declare const SignUp: {
+    ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, hideSignIn, isPending, toSignIn, validationErrors, ...rest }: DefaultSignUpProps): JSX.Element;
+    Footer: typeof DefaultFooter;
+    FormFields: {
+        ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: import("../../common/DefaultFormFields/types").DefaultTextFormFieldsProps): JSX.Element;
+        displayName: string;
+    };
+    Header: typeof DefaultHeader;
+    displayName: string;
+};
 export default SignUp;

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

@@ -4,13 +4,14 @@ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'SignUp';
 const { getCreateAccountText, getCreatingAccountText, getSignInTabText, getSignUpTabText, } = authenticatorTextUtil;
-const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, hideSignIn, isPending, toSignIn, ...rest }) => {
-    const { disableFormSubmit, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
+const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, hideSignIn, isPending, toSignIn, validationErrors, ...rest }) => {
+    const { disableFormSubmit, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
+        validationErrors,
     });
     const disabled = hasValidationErrors || disableFormSubmit;
     const headerText = getSignUpTabText();
@@ -35,7 +36,7 @@ const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationE
         secondaryButtonText,
         toSignIn,
     ]);
-    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} isPending={isPending}/>);
+    return (<DefaultContent {...rest} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} isPending={isPending} validationErrors={fieldValidationErrors}/>);
 };
 SignUp.Footer = DefaultFooter;
 SignUp.FormFields = DefaultTextFormFields;

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

@@ -1,3 +1,14 @@
-import { DefaultVerifyUserComponent } from '../types';
-declare const VerifyUser: DefaultVerifyUserComponent;
+/// <reference types="react" />
+import { DefaultFooter, DefaultHeader } from '../../common';
+import { DefaultVerifyUserProps } from '../types';
+declare const VerifyUser: {
+    ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, validationErrors, ...rest }: DefaultVerifyUserProps): JSX.Element;
+    Footer: typeof DefaultFooter;
+    FormFields: {
+        ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: import("../../common/DefaultFormFields/types").DefaultRadioFormFieldsProps): JSX.Element;
+        displayName: string;
+    };
+    Header: typeof DefaultHeader;
+    displayName: string;
+};
 export default VerifyUser;

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

@@ -4,13 +4,14 @@ import { DefaultContent, DefaultFooter, DefaultHeader, DefaultRadioFormFields, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'VerifyUser';
 const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
-const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, ...rest }) => {
-    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
+const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, validationErrors, ...rest }) => {
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
+        validationErrors,
     });
     const headerText = getVerifyContactText();
     const skipText = getSkipText();
@@ -20,7 +21,7 @@ const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerifi
         primary: { children: verifyText, disabled, onPress: handleFormSubmit },
         links: [{ children: skipText, onPress: skipVerification }],
     }), [disabled, handleFormSubmit, skipText, skipVerification, verifyText]);
-    return (<DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText}/>);
+    return (<DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
 };
 VerifyUser.Footer = DefaultFooter;
 VerifyUser.FormFields = DefaultRadioFormFields;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AuthenticatorComponentOverrides, AuthenticatorComponentDefaults } from '@aws-amplify/ui-react-core';
 import { RadioFieldOptions, TextFieldOptionsType } from '../hooks';
 export interface ConfirmResetPasswordStyle {
@@ -21,36 +22,36 @@ export interface SignUpStyle {
 export interface VerifyUserStyle {
 }
 export type DefaultComponents<FieldType = {}, Props = {}> = AuthenticatorComponentDefaults<FieldType, Props>;
-export type DefaultConfirmResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmResetPasswordStyle;
-}>['ConfirmResetPassword'];
-export type DefaultConfirmSignInComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ConfirmResetPassword']>;
+export type DefaultConfirmSignInProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmSignInStyle;
-}>['ConfirmSignIn'];
-export type DefaultConfirmSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ConfirmSignIn']>;
+export type DefaultConfirmSignUpProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmSignUpStyle;
-}>['ConfirmSignUp'];
-export type DefaultConfirmVerifyUserComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ConfirmSignUp']>;
+export type DefaultConfirmVerifyUserProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmVerifyUserStyle;
-}>['ConfirmVerifyUser'];
-export type DefaultForceNewPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ConfirmVerifyUser']>;
+export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ForceNewPasswordStyle;
-}>['ForceNewPassword'];
-export type DefaultResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ForceNewPassword']>;
+export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: ResetPasswordStyle;
-}>['ResetPassword'];
-export type DefaultSetupTOTPComponent = DefaultComponents<TextFieldOptionsType, {
+}>['ResetPassword']>;
+export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: SetupTOTPStyle;
-}>['SetupTOTP'];
-export type DefaultSignInComponent = DefaultComponents<TextFieldOptionsType, {
+}>['SetupTOTP']>;
+export type DefaultSignInProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: SignInStyle;
-}>['SignIn'];
-export type DefaultSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+}>['SignIn']>;
+export type DefaultSignUpProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
     style?: SignUpStyle;
-}>['SignUp'];
-export type DefaultVerifyUserComponent = DefaultComponents<RadioFieldOptions, {
+}>['SignUp']>;
+export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<DefaultComponents<RadioFieldOptions, {
     style?: VerifyUserStyle;
-}>['VerifyUser'];
+}>['VerifyUser']>;
 /**
  * Custom Authenticator components
  */

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

@@ -5,8 +5,7 @@ export const getDefaultStyle = ({ tokens: { colors, fontSizes, space }, }) => St
         paddingHorizontal: space.small,
     },
     buttonPrimary: {
-        marginHorizontal: space.medium,
-        marginVertical: space.small,
+        margin: space.small,
     },
     buttonPrimaryLabel: {},
     buttonSecondary: {

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

@@ -36,7 +36,7 @@ type DefaultButtons = {
     secondary?: AuthenticatorButtonProps;
     links?: AuthenticatorButtonProps[];
 };
-export type DefaultContentProps<FieldsType extends TextFieldOptionsType | RadioFieldOptions | unknown = unknown> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'Footer' | 'isPending'> & {
+export type DefaultContentProps<FieldsType extends TextFieldOptionsType | RadioFieldOptions | unknown = unknown> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'isPending'> & {
     buttons: DefaultButtons;
     body?: React.ReactNode;
     fields: FieldsType[];

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

@@ -1,3 +1,7 @@
-import { DefaultRadioFormFieldsComponent } from './types';
-declare const DefaultFormFields: DefaultRadioFormFieldsComponent;
-export default DefaultFormFields;
+/// <reference types="react" />
+import { DefaultRadioFormFieldsProps } from './types';
+declare const DefaultRadioFormFields: {
+    ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: DefaultRadioFormFieldsProps): JSX.Element;
+    displayName: string;
+};
+export default DefaultRadioFormFields;

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

@@ -13,12 +13,13 @@ const censorContactInformation = (name, value) => {
     }
     return censoredVal;
 };
-const DefaultFormFields = ({ fields, isPending, fieldContainerStyle, fieldLabelStyle, style, }) => {
+const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
     return (<RadioGroup disabled={isPending} style={style}>
-      {fields.map(({ name, value, ...props }) => (<Radio {...props} key={value} 
+      {(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;
+DefaultRadioFormFields.displayName = 'FormFields';
+export default DefaultRadioFormFields;

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

@@ -1,3 +1,7 @@
-import { DefaultTextFormFieldsComponent } from './types';
-declare const DefaultTextFormFields: DefaultTextFormFieldsComponent;
+/// <reference types="react" />
+import { DefaultTextFormFieldsProps } from './types';
+declare const DefaultTextFormFields: {
+    ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: DefaultTextFormFieldsProps): JSX.Element;
+    displayName: string;
+};
 export default DefaultTextFormFields;

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

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import { getErrors } from '@aws-amplify/ui';
 import Field from './Field';
 import { FieldErrors } from './FieldErrors';
-const DefaultTextFormFields = ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields = [], isPending, style, validationErrors, }) => {
-    const formFields = fields.map(({ name, type, ...field }) => {
+const DefaultTextFormFields = ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending = false, style, validationErrors, }) => {
+    const formFields = (fields ?? []).map(({ name, type, ...field }) => {
         const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
         const hasError = errors?.length > 0;
         return (<Fragment key={name}>
@@ -14,5 +14,5 @@ const DefaultTextFormFields = ({ fieldContainerStyle, fieldErrorsContainer, fiel
     });
     return <View style={style}>{formFields}</View>;
 };
-DefaultTextFormFields.displayName = 'DefaultTextFormFields';
+DefaultTextFormFields.displayName = 'FormFields';
 export default DefaultTextFormFields;

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

@@ -1,5 +1,5 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
+import { AuthenticatorFormFieldsComponent, UseAuthenticator } from '@aws-amplify/ui-react-core';
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
 export type FieldProps = Omit<TextFieldOptionsType, 'name'> & {
     disabled: boolean;
@@ -18,5 +18,14 @@ export interface DefaultFormFieldsStyle {
     style?: StyleProp<ViewStyle>;
 }
 export type DefaultFormFieldsComponent<FieldsType> = AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
-export type DefaultTextFormFieldsComponent = DefaultFormFieldsComponent<TextFieldOptionsType>;
-export type DefaultRadioFormFieldsComponent = DefaultFormFieldsComponent<RadioFieldOptions>;
+interface FormFieldsProps extends DefaultFormFieldsStyle {
+    isPending?: UseAuthenticator['isPending'];
+    validationErrors?: UseAuthenticator['validationErrors'];
+}
+export interface DefaultTextFormFieldsProps extends FormFieldsProps {
+    fields?: TextFieldOptionsType[];
+}
+export interface DefaultRadioFormFieldsProps extends FormFieldsProps {
+    fields?: RadioFieldOptions[];
+}
+export {};

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

@@ -1,6 +1,6 @@
 import { TextFieldProps, PasswordFieldProps, PhoneNumberFieldProps, RadioProps } from '../../primitives';
 export type MachineFieldTypeKey = 'password' | 'tel';
-export type AuthenticatorFieldTypeKey = 'password' | 'phone' | 'default' | 'radio';
+export type AuthenticatorFieldTypeKey = 'email' | 'password' | 'phone' | 'default' | 'radio';
 type RadioFieldOnBlur = RadioProps<string>['onBlur'];
 export type TextFieldOnBlur = TextFieldProps['onBlur'];
 export type OnChangeText = TextFieldProps['onChangeText'];
@@ -10,10 +10,11 @@ type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
     required?: boolean;
     type: Type;
 } & Omit<FieldProps, 'disabled' | 'onBlur'>;
+type EmailFieldOptions = FieldOptions<PhoneNumberFieldProps, 'email'>;
 type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
 type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
 type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
-export type TextFieldOptionsType = (PasswordFieldOptions | PhoneFieldOptions | DefaultFieldOptions) & {
+export type TextFieldOptionsType = (EmailFieldOptions | PasswordFieldOptions | PhoneFieldOptions | DefaultFieldOptions) & {
     labelHidden?: boolean;
 };
 export type RadioFieldOptions = FieldOptions<RadioProps<string>, 'radio'>;

package/dist/Authenticator/hooks/useFieldValues/types.d.ts

@@ -1,4 +1,5 @@
-import { AuthenticatorComponentDefaultProps, AuthenticatorRouteComponentName } from '@aws-amplify/ui-react-core';
+import { AuthenticatorComponentDefaultProps, AuthenticatorRouteComponentName, AuthenticatorMachineContext } from '@aws-amplify/ui-react-core';
+import { ValidationError } from '@aws-amplify/ui';
 import { TypedField } from '../types';
 export type MachineEventHandlers = Pick<AuthenticatorComponentDefaultProps[AuthenticatorRouteComponentName], 'handleBlur' | 'handleChange' | 'handleSubmit'>;
 export interface UseFieldValuesParams<FieldType extends TypedField> {
@@ -16,9 +17,11 @@ export interface UseFieldValuesParams<FieldType extends TypedField> {
      * machine "SUBMIT"" event handler, validates `field` value against machine validation rules
      */
     handleSubmit: MachineEventHandlers['handleSubmit'];
+    validationErrors?: AuthenticatorMachineContext['validationErrors'];
 }
 export interface UseFieldValues<FieldType extends TypedField> {
     fields: FieldType[];
+    fieldValidationErrors: ValidationError | undefined;
     disableFormSubmit: boolean;
     handleFormSubmit: () => void;
 }

package/dist/Authenticator/hooks/useFieldValues/useFieldValues.d.ts

@@ -1,3 +1,3 @@
 import { TypedField } from '../types';
 import { UseFieldValues, UseFieldValuesParams } from './types';
-export default function useFieldValues<FieldType extends TypedField>({ componentName, fields, handleBlur, handleChange, handleSubmit, }: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType>;
+export default function useFieldValues<FieldType extends TypedField>({ componentName, fields, handleBlur, handleChange, handleSubmit, validationErrors, }: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType>;

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

@@ -1,9 +1,11 @@
 import { useMemo, useState } from 'react';
 import { Logger } from 'aws-amplify';
-import { getSanitizedTextFields, getSanitizedRadioFields, isRadioFieldOptions, } from './utils';
+import { getSanitizedTextFields, getSanitizedRadioFields, isRadioFieldOptions, runFieldValidation, } from './utils';
 const logger = new Logger('Authenticator');
-export default function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, }) {
+export default function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {
     const [values, setValues] = useState({});
+    const [touched, setTouched] = useState({});
+    const [fieldValidationErrors, setFieldValidationErrors] = useState({});
     const isRadioFieldComponent = componentName === 'VerifyUser';
     const sanitizedFields = useMemo(() => {
         if (!Array.isArray(fields)) {
@@ -27,16 +29,27 @@ export default function useFieldValues({ componentName, fields = [], handleBlur,
         }
         const { name, label, labelHidden, ...rest } = field;
         const onBlur = (event) => {
+            setTouched({ ...touched, [name]: true });
             // call `onBlur` passed as text `field` option
             field.onBlur?.(event);
             // call machine blur handler
             handleBlur({ name, value: values[name] });
+            setFieldValidationErrors({
+                ...fieldValidationErrors,
+                [name]: runFieldValidation(field, values[name], validationErrors),
+            });
         };
         const onChangeText = (value) => {
             // call `onChangeText` passed as text `field` option
             field.onChangeText?.(value);
             // call machine change handler
             handleChange({ name, value });
+            if (touched[name]) {
+                setFieldValidationErrors({
+                    ...fieldValidationErrors,
+                    [name]: runFieldValidation(field, value, validationErrors),
+                });
+            }
             setValues({ ...values, [name]: value });
         };
         return {
@@ -76,5 +89,10 @@ export default function useFieldValues({ componentName, fields = [], handleBlur,
             }, {});
         handleSubmit?.(submitValue);
     };
-    return { fields: fieldsWithHandlers, disableFormSubmit, handleFormSubmit };
+    return {
+        fields: fieldsWithHandlers,
+        disableFormSubmit,
+        fieldValidationErrors: { ...fieldValidationErrors, ...validationErrors },
+        handleFormSubmit,
+    };
 }

package/dist/Authenticator/hooks/useFieldValues/utils.d.ts

@@ -1,5 +1,6 @@
+import { ValidationError } from '@aws-amplify/ui';
 import { AuthenticatorLegacyField, AuthenticatorRouteComponentName, UseAuthenticator } from '@aws-amplify/ui-react-core';
-import { RadioFieldOptions, TypedField } from '../types';
+import { RadioFieldOptions, TextFieldOptionsType, TypedField } from '../types';
 export declare const isRadioFieldOptions: (field: TypedField) => field is RadioFieldOptions;
 export declare const getSanitizedRadioFields: (fields: TypedField[], componentName: AuthenticatorRouteComponentName) => TypedField[];
 export declare const getSanitizedTextFields: (fields: TypedField[], componentName: AuthenticatorRouteComponentName) => TypedField[];
@@ -16,3 +17,11 @@ export declare const getTypedField: ({ type: machineFieldType, name, ...field }:
  */
 export declare const getTypedFields: (fields: AuthenticatorLegacyField[]) => TypedField[];
 export declare function getRouteTypedFields({ fields, route, }: Pick<UseAuthenticator, 'fields' | 'route'>): TypedField[];
+/**
+ *
+ * @param {TextFieldOptionsType} field text field type
+ * @param {string | undefined} value text field value
+ * @param {string[]} stateValidations validation errors array from state machine
+ * @returns {string[]} field errors array
+ */
+export declare const runFieldValidation: (field: TextFieldOptionsType, value: string | undefined, stateValidations: ValidationError | undefined) => string[];

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

@@ -1,8 +1,9 @@
 import { Logger } from 'aws-amplify';
-import { isUnverifiedContactMethodType, UnverifiedContactMethodType, } from '@aws-amplify/ui';
+import { authenticatorTextUtil, isString, isUnverifiedContactMethodType, isValidEmail, UnverifiedContactMethodType, } from '@aws-amplify/ui';
 import { isAuthenticatorComponentRouteKey, } from '@aws-amplify/ui-react-core';
 import { KEY_ALLOW_LIST } from './constants';
 const logger = new Logger('Authenticator');
+const { getInvalidEmailText, getRequiredFieldText } = authenticatorTextUtil;
 export const isRadioFieldOptions = (field) => field?.type === 'radio';
 export const getSanitizedRadioFields = (fields, componentName) => {
     const values = {};
@@ -51,7 +52,7 @@ export const getSanitizedTextFields = (fields, componentName) => {
 };
 // typed fields utils
 const isKeyAllowed = (key) => KEY_ALLOW_LIST.some((allowedKey) => allowedKey === key);
-const isValidMachineFieldType = (type) => type === 'password' || type === 'tel';
+const isValidMachineFieldType = (type) => type === 'password' || type === 'tel' || type == 'email';
 const getFieldType = (type) => {
     if (isValidMachineFieldType(type)) {
         return type === 'tel' ? 'phone' : type;
@@ -97,3 +98,32 @@ export function getRouteTypedFields({ fields, route, }) {
     const radioFields = fields;
     return isVerifyUserRoute ? radioFields : getTypedFields(fields);
 }
+/**
+ *
+ * @param {TextFieldOptionsType} field text field type
+ * @param {string | undefined} value text field value
+ * @param {string[]} stateValidations validation errors array from state machine
+ * @returns {string[]} field errors array
+ */
+export const runFieldValidation = (field, value, stateValidations) => {
+    const fieldErrors = [];
+    if (field.required && !value) {
+        fieldErrors.push(getRequiredFieldText());
+    }
+    if (field.type === 'email') {
+        if (!isValidEmail(value)) {
+            fieldErrors.push(getInvalidEmailText());
+        }
+    }
+    // add state machine validation errors, if any
+    const stateFieldValidation = stateValidations?.[field.name];
+    if (stateFieldValidation) {
+        if (isString(stateFieldValidation)) {
+            fieldErrors.push(stateFieldValidation);
+        }
+        else {
+            return fieldErrors.concat(stateFieldValidation);
+        }
+    }
+    return fieldErrors;
+};

package/dist/primitives/Heading/styles.js

@@ -9,19 +9,19 @@ export const getThemedStyles = (theme) => {
         },
         1: {
             fontSize: fontSizes.xxxl,
-            fontWeight: fontWeights.hairline,
+            fontWeight: fontWeights.light,
             lineHeight: getLineHeight(fontSizes.xxxl),
             ...components?.heading?.[1],
         },
         2: {
             fontSize: fontSizes.xxl,
-            fontWeight: fontWeights.thin,
+            fontWeight: fontWeights.normal,
             lineHeight: getLineHeight(fontSizes.xxl),
             ...components?.heading?.[2],
         },
         3: {
             fontSize: fontSizes.xl,
-            fontWeight: fontWeights.light,
+            fontWeight: fontWeights.medium,
             lineHeight: getLineHeight(fontSizes.xl),
             ...components?.heading?.[3],
         },
@@ -33,13 +33,13 @@ export const getThemedStyles = (theme) => {
         },
         5: {
             fontSize: fontSizes.medium,
-            fontWeight: fontWeights.bold,
+            fontWeight: fontWeights.semibold,
             lineHeight: getLineHeight(fontSizes.medium),
             ...components?.heading?.[5],
         },
         6: {
             fontSize: fontSizes.small,
-            fontWeight: fontWeights.black,
+            fontWeight: fontWeights.bold,
             lineHeight: getLineHeight(fontSizes.small),
             ...components?.heading?.[6],
         },

package/dist/primitives/Label/styles.js

@@ -4,9 +4,9 @@ export const getThemedStyles = (theme) => {
     const { components, tokens: { colors, fontSizes, fontWeights }, } = theme;
     return StyleSheet.create({
         text: {
-            fontSize: fontSizes.small,
+            fontSize: fontSizes.medium,
             fontWeight: fontWeights.normal,
-            lineHeight: getLineHeight(fontSizes.small),
+            lineHeight: getLineHeight(fontSizes.medium),
             ...components?.label?.text,
         },
         primary: {

package/dist/primitives/TextField/TextField.js

@@ -11,7 +11,8 @@ export default function TextField({ accessibilityLabel, accessibilityRole, acces
     const fieldContainerStyle = useMemo(() => ({
         ...themedStyle.fieldContainer,
         ...(disabled && themedStyle.disabled),
-    }), [disabled, themedStyle]);
+        ...(error && themedStyle.error),
+    }), [disabled, error, themedStyle]);
     return (<View testID={TEXTFIELD_CONTAINER_TEST_ID} style={[themedStyle.container, style]}>
       {label ? (<Label accessibilityLabel={label} style={[themedStyle.label, labelStyle]}>
           {label}