@aws-amplify/ui 2.0.4-unstable.93 → 3.0.0

package/dist/index.d.ts

@@ -0,0 +1,788 @@
+import * as xstate from 'xstate';
+import { State, Interpreter, Sender } from 'xstate';
+import { CognitoUser } from 'amazon-cognito-identity-js';
+import { PartialDeep } from 'type-fest';
+
+declare type ValidationError = Record<string, string>;
+/**
+ * Return type of validator. This is `null` if there are no error, and `ValidationError` otherwise.
+ */
+declare type ValidatorResult = void | null | ValidationError;
+/**
+ * Validates the given formData. This can be synchronous or asynchronous.
+ */
+declare type Validator = (formData: AuthFormData) => ValidatorResult | Promise<ValidatorResult>;
+
+declare type AuthFormData = Record<string, string>;
+interface AuthContext {
+    actorRef?: any;
+    config?: {
+        loginMechanisms?: LoginMechanism[];
+        signUpAttributes?: SignUpAttribute[];
+        socialProviders?: SocialProvider[];
+    };
+    user?: CognitoUserAmplify;
+}
+interface BaseFormContext {
+    authAttributes?: Record<string, any>;
+    challengeName?: string;
+    formValues?: AuthFormData;
+    intent?: string;
+    remoteError?: string;
+    user?: CognitoUserAmplify;
+    validationError?: ValidationError;
+    country_code?: string;
+}
+interface SignInContext extends BaseFormContext {
+    loginMechanisms: AuthContext['config']['loginMechanisms'];
+    socialProviders: AuthContext['config']['socialProviders'];
+    attributeToVerify?: string;
+    redirectIntent?: string;
+    unverifiedAttributes?: Record<string, string>;
+}
+declare const signUpFieldsWithDefault: readonly ["birthdate", "email", "family_name", "given_name", "middle_name", "name", "nickname", "phone_number", "preferred_username", "profile", "website"];
+declare const signUpFieldsWithoutDefault: readonly ["address", "gender", "locale", "picture", "updated_at", "zoneinfo"];
+declare type SignUpFieldsWithDefaults = typeof signUpFieldsWithDefault[number];
+declare type SignUpFieldsWithoutDefaults = typeof signUpFieldsWithoutDefault[number];
+declare type SignUpAttribute = SignUpFieldsWithDefaults | SignUpFieldsWithoutDefaults;
+interface SignUpContext extends BaseFormContext {
+    loginMechanisms: AuthContext['config']['loginMechanisms'];
+    socialProviders: AuthContext['config']['socialProviders'];
+    unverifiedAttributes?: Record<string, string>;
+}
+interface ResetPasswordContext extends BaseFormContext {
+    username?: string;
+    unverifiedAttributes?: Record<string, string>;
+}
+interface SignOutContext {
+    authAttributes?: Record<string, any>;
+    challengeName?: string;
+    unverifiedAttributes?: Record<string, string>;
+    user?: CognitoUserAmplify;
+}
+declare type ActorContextWithForms = SignInContext | SignUpContext | ResetPasswordContext;
+declare type SignInState = State<SignInContext, AuthEvent>;
+declare type SignUpState = State<SignUpContext, AuthEvent>;
+declare type SignOutState = State<SignOutContext, AuthEvent>;
+declare type ResetPasswordState = State<ResetPasswordContext, AuthEvent>;
+declare type AuthActorContext = ActorContextWithForms | SignOutContext;
+declare type AuthActorState = State<AuthActorContext, AuthEvent>;
+interface CognitoUserAmplify extends CognitoUser {
+    username?: string;
+}
+declare type InvokeActorEventTypes = 'done.invoke.signInActor' | 'done.invoke.signUpActor' | 'done.invoke.signOutActor' | 'done.invoke.resetPasswordActor';
+declare type AuthEventTypes = 'CHANGE' | 'FEDERATED_SIGN_IN' | 'RESEND' | 'RESET_PASSWORD' | 'SIGN_IN' | 'SIGN_OUT' | 'SIGN_UP' | 'SKIP' | 'SUBMIT' | InvokeActorEventTypes;
+declare enum AuthChallengeNames {
+    SMS_MFA = "SMS_MFA",
+    SOFTWARE_TOKEN_MFA = "SOFTWARE_TOKEN_MFA",
+    NEW_PASSWORD_REQUIRED = "NEW_PASSWORD_REQUIRED",
+    RESET_REQUIRED = "RESET_REQUIRED",
+    MFA_SETUP = "MFA_SETUP"
+}
+interface InputAttributes {
+    label: string;
+    type: string;
+    placeholder: string;
+    autocomplete?: string;
+}
+declare const LoginMechanismArray: readonly ["username", "email", "phone_number"];
+declare type LoginMechanism = typeof LoginMechanismArray[number];
+declare type SocialProvider = 'amazon' | 'apple' | 'facebook' | 'google';
+declare type AuthFieldsWithDefaults = LoginMechanism | SignUpFieldsWithDefaults | 'confirmation_code' | 'password';
+declare type AuthInputAttributes = Record<AuthFieldsWithDefaults, InputAttributes>;
+declare type AuthEventData = Record<PropertyKey, any>;
+interface AuthEvent {
+    type: AuthEventTypes;
+    data?: AuthEventData;
+}
+declare type AuthMachineState = State<AuthContext, AuthEvent>;
+declare type AuthInterpreter = Interpreter<AuthContext, any, AuthEvent>;
+
+declare type NoInfer<T> = [T][T extends any ? 0 : never];
+
+declare const authInputAttributes: AuthInputAttributes;
+declare enum FederatedIdentityProviders {
+    Apple = "SignInWithApple",
+    Amazon = "LoginWithAmazon",
+    Facebook = "Facebook",
+    Google = "Google"
+}
+/**
+ * Given xstate context from AuthMachine, this returns the input label, type,
+ * and error attributes of the configured login_mechanisms. An optional "alias"
+ * may be passed in to get info from context for that specific alias.
+ */
+declare const getAliasInfoFromContext: (context: AuthContext, alias?: LoginMechanism) => {
+    label: string;
+    type: string;
+    error: any;
+};
+/**
+ * Given xstate context from AuthMachine, returns the primaryAlias and
+ * secondaryAliases.
+ */
+declare const getConfiguredAliases: (context: AuthContext) => {
+    primaryAlias: "username" | "email" | "phone_number";
+    secondaryAliases: ("username" | "email" | "phone_number")[];
+};
+/**
+ * Get the state of current actor. This is useful for checking which screen
+ * to render: e.g. `getActorState(state).matches('confirmSignUp.edit').
+ */
+declare const getActorState: (state: AuthMachineState) => AuthActorState;
+/**
+ * Get the context of current actor. Useful for getting any nested context
+ * like remoteError.
+ */
+declare const getActorContext: (state: AuthMachineState) => AuthActorContext;
+/**
+ * Creates public facing auth helpers that abstracts out xstate implementation
+ * detail. Each framework implementation can export these helpers so that
+ * developers can send events without having to learn internals.
+ *
+ * ```
+ * const [state, send] = useActor(...);
+ * const { submit } = getSendEventAliases(send);
+ * submit({ username, password})
+ * ```
+ */
+declare const getSendEventAliases: (send: Sender<AuthEvent>) => {
+    readonly resendCode: (data?: AuthEventData) => void;
+    readonly signOut: (data?: AuthEventData) => void;
+    readonly submitForm: (data?: AuthEventData) => void;
+    readonly updateForm: (data?: AuthEventData) => void;
+    readonly toFederatedSignIn: (data?: AuthEventData) => void;
+    readonly toResetPassword: (data?: AuthEventData) => void;
+    readonly toSignIn: (data?: AuthEventData) => void;
+    readonly toSignUp: (data?: AuthEventData) => void;
+    readonly skipVerification: (data?: AuthEventData) => void;
+};
+declare const getServiceContextFacade: (state: AuthMachineState) => {
+    error: string;
+    hasValidationErrors: boolean;
+    isPending: boolean;
+    route: string;
+    user: CognitoUserAmplify;
+    validationErrors: {
+        [x: string]: string;
+    };
+};
+declare const getServiceFacade: ({ send, state }: {
+    send: any;
+    state: any;
+}) => {
+    error: string;
+    hasValidationErrors: boolean;
+    isPending: boolean;
+    route: string;
+    user: CognitoUserAmplify;
+    validationErrors: {
+        [x: string]: string;
+    };
+    resendCode: (data?: AuthEventData) => void;
+    signOut: (data?: AuthEventData) => void;
+    submitForm: (data?: AuthEventData) => void;
+    updateForm: (data?: AuthEventData) => void;
+    toFederatedSignIn: (data?: AuthEventData) => void;
+    toResetPassword: (data?: AuthEventData) => void;
+    toSignIn: (data?: AuthEventData) => void;
+    toSignUp: (data?: AuthEventData) => void;
+    skipVerification: (data?: AuthEventData) => void;
+};
+
+declare type ContactMethod = 'Email' | 'Phone Number';
+declare const censorAllButFirstAndLast: (value: string) => string;
+declare const censorPhoneNumber: (val: string) => string;
+
+declare const countryDialCodes: string[];
+
+/**
+ * Contains translatable strings that authenticator provides by default. Customers
+ * can use this to add custom vocabularies:
+ *
+ * ```
+ * I18n.putVocabulariesForLanguage("en", {
+ *  [DefaultTexts.SIGN_IN]: "Custom Sign In Text",
+ *  [DefaultTexts.SIGN_IN_BUTTON]: "Custom Click Here to Sign In"
+ * });
+ * ```
+ */
+declare const DefaultTexts: {
+    readonly BACK_SIGN_IN: "Back to Sign In";
+    readonly BIRTHDATE: "Birthdate";
+    readonly CHANGE_PASSWORD: "Change Password";
+    readonly CHANGING_PASSWORD: "Changing";
+    readonly CODE: "Code";
+    readonly CONFIRM_PASSWORD: "Confirm Password";
+    readonly CONFIRM_RESET_PASSWORD_HEADING: "Reset your Password";
+    readonly CONFIRM_SIGNUP_HEADING: "Confirm Sign Up";
+    readonly CONFIRM_SMS: "Confirm SMS Code";
+    readonly CONFIRM_TOTP: "Confirm TOTP Code";
+    readonly CONFIRM: "Confirm";
+    readonly CONFIRMATION_CODE: "Confirmation Code";
+    readonly CONFIRMING: "Confirming";
+    readonly CREATE_ACCOUNT: "Create Account";
+    readonly CREATING_ACCOUNT: "Creating Account";
+    readonly EMAIL_ADDRESS: "Email";
+    readonly ENTER_CODE: "Enter your code";
+    readonly ENTER_USERNAME: "Enter your username";
+    readonly FAMILY_NAME: "Family Name";
+    readonly GIVEN_NAME: "Given Name";
+    readonly FORGOT_YOUR_PASSWORD: "Forgot your password? ";
+    readonly HIDE_PASSWORD: "Hide password";
+    readonly LOADING: "Loading";
+    readonly LOGIN_NAME: "Username";
+    readonly MIDDLE_NAME: "Middle Name";
+    readonly NAME: "Name";
+    readonly NICKNAME: "Nickname";
+    readonly NEW_PASSWORD: "New password";
+    readonly PASSWORD: "Password";
+    readonly PHONE_NUMBER: "Phone Number";
+    readonly PREFERRED_USERNAME: "Preferred Username";
+    readonly PROFILE: "Profile";
+    readonly RESEND_CODE: "Resend Code";
+    readonly RESET_PASSWORD_HEADING: "Reset your password";
+    readonly RESET_PASSWORD: "Send Code";
+    readonly SEND_CODE: "Send code";
+    readonly SENDING: "Sending";
+    readonly SETUP_TOTP: "Setup TOTP";
+    readonly SHOW_PASSWORD: "Show password";
+    readonly SIGN_IN_BUTTON: "Sign in";
+    readonly SIGN_IN_TAB: "Sign In";
+    readonly SIGN_IN_WITH_AMAZON: "Sign In with Amazon";
+    readonly SIGN_IN_WITH_APPLE: "Sign In with Apple";
+    readonly SIGN_IN_WITH_FACEBOOK: "Sign In with Facebook";
+    readonly SIGN_IN_WITH_GOOGLE: "Sign In with Google";
+    readonly SIGN_IN: "Sign in to your account";
+    readonly SIGN_UP_BUTTON: "Create a new account";
+    readonly SIGNING_IN_BUTTON: "Signing in";
+    readonly SKIP: "Skip";
+    readonly SUBMIT: "Submit";
+    readonly SUBMITTING: "Submitting";
+    readonly VERIFY_CONTACT: "Verify Contact";
+    readonly VERIFY_HEADING: "Account recovery requires verified contact information";
+    readonly VERIFY: "Verify";
+    readonly WEBSITE: "Website";
+};
+declare type Phrase = typeof DefaultTexts[keyof typeof DefaultTexts];
+/**
+ * TODO: Translation keys for dictionaries can be inferred from DefaultTexts
+ * by typing it to Partial<Record<Phrase, string>>.
+ *
+ * But this requires error string keys to be standarized as well, and can be a
+ * limiting factor for custom translation keys. Marking it as TODO until we see
+ * a reason to strongly type this.
+ */
+declare type Dict = Record<string, string>;
+/**
+ * This helper type checks that given phrase is one of the texts @aws-amplify/ui
+ * provides by default. This enables vscode autocompletion to help catch typos
+ * during development.
+ *
+ * You can also use translate<string> to handle custom strings or dynamic content.
+ */
+declare function translate<T = Phrase>(phrase: NoInfer<T>): string;
+declare const translations: Record<string, Dict>;
+
+declare const defaultServices: {
+    getAmplifyConfig(): Promise<{}>;
+    getCurrentUser(): Promise<any>;
+    validateCustomSignUp(formData: any): Promise<ValidatorResult>;
+    validateConfirmPassword<Validator>(formData: any): Promise<ValidatorResult>;
+    validatePreferredUsername(formData: any): Promise<ValidatorResult>;
+};
+
+declare type AuthenticatorMachineOptions = AuthContext['config'] & {
+    initialState?: 'signIn' | 'signUp' | 'resetPassword';
+    services?: Partial<typeof defaultServices>;
+};
+declare function createAuthenticatorMachine({ initialState, loginMechanisms, signUpAttributes, socialProviders, services: customServices, }: AuthenticatorMachineOptions): xstate.StateMachine<AuthContext, any, AuthEvent, {
+    value: any;
+    context: AuthContext;
+}, xstate.ActionObject<AuthContext, AuthEvent>>;
+
+/**
+ * Helper function to test if something is a design token or not.
+ * Used in the React component style props.
+ *
+ * @param arg - thing to test if it is a design token or not
+ * @returns boolean
+ */
+declare function isDesignToken(arg: unknown): arg is WebDesignToken;
+/**
+ *
+ */
+declare type DesignToken<ValueType = any> = {
+    value: ValueType;
+};
+/**
+ * A fully setup design token ready to be used in web platform.
+ */
+declare type WebDesignToken<ValueType = any> = {
+    /**
+     * Name of the design token
+     */
+    name: string;
+    /**
+     * Object path of the design token. Used for constructing the name
+     */
+    path: Array<string>;
+    /**
+     * Original (unresolved, untransformed) value of the design token
+     */
+    original: ValueType;
+    /**
+     * The wrapped CSS variable name of this design token, for example
+     * `var(--amplify-colors-font-primary)`
+     */
+    toString(): string;
+} & DesignToken<ValueType>;
+declare type ColorValue = string;
+declare type BorderWidthValue = string;
+declare type FontValue = string;
+declare type FontSizeValue = string;
+declare type FontWeightValue = number;
+declare type LineHeightValue = string;
+declare type OpacityValue = string;
+declare type OutlineOffsetValue = string;
+declare type OutlineWidthValue = string;
+declare type RadiusValue = string;
+declare type ShadowValue = {
+    offsetX: string;
+    offsetY: string;
+    blurRadius: string;
+    spreadRadius?: string;
+    color: string;
+};
+declare type SpaceValue = string;
+declare type TimeValue = string;
+declare type TransformValue = string;
+
+declare type BorderWidths = {
+    /**
+     * Small border, used for inputs and such
+     */
+    small: DesignToken<BorderWidthValue>;
+    /**
+     * Medium border, used for
+     */
+    medium: DesignToken<BorderWidthValue>;
+    /**
+     * Large border
+     */
+    large: DesignToken<BorderWidthValue>;
+};
+declare type WebBorderWidths = {
+    [Property in keyof BorderWidths]: WebDesignToken<BorderWidthValue>;
+};
+
+interface OrdinalScale<DesignTokenType = DesignToken<ColorValue>> {
+    primary: DesignTokenType;
+    secondary: DesignTokenType;
+    tertiary: DesignTokenType;
+}
+interface OrdinalVariation<DesignTokenType = DesignToken<ColorValue>> {
+    info: DesignTokenType;
+    warning: DesignTokenType;
+    error: DesignTokenType;
+    success: DesignTokenType;
+}
+
+declare type ScaleKeys = 10 | 20 | 40 | 60 | 80 | 90 | 100;
+declare type ColorScale<DesignTokenType = DesignToken<ColorValue>> = {
+    [key in ScaleKeys]: DesignTokenType;
+};
+declare type FontColors<DesignTokenType = DesignToken<ColorValue>> = {
+    inverse: DesignTokenType;
+    interactive: DesignTokenType;
+    hover: DesignTokenType;
+    focus: DesignTokenType;
+    active: DesignTokenType;
+    disabled: DesignTokenType;
+} & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
+declare type BackgroundColors<DesignTokenType = DesignToken<ColorValue>> = {
+    disabled: DesignTokenType;
+} & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
+declare type BorderColors<DesignTokenType = DesignToken<ColorValue>> = {
+    disabled: DesignTokenType;
+    focus: DesignTokenType;
+    error: DesignTokenType;
+} & OrdinalScale<DesignTokenType>;
+declare type ColorTypes<DesignTokenType = DesignToken<ColorValue>> = {
+    [key in ScaleKeys]: DesignTokenType;
+} | FontColors | BackgroundColors | DesignTokenType | BorderColors;
+declare type WebColorTypes = ColorTypes<WebDesignToken<ColorValue>>;
+declare type Colors = {
+    red: ColorScale;
+    orange: ColorScale;
+    yellow: ColorScale;
+    green: ColorScale;
+    teal: ColorScale;
+    blue: ColorScale;
+    purple: ColorScale;
+    pink: ColorScale;
+    neutral: ColorScale;
+    white: DesignToken<ColorValue>;
+    black: DesignToken<ColorValue>;
+    font: FontColors;
+    background: BackgroundColors;
+    border: BorderColors;
+    brand: {
+        primary: ColorScale;
+        secondary: ColorScale;
+    };
+    [key: string]: ColorTypes | Record<string, ColorTypes>;
+};
+declare type WebColors = {
+    red: ColorScale<WebDesignToken<ColorValue>>;
+    orange: ColorScale<WebDesignToken<ColorValue>>;
+    yellow: ColorScale<WebDesignToken<ColorValue>>;
+    green: ColorScale<WebDesignToken<ColorValue>>;
+    teal: ColorScale<WebDesignToken<ColorValue>>;
+    blue: ColorScale<WebDesignToken<ColorValue>>;
+    purple: ColorScale<WebDesignToken<ColorValue>>;
+    pink: ColorScale<WebDesignToken<ColorValue>>;
+    neutral: ColorScale<WebDesignToken<ColorValue>>;
+    white: WebDesignToken<ColorValue>;
+    black: WebDesignToken<ColorValue>;
+    font: FontColors<WebDesignToken<ColorValue>>;
+    background: BackgroundColors<WebDesignToken<ColorValue>>;
+    border: BorderColors<WebDesignToken<ColorValue>>;
+    brand: {
+        primary: ColorScale<WebDesignToken<ColorValue>>;
+        secondary: ColorScale<WebDesignToken<ColorValue>>;
+    };
+    [key: string]: WebColorTypes | Record<string, WebColorTypes>;
+};
+
+declare type Fonts = {
+    default: {
+        variable: DesignToken<FontValue>;
+        static: DesignToken<FontValue>;
+    };
+};
+interface WebFonts {
+    default: {
+        [Property in keyof Fonts['default']]: WebDesignToken<FontValue>;
+    };
+}
+
+declare type FontSizes = {
+    xxxs: DesignToken<FontSizeValue>;
+    xxs: DesignToken<FontSizeValue>;
+    xs: DesignToken<FontSizeValue>;
+    small: DesignToken<FontSizeValue>;
+    medium: DesignToken<FontSizeValue>;
+    large: DesignToken<FontSizeValue>;
+    xl: DesignToken<FontSizeValue>;
+    xxl: DesignToken<FontSizeValue>;
+    xxxl: DesignToken<FontSizeValue>;
+    xxxxl: DesignToken<FontSizeValue>;
+};
+declare type WebFontSizes = {
+    [Property in keyof FontSizes]: WebDesignToken<FontSizeValue>;
+};
+
+declare type FontWeights = {
+    hairline: DesignToken<FontWeightValue>;
+    thin: DesignToken<FontWeightValue>;
+    light: DesignToken<FontWeightValue>;
+    normal: DesignToken<FontWeightValue>;
+    medium: DesignToken<FontWeightValue>;
+    semibold: DesignToken<FontWeightValue>;
+    bold: DesignToken<FontWeightValue>;
+    extrabold: DesignToken<FontWeightValue>;
+    black: DesignToken<FontWeightValue>;
+};
+declare type WebFontWeights = {
+    [Property in keyof FontWeights]: WebDesignToken<FontWeightValue>;
+};
+
+declare type LineHeights = {
+    small: DesignToken<LineHeightValue>;
+    medium: DesignToken<LineHeightValue>;
+    large: DesignToken<LineHeightValue>;
+};
+declare type WebLineHeights = {
+    [Property in keyof LineHeights]: WebDesignToken<LineHeightValue>;
+};
+
+declare type Opacities = {
+    0: DesignToken<OpacityValue>;
+    10: DesignToken<OpacityValue>;
+    20: DesignToken<OpacityValue>;
+    30: DesignToken<OpacityValue>;
+    40: DesignToken<OpacityValue>;
+    50: DesignToken<OpacityValue>;
+    60: DesignToken<OpacityValue>;
+    70: DesignToken<OpacityValue>;
+    80: DesignToken<OpacityValue>;
+    90: DesignToken<OpacityValue>;
+    100: DesignToken<OpacityValue>;
+};
+declare type WebOpacities = {
+    [Property in keyof Opacities]: WebDesignToken<OpacityValue>;
+};
+
+declare type OutlineOffsets = {
+    small: DesignToken<OutlineOffsetValue>;
+    medium: DesignToken<OutlineOffsetValue>;
+    large: DesignToken<OutlineOffsetValue>;
+};
+declare type WebOutlineOffsets = {
+    [Property in keyof OutlineOffsets]: WebDesignToken<OutlineOffsetValue>;
+};
+
+declare type OutlineWidths = {
+    small: DesignToken<OutlineWidthValue>;
+    medium: DesignToken<OutlineWidthValue>;
+    large: DesignToken<OutlineWidthValue>;
+};
+declare type WebOutlineWidths = {
+    [Property in keyof OutlineWidths]: WebDesignToken<OutlineWidthValue>;
+};
+
+declare type Radii = {
+    xs: DesignToken<RadiusValue>;
+    small: DesignToken<RadiusValue>;
+    medium: DesignToken<RadiusValue>;
+    large: DesignToken<RadiusValue>;
+    xl: DesignToken<RadiusValue>;
+    xxl: DesignToken<RadiusValue>;
+    xxxl: DesignToken<RadiusValue>;
+};
+declare type WebRadii = {
+    [Property in keyof Radii]: WebDesignToken<RadiusValue>;
+};
+
+declare type Shadows = {
+    small: DesignToken<ShadowValue>;
+    medium: DesignToken<ShadowValue>;
+    large: DesignToken<ShadowValue>;
+};
+declare type WebShadows = {
+    [Property in keyof Shadows]: WebDesignToken<ShadowValue>;
+};
+
+declare type Space = {
+    xxxs: DesignToken<SpaceValue>;
+    xxs: DesignToken<SpaceValue>;
+    xs: DesignToken<SpaceValue>;
+    small: DesignToken<SpaceValue>;
+    medium: DesignToken<SpaceValue>;
+    large: DesignToken<SpaceValue>;
+    xl: DesignToken<SpaceValue>;
+    xxl: DesignToken<SpaceValue>;
+    xxxl: DesignToken<SpaceValue>;
+    relative: {
+        xxxs: DesignToken<SpaceValue>;
+        xxs: DesignToken<SpaceValue>;
+        xs: DesignToken<SpaceValue>;
+        small: DesignToken<SpaceValue>;
+        medium: DesignToken<SpaceValue>;
+        large: DesignToken<SpaceValue>;
+        xl: DesignToken<SpaceValue>;
+        xxl: DesignToken<SpaceValue>;
+        xxxl: DesignToken<SpaceValue>;
+    };
+};
+declare type WebSpace = {
+    [Property in keyof Omit<Space, 'relative'>]: WebDesignToken<SpaceValue>;
+} & {
+    relative: {
+        [Property in keyof Space['relative']]: WebDesignToken<SpaceValue>;
+    };
+};
+
+declare type Time = {
+    short: DesignToken<TimeValue>;
+    medium: DesignToken<TimeValue>;
+    long: DesignToken<TimeValue>;
+};
+declare type WebTime = {
+    [Property in keyof Time]: WebDesignToken<TimeValue>;
+};
+
+declare type Transforms = {
+    slideX: {
+        small: DesignToken<TransformValue>;
+        medium: DesignToken<TransformValue>;
+        large: DesignToken<TransformValue>;
+    };
+};
+declare type WebTransforms = {
+    slideX: {
+        [Property in keyof Transforms['slideX']]: WebDesignToken<TransformValue>;
+    };
+};
+
+interface Tokens {
+    components: any;
+    borderWidths: BorderWidths;
+    colors: Colors;
+    fonts: Fonts;
+    fontSizes: FontSizes;
+    fontWeights: FontWeights;
+    lineHeights: LineHeights;
+    opacities: Opacities;
+    outlineOffsets: OutlineOffsets;
+    outlineWidths: OutlineWidths;
+    radii: Radii;
+    shadows: Shadows;
+    space: Space;
+    time: Time;
+    transforms: Transforms;
+}
+/**
+ * The fully setup theme tokens. It has the same shape as Tokens
+ * but each token has added fields.
+ */
+interface WebTokens extends Tokens {
+    borderWidths: WebBorderWidths;
+    colors: WebColors;
+    fonts: WebFonts;
+    fontSizes: WebFontSizes;
+    fontWeights: WebFontWeights;
+    lineHeights: WebLineHeights;
+    opacities: WebOpacities;
+    outlineOffsets: WebOutlineOffsets;
+    outlineWidths: WebOutlineWidths;
+    radii: WebRadii;
+    shadows: WebShadows;
+    space: WebSpace;
+    time: WebTime;
+    transform: WebTransforms;
+}
+
+interface Breakpoints {
+    values: {
+        base: number;
+        small: number;
+        medium: number;
+        large: number;
+        xl: number;
+        xxl: number;
+    };
+    unit: string;
+    defaultBreakpoint: string;
+}
+
+/**
+ * An override is a set of tokens that override others
+ * in certain contexts. On Android, these are like resource
+ * qualifiers. On the web, these are like media queries with
+ * a set of CSS variables in it. A theme should contain
+ * everything it needs to render
+ */
+declare type Override = SelectorOverride | MediaQueryOverride | BreakpointOverride | ColorModeOverride;
+interface BaseOverride {
+    tokens?: PartialDeep<Tokens>;
+}
+/**
+ * This override takes a breakpoint name and creates a media-query for that
+ * breakpoint
+ * ```css
+ * @media (min-width: 20em) {
+ *    [data-amplify-theme] {
+ *      --amplify-font-size-large: 2rem;
+ *    }
+ * }
+ * ```
+ */
+interface BreakpointOverride extends BaseOverride {
+    breakpoint: keyof Breakpoints['values'];
+}
+/**
+ * ```css
+ * @media (prefers-color-scheme: dark) {
+ *    --amplify-colors-background-primary: black;
+ *    --amplify-colors-font-primary: white;
+ * }
+ * ```
+ */
+interface MediaQueryOverride extends BaseOverride {
+    mediaQuery: string;
+}
+/**
+ * ```css
+ * .disco-theme {
+ *    --amplify-colors-background-primary: pink;
+ * }
+ * [data-my-cool-theme] {
+ *    --amplify-colors-font-primary: purple;
+ * }
+ * ```
+ */
+interface SelectorOverride extends BaseOverride {
+    selector: string;
+}
+declare type ColorMode = 'light' | 'dark';
+/**
+ * This creates a color mode override, where the color mode is 'light' or 'dark'.
+ * Note: there is no 'system' here.
+ *
+ * ```css
+ * @media(prefers-color-scheme: dark) {
+ *    [data-amplify-color-mode="system"] {
+ *    }
+ * }
+ *
+ * [data-amplify-color-mode="dark"] {
+ *
+ * }
+ * ```
+ */
+interface ColorModeOverride extends BaseOverride {
+    colorMode: ColorMode;
+}
+/**
+ * A Theme just needs a name. This is what a user would generally deal with.
+ * They can define any tokens or breakpoints they need, but they don't need a
+ * complete theme with all tokens.
+ */
+interface Theme {
+    /**
+     * The name of the theme. This is used to create scoped CSS to allow for
+     * multiple themes on a page.
+     */
+    name: string;
+    tokens?: PartialDeep<Tokens>;
+    breakpoints?: PartialDeep<Breakpoints>;
+    /**
+     * Overrides allow you to change design tokens in different contexts, like
+     * light and dark mode. You can also have other media query overrides as well
+     * as breakpoint overrides which correspond to the Breakpoints on a theme,
+     * and a generic selector override.
+     */
+    overrides?: Array<Override>;
+}
+/**
+ * A BaseTheme has all tokens and breakpoints required
+ */
+interface BaseTheme extends Theme {
+    tokens: Tokens;
+    breakpoints: Breakpoints;
+    overrides?: Array<Override>;
+}
+/**
+ * WebTheme is a fully built theme that has cssText based
+ * on the design tokens and all design tokens have added fields
+ * to be used in Javascript/Typescript.
+ */
+interface WebTheme extends BaseTheme {
+    tokens: WebTokens;
+    cssText: string;
+}
+
+/**
+ * This will be used like `const myTheme = createTheme({})`
+ * `myTheme` can then be passed to a Provider or the generated CSS
+ * can be passed to a stylesheet at build-time or run-time.
+ * const myTheme = createTheme({})
+ * const myOtherTheme = createTheme({}, myTheme);
+ */
+declare function createTheme(theme?: Theme, baseTheme?: BaseTheme): WebTheme;
+
+declare const defaultTheme: WebTheme;
+
+export { ActorContextWithForms, AuthActorContext, AuthActorState, AuthChallengeNames, AuthContext, AuthEvent, AuthEventData, AuthEventTypes, AuthFieldsWithDefaults, AuthFormData, AuthInputAttributes, AuthInterpreter, AuthMachineState, AuthenticatorMachineOptions, BaseTheme, BorderWidthValue, CognitoUserAmplify, ColorModeOverride, ColorValue, ContactMethod, DefaultTexts, DesignToken, Dict, FederatedIdentityProviders, FontSizeValue, FontValue, FontWeightValue, InputAttributes, InvokeActorEventTypes, LineHeightValue, LoginMechanism, LoginMechanismArray, MediaQueryOverride, NoInfer, OpacityValue, OutlineOffsetValue, OutlineWidthValue, Override, Phrase, RadiusValue, ResetPasswordContext, ResetPasswordState, SelectorOverride, ShadowValue, SignInContext, SignInState, SignOutContext, SignOutState, SignUpAttribute, SignUpContext, SignUpFieldsWithDefaults, SignUpFieldsWithoutDefaults, SignUpState, SocialProvider, SpaceValue, Theme, TimeValue, TransformValue, ValidationError, Validator, ValidatorResult, WebDesignToken, WebTheme, authInputAttributes, censorAllButFirstAndLast, censorPhoneNumber, countryDialCodes, createAuthenticatorMachine, createTheme, defaultTheme, getActorContext, getActorState, getAliasInfoFromContext, getConfiguredAliases, getSendEventAliases, getServiceContextFacade, getServiceFacade, isDesignToken, signUpFieldsWithDefault, signUpFieldsWithoutDefault, translate, translations };