@aws-amplify/ui 3.3.2 → 3.4.0

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

@@ -0,0 +1,2 @@
+export * from './country-dial-codes';
+export * from './translations';

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

@@ -0,0 +1,93 @@
+import { NoInfer } from '../types';
+/**
+ * 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"
+ * });
+ * ```
+ */
+export declare const DefaultTexts: {
+    readonly BACK_SIGN_IN: string;
+    readonly BIRTHDATE: string;
+    readonly CHANGE_PASSWORD: string;
+    readonly CHANGING_PASSWORD: string;
+    readonly CODE: string;
+    readonly CONFIRM_PASSWORD: string;
+    readonly CONFIRM_RESET_PASSWORD_HEADING: string;
+    readonly CONFIRM_SIGNUP_HEADING: string;
+    readonly CONFIRM_SMS: string;
+    readonly CONFIRM_TOTP: string;
+    readonly CONFIRM: string;
+    readonly CONFIRMATION_CODE: string;
+    readonly CONFIRMING: string;
+    readonly CREATE_ACCOUNT: string;
+    readonly CREATING_ACCOUNT: string;
+    readonly EMAIL_ADDRESS: string;
+    readonly ENTER_CODE: string;
+    readonly ENTER_USERNAME: string;
+    readonly FAMILY_NAME: string;
+    readonly GIVEN_NAME: string;
+    readonly FORGOT_YOUR_PASSWORD: string;
+    readonly FORGOT_YOUR_PASSWORD_LEGACY: string;
+    readonly HIDE_PASSWORD: string;
+    readonly LOADING: string;
+    readonly LOGIN_NAME: string;
+    readonly MIDDLE_NAME: string;
+    readonly NAME: string;
+    readonly NICKNAME: string;
+    readonly NEW_PASSWORD: string;
+    readonly PASSWORD: string;
+    readonly PHONE_NUMBER: string;
+    readonly PREFERRED_USERNAME: string;
+    readonly PROFILE: string;
+    readonly RESEND_CODE: string;
+    readonly RESET_PASSWORD_HEADING: string;
+    readonly RESET_PASSWORD: string;
+    readonly SEND_CODE: string;
+    readonly SENDING: string;
+    readonly SETUP_TOTP: string;
+    readonly SHOW_PASSWORD: string;
+    readonly SIGN_IN_BUTTON: string;
+    readonly SIGN_IN_TAB: string;
+    readonly SIGN_IN_WITH_AMAZON: string;
+    readonly SIGN_IN_WITH_APPLE: string;
+    readonly SIGN_IN_WITH_FACEBOOK: string;
+    readonly SIGN_IN_WITH_GOOGLE: string;
+    readonly SIGN_IN: string;
+    readonly SIGN_UP_BUTTON: string;
+    readonly SIGNING_IN_BUTTON: string;
+    readonly SKIP: string;
+    readonly SUBMIT: string;
+    readonly SUBMITTING: string;
+    readonly VERIFY_CONTACT: string;
+    readonly VERIFY_HEADING: string;
+    readonly VERIFY: string;
+    readonly WEBSITE: string;
+};
+export 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.
+ */
+export 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.
+ */
+export declare function translate<T = Phrase>(phrase: NoInfer<T>): string;
+/**
+ * Whether I18n has a translation entry for given phrase
+ */
+export declare function hasTranslation(phrase: string): boolean;
+export declare const translations: Record<string, Dict>;

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './helpers';
+export * from './i18n';
+export * from './machines';
+export * from './theme';
+export * from './types';

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

@@ -0,0 +1,60 @@
+import { ActorContextWithForms, AuthEvent, SignInContext, SignUpContext } from '../../types';
+export declare const stopActor: (machineId: string) => import("xstate").StopAction<unknown, import("xstate").EventObject>;
+/**
+ * https://github.com/statelyai/xstate/issues/866
+ *
+ * Actions in Xstate take in two arguments - a `context` and
+ * an `event`.
+ *
+ * When writing reusable actions in a separate file for Xstate,
+ * you cannot specify the type for both the `context` and the `event`.
+ * The bug has been around for 2 years with seemingly no resolution
+ * in sight.
+ *
+ * TypeScript apparently has trouble inferring Xstate properly.
+ * So, when writing actions, only specify the type for either `context`
+ * or `event` - but not both.
+ *
+ * https://xstate.js.org/docs/guides/typescript.html#assign-action-behaving-strangely
+ *
+ * Each of the actions NEEDS at least the `context` argument in the
+ * `assign` body - even if it is unused. This is another known bug in
+ * how TypeScript integrate with Xstate.
+ */
+/**
+ * "clear" actions
+ */
+export declare const clearAttributeToVerify: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearChallengeName: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearRequiredAttributes: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearError: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearFormValues: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearTouched: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearUnverifiedAttributes: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearUsername: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const clearValidationError: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+/**
+ * "set" actions
+ */
+export declare const setChallengeName: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setRequiredAttributes: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setConfirmResetPasswordIntent: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const setConfirmSignUpIntent: import("xstate").AssignAction<unknown, import("xstate").EventObject>;
+export declare const setCredentials: import("xstate").AssignAction<SignInContext | SignUpContext, import("xstate").EventObject>;
+export declare const setFieldErrors: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setRemoteError: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setUnverifiedAttributes: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setUser: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setUsername: import("xstate").AssignAction<ActorContextWithForms, import("xstate").EventObject>;
+export declare const setCodeDeliveryDetails: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const setUsernameAuthAttributes: import("xstate").AssignAction<ActorContextWithForms, import("xstate").EventObject>;
+export declare const handleInput: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const handleSubmit: import("xstate").AssignAction<unknown, AuthEvent>;
+export declare const handleBlur: import("xstate").AssignAction<unknown, AuthEvent>;
+/**
+ * This action occurs on the entry to a state where a form submit action
+ * occurs. It combines the phone_number and country_code form values, parses
+ * the result, and updates the form values with the full phone number which is
+ * the required format by Cognito for form submission.
+ */
+export declare const parsePhoneNumber: import("xstate").AssignAction<SignInContext | SignUpContext, import("xstate").EventObject>;

package/dist/types/machines/authenticator/actors/index.d.ts

@@ -0,0 +1,3 @@
+export * from './signIn';
+export * from './signOut';
+export * from './resetPassword';

package/dist/types/machines/authenticator/actors/resetPassword.d.ts

@@ -0,0 +1,29 @@
+import { AuthEvent, ResetPasswordContext } from '../../../types';
+import { defaultServices } from '../defaultServices';
+export declare type ResetPasswordMachineOptions = {
+    services?: Partial<typeof defaultServices>;
+};
+export declare function resetPasswordActor({ services }: ResetPasswordMachineOptions): import("xstate").StateMachine<ResetPasswordContext, any, AuthEvent, {
+    value: any;
+    context: ResetPasswordContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
+    missingImplementations: {
+        actions: never;
+        delays: never;
+        guards: never;
+        services: never;
+    };
+} & {
+    eventsCausingActions: Record<string, string>;
+    eventsCausingDelays: Record<string, string>;
+    eventsCausingGuards: Record<string, string>;
+    eventsCausingServices: Record<string, string>;
+} & {
+    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
+    indexedEvents: Record<string, AuthEvent> & {
+        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
+            data: any;
+        };
+    };
+    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
+}>;

package/dist/types/machines/authenticator/actors/signIn.d.ts

@@ -0,0 +1,29 @@
+import { AuthEvent, SignInContext } from '../../../types';
+import { defaultServices } from '../defaultServices';
+export declare type SignInMachineOptions = {
+    services?: Partial<typeof defaultServices>;
+};
+export declare function signInActor({ services }: SignInMachineOptions): import("xstate").StateMachine<SignInContext, any, AuthEvent, {
+    value: any;
+    context: SignInContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
+    missingImplementations: {
+        actions: never;
+        delays: never;
+        guards: never;
+        services: never;
+    };
+} & {
+    eventsCausingActions: Record<string, string>;
+    eventsCausingDelays: Record<string, string>;
+    eventsCausingGuards: Record<string, string>;
+    eventsCausingServices: Record<string, string>;
+} & {
+    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
+    indexedEvents: Record<string, AuthEvent> & {
+        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
+            data: any;
+        };
+    };
+    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
+}>;

package/dist/types/machines/authenticator/actors/signOut.d.ts

@@ -0,0 +1,25 @@
+import { AuthEvent, SignOutContext } from '../../../types';
+export declare const signOutActor: import("xstate").StateMachine<SignOutContext, any, AuthEvent, {
+    value: any;
+    context: SignOutContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
+    missingImplementations: {
+        actions: never;
+        delays: never;
+        guards: never;
+        services: never;
+    };
+} & {
+    eventsCausingActions: Record<string, string>;
+    eventsCausingDelays: Record<string, string>;
+    eventsCausingGuards: Record<string, string>;
+    eventsCausingServices: Record<string, string>;
+} & {
+    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
+    indexedEvents: Record<string, AuthEvent> & {
+        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
+            data: any;
+        };
+    };
+    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
+}>;

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

@@ -0,0 +1,29 @@
+import { AuthChallengeNames, PasswordSettings, SignInResult, ValidatorResult } from '../../types';
+export declare const defaultServices: {
+    getAmplifyConfig(): Promise<{}>;
+    getCurrentUser(): Promise<any>;
+    handleSignUp(formData: any): Promise<any>;
+    handleSignIn({ username, password, }: {
+        username: string;
+        password: string;
+    }): Promise<any>;
+    handleConfirmSignIn({ user, code, mfaType, }: {
+        user: any;
+        code: string;
+        mfaType: AuthChallengeNames.SMS_MFA | AuthChallengeNames.SOFTWARE_TOKEN_MFA;
+    }): Promise<any>;
+    handleConfirmSignUp({ username, code, }: {
+        username: string;
+        code: string;
+    }): Promise<any>;
+    handleForgotPasswordSubmit({ username, code, password, }: {
+        username: string;
+        code: string;
+        password: string;
+    }): Promise<SignInResult>;
+    handleForgotPassword(formData: any): Promise<any>;
+    validateCustomSignUp(formData: any, touchData: any): Promise<ValidatorResult>;
+    validateFormPassword<Validator>(formData: any, touchData: any, passwordSettings: PasswordSettings): Promise<ValidatorResult>;
+    validateConfirmPassword<Validator_1>(formData: any, touchData: any): Promise<ValidatorResult>;
+    validatePreferredUsername(formData: any, touchData: any): Promise<ValidatorResult>;
+};

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

@@ -0,0 +1,28 @@
+import { AuthContext, AuthEvent } from '../../types';
+export declare type AuthenticatorMachineOptions = AuthContext['config'] & {
+    services?: AuthContext['services'];
+};
+export declare function createAuthenticatorMachine(): import("xstate").StateMachine<AuthContext, any, AuthEvent, {
+    value: any;
+    context: AuthContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
+    missingImplementations: {
+        actions: never;
+        delays: never;
+        guards: never;
+        services: never;
+    };
+} & {
+    eventsCausingActions: Record<string, string>;
+    eventsCausingDelays: Record<string, string>;
+    eventsCausingGuards: Record<string, string>;
+    eventsCausingServices: Record<string, string>;
+} & {
+    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
+    indexedEvents: Record<string, AuthEvent> & {
+        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
+            data: any;
+        };
+    };
+    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
+}>;

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

@@ -0,0 +1,29 @@
+import { AuthEvent, SignUpContext } from '../../types';
+import { defaultServices } from './defaultServices';
+export declare type SignUpMachineOptions = {
+    services?: Partial<typeof defaultServices>;
+};
+export declare function createSignUpMachine({ services }: SignUpMachineOptions): import("xstate").StateMachine<SignUpContext, any, AuthEvent, {
+    value: any;
+    context: SignUpContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
+    missingImplementations: {
+        actions: never;
+        delays: never;
+        guards: never;
+        services: never;
+    };
+} & {
+    eventsCausingActions: Record<string, string>;
+    eventsCausingDelays: Record<string, string>;
+    eventsCausingGuards: Record<string, string>;
+    eventsCausingServices: Record<string, string>;
+} & {
+    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
+    indexedEvents: Record<string, AuthEvent> & {
+        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
+            data: any;
+        };
+    };
+    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
+}>;

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

@@ -0,0 +1 @@
+export * from './authenticator';

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

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

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

@@ -0,0 +1,12 @@
+export interface Breakpoints {
+    values: {
+        base: number;
+        small: number;
+        medium: number;
+        large: number;
+        xl: number;
+        xxl: number;
+    };
+    defaultBreakpoint: string;
+}
+export declare const breakpoints: Breakpoints;

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

@@ -0,0 +1,9 @@
+import { Theme, BaseTheme, WebTheme } from './types';
+/**
+ * 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);
+ */
+export declare function createTheme(theme?: Theme, baseTheme?: BaseTheme): WebTheme;

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

@@ -0,0 +1,4 @@
+import { createTheme } from './createTheme';
+export { createTheme };
+export * from './types';
+export declare const defaultTheme: import("./types").WebTheme;

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

@@ -0,0 +1,19 @@
+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;

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

@@ -0,0 +1,76 @@
+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;
+};
+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;
+    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 {};

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

@@ -0,0 +1,65 @@
+export declare const alert: {
+    alignItems: {
+        value: string;
+    };
+    justifyContent: {
+        value: string;
+    };
+    color: {
+        value: string;
+    };
+    backgroundColor: {
+        value: string;
+    };
+    paddingBlock: {
+        value: string;
+    };
+    paddingInline: {
+        value: string;
+    };
+    icon: {
+        size: {
+            value: string;
+        };
+    };
+    heading: {
+        fontSize: {
+            value: string;
+        };
+        fontWeight: {
+            value: string;
+        };
+    };
+    info: {
+        color: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+    };
+    error: {
+        color: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+    };
+    warning: {
+        color: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+    };
+    success: {
+        color: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+    };
+};

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

@@ -0,0 +1,71 @@
+export declare const authenticator: {
+    maxWidth: {
+        value: string;
+    };
+    modal: {
+        width: {
+            value: string;
+        };
+        height: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+        top: {
+            value: string;
+        };
+        left: {
+            value: string;
+        };
+    };
+    container: {
+        widthMax: {
+            value: string;
+        };
+    };
+    router: {
+        borderWidth: {
+            value: string;
+        };
+        borderStyle: {
+            value: string;
+        };
+        borderColor: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+        boxShadow: {
+            value: string;
+        };
+    };
+    footer: {
+        paddingBottom: {
+            value: string;
+        };
+    };
+    form: {
+        padding: {
+            value: string;
+        };
+    };
+    state: {
+        inactive: {
+            backgroundColor: {
+                value: string;
+            };
+        };
+    };
+    orContainer: {
+        color: {
+            value: string;
+        };
+        orLine: {
+            backgroundColor: {
+                value: string;
+            };
+        };
+    };
+};