@aws-amplify/ui-angular 2.0.1-next.5 → 2.0.3

package/bundles/aws-amplify-ui-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('aws-amplify'), require('xstate'), require('qrcode'), require('lodash'), require('nanoid'), require('rxjs'), require('@aws-amplify/ui-components/dist/components')) :
-    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', 'aws-amplify', 'xstate', 'qrcode', 'lodash', 'nanoid', 'rxjs', '@aws-amplify/ui-components/dist/components'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["aws-amplify"] = global["aws-amplify"] || {}, global["aws-amplify"]["ui-angular"] = {}), global.ng.core, global.ng.common, global.ui, global["aws-amplify"], global.xstate, global.QRCode, global.lodash, global.nanoid, global.rxjs, global.components));
-})(this, (function (exports, i0, common, ui, awsAmplify, xstate, QRCode, lodash, nanoid, rxjs, components) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('aws-amplify'), require('qrcode'), require('nanoid')) :
+    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', '@aws-amplify/core', 'xstate', 'aws-amplify', 'qrcode', 'nanoid'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["aws-amplify"] = global["aws-amplify"] || {}, global["aws-amplify"]["ui-angular"] = {}), global.ng.core, global.ng.common, global.ui, global.core, global.xstate, global["aws-amplify"], global.QRCode, global.nanoid));
+})(this, (function (exports, i0, common, ui, core, xstate, awsAmplify, QRCode, nanoid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,12 +52,14 @@
         amplifySlot: [{ type: i0.Input }]
     };
 
-    var AuthPropService = /** @class */ (function () {
-        function AuthPropService() {
+    /**
+     * Stores and provides custom components that users provide with `amplify-slot`.
+     */
+    var CustomComponentsService = /** @class */ (function () {
+        function CustomComponentsService() {
             this._customComponents = {};
-            this._props = {};
         }
-        Object.defineProperty(AuthPropService.prototype, "customComponents", {
+        Object.defineProperty(CustomComponentsService.prototype, "customComponents", {
             get: function () {
                 return this._customComponents;
             },
@@ -67,166 +69,290 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AuthPropService.prototype, "props", {
-            get: function () {
-                return this._props;
-            },
-            set: function (props) {
-                this._props = Object.assign(Object.assign({}, this._props), props);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return AuthPropService;
+        return CustomComponentsService;
     }());
-    AuthPropService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
-    AuthPropService.decorators = [
+    CustomComponentsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CustomComponentsService_Factory() { return new CustomComponentsService(); }, token: CustomComponentsService, providedIn: "root" });
+    CustomComponentsService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
                 },] }
     ];
-    AuthPropService.ctorParameters = function () { return []; };
 
+    var logger$2 = new core.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.
      */
-    var StateMachineService = /** @class */ (function () {
-        function StateMachineService() {
+    var AuthenticatorService = /** @class */ (function () {
+        function AuthenticatorService() {
         }
-        StateMachineService.prototype.startMachine = function (loginMechanisms) {
+        AuthenticatorService.prototype.startMachine = function (_b) {
             var _this = this;
-            var machine = ui.authMachine.withContext({
-                config: {
-                    login_mechanisms: loginMechanisms,
-                },
+            var initialState = _b.initialState, loginMechanisms = _b.loginMechanisms, services = _b.services, signUpAttributes = _b.signUpAttributes, socialProviders = _b.socialProviders;
+            var machine = ui.createAuthenticatorMachine({
+                initialState: initialState,
+                loginMechanisms: loginMechanisms,
+                services: services,
+                signUpAttributes: signUpAttributes,
+                socialProviders: socialProviders,
             });
             var authService = xstate.interpret(machine, {
                 devTools: process.env.NODE_ENV === 'development',
-            })
-                .onTransition(function (state) {
-                _this._user = state.context.user;
+            }).start();
+            this._subscription = authService.subscribe(function (state) {
                 _this._authState = state;
-            })
-                .start();
-            this._services = ui.getSendEventAliases(authService.send);
+                _this._facade = ui.getServiceContextFacade(state);
+            });
+            this._sendEventAliases = ui.getSendEventAliases(authService.send);
             this._authService = authService;
         };
-        Object.defineProperty(StateMachineService.prototype, "services", {
+        AuthenticatorService.prototype.ngOnDestroy = function () {
+            if (this._subscription)
+                this._subscription.unsubscribe();
+        };
+        Object.defineProperty(AuthenticatorService.prototype, "error", {
+            /**
+             * Context facades
+             */
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.error;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "hasValidationErrors", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.hasValidationErrors;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "isPending", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.isPending;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "route", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.route;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "user", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.user;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "validationErrors", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.validationErrors;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "updateForm", {
+            /**
+             * Service facades
+             */
+            get: function () {
+                return this._sendEventAliases.updateForm;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "updateBlur", {
+            get: function () {
+                return this._sendEventAliases.updateBlur;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "resendCode", {
+            get: function () {
+                return this._sendEventAliases.resendCode;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "signOut", {
+            get: function () {
+                return this._sendEventAliases.signOut;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "submitForm", {
             get: function () {
-                return this._services;
+                return this._sendEventAliases.submitForm;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(StateMachineService.prototype, "authState", {
+        Object.defineProperty(AuthenticatorService.prototype, "toFederatedSignIn", {
+            /**
+             * Transition facades
+             */
+            get: function () {
+                return this._sendEventAliases.toFederatedSignIn;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "toResetPassword", {
+            get: function () {
+                return this._sendEventAliases.toResetPassword;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "toSignIn", {
+            get: function () {
+                return this._sendEventAliases.toSignIn;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "toSignUp", {
+            get: function () {
+                return this._sendEventAliases.toSignUp;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "skipVerification", {
+            get: function () {
+                return this._sendEventAliases.skipVerification;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthenticatorService.prototype, "authState", {
+            /**
+             * Internal utility functions
+             */
+            /** @deprecated For internal use only */
             get: function () {
                 return this._authState;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(StateMachineService.prototype, "authService", {
+        Object.defineProperty(AuthenticatorService.prototype, "authService", {
+            /** @deprecated For internal use only */
             get: function () {
                 return this._authService;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(StateMachineService.prototype, "user", {
+        Object.defineProperty(AuthenticatorService.prototype, "context", {
+            /** @deprecated For internal use only */
             get: function () {
-                return this._user;
+                return this._authState.context;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(StateMachineService.prototype, "context", {
+        Object.defineProperty(AuthenticatorService.prototype, "slotContext", {
+            /** @deprecated For internal use only */
             get: function () {
-                return this._authState.context;
+                var slotContext = Object.assign(Object.assign({}, this._facade), this._sendEventAliases);
+                return Object.assign(Object.assign({}, slotContext), { $implicit: Object.assign({}, slotContext) });
             },
             enumerable: false,
             configurable: true
         });
-        StateMachineService.prototype.send = function (event) {
+        /** @deprecated For internal use only */
+        AuthenticatorService.prototype.subscribe = function (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 */
+        AuthenticatorService.prototype.send = function (event) {
             this.authService.send(event);
         };
-        return StateMachineService;
+        return AuthenticatorService;
     }());
-    StateMachineService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StateMachineService_Factory() { return new StateMachineService(); }, token: StateMachineService, providedIn: "root" });
-    StateMachineService.decorators = [
+    AuthenticatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AuthenticatorService_Factory() { return new AuthenticatorService(); }, token: AuthenticatorService, providedIn: "root" });
+    AuthenticatorService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
                 },] }
     ];
 
-    var AmplifyAuthenticatorComponent = /** @class */ (function () {
-        function AmplifyAuthenticatorComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
+    var AuthenticatorComponent = /** @class */ (function () {
+        function AuthenticatorComponent(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 = ui.translate('Sign In');
             this.signUpTitle = ui.translate('Create Account');
         }
-        AmplifyAuthenticatorComponent.prototype.ngOnInit = function () {
-            awsAmplify.I18n.putVocabularies(ui.translations);
-            this.stateMachine.startMachine(this.loginMechanisms);
+        AuthenticatorComponent.prototype.ngOnInit = function () {
+            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders;
+            this.authenticator.startMachine({
+                initialState: initialState,
+                loginMechanisms: loginMechanisms,
+                services: services,
+                signUpAttributes: signUpAttributes,
+                socialProviders: socialProviders,
+            });
             /**
              * handling translations after content init, because authenticator and its
              * translations might be initialized before the main app's `ngOnInit` is run.
-             **/
+             */
             this.signInTitle = ui.translate('Sign In');
             this.signUpTitle = ui.translate('Create Account');
         };
         /**
          * Lifecycle Methods
          */
-        AmplifyAuthenticatorComponent.prototype.ngAfterContentInit = function () {
+        AuthenticatorComponent.prototype.ngAfterContentInit = function () {
             this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
-            this.customComponents = this.contextService.customComponents;
         };
-        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "context", {
+        Object.defineProperty(AuthenticatorComponent.prototype, "context", {
             /**
              * Class Functions
              */
+            // context passed to "authenticated" slot
             get: function () {
-                var signOut = this.stateMachine.services.signOut;
-                var user = this.stateMachine.user;
-                return { signOut: signOut, user: user };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "actorState", {
-            get: function () {
-                return ui.getActorState(this.stateMachine.authState);
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "authenticatorState", {
+        Object.defineProperty(AuthenticatorComponent.prototype, "route", {
             get: function () {
-                return this.stateMachine.authState;
+                return this.authenticator.route;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifyAuthenticatorComponent.prototype.onTabChange = function () {
-            var currentState = this.stateMachine.authState.value;
-            if (currentState === 'signIn') {
-                this.stateMachine.send('SIGN_UP');
+        AuthenticatorComponent.prototype.onTabChange = function () {
+            var route = this.authenticator.route;
+            if (route === 'signIn') {
+                this.authenticator.toSignUp();
             }
             else {
-                this.stateMachine.send('SIGN_IN');
+                this.authenticator.toSignIn();
             }
         };
-        AmplifyAuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
+        AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
             if (!componentQuery)
                 return {};
             var customComponents = {};
@@ -235,410 +361,470 @@
             });
             return customComponents;
         };
-        return AmplifyAuthenticatorComponent;
+        return AuthenticatorComponent;
     }());
-    AmplifyAuthenticatorComponent.decorators = [
+    AuthenticatorComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
-    AmplifyAuthenticatorComponent.ctorParameters = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    AuthenticatorComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService },
+        { type: CustomComponentsService }
     ]; };
-    AmplifyAuthenticatorComponent.propDecorators = {
+    AuthenticatorComponent.propDecorators = {
         initialState: [{ type: i0.Input }],
         loginMechanisms: [{ type: i0.Input }],
+        services: [{ type: i0.Input }],
+        signUpAttributes: [{ type: i0.Input }],
+        socialProviders: [{ type: i0.Input }],
+        variation: [{ type: i0.Input }],
         customComponentQuery: [{ type: i0.ContentChildren, args: [AmplifySlotDirective,] }]
     };
 
-    var logger$3 = new awsAmplify.Logger('ConfirmSignIn');
-    var AmplifyConfirmSignInComponent = /** @class */ (function () {
-        function AmplifyConfirmSignInComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
+    var ConfirmResetPasswordComponent = /** @class */ (function () {
+        function ConfirmResetPasswordComponent(authenticator) {
+            this.authenticator = authenticator;
             this.dataAttr = '';
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
-            this.confirmText = ui.translate('Confirm');
+            this.headerText = ui.translate('Reset your password');
+            // translated strings
+            this.sendCodeText = ui.translate('Send Code');
             this.backToSignInText = ui.translate('Back to Sign In');
+            this.resendCodeText = ui.translate('Resend Code');
         }
-        AmplifyConfirmSignInComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) {
-                _this.onStateUpdate(state);
-            });
-            this.setHeaderText();
+        Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyConfirmSignInComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
+        ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm();
         };
-        AmplifyConfirmSignInComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
+        return ConfirmResetPasswordComponent;
+    }());
+    ConfirmResetPasswordComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: AuthenticatorService }
+    ]; };
+    ConfirmResetPasswordComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var logger$1 = new awsAmplify.Logger('ConfirmSignIn');
+    var ConfirmSignInComponent = /** @class */ (function () {
+        function ConfirmSignInComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.confirmText = ui.translate('Confirm');
+            this.backToSignInText = ui.translate('Back to Sign In');
+        }
+        ConfirmSignInComponent.prototype.ngOnInit = function () {
+            this.setHeaderText();
         };
-        Object.defineProperty(AmplifyConfirmSignInComponent.prototype, "context", {
+        Object.defineProperty(ConfirmSignInComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
-                var remoteError = this.remoteError;
-                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifyConfirmSignInComponent.prototype.setHeaderText = function () {
-            var state = this.stateMachine.authState;
+        ConfirmSignInComponent.prototype.setHeaderText = function () {
+            var state = this.authenticator.authState;
             var actorContext = ui.getActorContext(state);
             var challengeName = actorContext.challengeName;
             switch (challengeName) {
                 case ui.AuthChallengeNames.SOFTWARE_TOKEN_MFA:
-                    // TODO: this string should be centralized and translated from ui.
                     this.headerText = ui.translate('Confirm TOTP Code');
                     break;
                 case ui.AuthChallengeNames.SMS_MFA:
                     this.headerText = ui.translate('Confirm SMS Code');
                     break;
                 default:
-                    logger$3.error('Unexpected challengeName', challengeName);
+                    logger$1.error('Unexpected challengeName', challengeName);
             }
         };
-        AmplifyConfirmSignInComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('confirmSignIn.edit');
-        };
-        AmplifyConfirmSignInComponent.prototype.onInput = function (event) {
+        ConfirmSignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
             var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyConfirmSignInComponent.prototype.onSubmit = function (event) {
+        ConfirmSignInComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            // TODO: handle form data within the state machine
-            var formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
+            this.authenticator.submitForm();
         };
-        AmplifyConfirmSignInComponent.prototype.toSignIn = function () {
-            this.stateMachine.send('SIGN_IN');
-        };
-        return AmplifyConfirmSignInComponent;
+        return ConfirmSignInComponent;
     }());
-    AmplifyConfirmSignInComponent.decorators = [
+    ConfirmSignInComponent.decorators = [
         { type: i0.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        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignInButton || confirmSignInButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    ConfirmSignInComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyConfirmSignInComponent.propDecorators = {
+    ConfirmSignInComponent.propDecorators = {
         dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
     };
 
-    var AmplifyConfirmSignUpComponent = /** @class */ (function () {
-        function AmplifyConfirmSignUpComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
-            this.dataAttr = '';
+    var ConfirmSignUpComponent = /** @class */ (function () {
+        function ConfirmSignUpComponent(authenticator) {
+            this.authenticator = authenticator;
             this.headerText = ui.translate('Confirm Sign Up');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
+            this.dataAttr = '';
             // translated texts
             this.resendCodeText = ui.translate('Resend Code');
-            this.lostCodeText = ui.translate('Lost your code? ');
             this.confirmText = ui.translate('Confirm');
         }
-        AmplifyConfirmSignUpComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            // TODO: alias for subscribe
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        AmplifyConfirmSignUpComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifyConfirmSignUpComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
+        Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmSignUpComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyConfirmSignUpComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('confirmSignUp.edit');
+        ConfirmSignUpComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm();
         };
-        Object.defineProperty(AmplifyConfirmSignUpComponent.prototype, "context", {
+        return ConfirmSignUpComponent;
+    }());
+    ConfirmSignUpComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: AuthenticatorService }
+    ]; };
+    ConfirmSignUpComponent.propDecorators = {
+        headerText: [{ type: i0.Input }],
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
+    };
+
+    var ConfirmVerifyUserComponent = /** @class */ (function () {
+        function ConfirmVerifyUserComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Account recovery requires verified contact information');
+            // translated texts
+            this.skipText = ui.translate('Skip');
+            this.submitText = ui.translate('Submit');
+        }
+        Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, resend = _a.resend, signIn = _a.signIn, submit = _a.submit;
-                var remoteError = this.remoteError;
-                var username = this.username;
-                return { change: change, remoteError: remoteError, resend: resend, signIn: signIn, submit: submit, username: username };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifyConfirmSignUpComponent.prototype.resend = function () {
-            this.stateMachine.send({
-                type: 'RESEND',
-                data: {
-                    username: this.username,
-                },
-            });
-        };
-        AmplifyConfirmSignUpComponent.prototype.onInput = function ($event) {
-            $event.preventDefault();
-            var _a = $event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+        ConfirmVerifyUserComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyConfirmSignUpComponent.prototype.onSubmit = function (event) {
+        ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            var state = this.stateMachine.authState;
-            var actorContext = ui.getActorContext(state);
-            var formValues = actorContext.formValues;
-            var username = formValues.username, confirmation_code = formValues.confirmation_code;
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: { username: username, confirmation_code: confirmation_code },
-            });
+            this.authenticator.submitForm();
         };
-        return AmplifyConfirmSignUpComponent;
+        return ConfirmVerifyUserComponent;
     }());
-    AmplifyConfirmSignUpComponent.decorators = [
+    ConfirmVerifyUserComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    ConfirmVerifyUserComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyConfirmSignUpComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+    ConfirmVerifyUserComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
         headerText: [{ type: i0.Input }]
     };
 
-    var AmplifyFederatedSignInButtonComponent = /** @class */ (function () {
-        function AmplifyFederatedSignInButtonComponent(stateMachine) {
+    var FederatedSignInButtonComponent = /** @class */ (function () {
+        function FederatedSignInButtonComponent(authenticator) {
             var _this = this;
-            this.stateMachine = stateMachine;
+            this.authenticator = authenticator;
             this.onClick = function () {
-                _this.stateMachine.send({
+                _this.authenticator.send({
                     type: 'FEDERATED_SIGN_IN',
                     data: { provider: _this.provider },
                 });
             };
         }
-        return AmplifyFederatedSignInButtonComponent;
+        return FederatedSignInButtonComponent;
     }());
-    AmplifyFederatedSignInButtonComponent.decorators = [
+    FederatedSignInButtonComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService }
+    FederatedSignInButtonComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyFederatedSignInButtonComponent.propDecorators = {
+    FederatedSignInButtonComponent.propDecorators = {
         provider: [{ type: i0.Input }],
         text: [{ type: i0.Input }]
     };
 
-    var AmplifyFederatedSignInComponent = /** @class */ (function () {
-        function AmplifyFederatedSignInComponent(stateMachine) {
-            this.stateMachine = stateMachine;
+    var FederatedSignInComponent = /** @class */ (function () {
+        function FederatedSignInComponent(authenticator) {
+            this.authenticator = authenticator;
             this.FederatedProviders = ui.FederatedIdentityProviders;
+            this.includeAmazon = false;
+            this.includeApple = false;
             this.includeFacebook = false;
             this.includeGoogle = false;
-            this.includeAmazon = false;
             this.shouldShowFederatedSignIn = false;
-            // translated texts
-            this.signInFacebookText = ui.translate('Sign In with Facebook');
-            this.signInGoogleText = ui.translate('Sign In with Google');
-            this.signInAmazonText = ui.translate('Sign In with Amazon');
         }
-        AmplifyFederatedSignInComponent.prototype.ngOnInit = function () {
-            var _a, _b;
-            var 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');
+        FederatedSignInComponent.prototype.ngOnInit = function () {
+            var _a;
+            var socialProviders = ((_a = this.authenticator.context) === null || _a === void 0 ? void 0 : _a.config).socialProviders;
+            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;
         };
-        return AmplifyFederatedSignInComponent;
+        FederatedSignInComponent.prototype.setFederatedTexts = function () {
+            var route = this.authenticator.route;
+            var federatedText = route === 'signUp' ? 'Up' : 'In';
+            this.signInAmazonText = ui.translate("Sign " + federatedText + " with Amazon");
+            this.signInAppleText = ui.translate("Sign " + federatedText + " with Apple");
+            this.signInFacebookText = ui.translate("Sign " + federatedText + " with Facebook");
+            this.signInGoogleText = ui.translate("Sign " + federatedText + " with Google");
+        };
+        return FederatedSignInComponent;
     }());
-    AmplifyFederatedSignInComponent.decorators = [
+    FederatedSignInComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService }
+    FederatedSignInComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
 
-    var logger$2 = new awsAmplify.Logger('ForceNewPassword');
-    var AmplifyForceNewPasswordComponent = /** @class */ (function () {
-        function AmplifyForceNewPasswordComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
+    var ForceNewPasswordComponent = /** @class */ (function () {
+        function ForceNewPasswordComponent(authenticator) {
+            this.authenticator = authenticator;
             this.dataAttr = '';
             this.headerText = ui.translate('Change Password');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
             // translated texts
             this.changePasswordText = ui.translate('Change Password');
             this.backToSignInText = ui.translate('Back to Sign In');
         }
-        AmplifyForceNewPasswordComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        AmplifyForceNewPasswordComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifyForceNewPasswordComponent.prototype.ngOnDestroy = function () {
-            logger$2.log('sign in destroyed, unsubscribing from state machine...');
-            this.authSubscription.unsubscribe();
-        };
-        AmplifyForceNewPasswordComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = actorState.matches({
-                signUp: {
-                    submission: 'idle',
-                },
-            });
-        };
-        Object.defineProperty(AmplifyForceNewPasswordComponent.prototype, "context", {
+        Object.defineProperty(ForceNewPasswordComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
-                var user = this.stateMachine.user;
-                var remoteError = this.remoteError;
-                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit, user: user };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifyForceNewPasswordComponent.prototype.toSignIn = function () {
-            this.stateMachine.send('SIGN_IN');
-        };
-        AmplifyForceNewPasswordComponent.prototype.onInput = function (event) {
+        ForceNewPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
             var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyForceNewPasswordComponent.prototype.onSubmit = function (event) {
+        ForceNewPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            // consider stateMachine directly providing actorState / actorContext
-            var state = this.stateMachine.authState;
-            var actorState = ui.getActorContext(state);
-            var formValues = actorState.formValues;
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: formValues,
-            });
+            this.authenticator.submitForm();
         };
-        return AmplifyForceNewPasswordComponent;
+        return ForceNewPasswordComponent;
     }());
-    AmplifyForceNewPasswordComponent.decorators = [
+    ForceNewPasswordComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    ForceNewPasswordComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyForceNewPasswordComponent.propDecorators = {
+    ForceNewPasswordComponent.propDecorators = {
         dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
         headerText: [{ type: i0.Input }]
     };
 
-    var AmplifyResetPasswordComponent = /** @class */ (function () {
-        function AmplifyResetPasswordComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Reset your password');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
-            // translated texts
-            this.sendCodeText = ui.translate('Send Code');
-            this.backToSignInText = ui.translate('Back to Sign In');
+    var getAttributeMap = function () { return ui.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.
+     */
+    var FormFieldComponent = /** @class */ (function () {
+        function FormFieldComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.required = true;
+            this.placeholder = '';
+            this.label = '';
+            this.initialValue = '';
+            this.disabled = false;
+            this.autocomplete = '';
+            this.labelHidden = true;
+            this.countryDialCodes = ui.countryDialCodes;
         }
-        AmplifyResetPasswordComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        AmplifyResetPasswordComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifyResetPasswordComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
-        };
-        AmplifyResetPasswordComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('resetPassword.edit');
+        FormFieldComponent.prototype.ngOnInit = function () {
+            // TODO: consider better default handling mechanisms across frameworks
+            if (this.isPhoneField()) {
+                var state = this.authenticator.authState;
+                var country_code = ui.getActorContext(state).country_code;
+                this.defaultCountryCode = country_code;
+                // TODO: remove this side-effect
+                this.authenticator.updateForm({
+                    name: 'country_code',
+                    value: country_code,
+                });
+            }
         };
-        Object.defineProperty(AmplifyResetPasswordComponent.prototype, "context", {
+        Object.defineProperty(FormFieldComponent.prototype, "attributeMap", {
+            get: function () {
+                return getAttributeMap();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FormFieldComponent.prototype, "error", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
-                var remoteError = this.remoteError;
-                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit };
+                var formContext = ui.getActorContext(this.authenticator.authState);
+                var validationError = formContext.validationError;
+                return validationError[this.name];
             },
             enumerable: false,
             configurable: true
         });
-        AmplifyResetPasswordComponent.prototype.toSignIn = function () {
-            this.stateMachine.send('SIGN_IN');
+        FormFieldComponent.prototype.onBlur = function ($event) {
+            var name = $event.target.name;
+            this.authenticator.updateBlur({ name: name });
         };
-        AmplifyResetPasswordComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+        FormFieldComponent.prototype.inferLabel = function () {
+            var _a;
+            var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+            return ui.translate(label);
+        };
+        FormFieldComponent.prototype.inferPlaceholder = function () {
+            var _a;
+            var placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+                this.inferLabel();
+            return ui.translate(placeholder);
+        };
+        // infers what the `type` of underlying input element should be.
+        FormFieldComponent.prototype.inferType = function () {
+            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';
+        };
+        FormFieldComponent.prototype.inferAutocomplete = function () {
+            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
+        FormFieldComponent.prototype.isPasswordField = function () {
+            return this.inferType() === 'password';
+        };
+        FormFieldComponent.prototype.isPhoneField = function () {
+            return this.inferType() === 'tel';
+        };
+        return FormFieldComponent;
+    }());
+    FormFieldComponent.decorators = [
+        { type: i0.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    (setBlur)=\"onBlur($event)\"\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 = function () { return [
+        { type: AuthenticatorService }
+    ]; };
+    FormFieldComponent.propDecorators = {
+        name: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        labelHidden: [{ type: i0.Input }]
+    };
+
+    var ResetPasswordComponent = /** @class */ (function () {
+        function ResetPasswordComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Reset your password');
+            // translated texts
+            this.sendCodeText = ui.translate('Send Code');
+            this.backToSignInText = ui.translate('Back to Sign In');
+            this.labelText = ui.translate('Username');
+        }
+        ResetPasswordComponent.prototype.ngOnInit = function () {
+            var authState = this.authenticator.authState;
+            var label = ui.getAliasInfoFromContext(authState.context).label;
+            this.labelText = "Enter your " + label.toLowerCase();
+        };
+        Object.defineProperty(ResetPasswordComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifyResetPasswordComponent.prototype.onSubmit = function (event) {
+        ResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.stateMachine.send('SUBMIT');
+            this.authenticator.submitForm();
         };
-        return AmplifyResetPasswordComponent;
+        return ResetPasswordComponent;
     }());
-    AmplifyResetPasswordComponent.decorators = [
+    ResetPasswordComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    ResetPasswordComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyResetPasswordComponent.propDecorators = {
+    ResetPasswordComponent.propDecorators = {
         dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
         headerText: [{ type: i0.Input }]
     };
@@ -961,531 +1147,283 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var logger$1 = new awsAmplify.Logger('SetupTotp');
-    var AmplifySetupTotpComponent = /** @class */ (function () {
-        function AmplifySetupTotpComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
+    var logger = new awsAmplify.Logger('SetupTotp');
+    var SetupTotpComponent = /** @class */ (function () {
+        function SetupTotpComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
             this.headerText = ui.translate('Setup TOTP');
             this.qrCodeSource = '';
             // translated texts
             this.backToSignInText = ui.translate('Back to Sign In');
             this.confirmText = ui.translate('Confirm');
         }
-        AmplifySetupTotpComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) {
-                _this.onStateUpdate(state);
-            });
+        SetupTotpComponent.prototype.ngOnInit = function () {
             this.generateQRCode();
         };
-        AmplifySetupTotpComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifySetupTotpComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
-        };
-        AmplifySetupTotpComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('setupTOTP.edit');
-        };
-        Object.defineProperty(AmplifySetupTotpComponent.prototype, "context", {
+        Object.defineProperty(SetupTotpComponent.prototype, "context", {
             get: function () {
-                var _b = this.stateMachine.services, change = _b.change, submit = _b.submit;
-                var remoteError = this.remoteError;
-                var user = this.stateMachine.user;
-                return { change: change, remoteError: remoteError, submit: submit, user: user };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifySetupTotpComponent.prototype.generateQRCode = function () {
-            var _a;
+        SetupTotpComponent.prototype.generateQRCode = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var state, actorContext, user, secretKey, issuer, totpCode, _b, err_1;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var state, actorContext, user, secretKey, issuer, totpCode, _a, err_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            state = this.stateMachine.authState;
+                            state = this.authenticator.authState;
                             actorContext = ui.getActorContext(state);
                             user = actorContext.user;
-                            _c.label = 1;
+                            _b.label = 1;
                         case 1:
-                            _c.trys.push([1, 4, , 5]);
+                            _b.trys.push([1, 4, , 5]);
                             return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
                         case 2:
-                            secretKey = _c.sent();
+                            secretKey = _b.sent();
                             issuer = 'AWSCognito';
                             totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + secretKey + "&issuer=" + issuer;
-                            logger$1.info('totp code was generated:', totpCode);
-                            _b = this;
+                            logger.info('totp code was generated:', totpCode);
+                            _a = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
                         case 3:
-                            _b.qrCodeSource = _c.sent();
+                            _a.qrCodeSource = _b.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _c.sent();
-                            this.remoteError = (_a = err_1.message) !== null && _a !== void 0 ? _a : err_1;
-                            logger$1.error(err_1);
+                            err_1 = _b.sent();
+                            logger.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
                     }
                 });
             });
         };
-        AmplifySetupTotpComponent.prototype.onInput = function (event) {
+        SetupTotpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _b = event.target, name = _b.name, value = _b.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifySetupTotpComponent.prototype.onSubmit = function (event) {
+        SetupTotpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            // TODO: handle form data within the state machine
-            var formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
+            this.authenticator.submitForm();
         };
-        AmplifySetupTotpComponent.prototype.toSignIn = function () {
-            this.stateMachine.send('SIGN_IN');
-        };
-        return AmplifySetupTotpComponent;
+        return SetupTotpComponent;
     }());
-    AmplifySetupTotpComponent.decorators = [
+    SetupTotpComponent.decorators = [
         { type: i0.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\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\n      />\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.setupTotpButton || setupTotpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    SetupTotpComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifySetupTotpComponent.propDecorators = {
-        customComponents: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+    SetupTotpComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
     };
 
-    var logger = new awsAmplify.Logger('SignIn');
-    var AmplifySignInComponent = /** @class */ (function () {
-        function AmplifySignInComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
+    var SignInComponent = /** @class */ (function () {
+        function SignInComponent(authenticator) {
+            this.authenticator = authenticator;
             this.dataAttr = '';
-            this.headerText = ui.translate('Sign in to your account');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
             // translated phrases
             this.forgotPasswordText = ui.translate('Forgot your password? ');
             this.signInButtonText = ui.translate('Sign in');
-            this.noAccountText = ui.translate('No account? ');
         }
-        AmplifySignInComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        AmplifySignInComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifySignInComponent.prototype.ngOnDestroy = function () {
-            logger.log('sign in destroyed, unsubscribing from state machine...');
-            this.authSubscription.unsubscribe();
-        };
-        AmplifySignInComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('signIn.edit');
-        };
-        Object.defineProperty(AmplifySignInComponent.prototype, "context", {
+        Object.defineProperty(SignInComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, resetPassword = _a.resetPassword, signUp = _a.signUp, submit = _a.submit;
-                var remoteError = this.remoteError;
-                return { change: change, remoteError: remoteError, resetPassword: resetPassword, signUp: signUp, submit: submit };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifySignInComponent.prototype.toResetPassword = function () {
-            this.stateMachine.send('RESET_PASSWORD');
-        };
-        AmplifySignInComponent.prototype.onInput = function (event) {
+        SignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
             var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifySignInComponent.prototype.onSubmit = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    event.preventDefault();
-                    this.stateMachine.send({
-                        type: 'SUBMIT',
-                    });
-                    return [2 /*return*/];
-                });
-            });
+        SignInComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm();
         };
-        return AmplifySignInComponent;
+        return SignInComponent;
     }());
-    AmplifySignInComponent.decorators = [
+    SignInComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
-    AmplifySignInComponent.ctorParameters = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    SignInComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifySignInComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
-        headerText: [{ type: i0.Input }]
+    SignInComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signin',] }]
     };
 
-    var AmplifySignUpComponent = /** @class */ (function () {
-        function AmplifySignUpComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
+    var SignUpComponent = /** @class */ (function () {
+        function SignUpComponent(authenticator) {
+            this.authenticator = authenticator;
             this.dataAttr = '';
-            this.headerText = ui.translate('Create a new account');
-            this.remoteError = '';
-            this.isPending = false;
-            this.primaryAlias = '';
-            this.secondaryAliases = [];
-            this.validationError = {};
             // translated texts
             this.createAccountText = ui.translate('Create Account');
         }
-        Object.defineProperty(AmplifySignUpComponent.prototype, "context", {
+        Object.defineProperty(SignUpComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
-                var remoteError = this.remoteError;
-                var validationError = this.validationError;
-                return {
-                    change: change,
-                    remoteError: remoteError,
-                    signIn: signIn,
-                    submit: submit,
-                    validationError: validationError,
-                };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        AmplifySignUpComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-            var context = this.stateMachine.context;
-            var _a = ui.getConfiguredAliases(context), primaryAlias = _a.primaryAlias, secondaryAliases = _a.secondaryAliases;
-            /**
-             * 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' && lodash.isEmpty(secondaryAliases)) {
-                secondaryAliases.push('email', 'phone_number');
-            }
-            this.primaryAlias = primaryAlias;
-            this.secondaryAliases = secondaryAliases;
-        };
-        AmplifySignUpComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifySignUpComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
+        SignUpComponent.prototype.onInput = function (event) {
+            var _a = event.target, checked = _a.checked, name = _a.name, type = _a.type, value = _a.value;
+            if (type === 'checkbox' && !checked)
+                value = undefined;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        AmplifySignUpComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            var actorContext = ui.getActorContext(state);
-            this.remoteError = actorContext.remoteError;
-            this.validationError = actorContext.validationError;
-            this.isPending = !actorState.matches({
-                signUp: {
-                    submission: 'idle',
-                },
-            });
-        };
-        AmplifySignUpComponent.prototype.onSubmit = function ($event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    $event.preventDefault();
-                    this.stateMachine.send('SUBMIT');
-                    return [2 /*return*/];
-                });
-            });
-        };
-        AmplifySignUpComponent.prototype.onInput = function (event) {
+        SignUpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
+            this.authenticator.submitForm();
         };
-        return AmplifySignUpComponent;
+        return SignUpComponent;
     }());
-    AmplifySignUpComponent.decorators = [
+    SignUpComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    SignUpComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifySignUpComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
-        headerText: [{ type: i0.Input }]
+    SignUpComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signup',] }]
     };
 
-    var getAttributeMap = function () { return ui.authInputAttributes; };
-
-    var AmplifyVerifyUserComponent = /** @class */ (function () {
-        function AmplifyVerifyUserComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Account recovery requires verified contact information');
-            this.customComponents = {};
-            this.unverifiedAttributes = {};
-            this.remoteError = '';
-            this.isPending = false;
-            this.labelId = nanoid.nanoid(12);
-            // translated texts
-            this.skipText = ui.translate('Skip');
-            this.verifyText = ui.translate('Verify');
+    var SignUpFormFieldsComponent = /** @class */ (function () {
+        function SignUpFormFieldsComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.primaryAlias = '';
+            this.secondaryAliases = [];
         }
-        AmplifyVerifyUserComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        AmplifyVerifyUserComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        AmplifyVerifyUserComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
-        };
-        AmplifyVerifyUserComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.unverifiedAttributes = actorState.context.unverifiedAttributes;
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('verifyUser.edit');
-        };
-        Object.defineProperty(AmplifyVerifyUserComponent.prototype, "context", {
-            get: function () {
-                var _b = this.stateMachine.services, change = _b.change, skip = _b.skip, submit = _b.submit;
-                var remoteError = this.remoteError;
-                return { change: change, remoteError: remoteError, skip: skip, submit: submit };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AmplifyVerifyUserComponent.prototype.skipVerify = function () {
-            this.stateMachine.send('SKIP');
-        };
-        AmplifyVerifyUserComponent.prototype.getLabelForAttr = function (authAttr) {
-            var _a;
-            var attributeMap = getAttributeMap();
-            var label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
-            return ui.translate(label);
-        };
-        AmplifyVerifyUserComponent.prototype.onSubmit = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var formData;
-                return __generator(this, function (_b) {
-                    event.preventDefault();
-                    formData = new FormData(event.target);
-                    this.stateMachine.send({
-                        type: 'SUBMIT',
-                        data: Object.fromEntries(formData),
-                    });
-                    return [2 /*return*/];
-                });
+        SignUpFormFieldsComponent.prototype.ngOnInit = function () {
+            var context = this.authenticator.context;
+            var _a = context.config, loginMechanisms = _a.loginMechanisms, signUpAttributes = _a.signUpAttributes;
+            this.fieldNames = Array.from(new Set(__spread(loginMechanisms, signUpAttributes)));
+            this.fieldNames = this.fieldNames.filter(function (fieldName) {
+                var hasDefaultField = !!ui.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();
         };
-        return AmplifyVerifyUserComponent;
+        return SignUpFormFieldsComponent;
     }());
-    AmplifyVerifyUserComponent.decorators = [
+    SignUpFormFieldsComponent.decorators = [
         { type: i0.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: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    SignUpFormFieldsComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    AmplifyVerifyUserComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
-        headerText: [{ type: i0.Input }]
-    };
 
-    var ConfirmResetPasswordComponent = /** @class */ (function () {
-        function ConfirmResetPasswordComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Reset your password');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
-            // translated strings
-            this.sendCodeText = ui.translate('Send Code');
-            this.backToSignInText = ui.translate('Back to Sign In');
-            this.lostCodeText = ui.translate('Lost your code? ');
-            this.resendCodeText = ui.translate('Resend Code');
+    var UserNameAliasComponent = /** @class */ (function () {
+        function UserNameAliasComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.name = 'username';
+            this.disabled = false;
+            this.initialValue = '';
+            this.required = true;
         }
-        ConfirmResetPasswordComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        ConfirmResetPasswordComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        ConfirmResetPasswordComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
-        };
-        ConfirmResetPasswordComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('confirmResetPassword.edit');
-        };
-        Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
-            get: function () {
-                var _a = this.stateMachine.services, change = _a.change, resend = _a.resend, signIn = _a.signIn, submit = _a.submit;
-                var remoteError = this.remoteError;
-                return { change: change, resend: resend, remoteError: remoteError, signIn: signIn, submit: submit };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmResetPasswordComponent.prototype.toSignIn = function () {
-            this.stateMachine.send('SIGN_IN');
-        };
-        ConfirmResetPasswordComponent.prototype.resend = function () {
-            this.stateMachine.send('RESEND');
-        };
-        ConfirmResetPasswordComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: name, value: value },
-            });
-        };
-        ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    event.preventDefault();
-                    this.stateMachine.send('SUBMIT');
-                    return [2 /*return*/];
-                });
-            });
+        UserNameAliasComponent.prototype.ngOnInit = function () {
+            var context = this.authenticator.context;
+            var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
+            this.label = label;
+            this.type = type;
+            this.placeholder = label;
         };
-        return ConfirmResetPasswordComponent;
+        return UserNameAliasComponent;
     }());
-    ConfirmResetPasswordComponent.decorators = [
+    UserNameAliasComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    UserNameAliasComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    ConfirmResetPasswordComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
-        headerText: [{ type: i0.Input }]
+    UserNameAliasComponent.propDecorators = {
+        name: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        required: [{ type: i0.Input }]
     };
 
-    var ConfirmVerifyUserComponent = /** @class */ (function () {
-        function ConfirmVerifyUserComponent(stateMachine, contextService) {
-            this.stateMachine = stateMachine;
-            this.contextService = contextService;
+    var VerifyUserComponent = /** @class */ (function () {
+        function VerifyUserComponent(authenticator) {
+            this.authenticator = authenticator;
             this.dataAttr = '';
             this.headerText = ui.translate('Account recovery requires verified contact information');
-            this.customComponents = {};
-            this.remoteError = '';
-            this.isPending = false;
+            this.unverifiedAttributes = {};
+            this.labelId = nanoid.nanoid(12);
             // translated texts
             this.skipText = ui.translate('Skip');
-            this.submitText = ui.translate('Submit');
+            this.verifyText = ui.translate('Verify');
         }
-        ConfirmVerifyUserComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
-        };
-        ConfirmVerifyUserComponent.prototype.ngAfterContentInit = function () {
-            this.customComponents = this.contextService.customComponents;
-        };
-        ConfirmVerifyUserComponent.prototype.ngOnDestroy = function () {
-            this.authSubscription.unsubscribe();
-        };
-        ConfirmVerifyUserComponent.prototype.onStateUpdate = function (state) {
-            var actorState = ui.getActorState(state);
-            this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('confirmVerifyUser.edit');
+        VerifyUserComponent.prototype.ngOnInit = function () {
+            var actorState = ui.getActorState(this.authenticator.authState);
+            this.unverifiedAttributes = actorState.context.unverifiedAttributes;
         };
-        Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
+        Object.defineProperty(VerifyUserComponent.prototype, "context", {
             get: function () {
-                var _a = this.stateMachine.services, skip = _a.skip, submit = _a.submit;
-                var remoteError = this.remoteError;
-                return { remoteError: remoteError, skip: skip, submit: submit };
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        ConfirmVerifyUserComponent.prototype.skipVerify = function () {
-            this.stateMachine.send('SKIP');
+        VerifyUserComponent.prototype.getLabelForAttr = function (authAttr) {
+            var _a;
+            var attributeMap = getAttributeMap();
+            var label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+            return ui.translate(label);
         };
-        ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var formData;
-                return __generator(this, function (_a) {
-                    event.preventDefault();
-                    formData = new FormData(event.target);
-                    this.stateMachine.send({
-                        type: 'SUBMIT',
-                        data: Object.fromEntries(formData),
-                    });
-                    return [2 /*return*/];
-                });
-            });
+        VerifyUserComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _b = event.target, name = _b.name, value = _b.value;
+            this.authenticator.updateForm({ name: name, value: value });
         };
-        return ConfirmVerifyUserComponent;
+        VerifyUserComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm();
+        };
+        return VerifyUserComponent;
     }());
-    ConfirmVerifyUserComponent.decorators = [
+    VerifyUserComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
-    ConfirmVerifyUserComponent.ctorParameters = function () { return [
-        { type: StateMachineService },
-        { type: AuthPropService }
+    VerifyUserComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
     ]; };
-    ConfirmVerifyUserComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+    VerifyUserComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
         headerText: [{ type: i0.Input }]
     };
 
-    var AmplifyButtonComponent = /** @class */ (function () {
-        function AmplifyButtonComponent() {
+    var ButtonComponent = /** @class */ (function () {
+        function ButtonComponent() {
             this.type = 'button';
             this.fullWidth = false;
             this.size = 'medium';
@@ -1493,22 +1431,22 @@
             this.fontWeight = 'normal';
             this.defaultClass = true;
         }
-        AmplifyButtonComponent.prototype.ngOnInit = function () {
+        ButtonComponent.prototype.ngOnInit = function () {
             this.typeAttr = this.type;
             this.fullWidthAttr = this.fullWidth;
             this.sizeAttr = this.size;
             this.variationAttr = this.variation;
             this.fontWeightAttr = this.fontWeight;
         };
-        return AmplifyButtonComponent;
+        return ButtonComponent;
     }());
-    AmplifyButtonComponent.decorators = [
+    ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'button[amplify-button]',
                     template: "<ng-content></ng-content>\n"
                 },] }
     ];
-    AmplifyButtonComponent.propDecorators = {
+    ButtonComponent.propDecorators = {
         type: [{ type: i0.Input }],
         fullWidth: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
@@ -1522,163 +1460,146 @@
         fontWeightAttr: [{ type: i0.HostBinding, args: ['style.font-weight',] }]
     };
 
-    var AmplifyErrorComponent = /** @class */ (function () {
-        function AmplifyErrorComponent() {
+    var CheckboxComponent = /** @class */ (function () {
+        function CheckboxComponent() {
+            this.defaultChecked = false;
+            this.hasError = false;
+            this.isChecked = false;
+        }
+        CheckboxComponent.prototype.ngOnInit = function () {
+            if (this.defaultChecked) {
+                this.isChecked = true;
+            }
+        };
+        CheckboxComponent.prototype.handleClick = function () {
+            this.isChecked = !this.isChecked;
+        };
+        return CheckboxComponent;
+    }());
+    CheckboxComponent.decorators = [
+        { type: i0.Component, args: [{
+                    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"
+                },] }
+    ];
+    CheckboxComponent.propDecorators = {
+        defaultChecked: [{ type: i0.Input }],
+        errorMessage: [{ type: i0.Input }],
+        hasError: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        value: [{ type: i0.Input }]
+    };
+
+    var ErrorComponent = /** @class */ (function () {
+        function ErrorComponent() {
+            this.isVisible = true;
         }
-        return AmplifyErrorComponent;
+        ErrorComponent.prototype.close = function () {
+            this.isVisible = false;
+        };
+        return ErrorComponent;
     }());
-    AmplifyErrorComponent.decorators = [
+    ErrorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-error',
-                    template: "<span data-ui-error>\n  <ng-content></ng-content>\n</span>\n"
+                    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"
                 },] }
     ];
 
-    /**
-     * 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.
-     */
-    var AmplifyFormFieldComponent = /** @class */ (function () {
-        function AmplifyFormFieldComponent(stateMachine) {
-            this.stateMachine = stateMachine;
-            this.required = true;
-            this.placeholder = '';
-            this.label = '';
-            this.initialValue = '';
+    var PasswordFieldComponent = /** @class */ (function () {
+        function PasswordFieldComponent() {
+            this.autocomplete = 'new-password';
             this.disabled = false;
-            this.autocomplete = '';
-            this.countryDialCodes = ui.countryDialCodes;
+            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.labelHidden = false;
+            this.setBlur = new i0.EventEmitter();
+            this.type = 'password';
+            this.showPassword = false;
+            this.showPasswordButtonlabel = ui.translate('Show password');
         }
-        AmplifyFormFieldComponent.prototype.ngOnInit = function () {
-            // TODO: field primtiives should have generate these by default.
-            this.textFieldId = "amplify-field-" + nanoid.nanoid(12);
-            this.selectFieldId = "amplify-field-" + nanoid.nanoid(12);
-            // TODO: consider better default handling mechanisms across frameworks
-            if (this.isPhoneField()) {
-                var state = this.stateMachine.authState;
-                var country_code = ui.getActorContext(state).country_code;
-                this.defaultCountryCode = country_code;
-                // TODO: remove this side-effect
-                this.stateMachine.send({
-                    type: 'CHANGE',
-                    data: { name: 'country_code', value: country_code },
-                });
-            }
-        };
-        Object.defineProperty(AmplifyFormFieldComponent.prototype, "attributeMap", {
-            get: function () {
-                return getAttributeMap();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AmplifyFormFieldComponent.prototype, "error", {
-            get: function () {
-                var formContext = ui.getActorContext(this.stateMachine.authState);
-                var validationError = formContext.validationError;
-                return validationError[this.name];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AmplifyFormFieldComponent.prototype.inferLabel = function () {
-            var _a;
-            var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
-            return ui.translate(label);
-        };
-        AmplifyFormFieldComponent.prototype.inferPlaceholder = function () {
-            var _a;
-            var placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-                this.inferLabel();
-            return ui.translate(placeholder);
-        };
-        // infers what the `type` of underlying input element should be.
-        AmplifyFormFieldComponent.prototype.inferType = function () {
-            var _a, _b, _c;
-            return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
-        };
-        // TODO(enhancement): use enum to differentiate special field types
-        AmplifyFormFieldComponent.prototype.isPasswordField = function () {
-            return this.inferType() === 'password';
-        };
-        AmplifyFormFieldComponent.prototype.isPhoneField = function () {
-            return this.inferType() === 'tel';
+        PasswordFieldComponent.prototype.togglePasswordText = function () {
+            this.showPassword = !this.showPassword;
+            this.showPasswordButtonlabel = this.showPassword
+                ? ui.translate('Show password')
+                : ui.translate('Hide password');
+            this.type = this.showPassword ? 'text' : 'password';
         };
-        return AmplifyFormFieldComponent;
+        return PasswordFieldComponent;
     }());
-    AmplifyFormFieldComponent.decorators = [
+    PasswordFieldComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'amplify-form-field',
-                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column; gap: 0\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [selectFieldId]=\"selectFieldId\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [textFieldId]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [id]=\"textFieldId\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [id]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+                    selector: 'amplify-password-field',
+                    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    (blur)=\"setBlur.emit($event)\"\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"
                 },] }
     ];
-    AmplifyFormFieldComponent.ctorParameters = function () { return [
-        { type: StateMachineService }
-    ]; };
-    AmplifyFormFieldComponent.propDecorators = {
+    PasswordFieldComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        fieldId: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
-        type: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        autocomplete: [{ type: i0.Input }]
+        required: [{ type: i0.Input }],
+        labelHidden: [{ type: i0.Input }],
+        setBlur: [{ type: i0.Output }]
     };
 
-    var AmplifyPasswordFieldComponent = /** @class */ (function () {
-        function AmplifyPasswordFieldComponent() {
+    var PhoneNumberFieldComponent = /** @class */ (function () {
+        function PhoneNumberFieldComponent() {
             this.autocomplete = 'new-password';
             this.disabled = false;
+            this.selectFieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.textFieldId = "amplify-field-" + nanoid.nanoid(12);
             this.initialValue = '';
             this.label = '';
             this.placeholder = '';
             this.required = true;
-            this.type = 'password';
-            this.showPassword = false;
-            this.showPasswordButtonlabel = ui.translate('Show password');
+            this.labelHidden = false;
+            this.display = 'contents';
+            this.countryDialCodes = ui.countryDialCodes;
         }
-        AmplifyPasswordFieldComponent.prototype.togglePasswordText = function () {
-            this.showPassword = !this.showPassword;
-            this.showPasswordButtonlabel = this.showPassword
-                ? ui.translate('Show password')
-                : ui.translate('Hide password');
-            this.type = this.showPassword ? 'text' : 'password';
-        };
-        return AmplifyPasswordFieldComponent;
+        return PhoneNumberFieldComponent;
     }());
-    AmplifyPasswordFieldComponent.decorators = [
+    PhoneNumberFieldComponent.decorators = [
         { type: i0.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"
+                    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"
                 },] }
     ];
-    AmplifyPasswordFieldComponent.propDecorators = {
+    PhoneNumberFieldComponent.propDecorators = {
         autocomplete: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
-        id: [{ type: i0.Input }],
+        defaultCountryCode: [{ type: i0.Input }],
+        selectFieldId: [{ type: i0.Input }],
+        textFieldId: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
-        required: [{ type: i0.Input }]
+        required: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        labelHidden: [{ type: i0.Input }],
+        display: [{ type: i0.HostBinding, args: ['style.display',] }]
     };
 
-    var AmplifySelectComponent = /** @class */ (function () {
-        function AmplifySelectComponent() {
+    var SelectComponent = /** @class */ (function () {
+        function SelectComponent() {
         }
-        return AmplifySelectComponent;
+        return SelectComponent;
     }());
-    AmplifySelectComponent.decorators = [
+    SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-select',
                     template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
                 },] }
     ];
-    AmplifySelectComponent.propDecorators = {
+    SelectComponent.propDecorators = {
         items: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
@@ -1717,6 +1638,7 @@
                 tab.labelledById = "radix-id-" + nanoid.nanoid(12) + "-1-trigger-" + index;
             });
             // find active tab
+            // TODO(enhancement): more declarative way for choosing the initial tab to render
             var activeTabs = this.tabs.filter(function (tab) { return tab.active; });
             // set active tab
             if (activeTabs.length !== 1) {
@@ -1740,7 +1662,7 @@
     TabsComponent.decorators = [
         { type: i0.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 = {
@@ -1748,2017 +1670,115 @@
         tabChange: [{ type: i0.Output }]
     };
 
-    var AmplifyTextFieldComponent = /** @class */ (function () {
-        function AmplifyTextFieldComponent() {
+    var TextFieldComponent = /** @class */ (function () {
+        function TextFieldComponent() {
             this.autocomplete = 'new-password';
             this.disabled = false;
+            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
             this.initialValue = '';
             this.label = '';
             this.placeholder = '';
             this.required = true;
+            this.labelHidden = false;
+            this.display = 'contents';
         }
-        return AmplifyTextFieldComponent;
+        return TextFieldComponent;
     }());
-    AmplifyTextFieldComponent.decorators = [
+    TextFieldComponent.decorators = [
         { type: i0.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: i0.Input }],
         disabled: [{ type: i0.Input }],
-        id: [{ type: i0.Input }],
+        fieldId: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
-        type: [{ type: i0.Input }]
-    };
-
-    var AmplifyUserNameAliasComponent = /** @class */ (function () {
-        function AmplifyUserNameAliasComponent(stateMachine) {
-            this.stateMachine = stateMachine;
-            this.name = 'username';
-            this.disabled = false;
-            this.initialValue = '';
-            this.required = true;
-        }
-        AmplifyUserNameAliasComponent.prototype.ngOnInit = function () {
-            var context = this.stateMachine.context;
-            var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
-            this.label = label;
-            this.type = type;
-            this.placeholder = label;
-        };
-        return AmplifyUserNameAliasComponent;
-    }());
-    AmplifyUserNameAliasComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: StateMachineService }
-    ]; };
-    AmplifyUserNameAliasComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        required: [{ type: i0.Input }]
+        type: [{ type: i0.Input }],
+        labelHidden: [{ type: i0.Input }],
+        display: [{ type: i0.HostBinding, args: ['style.display',] }]
     };
 
-    var proxyInputs = function (Cmp, inputs) {
-        var Prototype = Cmp.prototype;
-        inputs.forEach(function (item) {
-            Object.defineProperty(Prototype, item, {
-                get: function () {
-                    return this.el[item];
-                },
-                set: function (val) {
-                    var _this = this;
-                    this.z.runOutsideAngular(function () { return (_this.el[item] = val); });
-                },
-            });
-        });
-    };
-    var proxyMethods = function (Cmp, methods) {
-        var Prototype = Cmp.prototype;
-        methods.forEach(function (methodName) {
-            Prototype[methodName] = function () {
-                var _this = this;
-                var args = arguments;
-                return this.z.runOutsideAngular(function () { return _this.el[methodName].apply(_this.el, args); });
-            };
-        });
-    };
-    var proxyOutputs = function (instance, el, events) {
-        events.forEach(function (eventName) { return (instance[eventName] = rxjs.fromEvent(el, eventName)); });
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    function ProxyCmp(opts) {
-        var decorator = function (cls) {
-            if (opts.inputs) {
-                proxyInputs(cls, opts.inputs);
+    var AmplifySlotComponent = /** @class */ (function () {
+        function AmplifySlotComponent(propService) {
+            this.propService = propService;
+            this.display = 'contents';
+            this.isOverriden = false;
+        }
+        AmplifySlotComponent.prototype.ngAfterContentInit = function () {
+            var customComponents = this.propService.customComponents;
+            var overridingComponent = customComponents[this.name];
+            if (overridingComponent) {
+                this.overridingComponent = overridingComponent;
+                this.isOverriden = true;
             }
-            if (opts.methods) {
-                proxyMethods(cls, opts.methods);
-            }
-            return cls;
         };
-        return decorator;
-    }
-    var AmplifyAmazonButton = /** @class */ (function () {
-        function AmplifyAmazonButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyAmazonButton;
-    }());
-    AmplifyAmazonButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-amazon-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['clientId', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifyAmazonButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyAmazonButton = __decorate([
-        ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-    ], AmplifyAmazonButton);
-    var AmplifyAuthContainer = /** @class */ (function () {
-        function AmplifyAuthContainer(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyAuthContainer;
-    }());
-    AmplifyAuthContainer.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-auth-container',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyAuthContainer.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    var AmplifyAuthFields = /** @class */ (function () {
-        function AmplifyAuthFields(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyAuthFields;
-    }());
-    AmplifyAuthFields.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-auth-fields',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['formFields']
-                },] }
-    ];
-    AmplifyAuthFields.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyAuthFields = __decorate([
-        ProxyCmp({ inputs: ['formFields'] })
-    ], AmplifyAuthFields);
-    var AmplifyAuth0Button = /** @class */ (function () {
-        function AmplifyAuth0Button(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyAuth0Button;
-    }());
-    AmplifyAuth0Button.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-auth0-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['config', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifyAuth0Button.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyAuth0Button = __decorate([
-        ProxyCmp({ inputs: ['config', 'handleAuthStateChange'] })
-    ], AmplifyAuth0Button);
-    var AmplifyAuthenticator = /** @class */ (function () {
-        function AmplifyAuthenticator(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyAuthenticator;
-    }());
-    AmplifyAuthenticator.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-authenticator',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'federated',
-                        'handleAuthStateChange',
-                        'hideToast',
-                        'initialAuthState',
-                        'usernameAlias',
-                    ]
-                },] }
-    ];
-    AmplifyAuthenticator.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyAuthenticator = __decorate([
-        ProxyCmp({
-            inputs: [
-                'federated',
-                'handleAuthStateChange',
-                'hideToast',
-                'initialAuthState',
-                'usernameAlias',
-            ],
-        })
-    ], AmplifyAuthenticator);
-    exports.AmplifyButton = /** @class */ (function () {
-        function AmplifyButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyButton;
-    }());
-    exports.AmplifyButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']
-                },] }
-    ];
-    exports.AmplifyButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyButton = __decorate([
-        ProxyCmp({
-            inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'],
-        })
-    ], exports.AmplifyButton);
-    exports.AmplifyChatbot = /** @class */ (function () {
-        function AmplifyChatbot(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-            proxyOutputs(this, this.el, ['chatCompleted']);
-        }
-        return AmplifyChatbot;
-    }());
-    exports.AmplifyChatbot.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-chatbot',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'botName',
-                        'botTitle',
-                        'clearOnComplete',
-                        'conversationModeOn',
-                        'silenceThreshold',
-                        'silenceTime',
-                        'textEnabled',
-                        'voiceEnabled',
-                        'welcomeMessage',
-                    ]
-                },] }
-    ];
-    exports.AmplifyChatbot.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyChatbot = __decorate([
-        ProxyCmp({
-            inputs: [
-                'botName',
-                'botTitle',
-                'clearOnComplete',
-                'conversationModeOn',
-                'silenceThreshold',
-                'silenceTime',
-                'textEnabled',
-                'voiceEnabled',
-                'welcomeMessage',
-            ],
-        })
-    ], exports.AmplifyChatbot);
-    var AmplifyCheckbox = /** @class */ (function () {
-        function AmplifyCheckbox(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyCheckbox;
-    }());
-    AmplifyCheckbox.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-checkbox',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']
-                },] }
-    ];
-    AmplifyCheckbox.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyCheckbox = __decorate([
-        ProxyCmp({
-            inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'],
-        })
-    ], AmplifyCheckbox);
-    var AmplifyCodeField = /** @class */ (function () {
-        function AmplifyCodeField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyCodeField;
-    }());
-    AmplifyCodeField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-code-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'placeholder',
-                        'required',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyCodeField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyCodeField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'placeholder',
-                'required',
-                'value',
-            ],
-        })
-    ], AmplifyCodeField);
-    var AmplifyConfirmSignIn = /** @class */ (function () {
-        function AmplifyConfirmSignIn(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyConfirmSignIn;
-    }());
-    AmplifyConfirmSignIn.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-sign-in',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSubmit',
-                        'headerText',
-                        'submitButtonText',
-                        'user',
-                    ]
-                },] }
-    ];
-    AmplifyConfirmSignIn.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyConfirmSignIn = __decorate([
-        ProxyCmp({
-            inputs: [
-                'formFields',
-                'handleAuthStateChange',
-                'handleSubmit',
-                'headerText',
-                'submitButtonText',
-                'user',
-            ],
-        })
-    ], AmplifyConfirmSignIn);
-    var AmplifyConfirmSignUp = /** @class */ (function () {
-        function AmplifyConfirmSignUp(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyConfirmSignUp;
-    }());
-    AmplifyConfirmSignUp.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-sign-up',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSubmit',
-                        'headerText',
-                        'submitButtonText',
-                        'user',
-                        'usernameAlias',
-                    ]
-                },] }
-    ];
-    AmplifyConfirmSignUp.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyConfirmSignUp = __decorate([
-        ProxyCmp({
-            inputs: [
-                'formFields',
-                'handleAuthStateChange',
-                'handleSubmit',
-                'headerText',
-                'submitButtonText',
-                'user',
-                'usernameAlias',
-            ],
-        })
-    ], AmplifyConfirmSignUp);
-    var AmplifyContainer = /** @class */ (function () {
-        function AmplifyContainer(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyContainer;
-    }());
-    AmplifyContainer.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-container',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyContainer.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    var AmplifyCountryDialCode = /** @class */ (function () {
-        function AmplifyCountryDialCode(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyCountryDialCode;
-    }());
-    AmplifyCountryDialCode.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-country-dial-code',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']
-                },] }
-    ];
-    AmplifyCountryDialCode.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyCountryDialCode = __decorate([
-        ProxyCmp({ inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] })
-    ], AmplifyCountryDialCode);
-    var AmplifyEmailField = /** @class */ (function () {
-        function AmplifyEmailField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyEmailField;
-    }());
-    AmplifyEmailField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-email-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'placeholder',
-                        'required',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyEmailField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyEmailField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'placeholder',
-                'required',
-                'value',
-            ],
-        })
-    ], AmplifyEmailField);
-    var AmplifyFacebookButton = /** @class */ (function () {
-        function AmplifyFacebookButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyFacebookButton;
-    }());
-    AmplifyFacebookButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-facebook-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['appId', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifyFacebookButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyFacebookButton = __decorate([
-        ProxyCmp({ inputs: ['appId', 'handleAuthStateChange'] })
-    ], AmplifyFacebookButton);
-    var AmplifyFederatedButtons = /** @class */ (function () {
-        function AmplifyFederatedButtons(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyFederatedButtons;
-    }());
-    AmplifyFederatedButtons.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-federated-buttons',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['authState', 'federated', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifyFederatedButtons.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyFederatedButtons = __decorate([
-        ProxyCmp({ inputs: ['authState', 'federated', 'handleAuthStateChange'] })
-    ], AmplifyFederatedButtons);
-    var AmplifyFederatedSignIn = /** @class */ (function () {
-        function AmplifyFederatedSignIn(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyFederatedSignIn;
-    }());
-    AmplifyFederatedSignIn.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-federated-sign-in',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['authState', 'federated']
-                },] }
-    ];
-    AmplifyFederatedSignIn.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyFederatedSignIn = __decorate([
-        ProxyCmp({ inputs: ['authState', 'federated'] })
-    ], AmplifyFederatedSignIn);
-    var AmplifyForgotPassword = /** @class */ (function () {
-        function AmplifyForgotPassword(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyForgotPassword;
-    }());
-    AmplifyForgotPassword.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-forgot-password',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSend',
-                        'handleSubmit',
-                        'headerText',
-                        'sendButtonText',
-                        'submitButtonText',
-                        'usernameAlias',
-                    ]
-                },] }
-    ];
-    AmplifyForgotPassword.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyForgotPassword = __decorate([
-        ProxyCmp({
-            inputs: [
-                'formFields',
-                'handleAuthStateChange',
-                'handleSend',
-                'handleSubmit',
-                'headerText',
-                'sendButtonText',
-                'submitButtonText',
-                'usernameAlias',
-            ],
-        })
-    ], AmplifyForgotPassword);
-    var AmplifyFormField = /** @class */ (function () {
-        function AmplifyFormField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyFormField;
-    }());
-    AmplifyFormField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-form-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'description',
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'name',
-                        'placeholder',
-                        'required',
-                        'type',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyFormField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyFormField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'description',
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'name',
-                'placeholder',
-                'required',
-                'type',
-                'value',
-            ],
-        })
-    ], AmplifyFormField);
-    var AmplifyFormSection = /** @class */ (function () {
-        function AmplifyFormSection(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyFormSection;
-    }());
-    AmplifyFormSection.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-form-section',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'handleSubmit',
-                        'headerText',
-                        'loading',
-                        'secondaryFooterContent',
-                        'submitButtonText',
-                        'testDataPrefix',
-                    ]
-                },] }
-    ];
-    AmplifyFormSection.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyFormSection = __decorate([
-        ProxyCmp({
-            inputs: [
-                'handleSubmit',
-                'headerText',
-                'loading',
-                'secondaryFooterContent',
-                'submitButtonText',
-                'testDataPrefix',
-            ],
-        })
-    ], AmplifyFormSection);
-    var AmplifyGoogleButton = /** @class */ (function () {
-        function AmplifyGoogleButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyGoogleButton;
-    }());
-    AmplifyGoogleButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-google-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['clientId', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifyGoogleButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyGoogleButton = __decorate([
-        ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-    ], AmplifyGoogleButton);
-    var AmplifyGreetings = /** @class */ (function () {
-        function AmplifyGreetings(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyGreetings;
-    }());
-    AmplifyGreetings.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-greetings',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['handleAuthStateChange', 'logo', 'username']
-                },] }
-    ];
-    AmplifyGreetings.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyGreetings = __decorate([
-        ProxyCmp({ inputs: ['handleAuthStateChange', 'logo', 'username'] })
-    ], AmplifyGreetings);
-    var AmplifyHint = /** @class */ (function () {
-        function AmplifyHint(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyHint;
-    }());
-    AmplifyHint.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-hint',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyHint.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    var AmplifyIcon = /** @class */ (function () {
-        function AmplifyIcon(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyIcon;
-    }());
-    AmplifyIcon.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-icon',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['name']
-                },] }
-    ];
-    AmplifyIcon.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyIcon = __decorate([
-        ProxyCmp({ inputs: ['name'] })
-    ], AmplifyIcon);
-    var AmplifyIconButton = /** @class */ (function () {
-        function AmplifyIconButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyIconButton;
-    }());
-    AmplifyIconButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-icon-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['autoShowTooltip', 'name', 'tooltip']
-                },] }
-    ];
-    AmplifyIconButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyIconButton = __decorate([
-        ProxyCmp({ inputs: ['autoShowTooltip', 'name', 'tooltip'] })
-    ], AmplifyIconButton);
-    exports.AmplifyInput = /** @class */ (function () {
-        function AmplifyInput(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyInput;
-    }());
-    exports.AmplifyInput.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-input',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'description',
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'inputProps',
-                        'name',
-                        'placeholder',
-                        'required',
-                        'type',
-                        'value',
-                    ]
-                },] }
-    ];
-    exports.AmplifyInput.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyInput = __decorate([
-        ProxyCmp({
-            inputs: [
-                'description',
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'inputProps',
-                'name',
-                'placeholder',
-                'required',
-                'type',
-                'value',
-            ],
-        })
-    ], exports.AmplifyInput);
-    var AmplifyLabel = /** @class */ (function () {
-        function AmplifyLabel(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyLabel;
-    }());
-    AmplifyLabel.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-label',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['htmlFor']
-                },] }
-    ];
-    AmplifyLabel.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyLabel = __decorate([
-        ProxyCmp({ inputs: ['htmlFor'] })
-    ], AmplifyLabel);
-    var AmplifyLink = /** @class */ (function () {
-        function AmplifyLink(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyLink;
-    }());
-    AmplifyLink.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-link',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['role']
-                },] }
-    ];
-    AmplifyLink.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyLink = __decorate([
-        ProxyCmp({ inputs: ['role'] })
-    ], AmplifyLink);
-    var AmplifyLoadingSpinner = /** @class */ (function () {
-        function AmplifyLoadingSpinner(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyLoadingSpinner;
-    }());
-    AmplifyLoadingSpinner.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-loading-spinner',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyLoadingSpinner.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    var AmplifyNav = /** @class */ (function () {
-        function AmplifyNav(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyNav;
-    }());
-    AmplifyNav.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-nav',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyNav.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    var AmplifyOauthButton = /** @class */ (function () {
-        function AmplifyOauthButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyOauthButton;
-    }());
-    AmplifyOauthButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-oauth-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['config']
-                },] }
-    ];
-    AmplifyOauthButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyOauthButton = __decorate([
-        ProxyCmp({ inputs: ['config'] })
-    ], AmplifyOauthButton);
-    var AmplifyPasswordField = /** @class */ (function () {
-        function AmplifyPasswordField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyPasswordField;
-    }());
-    AmplifyPasswordField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-password-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'placeholder',
-                        'required',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyPasswordField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyPasswordField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'placeholder',
-                'required',
-                'value',
-            ],
-        })
-    ], AmplifyPasswordField);
-    var AmplifyPhoneField = /** @class */ (function () {
-        function AmplifyPhoneField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyPhoneField;
-    }());
-    AmplifyPhoneField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-phone-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'dialCode',
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'placeholder',
-                        'required',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyPhoneField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyPhoneField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'dialCode',
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'placeholder',
-                'required',
-                'value',
-            ],
-        })
-    ], AmplifyPhoneField);
-    exports.AmplifyPhotoPicker = /** @class */ (function () {
-        function AmplifyPhotoPicker(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyPhotoPicker;
-    }());
-    exports.AmplifyPhotoPicker.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-photo-picker',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'buttonText',
-                        'handleClick',
-                        'headerHint',
-                        'headerTitle',
-                        'placeholderHint',
-                        'previewSrc',
-                    ]
-                },] }
-    ];
-    exports.AmplifyPhotoPicker.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyPhotoPicker = __decorate([
-        ProxyCmp({
-            inputs: [
-                'buttonText',
-                'handleClick',
-                'headerHint',
-                'headerTitle',
-                'placeholderHint',
-                'previewSrc',
-            ],
-        })
-    ], exports.AmplifyPhotoPicker);
-    exports.AmplifyPicker = /** @class */ (function () {
-        function AmplifyPicker(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyPicker;
-    }());
-    exports.AmplifyPicker.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-picker',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['acceptValue', 'inputHandler', 'pickerText']
-                },] }
-    ];
-    exports.AmplifyPicker.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyPicker = __decorate([
-        ProxyCmp({ inputs: ['acceptValue', 'inputHandler', 'pickerText'] })
-    ], exports.AmplifyPicker);
-    var AmplifyRadioButton = /** @class */ (function () {
-        function AmplifyRadioButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyRadioButton;
-    }());
-    AmplifyRadioButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-radio-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'checked',
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'inputProps',
-                        'label',
-                        'name',
-                        'placeholder',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyRadioButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyRadioButton = __decorate([
-        ProxyCmp({
-            inputs: [
-                'checked',
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'inputProps',
-                'label',
-                'name',
-                'placeholder',
-                'value',
-            ],
-        })
-    ], AmplifyRadioButton);
-    var AmplifyRequireNewPassword = /** @class */ (function () {
-        function AmplifyRequireNewPassword(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyRequireNewPassword;
-    }());
-    AmplifyRequireNewPassword.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-require-new-password',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSubmit',
-                        'headerText',
-                        'submitButtonText',
-                        'user',
-                    ]
-                },] }
-    ];
-    AmplifyRequireNewPassword.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyRequireNewPassword = __decorate([
-        ProxyCmp({
-            inputs: [
-                'formFields',
-                'handleAuthStateChange',
-                'handleSubmit',
-                'headerText',
-                'submitButtonText',
-                'user',
-            ],
-        })
-    ], AmplifyRequireNewPassword);
-    exports.AmplifyS3Album = /** @class */ (function () {
-        function AmplifyS3Album(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyS3Album;
-    }());
-    exports.AmplifyS3Album.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-s3-album',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'contentType',
-                        'fileToKey',
-                        'filter',
-                        'handleOnError',
-                        'handleOnLoad',
-                        'identityId',
-                        'level',
-                        'path',
-                        'picker',
-                        'pickerText',
-                        'sort',
-                        'track',
-                    ]
-                },] }
-    ];
-    exports.AmplifyS3Album.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyS3Album = __decorate([
-        ProxyCmp({
-            inputs: [
-                'contentType',
-                'fileToKey',
-                'filter',
-                'handleOnError',
-                'handleOnLoad',
-                'identityId',
-                'level',
-                'path',
-                'picker',
-                'pickerText',
-                'sort',
-                'track',
-            ],
-        })
-    ], exports.AmplifyS3Album);
-    exports.AmplifyS3Image = /** @class */ (function () {
-        function AmplifyS3Image(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyS3Image;
-    }());
-    exports.AmplifyS3Image.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-s3-image',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'alt',
-                        'body',
-                        'contentType',
-                        'handleOnError',
-                        'handleOnLoad',
-                        'identityId',
-                        'imgKey',
-                        'imgProps',
-                        'level',
-                        'path',
-                        'track',
-                    ]
-                },] }
-    ];
-    exports.AmplifyS3Image.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyS3Image = __decorate([
-        ProxyCmp({
-            inputs: [
-                'alt',
-                'body',
-                'contentType',
-                'handleOnError',
-                'handleOnLoad',
-                'identityId',
-                'imgKey',
-                'imgProps',
-                'level',
-                'path',
-                'track',
-            ],
-        })
-    ], exports.AmplifyS3Image);
-    exports.AmplifyS3ImagePicker = /** @class */ (function () {
-        function AmplifyS3ImagePicker(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyS3ImagePicker;
-    }());
-    exports.AmplifyS3ImagePicker.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-s3-image-picker',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'buttonText',
-                        'contentType',
-                        'fileToKey',
-                        'headerHint',
-                        'headerTitle',
-                        'identityId',
-                        'level',
-                        'path',
-                        'placeholderHint',
-                        'track',
-                    ]
-                },] }
-    ];
-    exports.AmplifyS3ImagePicker.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyS3ImagePicker = __decorate([
-        ProxyCmp({
-            inputs: [
-                'buttonText',
-                'contentType',
-                'fileToKey',
-                'headerHint',
-                'headerTitle',
-                'identityId',
-                'level',
-                'path',
-                'placeholderHint',
-                'track',
-            ],
-        })
-    ], exports.AmplifyS3ImagePicker);
-    exports.AmplifyS3Text = /** @class */ (function () {
-        function AmplifyS3Text(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyS3Text;
-    }());
-    exports.AmplifyS3Text.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-s3-text',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'body',
-                        'contentType',
-                        'fallbackText',
-                        'identityId',
-                        'level',
-                        'path',
-                        'textKey',
-                        'track',
-                    ]
-                },] }
-    ];
-    exports.AmplifyS3Text.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyS3Text = __decorate([
-        ProxyCmp({
-            inputs: [
-                'body',
-                'contentType',
-                'fallbackText',
-                'identityId',
-                'level',
-                'path',
-                'textKey',
-                'track',
-            ],
-        })
-    ], exports.AmplifyS3Text);
-    exports.AmplifyS3TextPicker = /** @class */ (function () {
-        function AmplifyS3TextPicker(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyS3TextPicker;
-    }());
-    exports.AmplifyS3TextPicker.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-s3-text-picker',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'contentType',
-                        'fallbackText',
-                        'fileToKey',
-                        'identityId',
-                        'level',
-                        'path',
-                        'track',
-                    ]
-                },] }
-    ];
-    exports.AmplifyS3TextPicker.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyS3TextPicker = __decorate([
-        ProxyCmp({
-            inputs: [
-                'contentType',
-                'fallbackText',
-                'fileToKey',
-                'identityId',
-                'level',
-                'path',
-                'track',
-            ],
-        })
-    ], exports.AmplifyS3TextPicker);
-    var AmplifySection = /** @class */ (function () {
-        function AmplifySection(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySection;
+        return AmplifySlotComponent;
     }());
-    AmplifySection.decorators = [
+    AmplifySlotComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'amplify-section',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['role']
+                    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"
                 },] }
     ];
-    AmplifySection.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
+    AmplifySlotComponent.ctorParameters = function () { return [
+        { type: CustomComponentsService }
     ]; };
-    AmplifySection = __decorate([
-        ProxyCmp({ inputs: ['role'] })
-    ], AmplifySection);
-    var AmplifySelect = /** @class */ (function () {
-        function AmplifySelect(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySelect;
-    }());
-    AmplifySelect.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-select',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['fieldId', 'handleInputChange', 'options', 'selected']
-                },] }
-    ];
-    AmplifySelect.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySelect = __decorate([
-        ProxyCmp({ inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] })
-    ], AmplifySelect);
-    var AmplifySelectMfaType = /** @class */ (function () {
-        function AmplifySelectMfaType(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySelectMfaType;
-    }());
-    AmplifySelectMfaType.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-select-mfa-type',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['MFATypes', 'authData', 'handleSubmit']
-                },] }
-    ];
-    AmplifySelectMfaType.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySelectMfaType = __decorate([
-        ProxyCmp({ inputs: ['MFATypes', 'authData', 'handleSubmit'] })
-    ], AmplifySelectMfaType);
-    var AmplifySignIn = /** @class */ (function () {
-        function AmplifySignIn(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySignIn;
-    }());
-    AmplifySignIn.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-in',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'federated',
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSubmit',
-                        'headerText',
-                        'hideSignUp',
-                        'submitButtonText',
-                        'usernameAlias',
-                    ]
-                },] }
-    ];
-    AmplifySignIn.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySignIn = __decorate([
-        ProxyCmp({
-            inputs: [
-                'federated',
-                'formFields',
-                'handleAuthStateChange',
-                'handleSubmit',
-                'headerText',
-                'hideSignUp',
-                'submitButtonText',
-                'usernameAlias',
-            ],
-        })
-    ], AmplifySignIn);
-    var AmplifySignInButton = /** @class */ (function () {
-        function AmplifySignInButton(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySignInButton;
-    }());
-    AmplifySignInButton.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-in-button',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['provider']
-                },] }
-    ];
-    AmplifySignInButton.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySignInButton = __decorate([
-        ProxyCmp({ inputs: ['provider'] })
-    ], AmplifySignInButton);
-    var AmplifySignOut = /** @class */ (function () {
-        function AmplifySignOut(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySignOut;
-    }());
-    AmplifySignOut.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-out',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['buttonText', 'handleAuthStateChange']
-                },] }
-    ];
-    AmplifySignOut.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySignOut = __decorate([
-        ProxyCmp({ inputs: ['buttonText', 'handleAuthStateChange'] })
-    ], AmplifySignOut);
-    var AmplifySignUp = /** @class */ (function () {
-        function AmplifySignUp(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifySignUp;
-    }());
-    AmplifySignUp.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-up',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'formFields',
-                        'handleAuthStateChange',
-                        'handleSignUp',
-                        'handleSubmit',
-                        'haveAccountText',
-                        'headerText',
-                        'signInText',
-                        'submitButtonText',
-                        'usernameAlias',
-                        'validationErrors',
-                    ]
-                },] }
-    ];
-    AmplifySignUp.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifySignUp = __decorate([
-        ProxyCmp({
-            inputs: [
-                'formFields',
-                'handleAuthStateChange',
-                'handleSignUp',
-                'handleSubmit',
-                'haveAccountText',
-                'headerText',
-                'signInText',
-                'submitButtonText',
-                'usernameAlias',
-                'validationErrors',
-            ],
-        })
-    ], AmplifySignUp);
-    var AmplifyStrike = /** @class */ (function () {
-        function AmplifyStrike(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyStrike;
-    }());
-    AmplifyStrike.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-strike',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                },] }
-    ];
-    AmplifyStrike.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyToast = /** @class */ (function () {
-        function AmplifyToast(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyToast;
-    }());
-    exports.AmplifyToast.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-toast',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['handleClose', 'message']
-                },] }
-    ];
-    exports.AmplifyToast.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    exports.AmplifyToast = __decorate([
-        ProxyCmp({ inputs: ['handleClose', 'message'] })
-    ], exports.AmplifyToast);
-    var AmplifyTooltip = /** @class */ (function () {
-        function AmplifyTooltip(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyTooltip;
-    }());
-    AmplifyTooltip.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-tooltip',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['shouldAutoShow', 'text']
-                },] }
-    ];
-    AmplifyTooltip.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyTooltip = __decorate([
-        ProxyCmp({ inputs: ['shouldAutoShow', 'text'] })
-    ], AmplifyTooltip);
-    var AmplifyTotpSetup = /** @class */ (function () {
-        function AmplifyTotpSetup(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyTotpSetup;
-    }());
-    AmplifyTotpSetup.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-totp-setup',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'handleAuthStateChange',
-                        'handleComplete',
-                        'headerText',
-                        'issuer',
-                        'standalone',
-                        'user',
-                    ]
-                },] }
-    ];
-    AmplifyTotpSetup.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyTotpSetup = __decorate([
-        ProxyCmp({
-            inputs: [
-                'handleAuthStateChange',
-                'handleComplete',
-                'headerText',
-                'issuer',
-                'standalone',
-                'user',
-            ],
-        })
-    ], AmplifyTotpSetup);
-    var AmplifyUsernameField = /** @class */ (function () {
-        function AmplifyUsernameField(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyUsernameField;
-    }());
-    AmplifyUsernameField.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-username-field',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: [
-                        'disabled',
-                        'fieldId',
-                        'handleInputChange',
-                        'hint',
-                        'inputProps',
-                        'label',
-                        'placeholder',
-                        'required',
-                        'value',
-                    ]
-                },] }
-    ];
-    AmplifyUsernameField.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyUsernameField = __decorate([
-        ProxyCmp({
-            inputs: [
-                'disabled',
-                'fieldId',
-                'handleInputChange',
-                'hint',
-                'inputProps',
-                'label',
-                'placeholder',
-                'required',
-                'value',
-            ],
-        })
-    ], AmplifyUsernameField);
-    var AmplifyVerifyContact = /** @class */ (function () {
-        function AmplifyVerifyContact(c, r, z) {
-            this.z = z;
-            c.detach();
-            this.el = r.nativeElement;
-        }
-        return AmplifyVerifyContact;
-    }());
-    AmplifyVerifyContact.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-verify-contact',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['handleAuthStateChange', 'user']
-                },] }
-    ];
-    AmplifyVerifyContact.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-    AmplifyVerifyContact = __decorate([
-        ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
-    ], AmplifyVerifyContact);
-
-    var PhoneNumberFieldComponent = /** @class */ (function () {
-        function PhoneNumberFieldComponent() {
-            this.autocomplete = 'new-password';
-            this.disabled = false;
-            this.initialValue = '';
-            this.label = '';
-            this.placeholder = '';
-            this.required = true;
-            this.countryDialCodes = ui.countryDialCodes;
-        }
-        return PhoneNumberFieldComponent;
-    }());
-    PhoneNumberFieldComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-phone-number-field',
-                    template: "<div class=\"amplify-flex\" amplify-field-group style=\"gap: 0px\">\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  <label class=\"amplify-label sr-only\" [for]=\"textFieldId\">\n    {{ label }}\n  </label>\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
-                },] }
-    ];
-    PhoneNumberFieldComponent.propDecorators = {
-        autocomplete: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        defaultCountryCode: [{ type: i0.Input }],
-        selectFieldId: [{ type: i0.Input }],
-        textFieldId: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
+    AmplifySlotComponent.propDecorators = {
         name: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        type: [{ type: i0.Input }]
+        context: [{ type: i0.Input }],
+        display: [{ type: i0.HostBinding, args: ['style.display',] }]
     };
 
-    customElements.define('amplify-button', components.AmplifyButton);
-    customElements.define('amplify-input', components.AmplifyInput);
-    customElements.define('amplify-toast', components.AmplifyToast);
-    customElements.define('amplify-chatbot', components.AmplifyChatbot);
-    customElements.define('amplify-s3-album', components.AmplifyS3Album);
-    customElements.define('amplify-s3-image-picker', components.AmplifyS3ImagePicker);
-    customElements.define('amplify-s3-text', components.AmplifyS3Text);
-    customElements.define('amplify-s3-text-picker', components.AmplifyS3TextPicker);
-    customElements.define('amplify-s3-image', components.AmplifyS3Image);
-    customElements.define('amplify-picker', components.AmplifyPicker);
-    customElements.define('amplify-photo-picker', components.AmplifyPhotoPicker);
-    var UiAngularModule = /** @class */ (function () {
-        function UiAngularModule() {
+    var AmplifyAuthenticatorModule = /** @class */ (function () {
+        function AmplifyAuthenticatorModule() {
         }
-        return UiAngularModule;
+        return AmplifyAuthenticatorModule;
     }());
-    UiAngularModule.decorators = [
+    AmplifyAuthenticatorModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        exports.AmplifyChatbot,
-                        exports.AmplifyToast,
-                        exports.AmplifyInput,
-                        exports.AmplifyButton,
-                        exports.AmplifyS3Album,
-                        exports.AmplifyS3ImagePicker,
-                        exports.AmplifyS3Text,
-                        exports.AmplifyS3TextPicker,
-                        exports.AmplifyS3Image,
-                        exports.AmplifyPicker,
-                        exports.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,
-                        TabItemComponent,
+                        ErrorComponent,
+                        FederatedSignInButtonComponent,
+                        FederatedSignInComponent,
+                        ForceNewPasswordComponent,
+                        FormFieldComponent,
+                        PasswordFieldComponent,
                         PhoneNumberFieldComponent,
+                        ResetPasswordComponent,
+                        SelectComponent,
+                        SetupTotpComponent,
+                        SignInComponent,
+                        SignUpComponent,
+                        SignUpFormFieldsComponent,
+                        TabItemComponent,
+                        TabsComponent,
+                        TextFieldComponent,
+                        UserNameAliasComponent,
+                        VerifyUserComponent,
                     ],
                     imports: [common.CommonModule],
                     exports: [
-                        exports.AmplifyChatbot,
-                        exports.AmplifyToast,
-                        exports.AmplifyInput,
-                        exports.AmplifyButton,
-                        exports.AmplifyS3Album,
-                        exports.AmplifyS3ImagePicker,
-                        exports.AmplifyS3Text,
-                        exports.AmplifyS3TextPicker,
-                        exports.AmplifyS3Image,
-                        exports.AmplifyPicker,
-                        exports.AmplifyPhotoPicker,
-                        AmplifyAuthenticatorComponent,
-                        AmplifySignInComponent,
-                        AmplifyFormFieldComponent,
-                        AmplifyErrorComponent,
                         AmplifySlotDirective,
+                        AuthenticatorComponent,
+                        CheckboxComponent,
+                        SignUpFormFieldsComponent,
+                        TextFieldComponent,
                     ],
-                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                 },] }
     ];
 
@@ -3770,50 +1790,62 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.AmplifyAuthenticatorComponent = AmplifyAuthenticatorComponent;
-    exports.AmplifyConfirmSignInComponent = AmplifyConfirmSignInComponent;
-    exports.AmplifyConfirmSignUpComponent = AmplifyConfirmSignUpComponent;
-    exports.AmplifyErrorComponent = AmplifyErrorComponent;
-    exports.AmplifyFederatedSignInButtonComponent = AmplifyFederatedSignInButtonComponent;
-    exports.AmplifyFederatedSignInComponent = AmplifyFederatedSignInComponent;
-    exports.AmplifyForceNewPasswordComponent = AmplifyForceNewPasswordComponent;
-    exports.AmplifyFormFieldComponent = AmplifyFormFieldComponent;
-    exports.AmplifyResetPasswordComponent = AmplifyResetPasswordComponent;
-    exports.AmplifySetupTotpComponent = AmplifySetupTotpComponent;
-    exports.AmplifySignInComponent = AmplifySignInComponent;
-    exports.AmplifySignUpComponent = AmplifySignUpComponent;
+    exports.AmplifyAuthenticatorModule = AmplifyAuthenticatorModule;
     exports.AmplifySlotDirective = AmplifySlotDirective;
-    exports.AmplifyVerifyUserComponent = AmplifyVerifyUserComponent;
-    exports.AuthPropService = AuthPropService;
+    exports.AuthenticatorComponent = AuthenticatorComponent;
+    exports.AuthenticatorService = AuthenticatorService;
+    exports.ButtonComponent = ButtonComponent;
+    exports.CheckboxComponent = CheckboxComponent;
     exports.ConfirmResetPasswordComponent = ConfirmResetPasswordComponent;
+    exports.ConfirmSignInComponent = ConfirmSignInComponent;
+    exports.ConfirmSignUpComponent = ConfirmSignUpComponent;
     exports.ConfirmVerifyUserComponent = ConfirmVerifyUserComponent;
-    exports.StateMachineService = StateMachineService;
-    exports.UiAngularModule = UiAngularModule;
+    exports.CustomComponentsService = CustomComponentsService;
+    exports.ErrorComponent = ErrorComponent;
+    exports.FederatedSignInButtonComponent = FederatedSignInButtonComponent;
+    exports.FederatedSignInComponent = FederatedSignInComponent;
+    exports.ForceNewPasswordComponent = ForceNewPasswordComponent;
+    exports.FormFieldComponent = FormFieldComponent;
+    exports.PasswordFieldComponent = PasswordFieldComponent;
+    exports.PhoneNumberFieldComponent = PhoneNumberFieldComponent;
+    exports.ResetPasswordComponent = ResetPasswordComponent;
+    exports.SelectComponent = SelectComponent;
+    exports.SetupTotpComponent = SetupTotpComponent;
+    exports.SignInComponent = SignInComponent;
+    exports.SignUpComponent = SignUpComponent;
+    exports.SignUpFormFieldsComponent = SignUpFormFieldsComponent;
+    exports.TabItemComponent = TabItemComponent;
+    exports.TabsComponent = TabsComponent;
+    exports.TextFieldComponent = TextFieldComponent;
+    exports.UserNameAliasComponent = UserNameAliasComponent;
+    exports.VerifyUserComponent = VerifyUserComponent;
     exports.getAttributeMap = getAttributeMap;
-    exports["ɵa"] = ProxyCmp;
-    exports["ɵb"] = AmplifyAuthenticatorComponent;
-    exports["ɵc"] = AmplifySignInComponent;
-    exports["ɵd"] = AmplifySignUpComponent;
-    exports["ɵe"] = AmplifyFormFieldComponent;
-    exports["ɵf"] = AmplifyErrorComponent;
-    exports["ɵg"] = AmplifyConfirmSignUpComponent;
-    exports["ɵh"] = AmplifyUserNameAliasComponent;
-    exports["ɵi"] = AmplifyConfirmSignInComponent;
-    exports["ɵj"] = AmplifySetupTotpComponent;
-    exports["ɵk"] = AmplifyForceNewPasswordComponent;
-    exports["ɵl"] = AmplifyFederatedSignInComponent;
-    exports["ɵm"] = AmplifyFederatedSignInButtonComponent;
-    exports["ɵn"] = AmplifyResetPasswordComponent;
-    exports["ɵo"] = AmplifyVerifyUserComponent;
-    exports["ɵp"] = ConfirmResetPasswordComponent;
-    exports["ɵq"] = ConfirmVerifyUserComponent;
-    exports["ɵr"] = AmplifySelectComponent;
-    exports["ɵs"] = AmplifyButtonComponent;
-    exports["ɵt"] = AmplifyPasswordFieldComponent;
-    exports["ɵu"] = AmplifyTextFieldComponent;
-    exports["ɵv"] = TabsComponent;
-    exports["ɵw"] = TabItemComponent;
-    exports["ɵx"] = PhoneNumberFieldComponent;
+    exports["ɵa"] = AmplifySlotComponent;
+    exports["ɵb"] = AuthenticatorComponent;
+    exports["ɵc"] = ButtonComponent;
+    exports["ɵd"] = CheckboxComponent;
+    exports["ɵe"] = ConfirmResetPasswordComponent;
+    exports["ɵf"] = ConfirmSignInComponent;
+    exports["ɵg"] = ConfirmSignUpComponent;
+    exports["ɵh"] = ConfirmVerifyUserComponent;
+    exports["ɵi"] = ErrorComponent;
+    exports["ɵj"] = FederatedSignInButtonComponent;
+    exports["ɵk"] = FederatedSignInComponent;
+    exports["ɵl"] = ForceNewPasswordComponent;
+    exports["ɵm"] = FormFieldComponent;
+    exports["ɵn"] = PasswordFieldComponent;
+    exports["ɵo"] = PhoneNumberFieldComponent;
+    exports["ɵp"] = ResetPasswordComponent;
+    exports["ɵq"] = SelectComponent;
+    exports["ɵr"] = SetupTotpComponent;
+    exports["ɵs"] = SignInComponent;
+    exports["ɵt"] = SignUpComponent;
+    exports["ɵu"] = SignUpFormFieldsComponent;
+    exports["ɵv"] = TabItemComponent;
+    exports["ɵw"] = TabsComponent;
+    exports["ɵx"] = TextFieldComponent;
+    exports["ɵy"] = UserNameAliasComponent;
+    exports["ɵz"] = VerifyUserComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });