@aws-amplify/ui-angular 2.0.1-next.4 → 2.0.2

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

@@ -1,15 +1,14 @@
 import * as i0 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 { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, ContentChildren, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { authMachine, getSendEventAliases, translate, translations, getActorState, getActorContext, AuthChallengeNames, FederatedIdentityProviders, getConfiguredAliases, authInputAttributes, countryDialCodes, getAliasInfoFromContext } from '@aws-amplify/ui';
-import { I18n, Logger, Auth } from 'aws-amplify';
+import { BrowserModule } from '@angular/platform-browser';
+import { createAuthenticatorMachine, getServiceContextFacade, getSendEventAliases, translate, getActorContext, AuthChallengeNames, FederatedIdentityProviders, authInputAttributes, countryDialCodes, getAliasInfoFromContext, getActorState } from '@aws-amplify/ui';
+import { Logger } from '@aws-amplify/core';
 import { interpret } from 'xstate';
-import { __awaiter, __decorate } from 'tslib';
+import { Logger as Logger$1, Auth } from 'aws-amplify';
+import { __awaiter } from 'tslib';
 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 AmplifySlotDirective {
     constructor(template) {
@@ -31,10 +30,12 @@ AmplifySlotDirective.propDecorators = {
     amplifySlot: [{ type: Input }]
 };
 
-class AuthPropService {
+/**
+ * Stores and provides custom components that users provide with `amplify-slot`.
+ */
+class CustomComponentsService {
     constructor() {
         this._customComponents = {};
-        this._props = {};
     }
     get customComponents() {
         return this._customComponents;
@@ -42,91 +43,164 @@ class AuthPropService {
     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 = [
+CustomComponentsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CustomComponentsService_Factory() { return new CustomComponentsService(); }, token: CustomComponentsService, providedIn: "root" });
+CustomComponentsService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
             },] }
 ];
-AuthPropService.ctorParameters = () => [];
 
+const logger$2 = new Logger('state-machine');
 /**
- * AmplifyContextService contains access to the xstate machine
- * and custom components passed by the user.
+ * AuthenticatorService provides access to the authenticator state and context.
  */
-class StateMachineService {
-    startMachine(loginMechanisms) {
-        const machine = authMachine.withContext({
-            config: {
-                login_mechanisms: loginMechanisms,
-            },
+class AuthenticatorService {
+    startMachine({ initialState, loginMechanisms, services, signUpAttributes, socialProviders, }) {
+        const machine = createAuthenticatorMachine({
+            initialState,
+            loginMechanisms,
+            services,
+            signUpAttributes,
+            socialProviders,
         });
         const authService = interpret(machine, {
             devTools: process.env.NODE_ENV === 'development',
-        })
-            .onTransition((state) => {
-            this._user = state.context.user;
+        }).start();
+        this._subscription = authService.subscribe((state) => {
             this._authState = state;
-        })
-            .start();
-        this._services = getSendEventAliases(authService.send);
+            this._facade = getServiceContextFacade(state);
+        });
+        this._sendEventAliases = getSendEventAliases(authService.send);
         this._authService = authService;
     }
-    get services() {
-        return this._services;
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    /**
+     * Context facades
+     */
+    get error() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.error;
+    }
+    get hasValidationErrors() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.hasValidationErrors;
+    }
+    get isPending() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.isPending;
+    }
+    get route() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.route;
+    }
+    get user() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.user;
+    }
+    get validationErrors() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.validationErrors;
+    }
+    /**
+     * Service facades
+     */
+    get updateForm() {
+        return this._sendEventAliases.updateForm;
+    }
+    get resendCode() {
+        return this._sendEventAliases.resendCode;
+    }
+    get signOut() {
+        return this._sendEventAliases.signOut;
+    }
+    get submitForm() {
+        return this._sendEventAliases.submitForm;
+    }
+    /**
+     * Transition facades
+     */
+    get toFederatedSignIn() {
+        return this._sendEventAliases.toFederatedSignIn;
+    }
+    get toResetPassword() {
+        return this._sendEventAliases.toResetPassword;
     }
+    get toSignIn() {
+        return this._sendEventAliases.toSignIn;
+    }
+    get toSignUp() {
+        return this._sendEventAliases.toSignUp;
+    }
+    get skipVerification() {
+        return this._sendEventAliases.skipVerification;
+    }
+    /**
+     * Internal utility functions
+     */
+    /** @deprecated For internal use only */
     get authState() {
         return this._authState;
     }
+    /** @deprecated For internal use only */
     get authService() {
         return this._authService;
     }
-    get user() {
-        return this._user;
-    }
+    /** @deprecated For internal use only */
     get context() {
         return this._authState.context;
     }
+    /** @deprecated For internal use only */
+    get slotContext() {
+        const slotContext = Object.assign(Object.assign({}, this._facade), this._sendEventAliases);
+        return Object.assign(Object.assign({}, slotContext), { $implicit: Object.assign({}, slotContext) });
+    }
+    /** @deprecated For internal use only */
+    subscribe(callback) {
+        if (this._authService) {
+            return this._authService.subscribe(callback);
+        }
+        else {
+            logger$2.error('Subscription attempted before machine was created. This is likely a bug on the library, please consider filing a bug.');
+        }
+    }
+    /** @deprecated For internal use only */
     send(event) {
         this.authService.send(event);
     }
 }
-StateMachineService.ɵprov = i0.ɵɵdefineInjectable({ factory: function StateMachineService_Factory() { return new StateMachineService(); }, token: StateMachineService, providedIn: "root" });
-StateMachineService.decorators = [
+AuthenticatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthenticatorService_Factory() { return new AuthenticatorService(); }, token: AuthenticatorService, providedIn: "root" });
+AuthenticatorService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
             },] }
 ];
 
-class AmplifyAuthenticatorComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
+class AuthenticatorComponent {
+    constructor(authenticator, contextService) {
+        this.authenticator = authenticator;
         this.contextService = contextService;
-        /**
-         * TODO: Add back custom events
-         */
-        this.initialState = 'signIn';
-        this.loginMechanisms = ['username'];
         this.customComponentQuery = null;
-        this.customComponents = {};
         // translated texts
         this.signInTitle = translate('Sign In');
         this.signUpTitle = translate('Create Account');
     }
     ngOnInit() {
-        I18n.putVocabularies(translations);
-        this.stateMachine.startMachine(this.loginMechanisms);
+        const { initialState, loginMechanisms, services, signUpAttributes, socialProviders, } = this;
+        this.authenticator.startMachine({
+            initialState,
+            loginMechanisms,
+            services,
+            signUpAttributes,
+            socialProviders,
+        });
         /**
          * 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');
     }
@@ -135,29 +209,24 @@ class AmplifyAuthenticatorComponent {
      */
     ngAfterContentInit() {
         this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
-        this.customComponents = this.contextService.customComponents;
     }
     /**
      * Class Functions
      */
+    // context passed to "authenticated" slot
     get context() {
-        const { signOut } = this.stateMachine.services;
-        const user = this.stateMachine.user;
-        return { signOut, user };
+        return this.authenticator.slotContext;
     }
-    get actorState() {
-        return getActorState(this.stateMachine.authState);
-    }
-    get authenticatorState() {
-        return this.stateMachine.authState;
+    get route() {
+        return this.authenticator.route;
     }
     onTabChange() {
-        const currentState = this.stateMachine.authState.value;
-        if (currentState === 'signIn') {
-            this.stateMachine.send('SIGN_UP');
+        const route = this.authenticator.route;
+        if (route === 'signIn') {
+            this.authenticator.toSignUp();
         }
         else {
-            this.stateMachine.send('SIGN_IN');
+            this.authenticator.toSignIn();
         }
     }
     mapCustomComponents(componentQuery) {
@@ -170,393 +239,431 @@ class AmplifyAuthenticatorComponent {
         return customComponents;
     }
 }
-AmplifyAuthenticatorComponent.decorators = [
+AuthenticatorComponent.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> <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-wrapper data-amplify-authenticator>\n  <amplify-tabs\n    (tabChange)=\"onTabChange()\"\n    *ngIf=\"actorState?.matches('signIn') || actorState?.matches('signUp')\"\n  >\n    <amplify-tab-item [title]=\"signInTitle\">\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 [title]=\"signUpTitle\">\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]=\"customComponents.confirmVerifyUser || confirmVerifyUser\"\n    [ngTemplateOutletContext]=\"context\"\n    *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n  >\n  </ng-container>\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],
+                template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\n  <div data-amplify-container>\n    <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n    <div data-amplify-router>\n      <amplify-tabs\n        (tabChange)=\"onTabChange()\"\n        *ngIf=\"route === 'signIn' || route === 'signUp'\"\n      >\n        <amplify-tab-item [title]=\"signInTitle\" [active]=\"route === 'signIn'\">\n          <!-- signIn component -->\n          <amplify-slot\n            name=\"sign-in\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signIn'\"\n          >\n            <amplify-sign-in></amplify-sign-in>\n          </amplify-slot>\n        </amplify-tab-item>\n        <amplify-tab-item [title]=\"signUpTitle\" [active]=\"route === 'signUp'\">\n          <!-- signUp component -->\n          <amplify-slot\n            name=\"sign-up\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signUp'\"\n          >\n            <amplify-sign-up></amplify-sign-up>\n          </amplify-slot>\n        </amplify-tab-item>\n      </amplify-tabs>\n\n      <!-- confirmSignUp content -->\n      <amplify-slot\n        name=\"confirm-sign-up\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignUp'\"\n      >\n        <amplify-confirm-sign-up></amplify-confirm-sign-up>\n      </amplify-slot>\n\n      <!-- confirmSignIn content -->\n      <amplify-slot\n        name=\"confirm-sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignIn'\"\n      >\n        <amplify-confirm-sign-in></amplify-confirm-sign-in>\n      </amplify-slot>\n\n      <!-- setupTotp content -->\n      <amplify-slot\n        name=\"setup-totp\"\n        [context]=\"context\"\n        *ngIf=\"route === 'setupTOTP'\"\n      >\n        <amplify-setup-totp></amplify-setup-totp>\n      </amplify-slot>\n\n      <!-- forceNewPassword content -->\n      <amplify-slot\n        name=\"force-new-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'forceNewPassword'\"\n      >\n        <amplify-force-new-password></amplify-force-new-password>\n      </amplify-slot>\n\n      <!-- resetPassword content -->\n      <amplify-slot\n        name=\"reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'resetPassword'\"\n      >\n        <amplify-reset-password></amplify-reset-password>\n      </amplify-slot>\n\n      <!-- confirmResetPassword content -->\n      <amplify-slot\n        name=\"confirm-reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmResetPassword'\"\n      >\n        <amplify-confirm-reset-password></amplify-confirm-reset-password>\n      </amplify-slot>\n\n      <!-- verifyUser content -->\n      <amplify-slot\n        name=\"verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'verifyUser'\"\n      >\n        <amplify-verify-user></amplify-verify-user>\n      </amplify-slot>\n\n      <!-- confirmVerifyUser content -->\n      <amplify-slot\n        name=\"confirm-verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmVerifyUser'\"\n      >\n        <amplify-confirm-verify-user></amplify-confirm-verify-user>\n      </amplify-slot>\n    </div>\n\n    <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n  name=\"authenticated\"\n  [context]=\"context\"\n  *ngIf=\"route === 'authenticated'\"\n>\n  <ng-content></ng-content>\n</amplify-slot>\n",
+                providers: [CustomComponentsService],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifyAuthenticatorComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+AuthenticatorComponent.ctorParameters = () => [
+    { type: AuthenticatorService },
+    { type: CustomComponentsService }
 ];
-AmplifyAuthenticatorComponent.propDecorators = {
+AuthenticatorComponent.propDecorators = {
     initialState: [{ type: Input }],
     loginMechanisms: [{ type: Input }],
+    services: [{ type: Input }],
+    signUpAttributes: [{ type: Input }],
+    socialProviders: [{ type: Input }],
+    variation: [{ type: Input }],
     customComponentQuery: [{ type: ContentChildren, args: [AmplifySlotDirective,] }]
 };
 
-const logger$3 = new Logger('ConfirmSignIn');
-class AmplifyConfirmSignInComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class ConfirmResetPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
+        this.headerText = translate('Reset your password');
+        // translated strings
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+        this.resendCodeText = translate('Resend Code');
+    }
+    get context() {
+        return this.authenticator.slotContext;
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
+    }
+}
+ConfirmResetPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-reset-password',
+                template: "<div data-amplify-container>\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]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      </amplify-slot>\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      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ sendCodeText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        type=\"button\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
+            },] }
+];
+ConfirmResetPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+ConfirmResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
+    headerText: [{ type: Input }]
+};
+
+const logger$1 = new Logger$1('ConfirmSignIn');
+class ConfirmSignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        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.setHeaderText();
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit };
+        return this.authenticator.slotContext;
     }
     setHeaderText() {
-        const state = this.stateMachine.authState;
+        const state = this.authenticator.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);
+                logger$1.error('Unexpected challengeName', challengeName);
         }
     }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignIn.edit');
-    }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     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.authenticator.submitForm();
     }
 }
-AmplifyConfirmSignInComponent.decorators = [
+ConfirmSignInComponent.decorators = [
     { type: Component, args: [{
                 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        type=\"number\"\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"
+                template: "<div data-amplify-container>\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]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      </amplify-slot>\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      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot\n      name=\"confirm-sign-in-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignInComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ConfirmSignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyConfirmSignInComponent.propDecorators = {
+ConfirmSignInComponent.propDecorators = {
     dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
 };
 
-class AmplifyConfirmSignUpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
+class ConfirmSignUpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.headerText = translate('Confirm Sign Up');
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+        this.dataAttr = '';
         // 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));
+    get context() {
+        return this.authenticator.slotContext;
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignUp.edit');
+}
+ConfirmSignUpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-up',
+                template: "<div data-amplify-container>\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]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</div>\n"
+            },] }
+];
+ConfirmSignUpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+ConfirmSignUpComponent.propDecorators = {
+    headerText: [{ type: Input }],
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
+};
+
+class ConfirmVerifyUserComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
+        this.headerText = translate('Account recovery requires verified contact information');
+        // translated texts
+        this.skipText = translate('Skip');
+        this.submitText = translate('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,
-            },
-        });
+        return this.authenticator.slotContext;
     }
-    onInput($event) {
-        $event.preventDefault();
-        const { name, value } = $event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
     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 },
-        });
+        this.authenticator.submitForm();
     }
 }
-AmplifyConfirmSignUpComponent.decorators = [
+ConfirmVerifyUserComponent.decorators = [
     { type: Component, args: [{
-                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"
+                selector: 'amplify-confirm-verify-user',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ submitText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.skipVerification()\"\n      >\n        {{ skipText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignUpComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ConfirmVerifyUserComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyConfirmSignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+ConfirmVerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
     headerText: [{ type: Input }]
 };
 
-class AmplifyFederatedSignInButtonComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
+class FederatedSignInButtonComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.onClick = () => {
-            this.stateMachine.send({
+            this.authenticator.send({
                 type: 'FEDERATED_SIGN_IN',
                 data: { provider: this.provider },
             });
         };
     }
 }
-AmplifyFederatedSignInButtonComponent.decorators = [
+FederatedSignInButtonComponent.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"
+                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; align-items: center\"\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n"
             },] }
 ];
-AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
-    { type: StateMachineService }
+FederatedSignInButtonComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyFederatedSignInButtonComponent.propDecorators = {
+FederatedSignInButtonComponent.propDecorators = {
     provider: [{ type: Input }],
     text: [{ type: Input }]
 };
 
-class AmplifyFederatedSignInComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
+class FederatedSignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.FederatedProviders = FederatedIdentityProviders;
+        this.includeAmazon = false;
+        this.includeApple = false;
         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');
+        var _a;
+        const { socialProviders } = (_a = this.authenticator.context) === null || _a === void 0 ? void 0 : _a.config;
+        this.setFederatedTexts();
+        this.includeAmazon = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('amazon');
+        this.includeApple = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('apple');
+        this.includeGoogle = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('google');
+        this.includeFacebook = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('facebook');
         this.shouldShowFederatedSignIn =
-            this.includeFacebook || this.includeGoogle || this.includeAmazon;
+            this.includeAmazon ||
+                this.includeApple ||
+                this.includeFacebook ||
+                this.includeGoogle;
+    }
+    setFederatedTexts() {
+        const { route } = this.authenticator;
+        const federatedText = route === 'signUp' ? 'Up' : 'In';
+        this.signInAmazonText = translate(`Sign ${federatedText} with Amazon`);
+        this.signInAppleText = translate(`Sign ${federatedText} with Apple`);
+        this.signInFacebookText = translate(`Sign ${federatedText} with Facebook`);
+        this.signInGoogleText = translate(`Sign ${federatedText} with Google`);
     }
 }
-AmplifyFederatedSignInComponent.decorators = [
+FederatedSignInComponent.decorators = [
     { type: Component, args: [{
                 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"
+                template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  style=\"flex-direction: column; padding: 0 0 1rem 0\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\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\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeApple\"\n    [provider]=\"FederatedProviders.Apple\"\n  >\n    <svg\n      aria-label=\"Apple icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      fill=\"#000\"\n      preserveAspectRatio=\"xMidYMid\"\n      stroke=\"#000\"\n      strokeWidth=\"0\"\n      viewBox=\"0 0 1024 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInAppleText }}\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=\"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  <div class=\"amplify-flex\" data-or-container>\n    <div data-or-line>or</div>\n    <hr\n      class=\"amplify-divider\"\n      aria-orientation=\"horizontal\"\n      data-size=\"small\"\n    />\n  </div>\n</div>\n"
             },] }
 ];
-AmplifyFederatedSignInComponent.ctorParameters = () => [
-    { type: StateMachineService }
+FederatedSignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
 
-const logger$2 = new Logger('ForceNewPassword');
-class AmplifyForceNewPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class ForceNewPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         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() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        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({
-            signUp: {
-                submission: 'idle',
-            },
-        });
-    }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const user = this.stateMachine.user;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit, user };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     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,
-        });
+        this.authenticator.submitForm();
     }
 }
-AmplifyForceNewPasswordComponent.decorators = [
+ForceNewPasswordComponent.decorators = [
     { type: Component, args: [{
                 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"
+                template: "<div data-amplify-container>\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]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\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      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ changePasswordText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyForceNewPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ForceNewPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyForceNewPasswordComponent.propDecorators = {
+ForceNewPasswordComponent.propDecorators = {
     dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
     headerText: [{ type: Input }]
 };
 
-class AmplifyResetPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+const getAttributeMap = () => authInputAttributes;
+
+/**
+ * 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 FormFieldComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.required = true;
+        this.placeholder = '';
+        this.label = '';
+        this.initialValue = '';
+        this.disabled = false;
+        this.autocomplete = '';
+        this.labelHidden = true;
+        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        // TODO: consider better default handling mechanisms across frameworks
+        if (this.isPhoneField()) {
+            const state = this.authenticator.authState;
+            const { country_code } = getActorContext(state);
+            this.defaultCountryCode = country_code;
+            // TODO: remove this side-effect
+            this.authenticator.updateForm({
+                name: 'country_code',
+                value: country_code,
+            });
+        }
+    }
+    get attributeMap() {
+        return getAttributeMap();
+    }
+    get error() {
+        const formContext = getActorContext(this.authenticator.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';
+    }
+    inferAutocomplete() {
+        var _a;
+        return this.autocomplete || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.autocomplete);
+    }
+    // TODO(enhancement): use enum to differentiate special field types
+    isPasswordField() {
+        return this.inferType() === 'password';
+    }
+    isPhoneField() {
+        return this.inferType() === 'tel';
+    }
+}
+FormFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-field',
+                template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+            },] }
+];
+FormFieldComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+FormFieldComponent.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 }],
+    labelHidden: [{ type: Input }]
+};
+
+class ResetPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
         this.headerText = translate('Reset your password');
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
         // translated texts
         this.sendCodeText = translate('Send Code');
         this.backToSignInText = translate('Back to Sign In');
+        this.labelText = translate('Username');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('resetPassword.edit');
+        const { authState } = this.authenticator;
+        const { label } = getAliasInfoFromContext(authState.context);
+        this.labelText = `Enter your ${label.toLowerCase()}`;
     }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
         event.preventDefault();
-        this.stateMachine.send('SUBMIT');
+        this.authenticator.submitForm();
     }
 }
-AmplifyResetPasswordComponent.decorators = [
+ResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 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"
+                template: "<div data-amplify-container>\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]=\"authenticator.isPending\"\n    >\n      <amplify-slot\n        class=\"amplify-flex\"\n        name=\"reset-password-header\"\n        [context]=\"context\"\n      >\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n\n      <amplify-form-field\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n        [placeholder]=\"labelText\"\n        [label]=\"labelText\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ sendCodeText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n\n    <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyResetPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ResetPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyResetPasswordComponent.propDecorators = {
+ResetPasswordComponent.propDecorators = {
     dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
     headerText: [{ type: Input }]
 };
 
-const logger$1 = new Logger('SetupTotp');
-class AmplifySetupTotpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+const logger = new Logger$1('SetupTotp');
+class SetupTotpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
         this.headerText = translate('Setup TOTP');
         this.qrCodeSource = '';
         // translated texts
@@ -564,449 +671,234 @@ class AmplifySetupTotpComponent {
         this.confirmText = translate('Confirm');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
-            this.onStateUpdate(state);
-        });
         this.generateQRCode();
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('setupTOTP.edit');
-    }
     get context() {
-        const { change, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        const user = this.stateMachine.user;
-        return { change, remoteError, submit, user };
+        return this.authenticator.slotContext;
     }
     generateQRCode() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // TODO: This should be handled in core.
-            const state = this.stateMachine.authState;
+            const state = this.authenticator.authState;
             const actorContext = getActorContext(state);
             const { user } = actorContext;
             try {
                 const secretKey = yield Auth.setupTOTP(user);
                 const issuer = 'AWSCognito';
                 const totpCode = `otpauth://totp/${issuer}:${user.username}?secret=${secretKey}&issuer=${issuer}`;
-                logger$1.info('totp code was generated:', totpCode);
+                logger.info('totp code was generated:', totpCode);
                 this.qrCodeSource = yield QRCode.toDataURL(totpCode);
             }
             catch (err) {
-                this.remoteError = (_a = err.message) !== null && _a !== void 0 ? _a : err;
-                logger$1.error(err);
+                logger.error(err);
             }
         });
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     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.authenticator.submitForm();
     }
 }
-AmplifySetupTotpComponent.decorators = [
+SetupTotpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-setup-totp',
-                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 *ngIf=\"qrCodeSource\" [src]=\"qrCodeSource\" alt=\"qr code\" />\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]=\"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"
+                template: "<div data-amplify-container>\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]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\n        width=\"228\"\n        height=\"228\"\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      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifySetupTotpComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SetupTotpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySetupTotpComponent.propDecorators = {
-    customComponents: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+SetupTotpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
 };
 
-const logger = new Logger('SignIn');
-class AmplifySignInComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class SignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        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));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        logger.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 remoteError = this.remoteError;
-        return { change, remoteError, resetPassword, signUp, submit };
-    }
-    toResetPassword() {
-        this.stateMachine.send('RESET_PASSWORD');
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            this.stateMachine.send({
-                type: 'SUBMIT',
-            });
-        });
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-AmplifySignInComponent.decorators = [
+SignInComponent.decorators = [
     { type: Component, args: [{
                 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",
+                template: "<div data-amplify-container>\n  <amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\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      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ signInButtonText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n  </form>\n\n  <amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n    <div data-amplify-footer>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        size=\"small\"\n        variation=\"link\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toResetPassword()\"\n      >\n        {{ forgotPasswordText }}\n      </button>\n    </div>\n  </amplify-slot>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifySignInComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySignInComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
-    headerText: [{ type: Input }]
+SignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }]
 };
 
-class AmplifySignUpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class SignUpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        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');
-        }
-        console.log(secondaryAliases);
-        this.primaryAlias = primaryAlias;
-        this.secondaryAliases = secondaryAliases;
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    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',
-            },
-        });
-    }
-    onSubmit($event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            $event.preventDefault();
-            this.stateMachine.send('SUBMIT');
-        });
+        return this.authenticator.slotContext;
     }
     onInput(event) {
+        let { checked, name, type, value } = event.target;
+        if (type === 'checkbox' && !checked)
+            value = undefined;
+        this.authenticator.updateForm({ name, value });
+    }
+    onSubmit(event) {
         event.preventDefault();
-        const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.submitForm();
     }
 }
-AmplifySignUpComponent.decorators = [
+SignUpComponent.decorators = [
     { type: Component, args: [{
                 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"
+                template: "<amplify-slot name=\"sign-up-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <div class=\"amplify-flex\" style=\"flex-direction: column\">\n    <div class=\"amplify-flex\" style=\"flex-direction: column\">\n      <amplify-slot name=\"sign-up-form-fields\" [context]=\"context\">\n        <amplify-sign-up-form-fields></amplify-sign-up-form-fields>\n      </amplify-slot>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </div>\n\n    <amplify-slot name=\"sign-up-button\" [context]=\"context\">\n      <button\n        [disabled]=\"\n          authenticator.isPending || authenticator.hasValidationErrors\n        \"\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n      >\n        {{ createAccountText }}\n      </button>\n    </amplify-slot>\n  </div>\n</form>\n\n<amplify-slot name=\"sign-up-footer\" [context]=\"context\"> </amplify-slot>\n"
             },] }
 ];
-AmplifySignUpComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SignUpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
-    headerText: [{ type: Input }]
+SignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }]
 };
 
-const getAttributeMap = () => authInputAttributes;
-
-class AmplifyVerifyUserComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        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');
+class SignUpFormFieldsComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.primaryAlias = '';
+        this.secondaryAliases = [];
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.unverifiedAttributes = actorState.context.unverifiedAttributes;
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('verifyUser.edit');
-    }
-    get context() {
-        const { change, skip, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, skip, submit };
-    }
-    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();
-            const formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
+        const context = this.authenticator.context;
+        const { loginMechanisms, signUpAttributes } = context.config;
+        this.fieldNames = Array.from(new Set([...loginMechanisms, ...signUpAttributes]));
+        this.fieldNames = this.fieldNames.filter((fieldName) => {
+            const hasDefaultField = !!authInputAttributes[fieldName];
+            if (!hasDefaultField) {
+                console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize Authenticator.SignUp.FormFields to add your own.`);
+            }
+            return hasDefaultField;
         });
+        // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
+        this.loginMechanism = this.fieldNames.shift();
     }
 }
-AmplifyVerifyUserComponent.decorators = [
+SignUpFormFieldsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-verify-user',
-                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
+                selector: 'amplify-sign-up-form-fields',
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-user-name-alias [name]=\"loginMechanism\"></amplify-user-name-alias>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\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 *ngFor=\"let field of fieldNames\">\n    <amplify-form-field\n      [name]=\"field\"\n      [labelHidden]=\"false\"\n    ></amplify-form-field>\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifyVerifyUserComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SignUpFormFieldsComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyVerifyUserComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
-    headerText: [{ type: Input }]
-};
 
-class ConfirmResetPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        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');
+class UserNameAliasComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.name = 'username';
+        this.disabled = false;
+        this.initialValue = '';
+        this.required = true;
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmResetPassword.edit');
-    }
-    get context() {
-        const { change, resend, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, resend, remoteError, signIn, submit };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
-    }
-    resend() {
-        this.stateMachine.send('RESEND');
-    }
-    onInput(event) {
-        event.preventDefault();
-        const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
-    }
-    onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            this.stateMachine.send('SUBMIT');
-        });
+        const context = this.authenticator.context;
+        const { label, type } = getAliasInfoFromContext(context);
+        this.label = label;
+        this.type = type;
+        this.placeholder = label;
     }
 }
-ConfirmResetPasswordComponent.decorators = [
+UserNameAliasComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-confirm-reset-password',
-                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"
+                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"
             },] }
 ];
-ConfirmResetPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+UserNameAliasComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-ConfirmResetPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
-    headerText: [{ type: Input }]
+UserNameAliasComponent.propDecorators = {
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
 };
 
-class ConfirmVerifyUserComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class VerifyUserComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
         this.headerText = translate('Account recovery requires verified contact information');
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+        this.unverifiedAttributes = {};
+        this.labelId = nanoid(12);
         // translated texts
         this.skipText = translate('Skip');
-        this.submitText = translate('Submit');
+        this.verifyText = translate('Verify');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmVerifyUser.edit');
+        const actorState = getActorState(this.authenticator.authState);
+        this.unverifiedAttributes = actorState.context.unverifiedAttributes;
     }
     get context() {
-        const { skip, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { remoteError, skip, submit };
+        return this.authenticator.slotContext;
+    }
+    getLabelForAttr(authAttr) {
+        var _a;
+        const attributeMap = getAttributeMap();
+        const label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+        return translate(label);
     }
-    skipVerify() {
-        this.stateMachine.send('SKIP');
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
-        });
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-ConfirmVerifyUserComponent.decorators = [
+VerifyUserComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-confirm-verify-user',
-                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"
+                selector: 'amplify-verify-user',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"verify-user-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n\n      <div *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\">\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      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ verifyText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.skipVerification()\"\n      >\n        {{ skipText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"verify-user-footer\" [context]=\"context\"> </amplify-slot>\n  </form>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
-ConfirmVerifyUserComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+VerifyUserComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-ConfirmVerifyUserComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+VerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
     headerText: [{ type: Input }]
 };
 
-class AmplifyButtonComponent {
+class ButtonComponent {
     constructor() {
         this.type = 'button';
         this.fullWidth = false;
@@ -1023,13 +915,13 @@ class AmplifyButtonComponent {
         this.fontWeightAttr = this.fontWeight;
     }
 }
-AmplifyButtonComponent.decorators = [
+ButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'button[amplify-button]',
                 template: "<ng-content></ng-content>\n"
             },] }
 ];
-AmplifyButtonComponent.propDecorators = {
+ButtonComponent.propDecorators = {
     type: [{ type: Input }],
     fullWidth: [{ type: Input }],
     size: [{ type: Input }],
@@ -1043,107 +935,61 @@ AmplifyButtonComponent.propDecorators = {
     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;
+class CheckboxComponent {
+    constructor() {
+        this.defaultChecked = false;
+        this.hasError = false;
+        this.isChecked = false;
     }
     ngOnInit() {
-        this.textFieldId = `amplify-field-${nanoid(12)}`;
-        this.selectFieldId = `amplify-field-${nanoid(12)}`;
-        // TODO: consider better default handling mechanisms across frameworks
-        if (this.isTelInput()) {
-            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 },
-            });
+        if (this.defaultChecked) {
+            this.isChecked = true;
         }
     }
-    get attributeMap() {
-        return getAttributeMap();
-    }
-    get error() {
-        const formContext = getActorContext(this.stateMachine.authState);
-        const { validationError } = formContext;
-        return validationError[this.name];
-    }
-    isTelInput() {
-        return this.inferType() === 'tel';
-    }
-    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';
-    }
-    isPasswordField() {
-        return this.inferType() === 'password';
+    handleClick() {
+        this.isChecked = !this.isChecked;
     }
 }
-AmplifyFormFieldComponent.decorators = [
+CheckboxComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-form-field',
-                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-form-select\n    *ngIf=\"isTelInput()\"\n    name=\"country_code\"\n    label=\"Country Code\"\n    [id]=\"selectFieldId\"\n    [items]=\"countryDialCodes\"\n    [initialValue]=\"defaultCountryCode\"\n  ></amplify-form-select>\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()\"\n    [id]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+                selector: 'amplify-checkbox',
+                template: "<div class=\"amplify-flex amplify-field amplify-checkboxfield\">\n  <label class=\"amplify-flex amplify-checkbox\">\n    <span class=\"amplify-visually-hidden\">\n      <input\n        (click)=\"handleClick()\"\n        class=\"\n          amplify-input\n          amplify-field-group__control\n          amplify-checkbox__input\n        \"\n        aria-invalid=\"false\"\n        type=\"checkbox\"\n        [name]=\"name\"\n        [value]=\"value\"\n      />\n    </span>\n    <span\n      class=\"amplify-flex amplify-checkbox__button\"\n      aria-hidden=\"true\"\n      data-focus=\"false\"\n      [attr.data-error]=\"hasError\"\n      [attr.data-checked]=\"isChecked\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"amplify-icon amplify-checkbox__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        [attr.data-checked]=\"isChecked\"\n      >\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"></path>\n      </svg>\n    </span>\n    <span class=\"amplify-text amplify-checkbox__label\">\n      <ng-content></ng-content>\n    </span>\n  </label>\n  <p *ngIf=\"hasError\" class=\"amplify-text amplify-field__error-message\">\n    {{ errorMessage }}\n  </p>\n</div>\n"
             },] }
 ];
-AmplifyFormFieldComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-AmplifyFormFieldComponent.propDecorators = {
-    name: [{ type: Input }],
-    type: [{ type: Input }],
-    required: [{ type: Input }],
-    placeholder: [{ type: Input }],
+CheckboxComponent.propDecorators = {
+    defaultChecked: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    hasError: [{ type: Input }],
     label: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    disabled: [{ type: Input }],
-    autocomplete: [{ type: Input }]
+    name: [{ type: Input }],
+    value: [{ type: Input }]
 };
 
-class AmplifyPasswordFieldComponent {
+class ErrorComponent {
+    constructor() {
+        this.isVisible = true;
+    }
+    close() {
+        this.isVisible = false;
+    }
+}
+ErrorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-error',
+                template: "<div\n  class=\"amplify-flex amplify-alert\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n"
+            },] }
+];
+
+class PasswordFieldComponent {
     constructor() {
         this.autocomplete = 'new-password';
         this.disabled = false;
+        this.fieldId = `amplify-field-${nanoid(12)}`;
         this.initialValue = '';
         this.label = '';
         this.placeholder = '';
         this.required = true;
+        this.labelHidden = false;
         this.type = 'password';
         this.showPassword = false;
         this.showPasswordButtonlabel = translate('Show password');
@@ -1156,37 +1002,75 @@ class AmplifyPasswordFieldComponent {
         this.type = this.showPassword ? 'text' : 'password';
     }
 }
-AmplifyPasswordFieldComponent.decorators = [
+PasswordFieldComponent.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"
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\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 = {
+PasswordFieldComponent.propDecorators = {
     autocomplete: [{ type: Input }],
     disabled: [{ type: Input }],
-    id: [{ type: Input }],
+    fieldId: [{ type: Input }],
     initialValue: [{ type: Input }],
     label: [{ type: Input }],
     name: [{ type: Input }],
     placeholder: [{ type: Input }],
-    required: [{ type: Input }]
+    required: [{ type: Input }],
+    labelHidden: [{ type: Input }]
+};
+
+class PhoneNumberFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.selectFieldId = `amplify-field-${nanoid(12)}`;
+        this.textFieldId = `amplify-field-${nanoid(12)}`;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.labelHidden = false;
+        this.display = 'contents';
+        this.countryDialCodes = countryDialCodes;
+    }
+}
+PhoneNumberFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-phone-number-field',
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"textFieldId\">\n  {{ label }}\n</label>\n<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=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\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  <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 }],
+    labelHidden: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
 
-class AmplifySelectComponent {
+class SelectComponent {
 }
-AmplifySelectComponent.decorators = [
+SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-form-select',
-                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<select class=\"amplify-select\" [id]=\"id\" [name]=\"name\">\n  <option\n    *ngFor=\"let item of items\"\n    [value]=\"item\"\n    [selected]=\"item === initialValue\"\n  >\n    {{ item }}\n  </option>\n</select>\n"
+                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 = {
+SelectComponent.propDecorators = {
     items: [{ type: Input }],
     name: [{ type: Input }],
     label: [{ type: Input }],
     id: [{ type: Input }],
-    initialValue: [{ type: Input }]
+    defaultValue: [{ type: Input }]
 };
 
 class TabItemComponent {
@@ -1219,6 +1103,7 @@ class TabsComponent {
             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) {
@@ -1241,7 +1126,7 @@ class TabsComponent {
 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    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"
+                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-spacing=\"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 = {
@@ -1249,1931 +1134,110 @@ TabsComponent.propDecorators = {
     tabChange: [{ type: Output }]
 };
 
-class AmplifyTextFieldComponent {
+class TextFieldComponent {
     constructor() {
         this.autocomplete = 'new-password';
         this.disabled = false;
+        this.fieldId = `amplify-field-${nanoid(12)}`;
         this.initialValue = '';
         this.label = '';
         this.placeholder = '';
         this.required = true;
-        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';
+        this.labelHidden = false;
+        this.display = 'contents';
     }
 }
-AmplifyTextFieldComponent.decorators = [
+TextFieldComponent.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"
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\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 = {
+TextFieldComponent.propDecorators = {
     autocomplete: [{ type: Input }],
     disabled: [{ type: Input }],
-    id: [{ type: Input }],
+    fieldId: [{ type: Input }],
     initialValue: [{ type: Input }],
     label: [{ type: Input }],
     name: [{ type: Input }],
     placeholder: [{ type: Input }],
     required: [{ type: Input }],
-    type: [{ type: Input }]
+    type: [{ type: Input }],
+    labelHidden: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
 
-class AmplifyUserNameAliasComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.name = 'username';
-        this.disabled = false;
-        this.initialValue = '';
-        this.required = true;
+class AmplifySlotComponent {
+    constructor(propService) {
+        this.propService = propService;
+        this.display = 'contents';
+        this.isOverriden = false;
     }
-    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) => {
-        Object.defineProperty(Prototype, item, {
-            get() {
-                return this.el[item];
-            },
-            set(val) {
-                this.z.runOutsideAngular(() => (this.el[item] = val));
-            },
-        });
-    });
-};
-const proxyMethods = (Cmp, methods) => {
-    const Prototype = Cmp.prototype;
-    methods.forEach((methodName) => {
-        Prototype[methodName] = function () {
-            const args = arguments;
-            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
-        };
-    });
-};
-const proxyOutputs = (instance, el, events) => {
-    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
-};
-// tslint:disable-next-line: only-arrow-functions
-function ProxyCmp(opts) {
-    const decorator = function (cls) {
-        if (opts.inputs) {
-            proxyInputs(cls, opts.inputs);
-        }
-        if (opts.methods) {
-            proxyMethods(cls, opts.methods);
+    ngAfterContentInit() {
+        const customComponents = this.propService.customComponents;
+        const overridingComponent = customComponents[this.name];
+        if (overridingComponent) {
+            this.overridingComponent = overridingComponent;
+            this.isOverriden = true;
         }
-        return cls;
-    };
-    return decorator;
-}
-let AmplifyAmazonButton = class AmplifyAmazonButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAmazonButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-amazon-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['clientId', 'handleAuthStateChange']
-            },] }
-];
-AmplifyAmazonButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAmazonButton = __decorate([
-    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-], AmplifyAmazonButton);
-class AmplifyAuthContainer {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
     }
 }
-AmplifyAuthContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth-container',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyAuthContainer.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyAuthFields = class AmplifyAuthFields {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuthFields.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth-fields',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['formFields']
-            },] }
-];
-AmplifyAuthFields.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuthFields = __decorate([
-    ProxyCmp({ inputs: ['formFields'] })
-], AmplifyAuthFields);
-let AmplifyAuth0Button = class AmplifyAuth0Button {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuth0Button.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth0-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['config', 'handleAuthStateChange']
-            },] }
-];
-AmplifyAuth0Button.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuth0Button = __decorate([
-    ProxyCmp({ inputs: ['config', 'handleAuthStateChange'] })
-], AmplifyAuth0Button);
-let AmplifyAuthenticator = class AmplifyAuthenticator {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuthenticator.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-authenticator',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'federated',
-                    'handleAuthStateChange',
-                    'hideToast',
-                    'initialAuthState',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifyAuthenticator.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuthenticator = __decorate([
-    ProxyCmp({
-        inputs: [
-            'federated',
-            'handleAuthStateChange',
-            'hideToast',
-            'initialAuthState',
-            'usernameAlias',
-        ],
-    })
-], AmplifyAuthenticator);
-let AmplifyButton = class AmplifyButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyButton.decorators = [
+AmplifySlotComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']
+                selector: 'amplify-slot',
+                template: "<!-- \n  if slot isn't overwritten, we display the the default coponent, which is the \n  children passed onto this component.\n-->\n<ng-content *ngIf=\"!isOverriden\"></ng-content>\n\n<!-- If slot is overwritten, we render that instead. -->\n<ng-container\n  *ngIf=\"isOverriden\"\n  [ngTemplateOutlet]=\"overridingComponent\"\n  [ngTemplateOutletContext]=\"context\"\n></ng-container>\n"
             },] }
 ];
-AmplifyButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
+AmplifySlotComponent.ctorParameters = () => [
+    { type: CustomComponentsService }
 ];
-AmplifyButton = __decorate([
-    ProxyCmp({
-        inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'],
-    })
-], AmplifyButton);
-let AmplifyChatbot = class AmplifyChatbot {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['chatCompleted']);
-    }
-};
-AmplifyChatbot.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-chatbot',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'botName',
-                    'botTitle',
-                    'clearOnComplete',
-                    'conversationModeOn',
-                    'silenceThreshold',
-                    'silenceTime',
-                    'textEnabled',
-                    'voiceEnabled',
-                    'welcomeMessage',
-                ]
-            },] }
-];
-AmplifyChatbot.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyChatbot = __decorate([
-    ProxyCmp({
-        inputs: [
-            'botName',
-            'botTitle',
-            'clearOnComplete',
-            'conversationModeOn',
-            'silenceThreshold',
-            'silenceTime',
-            'textEnabled',
-            'voiceEnabled',
-            'welcomeMessage',
-        ],
-    })
-], AmplifyChatbot);
-let AmplifyCheckbox = class AmplifyCheckbox {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCheckbox.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-checkbox',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']
-            },] }
-];
-AmplifyCheckbox.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCheckbox = __decorate([
-    ProxyCmp({
-        inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'],
-    })
-], AmplifyCheckbox);
-let AmplifyCodeField = class AmplifyCodeField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCodeField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-code-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyCodeField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCodeField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyCodeField);
-let AmplifyConfirmSignIn = class AmplifyConfirmSignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyConfirmSignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-confirm-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                ]
-            },] }
-];
-AmplifyConfirmSignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyConfirmSignIn = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-        ],
-    })
-], AmplifyConfirmSignIn);
-let AmplifyConfirmSignUp = class AmplifyConfirmSignUp {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyConfirmSignUp.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-confirm-sign-up',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifyConfirmSignUp.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyConfirmSignUp = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-            'usernameAlias',
-        ],
-    })
-], AmplifyConfirmSignUp);
-class AmplifyContainer {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-container',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyContainer.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyCountryDialCode = class AmplifyCountryDialCode {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCountryDialCode.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-country-dial-code',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']
-            },] }
-];
-AmplifyCountryDialCode.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCountryDialCode = __decorate([
-    ProxyCmp({ inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] })
-], AmplifyCountryDialCode);
-let AmplifyEmailField = class AmplifyEmailField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyEmailField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-email-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyEmailField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyEmailField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyEmailField);
-let AmplifyFacebookButton = class AmplifyFacebookButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFacebookButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-facebook-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['appId', 'handleAuthStateChange']
-            },] }
-];
-AmplifyFacebookButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFacebookButton = __decorate([
-    ProxyCmp({ inputs: ['appId', 'handleAuthStateChange'] })
-], AmplifyFacebookButton);
-let AmplifyFederatedButtons = class AmplifyFederatedButtons {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFederatedButtons.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-federated-buttons',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['authState', 'federated', 'handleAuthStateChange']
-            },] }
-];
-AmplifyFederatedButtons.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFederatedButtons = __decorate([
-    ProxyCmp({ inputs: ['authState', 'federated', 'handleAuthStateChange'] })
-], AmplifyFederatedButtons);
-let AmplifyFederatedSignIn = class AmplifyFederatedSignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFederatedSignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-federated-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['authState', 'federated']
-            },] }
-];
-AmplifyFederatedSignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFederatedSignIn = __decorate([
-    ProxyCmp({ inputs: ['authState', 'federated'] })
-], AmplifyFederatedSignIn);
-let AmplifyForgotPassword = class AmplifyForgotPassword {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyForgotPassword.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-forgot-password',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSend',
-                    'handleSubmit',
-                    'headerText',
-                    'sendButtonText',
-                    'submitButtonText',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifyForgotPassword.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyForgotPassword = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSend',
-            'handleSubmit',
-            'headerText',
-            'sendButtonText',
-            'submitButtonText',
-            'usernameAlias',
-        ],
-    })
-], AmplifyForgotPassword);
-let AmplifyFormField = class AmplifyFormField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFormField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-form-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'description',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'name',
-                    'placeholder',
-                    'required',
-                    'type',
-                    'value',
-                ]
-            },] }
-];
-AmplifyFormField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFormField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'description',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'name',
-            'placeholder',
-            'required',
-            'type',
-            'value',
-        ],
-    })
-], AmplifyFormField);
-let AmplifyFormSection = class AmplifyFormSection {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFormSection.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-form-section',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'handleSubmit',
-                    'headerText',
-                    'loading',
-                    'secondaryFooterContent',
-                    'submitButtonText',
-                    'testDataPrefix',
-                ]
-            },] }
-];
-AmplifyFormSection.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFormSection = __decorate([
-    ProxyCmp({
-        inputs: [
-            'handleSubmit',
-            'headerText',
-            'loading',
-            'secondaryFooterContent',
-            'submitButtonText',
-            'testDataPrefix',
-        ],
-    })
-], AmplifyFormSection);
-let AmplifyGoogleButton = class AmplifyGoogleButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyGoogleButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-google-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['clientId', 'handleAuthStateChange']
-            },] }
-];
-AmplifyGoogleButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyGoogleButton = __decorate([
-    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-], AmplifyGoogleButton);
-let AmplifyGreetings = class AmplifyGreetings {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyGreetings.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-greetings',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleAuthStateChange', 'logo', 'username']
-            },] }
-];
-AmplifyGreetings.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyGreetings = __decorate([
-    ProxyCmp({ inputs: ['handleAuthStateChange', 'logo', 'username'] })
-], AmplifyGreetings);
-class AmplifyHint {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyHint.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-hint',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyHint.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyIcon = class AmplifyIcon {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyIcon.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-icon',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['name']
-            },] }
-];
-AmplifyIcon.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyIcon = __decorate([
-    ProxyCmp({ inputs: ['name'] })
-], AmplifyIcon);
-let AmplifyIconButton = class AmplifyIconButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyIconButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-icon-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['autoShowTooltip', 'name', 'tooltip']
-            },] }
-];
-AmplifyIconButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyIconButton = __decorate([
-    ProxyCmp({ inputs: ['autoShowTooltip', 'name', 'tooltip'] })
-], AmplifyIconButton);
-let AmplifyInput = class AmplifyInput {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyInput.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-input',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'description',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'inputProps',
-                    'name',
-                    'placeholder',
-                    'required',
-                    'type',
-                    'value',
-                ]
-            },] }
-];
-AmplifyInput.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyInput = __decorate([
-    ProxyCmp({
-        inputs: [
-            'description',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'inputProps',
-            'name',
-            'placeholder',
-            'required',
-            'type',
-            'value',
-        ],
-    })
-], AmplifyInput);
-let AmplifyLabel = class AmplifyLabel {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyLabel.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-label',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['htmlFor']
-            },] }
-];
-AmplifyLabel.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyLabel = __decorate([
-    ProxyCmp({ inputs: ['htmlFor'] })
-], AmplifyLabel);
-let AmplifyLink = class AmplifyLink {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyLink.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-link',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['role']
-            },] }
-];
-AmplifyLink.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyLink = __decorate([
-    ProxyCmp({ inputs: ['role'] })
-], AmplifyLink);
-class AmplifyLoadingSpinner {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyLoadingSpinner.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-loading-spinner',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyLoadingSpinner.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-class AmplifyNav {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyNav.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-nav',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyNav.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyOauthButton = class AmplifyOauthButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyOauthButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-oauth-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['config']
-            },] }
-];
-AmplifyOauthButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyOauthButton = __decorate([
-    ProxyCmp({ inputs: ['config'] })
-], AmplifyOauthButton);
-let AmplifyPasswordField = class AmplifyPasswordField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPasswordField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-password-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyPasswordField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPasswordField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyPasswordField);
-let AmplifyPhoneField = class AmplifyPhoneField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPhoneField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-phone-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'dialCode',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyPhoneField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPhoneField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'dialCode',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyPhoneField);
-let AmplifyPhotoPicker = class AmplifyPhotoPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPhotoPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-photo-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'buttonText',
-                    'handleClick',
-                    'headerHint',
-                    'headerTitle',
-                    'placeholderHint',
-                    'previewSrc',
-                ]
-            },] }
-];
-AmplifyPhotoPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPhotoPicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'buttonText',
-            'handleClick',
-            'headerHint',
-            'headerTitle',
-            'placeholderHint',
-            'previewSrc',
-        ],
-    })
-], AmplifyPhotoPicker);
-let AmplifyPicker = class AmplifyPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['acceptValue', 'inputHandler', 'pickerText']
-            },] }
-];
-AmplifyPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPicker = __decorate([
-    ProxyCmp({ inputs: ['acceptValue', 'inputHandler', 'pickerText'] })
-], AmplifyPicker);
-let AmplifyRadioButton = class AmplifyRadioButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyRadioButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-radio-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'checked',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'inputProps',
-                    'label',
-                    'name',
-                    'placeholder',
-                    'value',
-                ]
-            },] }
-];
-AmplifyRadioButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyRadioButton = __decorate([
-    ProxyCmp({
-        inputs: [
-            'checked',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'inputProps',
-            'label',
-            'name',
-            'placeholder',
-            'value',
-        ],
-    })
-], AmplifyRadioButton);
-let AmplifyRequireNewPassword = class AmplifyRequireNewPassword {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyRequireNewPassword.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-require-new-password',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                ]
-            },] }
-];
-AmplifyRequireNewPassword.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyRequireNewPassword = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-        ],
-    })
-], AmplifyRequireNewPassword);
-let AmplifyS3Album = class AmplifyS3Album {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Album.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-album',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'contentType',
-                    'fileToKey',
-                    'filter',
-                    'handleOnError',
-                    'handleOnLoad',
-                    'identityId',
-                    'level',
-                    'path',
-                    'picker',
-                    'pickerText',
-                    'sort',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3Album.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Album = __decorate([
-    ProxyCmp({
-        inputs: [
-            'contentType',
-            'fileToKey',
-            'filter',
-            'handleOnError',
-            'handleOnLoad',
-            'identityId',
-            'level',
-            'path',
-            'picker',
-            'pickerText',
-            'sort',
-            'track',
-        ],
-    })
-], AmplifyS3Album);
-let AmplifyS3Image = class AmplifyS3Image {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Image.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-image',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'alt',
-                    'body',
-                    'contentType',
-                    'handleOnError',
-                    'handleOnLoad',
-                    'identityId',
-                    'imgKey',
-                    'imgProps',
-                    'level',
-                    'path',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3Image.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Image = __decorate([
-    ProxyCmp({
-        inputs: [
-            'alt',
-            'body',
-            'contentType',
-            'handleOnError',
-            'handleOnLoad',
-            'identityId',
-            'imgKey',
-            'imgProps',
-            'level',
-            'path',
-            'track',
-        ],
-    })
-], AmplifyS3Image);
-let AmplifyS3ImagePicker = class AmplifyS3ImagePicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3ImagePicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-image-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'buttonText',
-                    'contentType',
-                    'fileToKey',
-                    'headerHint',
-                    'headerTitle',
-                    'identityId',
-                    'level',
-                    'path',
-                    'placeholderHint',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3ImagePicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3ImagePicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'buttonText',
-            'contentType',
-            'fileToKey',
-            'headerHint',
-            'headerTitle',
-            'identityId',
-            'level',
-            'path',
-            'placeholderHint',
-            'track',
-        ],
-    })
-], AmplifyS3ImagePicker);
-let AmplifyS3Text = class AmplifyS3Text {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Text.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-text',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'body',
-                    'contentType',
-                    'fallbackText',
-                    'identityId',
-                    'level',
-                    'path',
-                    'textKey',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3Text.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Text = __decorate([
-    ProxyCmp({
-        inputs: [
-            'body',
-            'contentType',
-            'fallbackText',
-            'identityId',
-            'level',
-            'path',
-            'textKey',
-            'track',
-        ],
-    })
-], AmplifyS3Text);
-let AmplifyS3TextPicker = class AmplifyS3TextPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3TextPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-text-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'contentType',
-                    'fallbackText',
-                    'fileToKey',
-                    'identityId',
-                    'level',
-                    'path',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3TextPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3TextPicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'contentType',
-            'fallbackText',
-            'fileToKey',
-            'identityId',
-            'level',
-            'path',
-            'track',
-        ],
-    })
-], AmplifyS3TextPicker);
-let AmplifySection = class AmplifySection {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySection.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-section',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['role']
-            },] }
-];
-AmplifySection.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySection = __decorate([
-    ProxyCmp({ inputs: ['role'] })
-], AmplifySection);
-let AmplifySelect = class AmplifySelect {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySelect.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-select',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['fieldId', 'handleInputChange', 'options', 'selected']
-            },] }
-];
-AmplifySelect.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySelect = __decorate([
-    ProxyCmp({ inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] })
-], AmplifySelect);
-let AmplifySelectMfaType = class AmplifySelectMfaType {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySelectMfaType.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-select-mfa-type',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['MFATypes', 'authData', 'handleSubmit']
-            },] }
-];
-AmplifySelectMfaType.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySelectMfaType = __decorate([
-    ProxyCmp({ inputs: ['MFATypes', 'authData', 'handleSubmit'] })
-], AmplifySelectMfaType);
-let AmplifySignIn = class AmplifySignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'federated',
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'hideSignUp',
-                    'submitButtonText',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifySignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignIn = __decorate([
-    ProxyCmp({
-        inputs: [
-            'federated',
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'hideSignUp',
-            'submitButtonText',
-            'usernameAlias',
-        ],
-    })
-], AmplifySignIn);
-let AmplifySignInButton = class AmplifySignInButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySignInButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-in-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['provider']
-            },] }
-];
-AmplifySignInButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignInButton = __decorate([
-    ProxyCmp({ inputs: ['provider'] })
-], AmplifySignInButton);
-let AmplifySignOut = class AmplifySignOut {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySignOut.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-out',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['buttonText', 'handleAuthStateChange']
-            },] }
-];
-AmplifySignOut.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignOut = __decorate([
-    ProxyCmp({ inputs: ['buttonText', 'handleAuthStateChange'] })
-], AmplifySignOut);
-let AmplifySignUp = class AmplifySignUp {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifySignUp.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-up',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSignUp',
-                    'handleSubmit',
-                    'haveAccountText',
-                    'headerText',
-                    'signInText',
-                    'submitButtonText',
-                    'usernameAlias',
-                    'validationErrors',
-                ]
-            },] }
-];
-AmplifySignUp.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignUp = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSignUp',
-            'handleSubmit',
-            'haveAccountText',
-            'headerText',
-            'signInText',
-            'submitButtonText',
-            'usernameAlias',
-            'validationErrors',
-        ],
-    })
-], AmplifySignUp);
-class AmplifyStrike {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyStrike.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-strike',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyStrike.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyToast = class AmplifyToast {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyToast.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-toast',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleClose', 'message']
-            },] }
-];
-AmplifyToast.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyToast = __decorate([
-    ProxyCmp({ inputs: ['handleClose', 'message'] })
-], AmplifyToast);
-let AmplifyTooltip = class AmplifyTooltip {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyTooltip.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-tooltip',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['shouldAutoShow', 'text']
-            },] }
-];
-AmplifyTooltip.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyTooltip = __decorate([
-    ProxyCmp({ inputs: ['shouldAutoShow', 'text'] })
-], AmplifyTooltip);
-let AmplifyTotpSetup = class AmplifyTotpSetup {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyTotpSetup.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-totp-setup',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'handleAuthStateChange',
-                    'handleComplete',
-                    'headerText',
-                    'issuer',
-                    'standalone',
-                    'user',
-                ]
-            },] }
-];
-AmplifyTotpSetup.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyTotpSetup = __decorate([
-    ProxyCmp({
-        inputs: [
-            'handleAuthStateChange',
-            'handleComplete',
-            'headerText',
-            'issuer',
-            'standalone',
-            'user',
-        ],
-    })
-], AmplifyTotpSetup);
-let AmplifyUsernameField = class AmplifyUsernameField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyUsernameField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-username-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyUsernameField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyUsernameField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyUsernameField);
-let AmplifyVerifyContact = class AmplifyVerifyContact {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+AmplifySlotComponent.propDecorators = {
+    name: [{ type: Input }],
+    context: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
-AmplifyVerifyContact.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-verify-contact',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleAuthStateChange', 'user']
-            },] }
-];
-AmplifyVerifyContact.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyVerifyContact = __decorate([
-    ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
-], AmplifyVerifyContact);
 
-customElements.define('amplify-button', AmplifyButton$1);
-customElements.define('amplify-input', AmplifyInput$1);
-customElements.define('amplify-toast', AmplifyToast$1);
-customElements.define('amplify-chatbot', AmplifyChatbot$1);
-customElements.define('amplify-s3-album', AmplifyS3Album$1);
-customElements.define('amplify-s3-image-picker', AmplifyS3ImagePicker$1);
-customElements.define('amplify-s3-text', AmplifyS3Text$1);
-customElements.define('amplify-s3-text-picker', AmplifyS3TextPicker$1);
-customElements.define('amplify-s3-image', AmplifyS3Image$1);
-customElements.define('amplify-picker', AmplifyPicker$1);
-customElements.define('amplify-photo-picker', AmplifyPhotoPicker$1);
-class UiAngularModule {
+class AmplifyAuthenticatorModule {
 }
-UiAngularModule.decorators = [
+AmplifyAuthenticatorModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    AmplifyChatbot,
-                    AmplifyToast,
-                    AmplifyInput,
-                    AmplifyButton,
-                    AmplifyS3Album,
-                    AmplifyS3ImagePicker,
-                    AmplifyS3Text,
-                    AmplifyS3TextPicker,
-                    AmplifyS3Image,
-                    AmplifyPicker,
-                    AmplifyPhotoPicker,
-                    AmplifyAuthenticatorComponent,
-                    AmplifySignInComponent,
-                    AmplifySignUpComponent,
-                    AmplifyFormFieldComponent,
-                    AmplifyErrorComponent,
+                    AmplifySlotComponent,
                     AmplifySlotDirective,
-                    AmplifyConfirmSignUpComponent,
-                    AmplifyUserNameAliasComponent,
-                    AmplifyConfirmSignInComponent,
-                    AmplifySetupTotpComponent,
-                    AmplifyForceNewPasswordComponent,
-                    AmplifyFederatedSignInComponent,
-                    AmplifyFederatedSignInButtonComponent,
-                    AmplifyResetPasswordComponent,
-                    AmplifyVerifyUserComponent,
+                    AuthenticatorComponent,
+                    ButtonComponent,
+                    CheckboxComponent,
                     ConfirmResetPasswordComponent,
+                    ConfirmSignInComponent,
+                    ConfirmSignUpComponent,
                     ConfirmVerifyUserComponent,
-                    AmplifySelectComponent,
-                    AmplifyButtonComponent,
-                    AmplifyPasswordFieldComponent,
-                    AmplifyTextFieldComponent,
-                    TabsComponent,
+                    ErrorComponent,
+                    FederatedSignInButtonComponent,
+                    FederatedSignInComponent,
+                    ForceNewPasswordComponent,
+                    FormFieldComponent,
+                    PasswordFieldComponent,
+                    PhoneNumberFieldComponent,
+                    ResetPasswordComponent,
+                    SelectComponent,
+                    SetupTotpComponent,
+                    SignInComponent,
+                    SignUpComponent,
+                    SignUpFormFieldsComponent,
                     TabItemComponent,
+                    TabsComponent,
+                    TextFieldComponent,
+                    UserNameAliasComponent,
+                    VerifyUserComponent,
                 ],
-                imports: [CommonModule],
+                imports: [CommonModule, BrowserModule],
                 exports: [
-                    AmplifyChatbot,
-                    AmplifyToast,
-                    AmplifyInput,
-                    AmplifyButton,
-                    AmplifyS3Album,
-                    AmplifyS3ImagePicker,
-                    AmplifyS3Text,
-                    AmplifyS3TextPicker,
-                    AmplifyS3Image,
-                    AmplifyPicker,
-                    AmplifyPhotoPicker,
-                    AmplifyAuthenticatorComponent,
-                    AmplifySignInComponent,
-                    AmplifyFormFieldComponent,
-                    AmplifyErrorComponent,
                     AmplifySlotDirective,
+                    AuthenticatorComponent,
+                    CheckboxComponent,
+                    SignUpFormFieldsComponent,
+                    TextFieldComponent,
                 ],
-                schemas: [CUSTOM_ELEMENTS_SCHEMA],
             },] }
 ];
 
@@ -3185,5 +1249,5 @@ UiAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AmplifyAuthenticatorModule, AmplifySlotDirective, AuthenticatorComponent, AuthenticatorService, ButtonComponent, CheckboxComponent, ConfirmResetPasswordComponent, ConfirmSignInComponent, ConfirmSignUpComponent, ConfirmVerifyUserComponent, CustomComponentsService, ErrorComponent, FederatedSignInButtonComponent, FederatedSignInComponent, ForceNewPasswordComponent, FormFieldComponent, PasswordFieldComponent, PhoneNumberFieldComponent, ResetPasswordComponent, SelectComponent, SetupTotpComponent, SignInComponent, SignUpComponent, SignUpFormFieldsComponent, TabItemComponent, TabsComponent, TextFieldComponent, UserNameAliasComponent, VerifyUserComponent, getAttributeMap, AmplifySlotComponent as ɵa, AuthenticatorComponent as ɵb, ButtonComponent as ɵc, CheckboxComponent as ɵd, ConfirmResetPasswordComponent as ɵe, ConfirmSignInComponent as ɵf, ConfirmSignUpComponent as ɵg, ConfirmVerifyUserComponent as ɵh, ErrorComponent as ɵi, FederatedSignInButtonComponent as ɵj, FederatedSignInComponent as ɵk, ForceNewPasswordComponent as ɵl, FormFieldComponent as ɵm, PasswordFieldComponent as ɵn, PhoneNumberFieldComponent as ɵo, ResetPasswordComponent as ɵp, SelectComponent as ɵq, SetupTotpComponent as ɵr, SignInComponent as ɵs, SignUpComponent as ɵt, SignUpFormFieldsComponent as ɵu, TabItemComponent as ɵv, TabsComponent as ɵw, TextFieldComponent as ɵx, UserNameAliasComponent as ɵy, VerifyUserComponent as ɵz };
 //# sourceMappingURL=aws-amplify-ui-angular.js.map