@aws-amplify/ui-angular 2.0.1-next.2 → 2.0.1-next.6

package/fesm2015/aws-amplify-ui-angular.js

@@ -1,49 +1,82 @@
 import * as i0 from '@angular/core';
-import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, HostBinding, ContentChildren, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, NgZone, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, ContentChildren, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, NgZone, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { authMachine, getSendEventAliases, getActorState, getConfiguredAliases, getActorContext, authInputAttributes, getAliasInfoFromContext, AuthChallengeNames, FederatedIdentityProviders } from '@aws-amplify/ui';
+import { createAuthenticatorMachine, getSendEventAliases, translate, translations, getActorState, getActorContext, AuthChallengeNames, FederatedIdentityProviders, getConfiguredAliases, authInputAttributes, countryDialCodes, getAliasInfoFromContext } from '@aws-amplify/ui';
+import { I18n, Logger, Auth } from 'aws-amplify';
 import { interpret } from 'xstate';
 import { __awaiter, __decorate } from 'tslib';
-import { Logger, Auth } from 'aws-amplify';
 import QRCode from 'qrcode';
+import { isEmpty } from 'lodash';
+import { nanoid } from 'nanoid';
 import { fromEvent } from 'rxjs';
 import { AmplifyButton as AmplifyButton$1, AmplifyInput as AmplifyInput$1, AmplifyToast as AmplifyToast$1, AmplifyChatbot as AmplifyChatbot$1, AmplifyS3Album as AmplifyS3Album$1, AmplifyS3ImagePicker as AmplifyS3ImagePicker$1, AmplifyS3Text as AmplifyS3Text$1, AmplifyS3TextPicker as AmplifyS3TextPicker$1, AmplifyS3Image as AmplifyS3Image$1, AmplifyPicker as AmplifyPicker$1, AmplifyPhotoPicker as AmplifyPhotoPicker$1 } from '@aws-amplify/ui-components/dist/components';
 
-class AmplifyOverrideDirective {
+class AmplifySlotDirective {
     constructor(template) {
         this.template = template;
     }
-    set amplifyOverride(component) {
+    set amplifySlot(component) {
         this.name = component;
     }
 }
-AmplifyOverrideDirective.decorators = [
+AmplifySlotDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[amplifyOverride]',
+                selector: '[amplifySlot]',
             },] }
 ];
-AmplifyOverrideDirective.ctorParameters = () => [
+AmplifySlotDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-AmplifyOverrideDirective.propDecorators = {
-    amplifyOverride: [{ type: Input }]
+AmplifySlotDirective.propDecorators = {
+    amplifySlot: [{ type: Input }]
 };
 
+class AuthPropService {
+    constructor() {
+        this._customComponents = {};
+        this._props = {};
+    }
+    get customComponents() {
+        return this._customComponents;
+    }
+    set customComponents(customComponents) {
+        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+    }
+    get props() {
+        return this._props;
+    }
+    set props(props) {
+        this._props = Object.assign(Object.assign({}, this._props), props);
+    }
+}
+AuthPropService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
+AuthPropService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+AuthPropService.ctorParameters = () => [];
+
 /**
  * AmplifyContextService contains access to the xstate machine
  * and custom components passed by the user.
  */
 class StateMachineService {
-    constructor() {
-        const interpreter = interpret(authMachine, { devTools: true })
+    startMachine({ initialState, loginMechanisms, }) {
+        const machine = createAuthenticatorMachine({
+            initialState,
+            loginMechanisms,
+        });
+        const authService = interpret(machine, {
+            devTools: process.env.NODE_ENV === 'development',
+        })
             .onTransition((state) => {
             this._user = state.context.user;
             this._authState = state;
         })
             .start();
-        this._services = getSendEventAliases(interpreter.send);
-        this._authService = interpreter;
+        this._services = getSendEventAliases(authService.send);
+        this._authService = authService;
     }
     get services() {
         return this._services;
@@ -70,45 +103,27 @@ StateMachineService.decorators = [
                 providedIn: 'root',
             },] }
 ];
-StateMachineService.ctorParameters = () => [];
-
-class AuthPropService {
-    constructor() {
-        this._customComponents = {};
-        this._props = {};
-    }
-    get customComponents() {
-        return this._customComponents;
-    }
-    set customComponents(customComponents) {
-        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
-    }
-    get props() {
-        return this._props;
-    }
-    set props(props) {
-        this._props = Object.assign(Object.assign({}, this._props), props);
-    }
-}
-AuthPropService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
-AuthPropService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-AuthPropService.ctorParameters = () => [];
 
 class AmplifyAuthenticatorComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
-        /**
-         * TODO: Add back custom events
-         */
-        this.initialAuthState = 'signIn';
-        this.dataAttr = '';
         this.customComponentQuery = null;
         this.customComponents = {};
+        // translated texts
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
+    }
+    ngOnInit() {
+        I18n.putVocabularies(translations);
+        const { initialState, loginMechanisms } = this;
+        this.stateMachine.startMachine({ initialState, loginMechanisms });
+        /**
+         * handling translations after content init, because authenticator and its
+         * translations might be initialized before the main app's `ngOnInit` is run.
+         **/
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
     }
     /**
      * Lifecycle Methods
@@ -131,6 +146,15 @@ class AmplifyAuthenticatorComponent {
     get authenticatorState() {
         return this.stateMachine.authState;
     }
+    onTabChange() {
+        const currentState = this.stateMachine.authState.value;
+        if (currentState === 'signIn') {
+            this.stateMachine.send('SIGN_UP');
+        }
+        else {
+            this.stateMachine.send('SIGN_IN');
+        }
+    }
     mapCustomComponents(componentQuery) {
         if (!componentQuery)
             return {};
@@ -144,7 +168,7 @@ class AmplifyAuthenticatorComponent {
 AmplifyAuthenticatorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-authenticator',
-                template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated>\n  <p>You've signed In.</p>\n  <amplify-sign-out></amplify-sign-out>\n</ng-template>\n<ng-template #setupTOTP>\n  <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n  <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n  <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n  <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n  <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n  <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n  Next, we render respective auth subcomponent respective to the current authState.\n  If customer is overriding that component, we render customer's template instead.\n-->\n\n<!-- signIn component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signIn')\"\n>\n</ng-container>\n\n<!-- signUp component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signUp')\"\n>\n</ng-container>\n\n<!-- confirmSignUp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignUp')\"\n>\n</ng-container>\n\n<!-- confirmSignIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignIn')\"\n>\n</ng-container>\n\n<!-- setupTotp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('setupTOTP')\"\n>\n</ng-container>\n\n<!-- forceNewPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('forceNewPassword')\"\n>\n</ng-container>\n\n<!-- resetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('resetPassword')\"\n>\n</ng-container>\n\n<!-- confirmResetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"\n    customComponents.confirmResetPassword || confirmResetPassword\n  \"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmResetPassword')\"\n>\n</ng-container>\n\n<!-- verifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('verifyUser')\"\n>\n</ng-container>\n\n<!-- confirmVerifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmVerifyUser || confirmVerifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n>\n</ng-container>\n\n<!-- signedIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
+                template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <ng-content></ng-content> </ng-template>\n<ng-template #setupTOTP>\n  <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n  <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n  <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n  <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n  <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n  <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n  Next, we render respective auth subcomponent respective to the current authState.\n  If customer is overriding that component, we render customer's template instead.\n-->\n\n<div data-amplify-authenticator>\n  <div data-amplify-modal></div>\n\n  <div data-amplify-container>\n    <amplify-tabs\n      (tabChange)=\"onTabChange()\"\n      *ngIf=\"actorState?.matches('signIn') || actorState?.matches('signUp')\"\n    >\n      <amplify-tab-item\n        [title]=\"signInTitle\"\n        [active]=\"actorState?.matches('signIn')\"\n      >\n        <!-- signIn component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signIn')\"\n        ></ng-container>\n      </amplify-tab-item>\n      <amplify-tab-item\n        [title]=\"signUpTitle\"\n        [active]=\"actorState?.matches('signUp')\"\n      >\n        <!-- signUp component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signUp')\"\n        ></ng-container>\n      </amplify-tab-item>\n    </amplify-tabs>\n\n    <!-- confirmSignUp content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmSignUp')\"\n    >\n    </ng-container>\n\n    <!-- confirmSignIn content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmSignIn')\"\n    >\n    </ng-container>\n\n    <!-- setupTotp content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('setupTOTP')\"\n    >\n    </ng-container>\n\n    <!-- forceNewPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('forceNewPassword')\"\n    >\n    </ng-container>\n\n    <!-- resetPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('resetPassword')\"\n    >\n    </ng-container>\n\n    <!-- confirmResetPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPassword || confirmResetPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmResetPassword')\"\n    >\n    </ng-container>\n\n    <!-- verifyUser content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('verifyUser')\"\n    >\n    </ng-container>\n\n    <!-- confirmVerifyUser content -->\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmVerifyUser || confirmVerifyUser\n      \"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n    >\n    </ng-container>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
                 providers: [AuthPropService],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -154,47 +178,60 @@ AmplifyAuthenticatorComponent.ctorParameters = () => [
     { type: AuthPropService }
 ];
 AmplifyAuthenticatorComponent.propDecorators = {
-    initialAuthState: [{ type: Input }],
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator',] }],
-    customComponentQuery: [{ type: ContentChildren, args: [AmplifyOverrideDirective,] }]
+    initialState: [{ type: Input }],
+    loginMechanisms: [{ type: Input }],
+    customComponentQuery: [{ type: ContentChildren, args: [AmplifySlotDirective,] }]
 };
 
-const logger$4 = new Logger('SignIn');
-class AmplifySignInComponent {
+const logger$3 = new Logger('ConfirmSignIn');
+class AmplifyConfirmSignInComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Sign in to your account';
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        this.confirmText = translate('Confirm');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
+            this.onStateUpdate(state);
+        });
+        this.setHeaderText();
     }
     ngAfterContentInit() {
         this.customComponents = this.contextService.customComponents;
     }
     ngOnDestroy() {
-        logger$4.log('sign in destroyed, unsubscribing from state machine...');
         this.authSubscription.unsubscribe();
     }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('signIn.edit');
-    }
     get context() {
-        const { change, resetPassword, signUp, submit } = this.stateMachine.services;
+        const { change, signIn, submit } = this.stateMachine.services;
         const remoteError = this.remoteError;
-        return { change, remoteError, resetPassword, signUp, submit };
+        return { change, remoteError, signIn, submit };
     }
-    toSignUp() {
-        this.stateMachine.send('SIGN_UP');
+    setHeaderText() {
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { challengeName } = actorContext;
+        switch (challengeName) {
+            case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
+                // TODO: this string should be centralized and translated from ui.
+                this.headerText = translate('Confirm TOTP Code');
+                break;
+            case AuthChallengeNames.SMS_MFA:
+                this.headerText = translate('Confirm SMS Code');
+                break;
+            default:
+                logger$3.error('Unexpected challengeName', challengeName);
+        }
     }
-    toResetPassword() {
-        this.stateMachine.send('RESET_PASSWORD');
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmSignIn.edit');
     }
     onInput(event) {
         event.preventDefault();
@@ -205,85 +242,49 @@ class AmplifySignInComponent {
         });
     }
     onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            this.stateMachine.send({
-                type: 'SUBMIT',
-            });
+        event.preventDefault();
+        // TODO: handle form data within the state machine
+        const formData = new FormData(event.target);
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: Object.fromEntries(formData),
         });
     }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
 }
-AmplifySignInComponent.decorators = [
+AmplifyConfirmSignInComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-sign-in',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button data-amplify-button type=\"submit\">Sign In</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-input\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-input>\n      <button type=\"button\" (click)=\"toResetPassword()\">\n        Forgot your password?\n      </button>\n      <div data-amplify-footer>\n        <div>\n          No account?{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignUp()\">Create account</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
-                encapsulation: ViewEncapsulation.None
+                selector: 'amplify-confirm-sign-in',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignInButton || confirmSignInButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifySignInComponent.ctorParameters = () => [
+AmplifyConfirmSignInComponent.ctorParameters = () => [
     { type: StateMachineService },
     { type: AuthPropService }
 ];
-AmplifySignInComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
-    headerText: [{ type: Input }]
+AmplifyConfirmSignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
 };
 
-class AmplifySignOutComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-    }
-    signOut() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.stateMachine.authService.send('SIGN_OUT');
-            }
-            catch (err) {
-                console.error(err);
-            }
-        });
-    }
-}
-AmplifySignOutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-out',
-                template: "<div [ngStyle]=\"{ height: '24rem' }\">\n  <button (click)=\"signOut()\">Sign Out</button>\n</div>\n"
-            },] }
-];
-AmplifySignOutComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-
-class AmplifySignUpComponent {
+class AmplifyConfirmSignUpComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Create a new account';
+        this.headerText = translate('Confirm Sign Up');
+        this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
-        this.primaryAlias = '';
-        this.secondaryAliases = [];
-        this.validationError = {};
-    }
-    get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        const validationError = this.validationError;
-        return {
-            change,
-            remoteError,
-            signIn,
-            submit,
-            validationError,
-        };
+        // translated texts
+        this.resendCodeText = translate('Resend Code');
+        this.lostCodeText = translate('Lost your code? ');
+        this.confirmText = translate('Confirm');
     }
     ngOnInit() {
+        // TODO: alias for subscribe
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-        const context = this.stateMachine.context;
-        const { primaryAlias, secondaryAliases } = getConfiguredAliases(context);
-        this.primaryAlias = primaryAlias;
-        this.secondaryAliases = secondaryAliases;
     }
     ngAfterContentInit() {
         this.customComponents = this.contextService.customComponents;
@@ -293,177 +294,161 @@ class AmplifySignUpComponent {
     }
     onStateUpdate(state) {
         const actorState = getActorState(state);
-        const actorContext = getActorContext(state);
-        this.remoteError = actorContext.remoteError;
-        this.validationError = actorContext.validationError;
-        this.isPending = !actorState.matches({
-            signUp: {
-                submission: 'idle',
-            },
-        });
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmSignUp.edit');
     }
-    onSubmit($event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            $event.preventDefault();
-            this.stateMachine.send('SUBMIT');
+    get context() {
+        const { change, resend, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const username = this.username;
+        return { change, remoteError, resend, signIn, submit, username };
+    }
+    resend() {
+        this.stateMachine.send({
+            type: 'RESEND',
+            data: {
+                username: this.username,
+            },
         });
     }
-    onInput(event) {
-        event.preventDefault();
-        const { name, value } = event.target;
+    onInput($event) {
+        $event.preventDefault();
+        const { name, value } = $event.target;
         this.stateMachine.send({
             type: 'CHANGE',
             data: { name, value },
         });
     }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+    onSubmit(event) {
+        event.preventDefault();
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { formValues } = actorContext;
+        const { username, confirmation_code } = formValues;
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: { username, confirmation_code },
+        });
     }
 }
-AmplifySignUpComponent.decorators = [
+AmplifyConfirmSignUpComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-sign-up',
-                template: "<ng-template #signUpButton>\n  <button data-amplify-button type=\"submit\">Create Account</button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-input\n    name=\"password\"\n    [required]=\"true\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-input\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    [required]=\"true\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-input [name]=\"secondaryAlias\"></amplify-form-input>\n    </ng-container>\n  </fieldset>\n\n  <amplify-error *ngIf=\"remoteError\">\n    {{ remoteError }}\n  </amplify-error>\n</ng-template>\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <form\n    data-amplify-form\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n    ngNativeValidate\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <div data-amplify-footer>\n      <div>\n        Have an account?{{ ' ' }}\n        <span data-amplify-link (click)=\"toSignIn()\">Sign In</span>\n      </div>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </div>\n  </form>\n</div>\n"
+                selector: 'amplify-confirm-sign-up',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignUpButton || confirmSignUpButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button amplify-button fontWeight=\"normal\" (click)=\"resend()\">\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifySignUpComponent.ctorParameters = () => [
+AmplifyConfirmSignUpComponent.ctorParameters = () => [
     { type: StateMachineService },
     { type: AuthPropService }
 ];
-AmplifySignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
+AmplifyConfirmSignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
     headerText: [{ type: Input }]
 };
 
-const getAttributeMap = () => authInputAttributes;
-
-/**
- * Contains an input element and its label. Intended to be used with
- * Angular Reactive Form
- */
-class AmplifyInputComponent {
+class AmplifyFederatedSignInButtonComponent {
     constructor(stateMachine) {
         this.stateMachine = stateMachine;
-        this.required = false;
-        this.placeholder = '';
-        this.label = '';
-        this.initialValue = '';
-        this.disabled = false;
-        this.autocomplete = '';
-    }
-    get attributeMap() {
-        return getAttributeMap();
-    }
-    get error() {
-        const formContext = getActorContext(this.stateMachine.authState);
-        const { validationError } = formContext;
-        return validationError[this.name];
-    }
-    inferLabel() {
-        var _a;
-        return this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
-    }
-    inferPlaceholder() {
-        var _a;
-        return (this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-            this.inferLabel());
+        this.onClick = () => {
+            this.stateMachine.send({
+                type: 'FEDERATED_SIGN_IN',
+                data: { provider: this.provider },
+            });
+        };
     }
-    // infers what the `type` of underlying input element should be.
-    inferType() {
-        var _a, _b, _c;
-        return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
+}
+AmplifyFederatedSignInButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in-button',
+                template: "<button\n  amplify-button\n  class=\"amplify-field-group__control federated-sign-in-button\"\n  fullWidth=\"true\"\n  fontWeight=\"normal\"\n  style=\"display: block\"\n  (click)=\"onClick()\"\n>\n  <div\n    class=\"amplify-flex federated-sign-in-button-row\"\n    style=\"flex-direction: row; justify-content: center\"\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n"
+            },] }
+];
+AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyFederatedSignInButtonComponent.propDecorators = {
+    provider: [{ type: Input }],
+    text: [{ type: Input }]
+};
+
+class AmplifyFederatedSignInComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.FederatedProviders = FederatedIdentityProviders;
+        this.includeFacebook = false;
+        this.includeGoogle = false;
+        this.includeAmazon = false;
+        this.shouldShowFederatedSignIn = false;
+        // translated texts
+        this.signInFacebookText = translate('Sign In with Facebook');
+        this.signInGoogleText = translate('Sign In with Google');
+        this.signInAmazonText = translate('Sign In with Amazon');
+    }
+    ngOnInit() {
+        var _a, _b;
+        const loginMechanisms = (_b = (_a = this.stateMachine.context) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.login_mechanisms;
+        this.includeFacebook = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('facebook');
+        this.includeGoogle = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('google');
+        this.includeAmazon = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('amazon');
+        this.shouldShowFederatedSignIn =
+            this.includeFacebook || this.includeGoogle || this.includeAmazon;
     }
 }
-AmplifyInputComponent.decorators = [
+AmplifyFederatedSignInComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-form-input',
-                template: "<label>\n  <div data-amplify-label>{{ inferLabel() }}</div>\n  <input\n    data-amplify-form-input\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required ? true : false\"\n    [value]=\"this.initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</label>\n"
+                selector: 'amplify-federated-sign-in',
+                template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  style=\"flex-direction: column\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <hr\n    class=\"amplify-divider\"\n    aria-orientation=\"horizontal\"\n    data-size=\"small\"\n    style=\"margin: '1rem 0'\"\n  />\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [provider]=\"FederatedProviders.Google\"\n  >\n    <svg\n      aria-label=\"Google icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 256 262\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <path\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n        fill=\"#4285F4\"\n      ></path>\n      <path\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n        fill=\"#34A853\"\n      ></path>\n      <path\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n        fill=\"#FBBC05\"\n      ></path>\n      <path\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n        fill=\"#EB4335\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInGoogleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  >\n    <svg\n      aria-label=\"Facebook icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 279 538\"\n    >\n      <path\n        d=\"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z\"\n        fill=\"#1877F2\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInFacebookText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  >\n    <svg\n      aria-label=\"Amazon icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 248 268\"\n    >\n      <path\n        d=\"M139.056521,147.024612 C133.548808,156.744524 124.782731,162.726926 115.087401,162.726926 C101.790721,162.726926 93.9937779,152.612964 93.9937779,137.68681 C93.9937779,108.224571 120.447551,102.879017 145.533369,102.879017 L145.533369,110.365976 C145.533369,123.831358 145.876354,135.063787 139.056521,147.024612 M207.206992,162.579655 C209.400505,165.692256 209.887066,169.437725 207.063416,171.770186 C199.996315,177.653081 187.429476,188.590967 180.513926,194.716661 L180.46208,194.621133 C178.176838,196.663031 174.862638,196.810303 172.27828,195.445057 C160.780281,185.9162 158.686473,181.494078 152.405048,172.403055 C133.405233,191.751331 119.909143,197.534719 95.309886,197.534719 C66.1281801,197.534719 43.4791563,179.599451 43.4791563,143.669212 C43.4791563,115.616003 58.6782107,96.5105248 80.4019706,87.1727225 C99.2063636,78.9096034 125.464714,77.4528107 145.533369,75.1641337 L145.533369,70.694248 C145.533369,62.4749122 146.167493,52.7510201 141.297893,45.6541312 C137.110277,39.2856386 129.018206,36.6586354 121.859376,36.6586354 C108.658413,36.6586354 96.9171331,43.4171982 94.0416364,57.4199213 C93.4593582,60.532522 91.1701278,63.5933787 88.003492,63.7406501 L54.4387473,60.1424518 C51.6150972,59.5095829 48.4484614,57.2248862 49.2740201,52.8982915 C56.9712583,12.2553679 93.7983558,0 126.732964,0 C143.587124,0 165.606011,4.47386604 178.902691,17.2148315 C195.760839,32.917146 194.149604,53.8694866 194.149604,76.6726704 L194.149604,130.542157 C194.149604,146.734049 200.87372,153.830938 207.206992,162.579655 Z M233.826346,208.038962 C230.467669,203.683255 211.550709,205.9821 203.056405,206.998432 C200.470662,207.321077 200.076227,205.042397 202.406981,203.404973 C217.475208,192.664928 242.201125,195.766353 245.081698,199.363845 C247.966255,202.981502 244.336653,228.071183 230.172839,240.049379 C228.001452,241.888455 225.929671,240.904388 226.89783,238.468418 C230.077218,230.430525 237.204944,212.418868 233.826346,208.038962 Z M126.768855,264 C74.0234043,264 42.0764048,241.955028 17.7852554,217.541992 C12.9733903,212.705982 6.71799208,206.295994 3.31151296,200.690918 C1.90227474,198.372135 5.59096074,195.021875 8.0442063,196.84375 C38.2390146,219.267578 82.1011654,239.538304 125.529506,239.538304 C154.819967,239.538304 191.046475,227.469543 220.66851,214.867659 C225.146771,212.966167 225.146771,219.180222 224.511585,221.060516 C224.183264,222.03242 209.514625,236.221149 189.247207,247.047411 C170.304273,257.166172 146.397132,264 126.768855,264 Z\"\n        fill=\"#FF9900\"\n      ></path>\n    </svg>\n\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInAmazonText }}\n    </p>\n  </amplify-federated-sign-in-button>\n</div>\n"
             },] }
 ];
-AmplifyInputComponent.ctorParameters = () => [
+AmplifyFederatedSignInComponent.ctorParameters = () => [
     { type: StateMachineService }
 ];
-AmplifyInputComponent.propDecorators = {
-    name: [{ type: Input }],
-    type: [{ type: Input }],
-    required: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    label: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    disabled: [{ type: Input }],
-    autocomplete: [{ type: Input }]
-};
-
-class AmplifyErrorComponent {
-}
-AmplifyErrorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-error',
-                template: "<span data-amplify-error>\n  <ng-content></ng-content>\n</span>\n"
-            },] }
-];
 
-const logger$3 = new Logger('ConfirmSignUp');
-class AmplifyConfirmSignUpComponent {
+const logger$2 = new Logger('ForceNewPassword');
+class AmplifyForceNewPasswordComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
+        this.headerText = translate('Change Password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.changePasswordText = translate('Change Password');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
-        // TODO: alias for subscribe
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-        this.setUsername();
-    }
-    setUsername() {
-        var _a;
-        const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { user, authAttributes } = actorContext;
-        const username = (_a = user === null || user === void 0 ? void 0 : user.username) !== null && _a !== void 0 ? _a : authAttributes === null || authAttributes === void 0 ? void 0 : authAttributes.username;
-        if (username) {
-            this.username = username;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: 'username', value: this.username },
-            });
-        }
     }
     ngAfterContentInit() {
         this.customComponents = this.contextService.customComponents;
     }
     ngOnDestroy() {
-        logger$3.log('confirm sign up destroyed, unsubscribing from state machine...');
+        logger$2.log('sign in destroyed, unsubscribing from state machine...');
         this.authSubscription.unsubscribe();
     }
     onStateUpdate(state) {
         const actorState = getActorState(state);
         this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignUp.edit');
+        this.isPending = actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
     }
     get context() {
-        const { change, resend, signIn, submit } = this.stateMachine.services;
+        const { change, signIn, submit } = this.stateMachine.services;
+        const user = this.stateMachine.user;
         const remoteError = this.remoteError;
-        const username = this.username;
-        return { change, remoteError, resend, signIn, submit, username };
+        return { change, remoteError, signIn, submit, user };
     }
     toSignIn() {
         this.stateMachine.send('SIGN_IN');
     }
-    resend() {
-        this.stateMachine.send({
-            type: 'RESEND',
-            data: {
-                username: this.username,
-            },
-        });
-    }
-    onInput($event) {
-        $event.preventDefault();
-        const { name, value } = $event.target;
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
         this.stateMachine.send({
             type: 'CHANGE',
             data: { name, value },
@@ -471,76 +456,46 @@ class AmplifyConfirmSignUpComponent {
     }
     onSubmit(event) {
         event.preventDefault();
+        // consider stateMachine directly providing actorState / actorContext
         const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { formValues } = actorContext;
-        const { username, confirmation_code } = formValues;
+        const actorState = getActorContext(state);
+        const { formValues } = actorState;
         this.stateMachine.send({
             type: 'SUBMIT',
-            data: { username, confirmation_code },
+            data: formValues,
         });
     }
 }
-AmplifyConfirmSignUpComponent.decorators = [
+AmplifyForceNewPasswordComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-confirm-sign-up',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias\n        [initialValue]=\"username ? username : null\"\n        [disabled]=\"!!username\"\n      ></amplify-user-name-alias>\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        Lost your code? {{ ' ' }}\n        <a data-amplify-link (click)=\"resend()\">Resend Code</a>\n      </div>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignUpButton || confirmSignUpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>Confirm Your Account</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                selector: 'amplify-force-new-password',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ changePasswordText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.forceNewPasswordSubmitButton ||\n          forceNewPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render force new password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignUpComponent.ctorParameters = () => [
+AmplifyForceNewPasswordComponent.ctorParameters = () => [
     { type: StateMachineService },
     { type: AuthPropService }
 ];
-AmplifyConfirmSignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
-};
-
-class AmplifyUserNameAliasComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.name = 'username';
-        this.disabled = false;
-        this.initialValue = '';
-    }
-    ngOnInit() {
-        const context = this.stateMachine.context;
-        const { label, type } = getAliasInfoFromContext(context);
-        this.label = label;
-        this.type = type;
-        this.placeholder = `Enter your ${label.toLowerCase()}`;
-    }
-}
-AmplifyUserNameAliasComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-user-name-alias',
-                template: "<amplify-form-input\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  autocomplete=\"username\"\n>\n</amplify-form-input>\n"
-            },] }
-];
-AmplifyUserNameAliasComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-AmplifyUserNameAliasComponent.propDecorators = {
-    name: [{ type: Input }],
-    disabled: [{ type: Input }],
-    initialValue: [{ type: Input }]
+AmplifyForceNewPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
+    headerText: [{ type: Input }]
 };
 
-const logger$2 = new Logger('ConfirmSignIn');
-class AmplifyConfirmSignInComponent {
+class AmplifyResetPasswordComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
+        this.headerText = translate('Reset your password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
-        this.headerText = '';
+        // translated texts
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
-            this.onStateUpdate(state);
-        });
-        this.setHeaderText();
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
     }
     ngAfterContentInit() {
         this.customComponents = this.contextService.customComponents;
@@ -548,31 +503,18 @@ class AmplifyConfirmSignInComponent {
     ngOnDestroy() {
         this.authSubscription.unsubscribe();
     }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('resetPassword.edit');
+    }
     get context() {
         const { change, signIn, submit } = this.stateMachine.services;
         const remoteError = this.remoteError;
         return { change, remoteError, signIn, submit };
     }
-    setHeaderText() {
-        const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { challengeName } = actorContext;
-        switch (challengeName) {
-            case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
-                // TODO: this string should be centralized and translated from ui.
-                this.headerText = 'Confirm TOTP Code';
-                break;
-            case AuthChallengeNames.SMS_MFA:
-                this.headerText = 'Confirm SMS Code';
-                break;
-            default:
-                logger$2.error('Unexpected challengeName', challengeName);
-        }
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignIn.edit');
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
     }
     onInput(event) {
         event.preventDefault();
@@ -584,29 +526,22 @@ class AmplifyConfirmSignInComponent {
     }
     onSubmit(event) {
         event.preventDefault();
-        // TODO: handle form data within the state machine
-        const formData = new FormData(event.target);
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: Object.fromEntries(formData),
-        });
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        this.stateMachine.send('SUBMIT');
     }
 }
-AmplifyConfirmSignInComponent.decorators = [
+AmplifyResetPasswordComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-confirm-sign-in',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <a data-amplify-link (click)=\"toSignIn()\">Back to Sign In</a>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignInButton || confirmSignInButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                selector: 'amplify-reset-password',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordSubmitButton ||\n          resetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignInComponent.ctorParameters = () => [
+AmplifyResetPasswordComponent.ctorParameters = () => [
     { type: StateMachineService },
     { type: AuthPropService }
 ];
-AmplifyConfirmSignInComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+AmplifyResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+    headerText: [{ type: Input }]
 };
 
 const logger$1 = new Logger('SetupTotp');
@@ -617,8 +552,11 @@ class AmplifySetupTotpComponent {
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
-        this.headerText = 'Setup TOTP';
+        this.headerText = translate('Setup TOTP');
         this.qrCodeSource = '';
+        // translated texts
+        this.backToSignInText = translate('Back to Sign In');
+        this.confirmText = translate('Confirm');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => {
@@ -647,7 +585,9 @@ class AmplifySetupTotpComponent {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // TODO: This should be handled in core.
-            const { user } = this.stateMachine.context;
+            const state = this.stateMachine.authState;
+            const actorContext = getActorContext(state);
+            const { user } = actorContext;
             try {
                 const secretKey = yield Auth.setupTOTP(user);
                 const issuer = 'AWSCognito';
@@ -678,11 +618,14 @@ class AmplifySetupTotpComponent {
             data: Object.fromEntries(formData),
         });
     }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
 }
 AmplifySetupTotpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-setup-totp',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img *ngIf=\"qrCodeSource\" [src]=\"qrCodeSource\" alt=\"qr code\" />\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <a data-amplify-link (click)=\"toSignIn()\">Back to Sign In</a>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.setupTotpButton || setupTotpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\n      />\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.setupTotpButton || setupTotpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
 AmplifySetupTotpComponent.ctorParameters = () => [
@@ -693,16 +636,20 @@ AmplifySetupTotpComponent.propDecorators = {
     customComponents: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
 };
 
-const logger = new Logger('ForceNewPassword');
-class AmplifyForceNewPasswordComponent {
+const logger = new Logger('SignIn');
+class AmplifySignInComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Change Password';
+        this.headerText = translate('Sign in to your account');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated phrases
+        this.forgotPasswordText = translate('Forgot your password? ');
+        this.signInButtonText = translate('Sign in');
+        this.noAccountText = translate('No account? ');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -717,16 +664,15 @@ class AmplifyForceNewPasswordComponent {
     onStateUpdate(state) {
         const actorState = getActorState(state);
         this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('forceNewPassword.edit');
+        this.isPending = !actorState.matches('signIn.edit');
     }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const user = this.stateMachine.user;
+        const { change, resetPassword, signUp, submit } = this.stateMachine.services;
         const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit, user };
+        return { change, remoteError, resetPassword, signUp, submit };
     }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+    toResetPassword() {
+        this.stateMachine.send('RESET_PASSWORD');
     }
     onInput(event) {
         event.preventDefault();
@@ -737,98 +683,71 @@ class AmplifyForceNewPasswordComponent {
         });
     }
     onSubmit(event) {
-        event.preventDefault();
-        // consider stateMachine directly providing actorState / actorContext
-        const state = this.stateMachine.authState;
-        const actorState = getActorContext(state);
-        const { formValues } = actorState;
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: formValues,
-        });
-    }
-}
-AmplifyForceNewPasswordComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-force-new-password',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Change Password</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"password\"\n        type=\"password\"\n        label=\"Change password\"\n        autocomplete=\"password\"\n        [required]=\"true\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.forceNewPasswordSubmitButton ||\n            forceNewPasswordSubmitButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
-            },] }
-];
-AmplifyForceNewPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
-];
-AmplifyForceNewPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
-    headerText: [{ type: Input }]
-};
-
-class AmplifyFederatedSignInComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.FederatedProviders = FederatedIdentityProviders;
-        this.includeFacebook = false;
-        this.includeGoogle = false;
-        this.includeAmazon = false;
-        this.shouldShowFederatedSignIn = false;
-    }
-    ngOnInit() {
-        var _a, _b;
-        const loginMechanisms = (_b = (_a = this.stateMachine.context) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.login_mechanisms;
-        this.includeFacebook = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('facebook');
-        this.includeGoogle = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('google');
-        this.includeAmazon = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('amazon');
-        this.shouldShowFederatedSignIn =
-            this.includeFacebook || this.includeGoogle || this.includeAmazon;
-    }
-}
-AmplifyFederatedSignInComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-federated-sign-in',
-                template: "<div data-amplify-federated>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    text=\"Sign in with Facebook\"\n    [provider]=\"FederatedProviders.Facebook\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    text=\"Sign in with Google\"\n    [provider]=\"FederatedProviders.Google\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    text=\"Sign in with Amazon\"\n    [provider]=\"FederatedProviders.Amazon\"\n  ></amplify-federated-sign-in-button>\n</div>\n"
-            },] }
-];
-AmplifyFederatedSignInComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-
-class AmplifyFederatedSignInButtonComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.onClick = () => {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
             this.stateMachine.send({
-                type: 'FEDERATED_SIGN_IN',
-                data: { provider: this.provider },
+                type: 'SUBMIT',
             });
-        };
+        });
     }
 }
-AmplifyFederatedSignInButtonComponent.decorators = [
+AmplifySignInComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-federated-sign-in-button',
-                template: "<button data-amplify-button (click)=\"onClick()\">{{ text }}</button>\n"
+                selector: 'amplify-sign-in',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ signInButtonText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-field\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        size=\"small\"\n        variation=\"link\"\n        (click)=\"toResetPassword()\"\n      >\n        {{ forgotPasswordText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-AmplifyFederatedSignInButtonComponent.propDecorators = {
-    provider: [{ type: Input }],
-    text: [{ type: Input }]
+AmplifySignInComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
+    headerText: [{ type: Input }]
 };
 
-class AmplifyResetPasswordComponent {
+class AmplifySignUpComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Reset your password';
-        this.customComponents = {};
+        this.headerText = translate('Create a new account');
         this.remoteError = '';
         this.isPending = false;
+        this.primaryAlias = '';
+        this.secondaryAliases = [];
+        this.validationError = {};
+        // translated texts
+        this.createAccountText = translate('Create Account');
+    }
+    get context() {
+        const { change, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const validationError = this.validationError;
+        return {
+            change,
+            remoteError,
+            signIn,
+            submit,
+            validationError,
+        };
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+        const context = this.stateMachine.context;
+        const { primaryAlias, secondaryAliases } = getConfiguredAliases(context);
+        /**
+         * If the login_mechanisms are configured to use ONLY username, we need
+         * to ask for some sort of secondary contact information in order to
+         * verify the user for Cognito. Currently matching this to how Vue is
+         * set up.
+         */
+        if (primaryAlias === 'username' && isEmpty(secondaryAliases)) {
+            secondaryAliases.push('email', 'phone_number');
+        }
+        this.primaryAlias = primaryAlias;
+        this.secondaryAliases = secondaryAliases;
     }
     ngAfterContentInit() {
         this.customComponents = this.contextService.customComponents;
@@ -838,16 +757,20 @@ class AmplifyResetPasswordComponent {
     }
     onStateUpdate(state) {
         const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('resetPassword.edit');
-    }
-    get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit };
+        const actorContext = getActorContext(state);
+        this.remoteError = actorContext.remoteError;
+        this.validationError = actorContext.validationError;
+        this.isPending = !actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
     }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+    onSubmit($event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            $event.preventDefault();
+            this.stateMachine.send('SUBMIT');
+        });
     }
     onInput(event) {
         event.preventDefault();
@@ -857,36 +780,38 @@ class AmplifyResetPasswordComponent {
             data: { name, value },
         });
     }
-    onSubmit(event) {
-        event.preventDefault();
-        this.stateMachine.send('SUBMIT');
-    }
 }
-AmplifyResetPasswordComponent.decorators = [
+AmplifySignUpComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-reset-password',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Send Code</button>\n</ng-template>\n\n<ng-template #resetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      Back to{{ ' ' }}\n      <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.resetPasswordSubmitButton || resetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form\n    data-amplify-form\n    ngNativeValidate\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n  >\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordFooter || resetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                selector: 'amplify-sign-up',
+                template: "<ng-template #signUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ createAccountText }}\n  </button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"isPending\"\n  >\n    <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-field [name]=\"secondaryAlias\"></amplify-form-field>\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </fieldset>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n</ng-template>\n\n<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyResetPasswordComponent.ctorParameters = () => [
+AmplifySignUpComponent.ctorParameters = () => [
     { type: StateMachineService },
     { type: AuthPropService }
 ];
-AmplifyResetPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+AmplifySignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
     headerText: [{ type: Input }]
 };
 
+const getAttributeMap = () => authInputAttributes;
+
 class AmplifyVerifyUserComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Account recovery requires verified contact information';
+        this.headerText = translate('Account recovery requires verified contact information');
         this.customComponents = {};
         this.unverifiedAttributes = {};
         this.remoteError = '';
         this.isPending = false;
+        this.labelId = nanoid(12);
+        // translated texts
+        this.skipText = translate('Skip');
+        this.verifyText = translate('Verify');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -911,6 +836,12 @@ class AmplifyVerifyUserComponent {
     skipVerify() {
         this.stateMachine.send('SKIP');
     }
+    getLabelForAttr(authAttr) {
+        var _a;
+        const attributeMap = getAttributeMap();
+        const label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+        return translate(label);
+    }
     onSubmit(event) {
         return __awaiter(this, void 0, void 0, function* () {
             event.preventDefault();
@@ -925,7 +856,7 @@ class AmplifyVerifyUserComponent {
 AmplifyVerifyUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-verify-user',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Verify</button>\n  </div>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <ng-container\n        *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\"\n      >\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n        />\n        <amplify-label>{{ unverifiedAttribute.key }}</amplify-label>\n      </ng-container>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ verifyText }}\n  </button>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n\n      <div *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\">\n        <!-- TODO: match React implementation -->\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n          [id]=\"labelId\"\n        />\n        <label [for]=\"labelId\">{{\n          getLabelForAttr(unverifiedAttribute.key)\n        }}</label>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.verifyButton || verifyButton\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -943,10 +874,15 @@ class ConfirmResetPasswordComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Reset your password';
+        this.headerText = translate('Reset your password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated strings
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+        this.lostCodeText = translate('Lost your code? ');
+        this.resendCodeText = translate('Resend Code');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -991,7 +927,7 @@ class ConfirmResetPasswordComponent {
 ConfirmResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-reset-password',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Send Code</button>\n</ng-template>\n\n<ng-template #confirmResetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      Back to{{ ' ' }}\n      <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPasswordSubmitButton ||\n        confirmResetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #confirmResetPasswordForm>\n  <form\n    data-amplify-form\n    ngNativeValidate\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n  >\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n        [required]=\"true\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        Lost your code? {{ ' ' }}\n        <a data-amplify-link (click)=\"resend()\">Resend Code</a>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordFooter ||\n          confirmResetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n<ng-template #confirmResetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordSubmitButton ||\n          confirmResetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        type=\"button\"\n        (click)=\"resend()\"\n      >\n        {{ resendCodeText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
 ConfirmResetPasswordComponent.ctorParameters = () => [
@@ -1008,10 +944,13 @@ class ConfirmVerifyUserComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Account recovery requires verified contact information';
+        this.headerText = translate('Account recovery requires verified contact information');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.skipText = translate('Skip');
+        this.submitText = translate('Submit');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -1049,7 +988,7 @@ class ConfirmVerifyUserComponent {
 ConfirmVerifyUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-verify-user',
-                template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Submit</button>\n  </div>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmVerifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ submitText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmVerifyButton || confirmVerifyButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
             },] }
 ];
 ConfirmVerifyUserComponent.ctorParameters = () => [
@@ -1061,6 +1000,312 @@ ConfirmVerifyUserComponent.propDecorators = {
     headerText: [{ type: Input }]
 };
 
+class AmplifyButtonComponent {
+    constructor() {
+        this.type = 'button';
+        this.fullWidth = false;
+        this.size = 'medium';
+        this.variation = 'default';
+        this.fontWeight = 'normal';
+        this.defaultClass = true;
+    }
+    ngOnInit() {
+        this.typeAttr = this.type;
+        this.fullWidthAttr = this.fullWidth;
+        this.sizeAttr = this.size;
+        this.variationAttr = this.variation;
+        this.fontWeightAttr = this.fontWeight;
+    }
+}
+AmplifyButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'button[amplify-button]',
+                template: "<ng-content></ng-content>\n"
+            },] }
+];
+AmplifyButtonComponent.propDecorators = {
+    type: [{ type: Input }],
+    fullWidth: [{ type: Input }],
+    size: [{ type: Input }],
+    variation: [{ type: Input }],
+    fontWeight: [{ type: Input }],
+    typeAttr: [{ type: HostBinding, args: ['type',] }],
+    fullWidthAttr: [{ type: HostBinding, args: ['attr.data-fullwidth',] }],
+    sizeAttr: [{ type: HostBinding, args: ['attr.data-size',] }],
+    variationAttr: [{ type: HostBinding, args: ['attr.data-variation',] }],
+    defaultClass: [{ type: HostBinding, args: ['class.amplify-button',] }],
+    fontWeightAttr: [{ type: HostBinding, args: ['style.font-weight',] }]
+};
+
+class AmplifyErrorComponent {
+}
+AmplifyErrorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-error',
+                template: "<span data-ui-error>\n  <ng-content></ng-content>\n</span>\n"
+            },] }
+];
+
+/**
+ * Input interface opinionated for authenticator usage.
+ *
+ * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
+ * contains authenticator opinionated logic and 2) amplify-text-field primitive
+ * that does not make any auth-related inference.
+ */
+class AmplifyFormFieldComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.required = true;
+        this.placeholder = '';
+        this.label = '';
+        this.initialValue = '';
+        this.disabled = false;
+        this.autocomplete = '';
+        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        // TODO: field primtiives should have generate these by default.
+        this.textFieldId = `amplify-field-${nanoid(12)}`;
+        this.selectFieldId = `amplify-field-${nanoid(12)}`;
+        // TODO: consider better default handling mechanisms across frameworks
+        if (this.isPhoneField()) {
+            const state = this.stateMachine.authState;
+            const { country_code } = getActorContext(state);
+            this.defaultCountryCode = country_code;
+            // TODO: remove this side-effect
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: 'country_code', value: country_code },
+            });
+        }
+    }
+    get attributeMap() {
+        return getAttributeMap();
+    }
+    get error() {
+        const formContext = getActorContext(this.stateMachine.authState);
+        const { validationError } = formContext;
+        return validationError[this.name];
+    }
+    inferLabel() {
+        var _a;
+        const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+        return translate(label);
+    }
+    inferPlaceholder() {
+        var _a;
+        const placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+            this.inferLabel();
+        return translate(placeholder);
+    }
+    // infers what the `type` of underlying input element should be.
+    inferType() {
+        var _a, _b, _c;
+        return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
+    }
+    // TODO(enhancement): use enum to differentiate special field types
+    isPasswordField() {
+        return this.inferType() === 'password';
+    }
+    isPhoneField() {
+        return this.inferType() === 'tel';
+    }
+}
+AmplifyFormFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-field',
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column; gap: 0\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [selectFieldId]=\"selectFieldId\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [textFieldId]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [id]=\"textFieldId\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [id]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+            },] }
+];
+AmplifyFormFieldComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyFormFieldComponent.propDecorators = {
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    required: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    label: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    disabled: [{ type: Input }],
+    autocomplete: [{ type: Input }]
+};
+
+class AmplifyPasswordFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.type = 'password';
+        this.showPassword = false;
+        this.showPasswordButtonlabel = translate('Show password');
+    }
+    togglePasswordText() {
+        this.showPassword = !this.showPassword;
+        this.showPasswordButtonlabel = this.showPassword
+            ? translate('Show password')
+            : translate('Hide password');
+        this.type = this.showPassword ? 'text' : 'password';
+    }
+}
+AmplifyPasswordFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-password-field',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"id\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
+            },] }
+];
+AmplifyPasswordFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }]
+};
+
+class AmplifySelectComponent {
+}
+AmplifySelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-select',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
+            },] }
+];
+AmplifySelectComponent.propDecorators = {
+    items: [{ type: Input }],
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    id: [{ type: Input }],
+    defaultValue: [{ type: Input }]
+};
+
+class TabItemComponent {
+    constructor() {
+        this.active = false;
+    }
+}
+TabItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-tab-item',
+                template: "<div\n  data-orientation=\"horizontal\"\n  role=\"tabpanel\"\n  [id]=\"id\"\n  [attr.aria-labelledby]=\"labelledById\"\n  [attr.data-state]=\"active ? 'active' : 'inactive'\"\n  [attr.tabindex]=\"tabIndex\"\n>\n  <ng-content *ngIf=\"active\"></ng-content>\n</div>\n"
+            },] }
+];
+TabItemComponent.propDecorators = {
+    title: [{ type: Input }],
+    active: [{ type: Input }],
+    id: [{ type: Input }],
+    labelledById: [{ type: Input }],
+    tabIndex: [{ type: Input }]
+};
+
+class TabsComponent {
+    constructor() {
+        this.tabChange = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        // assign ids
+        this.tabs.forEach((tab, index) => {
+            tab.id = `radix-id-${nanoid(12)}-1-content-${index}`;
+            tab.labelledById = `radix-id-${nanoid(12)}-1-trigger-${index}`;
+        });
+        // find active tab
+        // TODO(enhancement): more declarative way for choosing the initial tab to render
+        const activeTabs = this.tabs.filter((tab) => tab.active);
+        // set active tab
+        if (activeTabs.length !== 1) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+    selectTab(tab) {
+        this.tabs.forEach((tab) => {
+            tab.active = false;
+        });
+        tab.active = true;
+    }
+    handleTabClick(tab) {
+        if (tab.active)
+            return; // don't do anything if clicks the current active tab
+        this.tabChange.emit();
+        this.selectTab(tab);
+    }
+}
+TabsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-tabs',
+                template: "<div\n  tabindex=\"0\"\n  aria-orientation=\"horizontal\"\n  data-orientation=\"horizontal\"\n  role=\"tablist\"\n  style=\"outline: none\"\n>\n  <div\n    class=\"amplify-flex amplify-tabs\"\n    data-indicator-position=\"top\"\n    style=\"gap: 0px; justify-content: center\"\n  >\n    <div\n      *ngFor=\"let tab of tabs\"\n      class=\"amplify-tabs-item\"\n      data-grow=\"equal\"\n      data-orientation=\"horizontal\"\n      role=\"tab\"\n      [id]=\"tab.labelledById\"\n      [tabindex]=\"tab.active ? '0' : '1'\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"tab.id\"\n      [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n      (click)=\"handleTabClick(tab)\"\n    >\n      {{ tab.title }}\n    </div>\n  </div>\n</div>\n\n<ng-content></ng-content>\n"
+            },] }
+];
+TabsComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabItemComponent,] }],
+    tabChange: [{ type: Output }]
+};
+
+class AmplifyTextFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+    }
+}
+AmplifyTextFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-text-field',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"id\"\n  [type]=\"type\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [required]=\"required\"\n  [value]=\"initialValue\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [autocomplete]=\"autocomplete\"\n/>\n"
+            },] }
+];
+AmplifyTextFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }]
+};
+
+class AmplifyUserNameAliasComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.name = 'username';
+        this.disabled = false;
+        this.initialValue = '';
+        this.required = true;
+    }
+    ngOnInit() {
+        const context = this.stateMachine.context;
+        const { label, type } = getAliasInfoFromContext(context);
+        this.label = label;
+        this.type = type;
+        this.placeholder = label;
+    }
+}
+AmplifyUserNameAliasComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-user-name-alias',
+                template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
+            },] }
+];
+AmplifyUserNameAliasComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyUserNameAliasComponent.propDecorators = {
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
+};
+
 const proxyInputs = (Cmp, inputs) => {
     const Prototype = Cmp.prototype;
     inputs.forEach((item) => {
@@ -2846,6 +3091,37 @@ AmplifyVerifyContact = __decorate([
     ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
 ], AmplifyVerifyContact);
 
+class PhoneNumberFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.countryDialCodes = countryDialCodes;
+    }
+}
+PhoneNumberFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-phone-number-field',
+                template: "<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\" amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <label class=\"sr-only amplify-label\" [for]=\"textFieldId\">\n    {{ label }}\n  </label>\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
+            },] }
+];
+PhoneNumberFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    defaultCountryCode: [{ type: Input }],
+    selectFieldId: [{ type: Input }],
+    textFieldId: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }]
+};
+
 customElements.define('amplify-button', AmplifyButton$1);
 customElements.define('amplify-input', AmplifyInput$1);
 customElements.define('amplify-toast', AmplifyToast$1);
@@ -2875,11 +3151,10 @@ UiAngularModule.decorators = [
                     AmplifyPhotoPicker,
                     AmplifyAuthenticatorComponent,
                     AmplifySignInComponent,
-                    AmplifySignOutComponent,
                     AmplifySignUpComponent,
-                    AmplifyInputComponent,
+                    AmplifyFormFieldComponent,
                     AmplifyErrorComponent,
-                    AmplifyOverrideDirective,
+                    AmplifySlotDirective,
                     AmplifyConfirmSignUpComponent,
                     AmplifyUserNameAliasComponent,
                     AmplifyConfirmSignInComponent,
@@ -2891,8 +3166,15 @@ UiAngularModule.decorators = [
                     AmplifyVerifyUserComponent,
                     ConfirmResetPasswordComponent,
                     ConfirmVerifyUserComponent,
+                    AmplifySelectComponent,
+                    AmplifyButtonComponent,
+                    AmplifyPasswordFieldComponent,
+                    AmplifyTextFieldComponent,
+                    TabsComponent,
+                    TabItemComponent,
+                    PhoneNumberFieldComponent,
                 ],
-                imports: [CommonModule, ReactiveFormsModule],
+                imports: [CommonModule],
                 exports: [
                     AmplifyChatbot,
                     AmplifyToast,
@@ -2907,10 +3189,9 @@ UiAngularModule.decorators = [
                     AmplifyPhotoPicker,
                     AmplifyAuthenticatorComponent,
                     AmplifySignInComponent,
-                    AmplifySignOutComponent,
-                    AmplifyInputComponent,
+                    AmplifyFormFieldComponent,
                     AmplifyErrorComponent,
-                    AmplifyOverrideDirective,
+                    AmplifySlotDirective,
                 ],
                 schemas: [CUSTOM_ELEMENTS_SCHEMA],
             },] }
@@ -2924,5 +3205,5 @@ UiAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AmplifyAuthenticatorComponent, AmplifyButton, AmplifyChatbot, AmplifyConfirmSignUpComponent, AmplifyErrorComponent, AmplifyInput, AmplifyInputComponent, AmplifyOverrideDirective, AmplifyPhotoPicker, AmplifyPicker, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySignInComponent, AmplifySignOutComponent, AmplifySignUpComponent, AmplifyToast, AuthPropService, StateMachineService, UiAngularModule, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignOutComponent as ɵd, AmplifySignUpComponent as ɵe, AmplifyInputComponent as ɵf, AmplifyErrorComponent as ɵg, AmplifyConfirmSignUpComponent as ɵh, AmplifyUserNameAliasComponent as ɵi, AmplifyConfirmSignInComponent as ɵj, AmplifySetupTotpComponent as ɵk, AmplifyForceNewPasswordComponent as ɵl, AmplifyFederatedSignInComponent as ɵm, AmplifyFederatedSignInButtonComponent as ɵn, AmplifyResetPasswordComponent as ɵo, AmplifyVerifyUserComponent as ɵp, ConfirmResetPasswordComponent as ɵq, ConfirmVerifyUserComponent as ɵr };
+export { AmplifyAuthenticatorComponent, AmplifyButton, AmplifyChatbot, AmplifyConfirmSignInComponent, AmplifyConfirmSignUpComponent, AmplifyErrorComponent, AmplifyFederatedSignInButtonComponent, AmplifyFederatedSignInComponent, AmplifyForceNewPasswordComponent, AmplifyFormFieldComponent, AmplifyInput, AmplifyPhotoPicker, AmplifyPicker, AmplifyResetPasswordComponent, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySetupTotpComponent, AmplifySignInComponent, AmplifySignUpComponent, AmplifySlotDirective, AmplifyToast, AmplifyVerifyUserComponent, AuthPropService, ConfirmResetPasswordComponent, ConfirmVerifyUserComponent, StateMachineService, UiAngularModule, getAttributeMap, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignUpComponent as ɵd, AmplifyFormFieldComponent as ɵe, AmplifyErrorComponent as ɵf, AmplifyConfirmSignUpComponent as ɵg, AmplifyUserNameAliasComponent as ɵh, AmplifyConfirmSignInComponent as ɵi, AmplifySetupTotpComponent as ɵj, AmplifyForceNewPasswordComponent as ɵk, AmplifyFederatedSignInComponent as ɵl, AmplifyFederatedSignInButtonComponent as ɵm, AmplifyResetPasswordComponent as ɵn, AmplifyVerifyUserComponent as ɵo, ConfirmResetPasswordComponent as ɵp, ConfirmVerifyUserComponent as ɵq, AmplifySelectComponent as ɵr, AmplifyButtonComponent as ɵs, AmplifyPasswordFieldComponent as ɵt, AmplifyTextFieldComponent as ɵu, TabsComponent as ɵv, TabItemComponent as ɵw, PhoneNumberFieldComponent as ɵx };
 //# sourceMappingURL=aws-amplify-ui-angular.js.map