@aws-amplify/ui 4.1.0 → 5.1.0

package/dist/types/helpers/authenticator/facade.d.ts

@@ -5,7 +5,7 @@
  */
 import { Sender } from 'xstate';
 import { AuthEvent, AuthEventData, AuthMachineState, CodeDeliveryDetails, AmplifyUser, ValidationError, SocialProvider, UnverifiedContactMethods } from '../../types';
-export declare type AuthenticatorRoute = 'authenticated' | 'autoSignIn' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'verifyUser';
+export declare type AuthenticatorRoute = 'authenticated' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'transition' | 'verifyUser';
 declare type AuthenticatorValidationErrors = ValidationError;
 declare type AuthStatus = 'configuring' | 'authenticated' | 'unauthenticated';
 interface AuthenticatorServiceContextFacade {

package/dist/types/helpers/authenticator/index.d.ts

@@ -5,3 +5,4 @@ export * from './constants';
 export * from './form';
 export * from './utils';
 export * from './formFields';
+export * from './textUtil';

package/dist/types/helpers/authenticator/textUtil.d.ts

@@ -0,0 +1,47 @@
+import { AuthChallengeName, CodeDeliveryDetails, SocialProvider } from '../../types';
+import { AuthenticatorRoute } from './facade';
+export declare const authenticatorTextUtil: {
+    /** Shared */
+    readonly getBackToSignInText: () => string;
+    readonly getChangePasswordText: () => string;
+    readonly getChangingText: () => string;
+    readonly getConfirmText: () => string;
+    readonly getConfirmingText: () => string;
+    readonly getCopyText: () => string;
+    readonly getHidePasswordText: () => string;
+    readonly getLoadingText: () => string;
+    readonly getResendCodeText: () => string;
+    readonly getSendCodeText: () => string;
+    readonly getSendingText: () => string;
+    readonly getShowPasswordText: () => string;
+    readonly getSubmitText: () => string;
+    readonly getSubmittingText: () => string;
+    /** SignInSignUpTabs */
+    readonly getSignInTabText: () => string;
+    readonly getSignUpTabText: () => string;
+    /** SignIn */
+    readonly getForgotPasswordText: (shortVersion?: boolean) => string;
+    readonly getSigningInText: () => string;
+    readonly getSignInText: () => string;
+    /** SignUp */
+    readonly getCreatingAccountText: () => string;
+    readonly getCreateAccountText: () => string;
+    /** ConfirmSignUp */
+    readonly getDeliveryMessageText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
+    readonly getDeliveryMethodText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
+    /** ConfirmSignIn */
+    readonly getChallengeText: (challengeName: AuthChallengeName) => string;
+    /** ResetPassword */
+    readonly getResetYourPasswordText: () => string;
+    /** SetupTOTP */
+    readonly getSetupTOTPText: () => string;
+    readonly getSetupTOTPInstructionsText: () => string;
+    readonly getCopiedText: () => string;
+    /** FederatedSignIn */
+    readonly getSignInWithFederationText: (route: AuthenticatorRoute, provider: SocialProvider) => string;
+    /** VerifyUser */
+    readonly getSkipText: () => string;
+    readonly getVerifyText: () => string;
+    readonly getVerifyContactText: () => string;
+    readonly getAccountRecoveryInfoText: () => string;
+};

package/dist/types/helpers/authenticator/utils.d.ts

@@ -2,10 +2,14 @@
  * This file contains general helpers that state machine or authenticator
  * implementations can use.
  */
-import { AuthInterpreter, HubHandler } from '../../types';
+import { AuthInterpreter, AuthMachineHubHandler } from '../../types';
 export declare const censorAllButFirstAndLast: (value: string) => string;
 export declare const censorPhoneNumber: (val: string) => string;
-export declare const defaultAuthHubHandler: HubHandler;
+/**
+ * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
+ * xstate events.
+ */
+export declare const defaultAuthHubHandler: AuthMachineHubHandler;
 /**
  * Listens to external auth Hub events and sends corresponding event to
  * the `authService` of interest
@@ -14,6 +18,6 @@ export declare const defaultAuthHubHandler: HubHandler;
  *
  * @returns function that unsubscribes to the hub evenmt
  */
-export declare const listenToAuthHub: (service: AuthInterpreter, handler?: HubHandler) => () => void;
+export declare const listenToAuthHub: (service: AuthInterpreter, handler?: AuthMachineHubHandler) => () => void;
 export declare const hasSpecialChars: (password: string) => boolean;
 export declare const getTotpCodeURL: (issuer: string, username: string, secret: string) => string;

package/dist/types/i18n/dictionaries/authenticator/defaultTexts.d.ts

@@ -19,8 +19,8 @@ export declare const defaultTexts: {
     ENTER_USERNAME: string;
     FAMILY_NAME: string;
     GIVEN_NAME: string;
+    FORGOT_PASSWORD: string;
     FORGOT_YOUR_PASSWORD: string;
-    FORGOT_YOUR_PASSWORD_LEGACY: string;
     HIDE_PASSWORD: string;
     LOADING: string;
     LOGIN_NAME: string;
@@ -51,6 +51,7 @@ export declare const defaultTexts: {
     SKIP: string;
     SUBMIT: string;
     SUBMITTING: string;
+    UPPERCASE_COPY: string;
     VERIFY_CONTACT: string;
     VERIFY_HEADING: string;
     VERIFY: string;

package/dist/types/i18n/dictionaries/index.d.ts

@@ -799,8 +799,8 @@ export declare const defaultTexts: {
     ENTER_USERNAME: string;
     FAMILY_NAME: string;
     GIVEN_NAME: string;
+    FORGOT_PASSWORD: string;
     FORGOT_YOUR_PASSWORD: string;
-    FORGOT_YOUR_PASSWORD_LEGACY: string;
     HIDE_PASSWORD: string;
     LOADING: string;
     LOGIN_NAME: string;
@@ -831,6 +831,7 @@ export declare const defaultTexts: {
     SKIP: string;
     SUBMIT: string;
     SUBMITTING: string;
+    UPPERCASE_COPY: string;
     VERIFY_CONTACT: string;
     VERIFY_HEADING: string;
     VERIFY: string;

package/dist/types/i18n/translations.d.ts

@@ -31,8 +31,8 @@ export declare const DefaultTexts: {
     readonly ENTER_USERNAME: string;
     readonly FAMILY_NAME: string;
     readonly GIVEN_NAME: string;
+    readonly FORGOT_PASSWORD: string;
     readonly FORGOT_YOUR_PASSWORD: string;
-    readonly FORGOT_YOUR_PASSWORD_LEGACY: string;
     readonly HIDE_PASSWORD: string;
     readonly LOADING: string;
     readonly LOGIN_NAME: string;
@@ -63,6 +63,7 @@ export declare const DefaultTexts: {
     readonly SKIP: string;
     readonly SUBMIT: string;
     readonly SUBMITTING: string;
+    readonly UPPERCASE_COPY: string;
     readonly VERIFY_CONTACT: string;
     readonly VERIFY_HEADING: string;
     readonly VERIFY: string;

package/dist/types/machines/authenticator/defaultServices.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="amazon-cognito-identity-js" />
 import { AuthChallengeName, PasswordSettings, SignInResult, ValidatorResult } from '../../types';
 export declare const defaultServices: {
     getAmplifyConfig(): Promise<{}>;
     getCurrentUser(): Promise<any>;
-    handleSignUp(formData: any): Promise<any>;
+    handleSignUp(formData: any): Promise<import("amazon-cognito-identity-js").ISignUpResult>;
     handleSignIn({ username, password, }: {
         username: string;
         password: string;

package/dist/types/theme/createTheme.d.ts

@@ -1,4 +1,4 @@
-import { Theme, BaseTheme, WebTheme } from './types';
+import { Theme, DefaultTheme, WebTheme } from './types';
 /**
  * This will be used like `const myTheme = createTheme({})`
  * `myTheme` can then be passed to a Provider or the generated CSS
@@ -6,4 +6,4 @@ import { Theme, BaseTheme, WebTheme } from './types';
  * const myTheme = createTheme({})
  * const myOtherTheme = createTheme({}, myTheme);
  */
-export declare function createTheme(theme?: Theme, baseTheme?: BaseTheme): WebTheme;
+export declare function createTheme(theme?: Theme, DefaultTheme?: DefaultTheme | WebTheme): WebTheme;

package/dist/types/theme/defaultDarkModeOverride.d.ts

@@ -1,6 +1,8 @@
 import { ColorModeOverride } from './types';
+import { ReactNativeTokens } from './tokens';
 /**
  * A basic dark mode that just flips the base color
  * palette.
  */
 export declare const defaultDarkModeOverride: ColorModeOverride;
+export declare const reactNativeDarkTokens: ReactNativeTokens<'optional'>;

package/dist/types/theme/defaultTheme.d.ts

@@ -1,2 +1,2 @@
-import { BaseTheme } from './types';
-export declare const defaultTheme: BaseTheme;
+import { DefaultTheme } from './types';
+export declare const defaultTheme: DefaultTheme;

package/dist/types/theme/index.d.ts

@@ -1,5 +1,6 @@
 export { createTheme } from './createTheme';
 export { defaultTheme } from './defaultTheme';
-export { defaultDarkModeOverride } from './defaultDarkModeOverride';
+export { defaultDarkModeOverride, reactNativeDarkTokens, } from './defaultDarkModeOverride';
+export { reactNativeTokens, ReactNativeTokens } from './tokens';
 export * from './types';
-export { cssNameTransform } from './utils';
+export { cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './utils';

package/dist/types/theme/tokens/borderWidths.d.ts

@@ -1,19 +1,5 @@
-import { DesignToken, WebDesignToken, BorderWidthValue } from './types/designToken';
-export 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>;
-};
-export declare type WebBorderWidths = {
-    [Property in keyof BorderWidths]: WebDesignToken<BorderWidthValue>;
-};
-export declare const borderWidths: BorderWidths;
+import { BorderWidthValue, DesignTokenValues, OutputVariantKey } from './types/designToken';
+declare type BorderWidthSize = 'small' | 'medium' | 'large';
+export declare type BorderWidths<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<DesignTokenValues<BorderWidthSize, BorderWidthValue<Platform, Output>, Output, Platform>> : Partial<DesignTokenValues<BorderWidthSize, BorderWidthValue<Platform, Output>, Output, Platform>>;
+export declare const borderWidths: BorderWidths<'default'>;
+export {};

package/dist/types/theme/tokens/colors.d.ts

@@ -1,77 +1,38 @@
-import { DesignToken, WebDesignToken, ColorValue } from './types/designToken';
-import { OrdinalScale, OrdinalVariation } from './types/scales';
-declare type ScaleKeys = 10 | 20 | 40 | 60 | 80 | 90 | 100;
-declare type OverlayKeys = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
-declare type ColorScale<DesignTokenType = DesignToken<ColorValue>> = {
-    [key in ScaleKeys]: DesignTokenType;
+import { ColorValue, DesignTokenValues, OutputVariantKey } from './types/designToken';
+/**
+ * Util type for creating color interfaces using `ColorValue` from string and number unions
+ */
+declare type BaseColorValues<VariantKey extends string | number, Output, Platform = unknown> = DesignTokenValues<VariantKey, ColorValue, Output, Platform>;
+declare type ColorValues<VariantKey extends string | number, Output, Platform = unknown> = Output extends 'required' | 'default' ? BaseColorValues<VariantKey, Output, Platform> : Partial<BaseColorValues<VariantKey, Output, Platform>>;
+/**
+ * Util type for creating nested color scale interfaces from variant keys
+ */
+declare type BaseColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Record<VariantKey, ColorValues<ScaleKey, Output, Platform>>;
+declare type ColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Output extends 'required' | 'default' ? BaseColorValueScale<VariantKey, Output, Platform> : Partial<BaseColorValueScale<VariantKey, Output, Platform>>;
+declare type ScaleKey = 10 | 20 | 40 | 60 | 80 | 90 | 100;
+declare type OverlayKey = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+declare type ColorPaletteKey = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'neutral';
+declare type GreyscalePaletteKey = 'white' | 'black' | 'transparent';
+declare type OrderVariant = 'primary' | 'secondary' | 'tertiary';
+declare type OrderVariantKey<Output = unknown> = Output extends 'default' ? Exclude<OrderVariant, 'quaternary'> : OrderVariant;
+declare type InformationVariantKey = 'info' | 'warning' | 'error' | 'success';
+declare type WebStateVariantKey = 'active' | 'disabled' | 'error' | 'hover' | 'focus' | 'pressed';
+declare type ReactNativeStateVariantKey = Exclude<WebStateVariantKey, 'focused' | 'hover'>;
+declare type StateVariantKey<Platform> = Platform extends 'react-native' ? ReactNativeStateVariantKey : WebStateVariantKey;
+declare type BrandVariantKey = Extract<OrderVariantKey, 'primary' | 'secondary'>;
+declare type FontVariantKey<Output, Platform> = 'inverse' | 'interactive' | Extract<StateVariantKey<Platform>, 'active' | 'disabled' | 'hover' | 'focus'> | OrderVariantKey<Output> | InformationVariantKey;
+declare type BackgroundColorKey<Platform> = Extract<StateVariantKey<Platform>, 'disabled'> | OrderVariantKey | InformationVariantKey | 'quaternary';
+declare type BorderColorKey<Output, Platform> = Extract<StateVariantKey<Platform>, 'disabled' | 'error'> | OrderVariantKey<Output> | (Output extends 'default' ? Exclude<StateVariantKey<Platform>, 'active' | 'hover'> : StateVariantKey<Platform>);
+declare type PaletteValues<Output, Platform> = ColorValueScale<ColorPaletteKey, Output, Platform>;
+declare type GreyscaleColors<Output, Platform> = ColorValues<GreyscalePaletteKey, Output, Platform>;
+declare type BaseColors<Output extends OutputVariantKey = unknown, Platform = unknown> = PaletteValues<Output, Platform> & GreyscaleColors<Output, Platform> & {
+    brand?: ColorValueScale<BrandVariantKey, Output, Platform>;
+    background?: ColorValues<BackgroundColorKey<Platform>, Output, Platform>;
+    border?: ColorValues<BorderColorKey<Output, Platform>, Output, Platform>;
+    font?: ColorValues<FontVariantKey<Output, Platform>, Output, Platform>;
+    overlay?: ColorValues<OverlayKey, Output, Platform>;
+    shadow?: ColorValues<OrderVariantKey, Output, Platform>;
 };
-declare type OverlayColors<DesignTokenType = DesignToken<ColorValue>> = {
-    [key in OverlayKeys]: 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;
-    pressed: 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>>;
-export 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;
-    };
-    overlay: OverlayColors;
-    [key: string]: ColorTypes | Record<string, ColorTypes>;
-};
-export 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>>;
-    };
-    overlay: OverlayColors<WebDesignToken<ColorValue>>;
-    [key: string]: WebColorTypes | Record<string, WebColorTypes>;
-};
-export declare const colors: Colors;
+export declare type Colors<Output extends OutputVariantKey = unknown, Platform = unknown> = (Output extends 'required' | 'default' ? Required<BaseColors<Output, Platform>> : BaseColors<Output, Platform>) & Record<string, any>;
+export declare const colors: Colors<'default'>;
 export {};

package/dist/types/theme/tokens/components/alert.d.ts

@@ -1,28 +1,15 @@
-import { AlignItemsValue, BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, SpaceValue } from '../types/designToken';
-interface AlertVariationTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface AlertIconTokens {
-    size: DesignToken<FontSizeValue>;
-}
-interface AlertHeadingTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-}
-export interface AlertTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    paddingBlock: DesignToken<SpaceValue>;
-    paddingInline: DesignToken<SpaceValue>;
-    icon: AlertIconTokens;
-    heading: AlertHeadingTokens;
-    info: AlertVariationTokens;
-    error: AlertVariationTokens;
-    warning: AlertVariationTokens;
-    success: AlertVariationTokens;
-}
-export declare const alert: AlertTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type AlertVariationTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'color', OutputType>;
+declare type AlertIconTokens<OutputType> = DesignTokenProperties<'size', OutputType>;
+declare type AlertHeadingTokens<OutputType> = DesignTokenProperties<'fontSize' | 'fontWeight', OutputType>;
+declare type AlertTokenKey = 'alignItems' | 'justifyContent' | 'color' | 'backgroundColor' | 'paddingBlock' | 'paddingInline';
+export declare type AlertTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<AlertTokenKey, OutputType> & {
+    icon?: AlertIconTokens<OutputType>;
+    heading?: AlertHeadingTokens<OutputType>;
+    info?: AlertVariationTokens<OutputType>;
+    error?: AlertVariationTokens<OutputType>;
+    warning?: AlertVariationTokens<OutputType>;
+    success?: AlertVariationTokens<OutputType>;
+};
+export declare const alert: Required<AlertTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/authenticator.d.ts

@@ -1,47 +1,27 @@
-import { DesignToken, ColorValue, SpaceValue, BorderWidthValue, BorderColorValue, BackgroundColorValue, BorderStyleValue, BoxShadowValue } from '../types/designToken';
-interface AuthenticatorModalTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    top: DesignToken<SpaceValue>;
-    left: DesignToken<SpaceValue>;
-}
-interface AuthenticatorRouterTokens {
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface AuthenticatorFooterTokens {
-    paddingBottom: DesignToken<SpaceValue>;
-}
-interface AuthenticatorFormTokens {
-    padding: DesignToken<SpaceValue>;
-}
-interface AuthenticatorStateTokens {
-    inactive: {
-        backgroundColor: DesignToken<BackgroundColorValue>;
-    };
-}
-interface AuthenticatorOrContainerTokens {
-    color: DesignToken<ColorValue>;
-    orLine: {
-        backgroundColor: DesignToken<BackgroundColorValue>;
-    };
-}
-interface AuthenticatorContainerToken {
-    widthMax: DesignToken<SpaceValue>;
-}
-export interface AuthenticatorTokens {
-    maxWidth: DesignToken<SpaceValue>;
-    modal: AuthenticatorModalTokens;
-    container: AuthenticatorContainerToken;
-    router: AuthenticatorRouterTokens;
-    footer: AuthenticatorFooterTokens;
-    form: AuthenticatorFormTokens;
-    state: AuthenticatorStateTokens;
-    orContainer: AuthenticatorOrContainerTokens;
-}
-export declare const authenticator: AuthenticatorTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ModalTokenKey = 'width' | 'height' | 'backgroundColor' | 'top' | 'left';
+declare type AuthenticatorModalTokens<OutputType> = DesignTokenProperties<ModalTokenKey, OutputType>;
+declare type RouterKey = 'borderWidth' | 'borderStyle' | 'borderColor' | 'backgroundColor' | 'boxShadow';
+declare type AuthenticatorRouterTokens<OutputType> = DesignTokenProperties<RouterKey, OutputType>;
+declare type AuthenticatorFooterTokens<OutputType> = DesignTokenProperties<'paddingBottom', OutputType>;
+declare type AuthenticatorFormTokens<OutputType> = DesignTokenProperties<'padding', OutputType>;
+declare type AuthenticatorStateTokens<OutputType> = {
+    inactive?: DesignTokenProperties<'backgroundColor', OutputType>;
+};
+declare type AuthenticatorOrContainerTokens<OutputType> = DesignTokenProperties<'color', OutputType> & {
+    orLine?: DesignTokenProperties<'backgroundColor', OutputType>;
+};
+declare type AuthenticatorContainerToken<OutputType> = {
+    widthMax?: DesignTokenProperties<'maxWidth', OutputType>['maxWidth'];
+};
+export declare type AuthenticatorTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'maxWidth', OutputType> & {
+    modal?: AuthenticatorModalTokens<OutputType>;
+    container?: AuthenticatorContainerToken<OutputType>;
+    router?: AuthenticatorRouterTokens<OutputType>;
+    footer?: AuthenticatorFooterTokens<OutputType>;
+    form?: AuthenticatorFormTokens<OutputType>;
+    state?: AuthenticatorStateTokens<OutputType>;
+    orContainer?: AuthenticatorOrContainerTokens<OutputType>;
+};
+export declare const authenticator: Required<AuthenticatorTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/autocomplete.d.ts

@@ -1,42 +1,13 @@
-import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderWidthValue, BorderStyleValue, BorderRadiusValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexDirectionValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue, TransitionTimingFunctionValue } from '../types/designToken';
-export interface AutocompleteTokens {
-    menu: {
-        width: DesignToken<SpaceValue>;
-        marginBlockStart: DesignToken<SpaceValue>;
-        backgroundColor: DesignToken<BackgroundColorValue>;
-        borderColor: DesignToken<BorderColorValue>;
-        borderWidth: DesignToken<BorderWidthValue>;
-        borderStyle: DesignToken<BorderStyleValue>;
-        borderRadius: DesignToken<BorderRadiusValue>;
-        options: {
-            display: DesignToken<DisplayValue>;
-            flexDirection: DesignToken<FlexDirectionValue>;
-            maxHeight: DesignToken<SpaceValue>;
-        };
-        option: {
-            backgroundColor: DesignToken<BackgroundColorValue>;
-            color: DesignToken<ColorValue>;
-            cursor: DesignToken<CursorValue>;
-            transitionDuration: DesignToken<TransitionDurationValue>;
-            transitionProperty: DesignToken<TransitionPropertyValue>;
-            transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
-            _active: {
-                backgroundColor: DesignToken<BackgroundColorValue>;
-                color: DesignToken<ColorValue>;
-            };
-        };
-        _empty: {
-            display: DesignToken<DisplayValue>;
-        };
-        _loading: {
-            alignItems: DesignToken<AlignItemsValue>;
-            display: DesignToken<DisplayValue>;
-            gap: DesignToken<SpaceValue>;
-        };
-        spaceShared: {
-            paddingBlock: DesignToken<SpaceValue>;
-            paddingInline: DesignToken<SpaceValue>;
-        };
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type AutocompleteTokens<OutputType extends OutputVariantKey> = {
+    menu?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'marginBlockStart' | 'width', OutputType> & {
+        options: DesignTokenProperties<'display' | 'flexDirection' | 'maxHeight', OutputType>;
+        option: DesignTokenProperties<'backgroundColor' | 'color' | 'cursor' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction', OutputType> & {
+            _active: DesignTokenProperties<'backgroundColor' | 'color', OutputType>;
+        };
+        _empty: DesignTokenProperties<'display', OutputType>;
+        _loading: DesignTokenProperties<'alignItems' | 'display' | 'gap', OutputType>;
+        spaceShared: DesignTokenProperties<'paddingBlock' | 'paddingInline', OutputType>;
     };
-}
-export declare const autocomplete: AutocompleteTokens;
+};
+export declare const autocomplete: Required<AutocompleteTokens<'default'>>;

package/dist/types/theme/tokens/components/badge.d.ts

@@ -1,29 +1,16 @@
-import { BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, LineHeightValue, RadiusValue, SpaceValue, TextAlignValue } from '../types/designToken';
-interface BadgeVariationTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface BadgeSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    paddingHorizontal: DesignToken<SpaceValue>;
-    paddingVertical: DesignToken<SpaceValue>;
-}
-export interface BadgeTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<RadiusValue>;
-    color: DesignToken<ColorValue>;
-    error: BadgeVariationTokens;
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-    info: BadgeVariationTokens;
-    large: BadgeSizeTokens;
-    lineHeight: DesignToken<LineHeightValue>;
-    paddingHorizontal: DesignToken<SpaceValue>;
-    paddingVertical: DesignToken<SpaceValue>;
-    small: BadgeSizeTokens;
-    success: BadgeVariationTokens;
-    textAlign: DesignToken<TextAlignValue>;
-    warning: BadgeVariationTokens;
-}
-export declare const badge: BadgeTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type VariationKey = 'backgroundColor' | 'color';
+declare type BadgeVariationTokens<OutputType> = DesignTokenProperties<VariationKey, OutputType>;
+declare type SizeKey = 'fontSize' | 'paddingHorizontal' | 'paddingVertical';
+declare type BadgeSizeTokens<OutputType> = DesignTokenProperties<SizeKey, OutputType>;
+declare type BadgeKey = 'backgroundColor' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'paddingHorizontal' | 'paddingVertical' | 'textAlign';
+export declare type BadgeTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<BadgeKey, OutputType> & {
+    error?: BadgeVariationTokens<OutputType>;
+    large?: BadgeSizeTokens<OutputType>;
+    small?: BadgeSizeTokens<OutputType>;
+    info?: BadgeVariationTokens<OutputType>;
+    success?: BadgeVariationTokens<OutputType>;
+    warning?: BadgeVariationTokens<OutputType>;
+};
+export declare const badge: Required<BadgeTokens<'default'>>;
 export {};