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

package/index.d.ts

@@ -1,8 +1,8 @@
 export * from './lib/ui-angular.module';
-export * from './lib/common/types';
+export * from './lib/common';
 export * from './lib/components';
 export * from './lib/primitives';
 export * from './lib/services/authenticator-context.service';
 export * from './lib/services/state-machine.service';
-export * from './lib/directives/amplify-override.directive';
+export * from './lib/directives/amplify-slot.directive';
 export { AmplifyS3Album, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifyS3Image, AmplifyPicker, AmplifyPhotoPicker, AmplifyChatbot, AmplifyToast, AmplifyInput, AmplifyButton, } from './lib/proxies';

package/lib/components/amplify-authenticator/amplify-authenticator.component.d.ts

@@ -1,19 +1,22 @@
-import { AfterContentInit } from '@angular/core';
-import { AuthState } from '../../common/types';
-import { StateMachineService } from '../../services/state-machine.service';
-import { AuthPropService } from '../../services/authenticator-context.service';
+import { AfterContentInit, OnInit } from '@angular/core';
+import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 import { CustomComponents } from '../../common';
-export declare class AmplifyAuthenticatorComponent implements AfterContentInit {
+import { AuthPropService } from '../../services/authenticator-context.service';
+import { StateMachineService } from '../../services/state-machine.service';
+export declare class AmplifyAuthenticatorComponent implements OnInit, AfterContentInit {
     private stateMachine;
     private contextService;
     /**
      * TODO: Add back custom events
      */
-    initialAuthState: AuthState;
-    dataAttr: string;
+    initialState: AuthenticatorMachineOptions['initialState'];
+    loginMechanisms: AuthenticatorMachineOptions['loginMechanisms'];
     private customComponentQuery;
     customComponents: CustomComponents;
+    signInTitle: string;
+    signUpTitle: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
+    ngOnInit(): void;
     /**
      * Lifecycle Methods
      */
@@ -27,5 +30,6 @@ export declare class AmplifyAuthenticatorComponent implements AfterContentInit {
     };
     get actorState(): import("@aws-amplify/ui").AuthActorState;
     get authenticatorState(): import("@aws-amplify/ui").AuthMachineState;
+    onTabChange(): void;
     private mapCustomComponents;
 }

package/lib/components/amplify-confirm-sign-in/amplify-confirm-sign-in.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterContentInit, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AuthMachineState } from '@aws-amplify/ui';
 import { StateMachineService } from '../../services/state-machine.service';
 import { AuthPropService } from '../../services/authenticator-context.service';
-import { AuthMachineState } from '@aws-amplify/ui';
 export declare class AmplifyConfirmSignInComponent implements OnInit, OnDestroy, AfterContentInit {
     private stateMachine;
     private contextService;
@@ -9,8 +9,10 @@ export declare class AmplifyConfirmSignInComponent implements OnInit, OnDestroy,
     customComponents: Record<string, TemplateRef<any>>;
     remoteError: string;
     isPending: boolean;
-    headerText: string;
     private authSubscription;
+    headerText: string;
+    confirmText: string;
+    backToSignInText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;

package/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.d.ts

@@ -6,14 +6,17 @@ export declare class AmplifyConfirmSignUpComponent {
     private stateMachine;
     private contextService;
     dataAttr: string;
+    headerText: string;
     customComponents: Record<string, TemplateRef<any>>;
     private authSubscription;
     username: string;
     remoteError: string;
     isPending: boolean;
+    resendCodeText: string;
+    lostCodeText: string;
+    confirmText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
-    setUsername(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     onStateUpdate(state: AuthMachineState): void;
@@ -25,7 +28,6 @@ export declare class AmplifyConfirmSignUpComponent {
         submit: (data?: Record<string | number | symbol, any>) => void;
         username: string;
     };
-    toSignIn(): void;
     resend(): void;
     onInput($event: any): void;
     onSubmit(event: Event): void;

package/lib/components/amplify-federated-sign-in/amplify-federated-sign-in.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit } from '@angular/core';
-import { StateMachineService } from '../../services/state-machine.service';
 import { FederatedIdentityProviders } from '@aws-amplify/ui';
+import { StateMachineService } from '../../services/state-machine.service';
 export declare class AmplifyFederatedSignInComponent implements OnInit {
     private stateMachine;
     FederatedProviders: typeof FederatedIdentityProviders;
@@ -8,6 +8,9 @@ export declare class AmplifyFederatedSignInComponent implements OnInit {
     includeGoogle: boolean;
     includeAmazon: boolean;
     shouldShowFederatedSignIn: boolean;
+    signInFacebookText: string;
+    signInGoogleText: string;
+    signInAmazonText: string;
     constructor(stateMachine: StateMachineService);
     ngOnInit(): void;
 }

package/lib/components/amplify-force-new-password/amplify-force-new-password.component.d.ts

@@ -11,6 +11,8 @@ export declare class AmplifyForceNewPasswordComponent implements OnInit, AfterCo
     remoteError: string;
     isPending: boolean;
     private authSubscription;
+    changePasswordText: string;
+    backToSignInText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;

package/lib/components/amplify-reset-password/amplify-reset-password.component.d.ts

@@ -11,6 +11,8 @@ export declare class AmplifyResetPasswordComponent implements OnInit, AfterConte
     remoteError: string;
     isPending: boolean;
     private authSubscription;
+    sendCodeText: string;
+    backToSignInText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;

package/lib/components/amplify-setup-totp/amplify-setup-totp.component.d.ts

@@ -11,6 +11,8 @@ export declare class AmplifySetupTotpComponent implements OnInit, AfterContentIn
     headerText: string;
     qrCodeSource: string;
     private authSubscription;
+    backToSignInText: string;
+    confirmText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -25,4 +27,5 @@ export declare class AmplifySetupTotpComponent implements OnInit, AfterContentIn
     generateQRCode(): Promise<void>;
     onInput(event: Event): void;
     onSubmit(event: Event): void;
+    toSignIn(): void;
 }

package/lib/components/amplify-sign-in/amplify-sign-in.component.d.ts

@@ -10,6 +10,9 @@ export declare class AmplifySignInComponent implements AfterContentInit, OnInit,
     customComponents: Record<string, TemplateRef<any>>;
     remoteError: string;
     isPending: boolean;
+    forgotPasswordText: string;
+    signInButtonText: string;
+    noAccountText: string;
     private authSubscription;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
@@ -23,7 +26,6 @@ export declare class AmplifySignInComponent implements AfterContentInit, OnInit,
         signUp: (data?: Record<string | number | symbol, any>) => void;
         submit: (data?: Record<string | number | symbol, any>) => void;
     };
-    toSignUp(): void;
     toResetPassword(): void;
     onInput(event: Event): void;
     onSubmit(event: Event): Promise<void>;

package/lib/components/amplify-sign-up/amplify-sign-up.component.d.ts

@@ -14,6 +14,7 @@ export declare class AmplifySignUpComponent implements AfterContentInit, OnInit,
     secondaryAliases: string[];
     validationError: ValidationError;
     private authSubscription;
+    createAccountText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     get context(): {
         change: (data?: Record<string | number | symbol, any>) => void;
@@ -28,5 +29,4 @@ export declare class AmplifySignUpComponent implements AfterContentInit, OnInit,
     private onStateUpdate;
     onSubmit($event: any): Promise<void>;
     onInput(event: Event): void;
-    toSignIn(): void;
 }

package/lib/components/amplify-verify-user/amplify-verify-user.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterContentInit, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AuthMachineState } from '@aws-amplify/ui';
 import { StateMachineService } from '../../services/state-machine.service';
 import { AuthPropService } from '../../services/authenticator-context.service';
-import { AuthMachineState } from '@aws-amplify/ui';
 export declare class AmplifyVerifyUserComponent implements AfterContentInit, OnInit, OnDestroy {
     private stateMachine;
     private contextService;
@@ -11,7 +11,10 @@ export declare class AmplifyVerifyUserComponent implements AfterContentInit, OnI
     unverifiedAttributes: {};
     remoteError: string;
     isPending: boolean;
+    labelId: string;
     private authSubscription;
+    skipText: string;
+    verifyText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -24,5 +27,6 @@ export declare class AmplifyVerifyUserComponent implements AfterContentInit, OnI
         submit: (data?: Record<string | number | symbol, any>) => void;
     };
     skipVerify(): void;
+    getLabelForAttr(authAttr: string): string;
     onSubmit(event: Event): Promise<void>;
 }

package/lib/components/confirm-reset-password/amplify-confirm-reset-password.component.d.ts

@@ -11,6 +11,10 @@ export declare class ConfirmResetPasswordComponent implements OnInit, AfterConte
     remoteError: string;
     isPending: boolean;
     private authSubscription;
+    sendCodeText: string;
+    backToSignInText: string;
+    lostCodeText: string;
+    resendCodeText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;

package/lib/components/confirm-verify-user/amplify-confirm-verify-user.component.d.ts

@@ -11,6 +11,8 @@ export declare class ConfirmVerifyUserComponent implements OnInit, AfterContentI
     remoteError: string;
     isPending: boolean;
     private authSubscription;
+    skipText: string;
+    submitText: string;
     constructor(stateMachine: StateMachineService, contextService: AuthPropService);
     ngOnInit(): void;
     ngAfterContentInit(): void;

package/lib/components/index.d.ts

@@ -1,5 +1,13 @@
-export * from './amplify-authenticator/amplify-authenticator.component';
-export * from './amplify-confirm-sign-up/amplify-confirm-sign-up.component';
-export * from './amplify-sign-in/amplify-sign-in.component';
-export * from './amplify-sign-out/amplify-sign-out.component';
-export * from './amplify-sign-up/amplify-sign-up.component';
+export { AmplifyAuthenticatorComponent } from './amplify-authenticator/amplify-authenticator.component';
+export { AmplifyConfirmSignInComponent } from './amplify-confirm-sign-in/amplify-confirm-sign-in.component';
+export { AmplifyConfirmSignUpComponent } from './amplify-confirm-sign-up/amplify-confirm-sign-up.component';
+export { AmplifyFederatedSignInButtonComponent } from './amplify-federated-sign-in-button/amplify-federated-sign-in-button.component';
+export { AmplifyFederatedSignInComponent } from './amplify-federated-sign-in/amplify-federated-sign-in.component';
+export { AmplifyForceNewPasswordComponent } from './amplify-force-new-password/amplify-force-new-password.component';
+export { AmplifyResetPasswordComponent } from './amplify-reset-password/amplify-reset-password.component';
+export { AmplifySetupTotpComponent } from './amplify-setup-totp/amplify-setup-totp.component';
+export { AmplifySignInComponent } from './amplify-sign-in/amplify-sign-in.component';
+export { AmplifySignUpComponent } from './amplify-sign-up/amplify-sign-up.component';
+export { AmplifyVerifyUserComponent } from './amplify-verify-user/amplify-verify-user.component';
+export { ConfirmResetPasswordComponent } from './confirm-reset-password/amplify-confirm-reset-password.component';
+export { ConfirmVerifyUserComponent } from './confirm-verify-user/amplify-confirm-verify-user.component';

package/lib/directives/{amplify-override.directive.d.ts → amplify-slot.directive.d.ts}

@@ -1,7 +1,7 @@
 import { TemplateRef } from '@angular/core';
-export declare class AmplifyOverrideDirective {
+export declare class AmplifySlotDirective {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     name: string;
-    set amplifyOverride(component: string);
+    set amplifySlot(component: string);
 }

package/lib/primitives/amplify-button/amplify-button.component.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+export declare class AmplifyButtonComponent implements OnInit {
+    type: 'submit' | 'button';
+    fullWidth: boolean | string;
+    size: 'small' | 'medium' | 'large';
+    variation: 'primary' | 'default' | 'link';
+    fontWeight: 'normal' | 'bold' | 'lighter';
+    typeAttr: string;
+    fullWidthAttr: boolean | string;
+    sizeAttr: string;
+    variationAttr: string;
+    defaultClass: boolean;
+    fontWeightAttr: string;
+    ngOnInit(): void;
+}

package/lib/primitives/amplify-form-field/amplify-form-field.component.d.ts

@@ -0,0 +1,34 @@
+import { OnInit } from '@angular/core';
+import { AuthInputAttributes } from '@aws-amplify/ui';
+import { StateMachineService } from '../../services/state-machine.service';
+/**
+ * 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.
+ */
+export declare class AmplifyFormFieldComponent implements OnInit {
+    private stateMachine;
+    name: string;
+    type: string;
+    required: boolean;
+    placeholder: string;
+    label: string;
+    initialValue: string;
+    disabled: boolean;
+    autocomplete: string;
+    defaultCountryCode: string;
+    countryDialCodes: string[];
+    textFieldId: string;
+    selectFieldId: string;
+    constructor(stateMachine: StateMachineService);
+    ngOnInit(): void;
+    get attributeMap(): AuthInputAttributes;
+    get error(): string;
+    inferLabel(): string;
+    inferPlaceholder(): string;
+    inferType(): string;
+    isPasswordField(): boolean;
+    isPhoneField(): boolean;
+}

package/lib/primitives/amplify-password-field/amplify-password-field.component.d.ts

@@ -0,0 +1,14 @@
+export declare class AmplifyPasswordFieldComponent {
+    autocomplete: string;
+    disabled: boolean;
+    id: string;
+    initialValue: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    required: boolean;
+    type: 'text' | 'password';
+    showPassword: boolean;
+    showPasswordButtonlabel: string;
+    togglePasswordText(): void;
+}

package/lib/primitives/amplify-select/amplify-select.component.d.ts

@@ -0,0 +1,7 @@
+export declare class AmplifySelectComponent {
+    items: string[];
+    name: string;
+    label: string;
+    id: string;
+    defaultValue: string;
+}

package/lib/primitives/amplify-text-field/amplify-text-field.component.d.ts

@@ -0,0 +1,11 @@
+export declare class AmplifyTextFieldComponent {
+    autocomplete: string;
+    disabled: boolean;
+    id: string;
+    initialValue: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    required: boolean;
+    type: string;
+}

package/lib/primitives/amplify-user-name-alias/amplify-user-name-alias.component.d.ts

@@ -5,6 +5,7 @@ export declare class AmplifyUserNameAliasComponent implements OnInit {
     name: string;
     disabled: boolean;
     initialValue: string;
+    required: boolean;
     label: string;
     type: string;
     error: string;

package/lib/primitives/index.d.ts

@@ -1,2 +1,2 @@
-export * from './amplify-input/amplify-input.component';
+export * from './amplify-form-field/amplify-form-field.component';
 export * from './amplify-error/amplify-error.component';

package/lib/primitives/phone-number-field/phone-number-field.component.d.ts

@@ -0,0 +1,14 @@
+export declare class PhoneNumberFieldComponent {
+    autocomplete: string;
+    disabled: boolean;
+    defaultCountryCode: string;
+    selectFieldId: string;
+    textFieldId: string;
+    initialValue: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    required: boolean;
+    type: string;
+    countryDialCodes: string[];
+}

package/lib/primitives/tab-item/tab-item.component.d.ts

@@ -0,0 +1,7 @@
+export declare class TabItemComponent {
+    title: string;
+    active: boolean;
+    id: string;
+    labelledById: string;
+    tabIndex: number;
+}

package/lib/primitives/tabs/tabs.component.d.ts

@@ -0,0 +1,9 @@
+import { AfterContentInit, QueryList, EventEmitter } from '@angular/core';
+import { TabItemComponent } from '../tab-item/tab-item.component';
+export declare class TabsComponent implements AfterContentInit {
+    tabs: QueryList<TabItemComponent>;
+    tabChange: EventEmitter<any>;
+    ngAfterContentInit(): void;
+    selectTab(tab: TabItemComponent): void;
+    handleTabClick(tab: TabItemComponent): void;
+}

package/lib/services/state-machine.service.d.ts

@@ -1,4 +1,4 @@
-import { AuthContext, AuthEvent, AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
+import { AuthContext, AuthenticatorMachineOptions, AuthEvent, AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 import { Event } from 'xstate';
 /**
  * AmplifyContextService contains access to the xstate machine
@@ -9,7 +9,7 @@ export declare class StateMachineService {
     private _authService;
     private _user;
     private _services;
-    constructor();
+    startMachine({ initialState, loginMechanisms, }: AuthenticatorMachineOptions): void;
     get services(): {
         readonly change: (data?: Record<string | number | symbol, any>) => void;
         readonly federatedSignIn: (data?: Record<string | number | symbol, any>) => void;

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@aws-amplify/ui-angular",
-  "version": "2.0.1-next.2",
+  "version": "2.0.1-next.6",
   "peerDependencies": {
     "@angular/common": "^11.2.4",
     "@angular/core": "^11.2.4",
     "aws-amplify": "3.x.x || 4.x.x"
   },
   "dependencies": {
-    "@aws-amplify/ui": "3.0.1-next.2",
     "@aws-amplify/ui-components": "^1.7.0",
+    "@aws-amplify/ui": "3.0.1-next.6",
     "@stencil/core": "^2.7.0",
-    "tslib": "^2.0.0",
+    "nanoid": "^3.1.25",
     "qrcode": "^1.4.4",
+    "tslib": "^2.0.0",
     "xstate": "^4.20.1"
   },
   "publishConfig": {

package/styles/component.css

@@ -0,0 +1,169 @@
+[data-amplify-authenticator] {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  font-family: 'Work Sans', Arial, Helvetica, sans-serif;
+}
+
+[data-amplify-wrapper] [data-amplify-heading] {
+  margin-bottom: 0px;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+[data-amplify-authenticator] [data-amplify-form] {
+  display: grid;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  padding: 2rem;
+}
+
+[data-amplify-wrapper] [data-amplify-label] > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+[data-amplify-confirmationcode] {
+  display: grid;
+}
+
+[data-amplify-wrapper] [data-amplify-password] [data-amplify-box] {
+  display: flex;
+  flex-direction: row;
+}
+
+[data-amplify-wrapper]
+  [data-amplify-password]
+  [data-amplify-box]
+  > :not([hidden])
+  ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+[data-amplify-wrapper]
+  [data-amplify-password]
+  [data-amplify-box]
+  [data-amplify-text] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+[data-amplify-wrapper]
+  [data-amplify-password]
+  [data-amplify-box]
+  [data-amplify-button] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(59, 130, 246, var(--tw-text-opacity));
+}
+
+[data-amplify-wrapper] [data-amplify-footer] [data-amplify-text] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+[data-amplify-wrapper]
+  [data-amplify-footer]
+  [data-amplify-button]:first-of-type {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(59, 130, 246, var(--tw-text-opacity));
+}
+
+[data-amplify-wrapper]
+  [data-amplify-footer]
+  [data-amplify-button]:last-of-type {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+[data-amplify-authenticator] :disabled {
+  opacity: 0.5;
+  cursor: initial;
+}
+
+[data-ui-error] {
+  color: orangered;
+}
+
+[data-amplify-wrapper] [data-amplify-federated] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+[data-amplify-wrapper] [data-amplify-federated] [data-amplify-button] {
+  border-radius: 0.5rem;
+  background-color: transparent;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(59, 130, 246, var(--tw-text-opacity));
+}
+
+[data-amplify-button] {
+  cursor: pointer;
+}
+
+[data-amplify-strike] {
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px solid #c4c4c4;
+  line-height: 0.1em;
+  margin: 32px 0;
+  color: #828282;
+}
+
+[data-amplify-strike] [data-amplify-spacer] {
+  background: white;
+  padding: 0 25px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+[data-amplify-wrapper] [data-amplify-verify-label] {
+  display: flex;
+}
+
+[data-amplify-wrapper] [data-amplify-verify-input] {
+  width: initial;
+}
+
+.federated-sign-in-button {
+  border-color: black;
+  border-radius: 0;
+  color: black;
+}
+
+.federated-sign-in-button-row {
+  position: relative;
+}
+
+.federated-sign-in-icon {
+  position: absolute;
+  left: 0;
+}