@aws-amplify/ui 3.6.2 → 3.6.3

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

@@ -1,2493 +1,75 @@
-export declare const components: {
-    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;
-            };
-        };
-    };
-    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;
-                };
-            };
-        };
-    };
-    badge: {
-        color: {
-            value: string;
-        };
-        lineHeight: {
-            value: number;
-        };
-        fontWeight: {
-            value: string;
-        };
-        fontSize: {
-            value: string;
-        };
-        textAlign: {
-            value: string;
-        };
-        paddingVertical: {
-            value: string;
-        };
-        paddingHorizontal: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        info: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        warning: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        success: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        error: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        small: {
-            fontSize: {
-                value: string;
-            };
-            paddingVertical: {
-                value: string;
-            };
-            paddingHorizontal: {
-                value: string;
-            };
-        };
-        large: {
-            fontSize: {
-                value: string;
-            };
-            paddingVertical: {
-                value: string;
-            };
-            paddingHorizontal: {
-                value: string;
-            };
-        };
-    };
-    button: {
-        fontWeight: {
-            value: string;
-        };
-        transitionDuration: {
-            value: string;
-        };
-        fontSize: {
-            value: string;
-        };
-        lineHeight: {
-            value: string;
-        };
-        paddingBlockStart: {
-            value: string;
-        };
-        paddingBlockEnd: {
-            value: string;
-        };
-        paddingInlineStart: {
-            value: string;
-        };
-        paddingInlineEnd: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        color: {
-            value: string;
-        };
-        _hover: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-        };
-        _focus: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-        };
-        _active: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-        };
-        _loading: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-        };
-        _disabled: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-        };
-        primary: {
-            borderColor: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            _disabled: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _loading: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _hover: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _focus: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: string;
-                };
-            };
-            _active: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-        };
-        menu: {
-            borderWidth: {
-                value: number;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            _hover: {
-                color: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            _focus: {
-                color: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            _active: {
-                color: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            _disabled: {
-                color: {
-                    value: string;
-                };
-            };
-        };
-        link: {
-            borderWidth: {
-                value: number;
-            };
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            _hover: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _focus: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: string;
-                };
-            };
-            _active: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _disabled: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _loading: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-        };
-        small: {
-            fontSize: {
-                value: string;
-            };
-            paddingBlockStart: {
-                value: string;
-            };
-            paddingBlockEnd: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-        large: {
-            fontSize: {
-                value: string;
-            };
-            paddingBlockStart: {
-                value: string;
-            };
-            paddingBlockEnd: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-        loaderWrapper: {
-            alignItems: {
-                value: string;
-            };
-            gap: {
-                value: string;
-            };
-        };
-    };
-    card: {
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-        padding: {
-            value: string;
-        };
-        outlined: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-        };
-        elevated: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-        };
-    };
-    checkbox: {
-        cursor: {
-            value: string;
-        };
-        alignItems: {
-            value: string;
-        };
-        _disabled: {
-            cursor: {
-                value: string;
-            };
-        };
-        button: {
-            position: {
-                value: string;
-            };
-            alignItems: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            before: {
-                width: {
-                    value: string;
-                };
-                height: {
-                    value: string;
-                };
-                borderWidth: {
-                    value: string;
-                };
-                borderRadius: {
-                    value: string;
-                };
-                borderStyle: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-            };
-            _focus: {
-                outlineColor: {
-                    value: string;
-                };
-                outlineStyle: {
-                    value: string;
-                };
-                outlineWidth: {
-                    value: string;
-                };
-                outlineOffset: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: {
-                        offsetX: string;
-                        offsetY: string;
-                        blurRadius: string;
-                        spreadRadius: string;
-                        color: string;
-                    };
-                };
-            };
-            _disabled: {
-                borderColor: {
-                    value: string;
-                };
-            };
-            _error: {
-                borderColor: {
-                    value: string;
-                };
-                _focus: {
-                    borderColor: {
-                        value: string;
-                    };
-                    boxShadow: {
-                        value: {
-                            offsetX: string;
-                            offsetY: string;
-                            blurRadius: string;
-                            spreadRadius: string;
-                            color: string;
-                        };
-                    };
-                };
-            };
-        };
-        icon: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            opacity: {
-                value: string;
-            };
-            transform: {
-                value: string;
-            };
-            transitionProperty: {
-                value: string;
-            };
-            transitionDuration: {
-                value: string;
-            };
-            transitionTimingFunction: {
-                value: string;
-            };
-            _checked: {
-                opacity: {
-                    value: string;
-                };
-                transform: {
-                    value: string;
-                };
-                _disabled: {
-                    backgroundColor: {
-                        value: string;
-                    };
-                };
-            };
-        };
-        label: {
-            _disabled: {
-                color: {
-                    value: string;
-                };
-            };
-        };
-    };
-    checkboxfield: {
-        alignItems: {
-            value: string;
-        };
-        alignContent: {
-            value: string;
-        };
-        flexDirection: {
-            value: string;
-        };
-        justifyContent: {
-            value: string;
-        };
-    };
-    copy: {
-        fontSize: {
-            value: string;
-        };
-        gap: {
-            value: string;
-        };
-        svg: {
-            path: {
-                fill: {
-                    value: string;
-                };
-            };
-        };
-        toolTip: {
-            bottom: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-    };
-    countrycodeselect: {
-        height: {
-            value: string;
-        };
-    };
-    divider: {
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        label: {
-            color: {
-                value: string;
-            };
-            paddingInline: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        small: {
-            borderWidth: {
-                value: string;
-            };
-        };
-        large: {
-            borderWidth: {
-                value: string;
-            };
-        };
-        opacity: {
-            value: string;
-        };
-    };
-    expander: {
-        display: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-        width: {
-            value: string;
-        };
-        item: {
-            marginTop: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-            borderBottomLeftRadius: {
-                value: string;
-            };
-            borderBottomRightRadius: {
-                value: string;
-            };
-            borderTopLeftRadius: {
-                value: string;
-            };
-            borderTopRightRadius: {
-                value: string;
-            };
-            borderStartStartRadius: {
-                value: string;
-            };
-            borderStartEndRadius: {
-                value: string;
-            };
-            borderEndStartRadius: {
-                value: string;
-            };
-            borderEndEndRadius: {
-                value: string;
-            };
-            _focus: {
-                boxShadow: {
-                    value: {
-                        offsetX: string;
-                        offsetY: string;
-                        blurRadius: string;
-                        spreadRadius: string;
-                        color: string;
-                    };
-                };
-            };
-        };
-        header: {
-            boxShadow: {
-                value: {
-                    offsetX: string;
-                    offsetY: string;
-                    blurRadius: string;
-                    color: string;
-                };
-            };
-        };
-        trigger: {
-            minHeight: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-            alignItems: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            _hover: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-        };
-        content: {
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-            text: {
-                color: {
-                    value: string;
-                };
-                paddingBlockStart: {
-                    value: string;
-                };
-                paddingBlockEnd: {
-                    value: string;
-                };
-            };
-            _open: {
-                animationDuration: {
-                    value: string;
-                };
-                animationTimingFunction: {
-                    value: string;
-                };
-            };
-            _closed: {
-                animationDuration: {
-                    value: string;
-                };
-                animationTimingFunction: {
-                    value: string;
-                };
-            };
-        };
-        icon: {
-            transitionDuration: {
-                value: string;
-            };
-            transitionTimingFunction: {
-                value: string;
-            };
-        };
-    };
-    field: {
-        gap: {
-            value: string;
-        };
-        fontSize: {
-            value: string;
-        };
-        small: {
-            gap: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-        large: {
-            gap: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-        label: {
-            color: {
-                value: string;
-            };
-        };
-    };
-    fieldcontrol: {
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        color: {
-            value: string;
-        };
-        paddingBlockStart: {
-            value: string;
-        };
-        paddingBlockEnd: {
-            value: string;
-        };
-        paddingInlineStart: {
-            value: string;
-        };
-        paddingInlineEnd: {
-            value: string;
-        };
-        fontSize: {
-            value: string;
-        };
-        lineHeight: {
-            value: string;
-        };
-        transitionDuration: {
-            value: string;
-        };
-        outlineColor: {
-            value: string;
-        };
-        outlineStyle: {
-            value: string;
-        };
-        outlineWidth: {
-            value: string;
-        };
-        outlineOffset: {
-            value: string;
-        };
-        small: {
-            fontSize: {
-                value: string;
-            };
-            paddingBlockStart: {
-                value: string;
-            };
-            paddingBlockEnd: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-        large: {
-            fontSize: {
-                value: string;
-            };
-            paddingBlockStart: {
-                value: string;
-            };
-            paddingBlockEnd: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-        quiet: {
-            borderStyle: {
-                value: string;
-            };
-            borderBlockEnd: {
-                value: string;
-            };
-            borderInlineStart: {
-                value: string;
-            };
-            borderInlineEnd: {
-                value: string;
-            };
-            borderBlockStart: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            _focus: {
-                borderBlockEndColor: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: {
-                        offsetX: string;
-                        offsetY: string;
-                        color: string;
-                    };
-                };
-            };
-            _error: {
-                borderBlockEndColor: {
-                    value: string;
-                };
-                _focus: {
-                    boxShadow: {
-                        value: {
-                            offsetX: string;
-                            offsetY: string;
-                            color: string;
-                        };
-                    };
-                };
-            };
-        };
-        _focus: {
-            borderColor: {
-                value: string;
-            };
-            boxShadow: {
-                value: {
-                    offsetX: string;
-                    offsetY: string;
-                    blurRadius: string;
-                    spreadRadius: string;
-                    color: string;
-                };
-            };
-        };
-        _disabled: {
-            color: {
-                value: string;
-            };
-            cursor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _error: {
-            borderColor: {
-                value: string;
-            };
-            _focus: {
-                boxShadow: {
-                    value: {
-                        offsetX: string;
-                        offsetY: string;
-                        blurRadius: string;
-                        spreadRadius: string;
-                        color: string;
-                    };
-                };
-            };
-        };
-    };
-    fieldgroup: {
-        gap: {
-            value: number;
-        };
-        vertical: {
-            alignItems: {
-                value: string;
-            };
-        };
-        outer: {
-            alignItems: {
-                value: string;
-            };
-        };
-    };
-    fieldmessages: {
-        error: {
-            color: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-        description: {
-            color: {
-                value: string;
-            };
-            fontStyle: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-    };
-    flex: {
-        gap: {
-            value: string;
-        };
-        justifyContent: {
-            value: string;
-        };
-        alignItems: {
-            value: string;
-        };
-        alignContent: {
-            value: string;
-        };
-        flexWrap: {
-            value: string;
-        };
-    };
-    heading: {
-        color: {
-            value: string;
-        };
-        lineHeight: {
-            value: string;
-        };
-        1: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-        2: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-        3: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-        4: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-        5: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-        6: {
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-        };
-    };
-    icon: {
-        lineHeight: {
-            value: number;
-        };
-        height: {
-            value: string;
-        };
-    };
-    image: {
-        maxWidth: {
-            value: string;
-        };
-        height: {
-            value: string;
-        };
-        objectFit: {
-            value: string;
-        };
-        objectPosition: {
-            value: string;
-        };
-    };
-    link: {
-        active: {
-            color: {
-                value: string;
-            };
-        };
-        color: {
-            value: string;
-        };
-        focus: {
-            color: {
-                value: string;
-            };
-        };
-        hover: {
-            color: {
-                value: string;
-            };
-        };
-        large: {
-            fontSize: {
-                value: string;
-            };
-        };
-        small: {
-            fontSize: {
-                value: string;
-            };
-        };
-        visited: {
-            color: {
-                value: string;
-            };
-        };
-    };
-    loader: {
-        width: {
-            value: string;
-        };
-        height: {
-            value: string;
-        };
-        fontSize: {
-            value: string;
-        };
-        strokeEmpty: {
-            value: string;
-        };
-        strokeFilled: {
-            value: string;
-        };
-        strokeLinecap: {
-            value: string;
-        };
-        animationDuration: {
-            value: string;
-        };
-        small: {
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-        large: {
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-        };
-        linear: {
-            width: {
-                value: string;
-            };
-            minWidth: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            strokeWidth: {
-                value: string;
-            };
-            strokeFilled: {
-                value: string;
-            };
-            strokeEmpty: {
-                value: string;
-            };
-            strokeLinecap: {
-                value: string;
-            };
-            animationDuration: {
-                value: string;
-            };
-            small: {
-                strokeWidth: {
-                    value: string;
-                };
-                fontSize: {
-                    value: string;
-                };
-            };
-            large: {
-                strokeWidth: {
-                    value: string;
-                };
-                fontSize: {
-                    value: string;
-                };
-            };
-        };
-        text: {
-            fill: {
-                value: string;
-            };
-        };
-    };
-    menu: {
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-        flexDirection: {
-            value: string;
-        };
-        gap: {
-            value: number;
-        };
-        maxWidth: {
-            value: string;
-        };
-        minWidth: {
-            value: string;
-        };
-        small: {
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-        };
-        large: {
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-        };
-        item: {
-            minHeight: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-    };
-    pagination: {
-        current: {
-            alignItems: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        button: {
-            color: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-            transitionProperty: {
-                value: string;
-            };
-            transitionDuration: {
-                value: string;
-            };
-            hover: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            disabled: {
-                color: {
-                    value: string;
-                };
-            };
-        };
-        ellipsis: {
-            alignItems: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            paddingInlineStart: {
-                value: string;
-            };
-            paddingInlineEnd: {
-                value: string;
-            };
-        };
-        itemContainer: {
-            marginLeft: {
-                value: string;
-            };
-            marginRight: {
-                value: string;
-            };
-        };
-        itemShared: {
-            height: {
-                value: string;
-            };
-            minWidth: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-        };
-    };
-    phonenumberfield: {};
-    placeholder: {
-        borderRadius: {
-            value: string;
-        };
-        transitionDuration: {
-            value: string;
-        };
-        startColor: {
-            value: string;
-        };
-        endColor: {
-            value: string;
-        };
-        small: {
-            height: {
-                value: string;
-            };
-        };
-        default: {
-            height: {
-                value: string;
-            };
-        };
-        large: {
-            height: {
-                value: string;
-            };
-        };
-    };
-    radio: {
-        alignItems: {
-            value: string;
-        };
-        justifyContent: {
-            value: string;
-        };
-        gap: {
-            value: string;
-        };
-        _disabled: {
-            cursor: {
-                value: string;
-            };
-        };
-        button: {
-            alignItems: {
-                value: string;
-            };
-            justifyContent: {
-                value: string;
-            };
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-            boxSizing: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            transitionProperty: {
-                value: string;
-            };
-            transitionDuration: {
-                value: string;
-            };
-            outlineColor: {
-                value: string;
-            };
-            outlineStyle: {
-                value: string;
-            };
-            outlineWidth: {
-                value: string;
-            };
-            outlineOffset: {
-                value: string;
-            };
-            padding: {
-                value: string;
-            };
-            small: {
-                width: {
-                    value: string;
-                };
-                height: {
-                    value: string;
-                };
-            };
-            large: {
-                width: {
-                    value: string;
-                };
-                height: {
-                    value: string;
-                };
-            };
-            _checked: {
-                color: {
-                    value: string;
-                };
-                _disabled: {
-                    color: {
-                        value: string;
-                    };
-                };
-            };
-            _focus: {
-                borderColor: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: string;
-                };
-            };
-            _error: {
-                borderColor: {
-                    value: string;
-                };
-                _focus: {
-                    boxShadow: {
-                        value: string;
-                    };
-                };
-            };
-            _disabled: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-            };
-        };
-        label: {
-            _disabled: {
-                color: {
-                    value: string;
-                };
-            };
-        };
-    };
-    rating: {
-        large: {
-            size: {
-                value: string;
-            };
-        };
-        default: {
-            size: {
-                value: string;
-            };
-        };
-        small: {
-            size: {
-                value: string;
-            };
-        };
-        filled: {
-            color: {
-                value: string;
-            };
-        };
-        empty: {
-            color: {
-                value: string;
-            };
-        };
-    };
-    select: {
-        paddingInlineEnd: {
-            value: string;
-        };
-        wrapper: {
-            flex: {
-                value: string;
-            };
-            display: {
-                value: string;
-            };
-            position: {
-                value: string;
-            };
-            cursor: {
-                value: string;
-            };
-        };
-        iconWrapper: {
-            alignItems: {
-                value: string;
-            };
-            position: {
-                value: string;
-            };
-            top: {
-                value: string;
-            };
-            right: {
-                value: string;
-            };
-            transform: {
-                value: string;
-            };
-            pointerEvents: {
-                value: string;
-            };
-        };
-        option: {
-            backgroundColor: {
-                value: string;
-            };
-        };
-        whiteSpace: {
-            value: string;
-        };
-        minWidth: {
-            value: string;
-        };
-        small: {
-            minWidth: {
-                value: string;
-            };
-        };
-        large: {
-            minWidth: {
-                value: string;
-            };
-        };
-    };
-    selectfield: {
-        flexDirection: {
-            value: string;
-        };
-    };
-    sliderfield: {
-        paddingBlock: {
-            value: string;
-        };
-        track: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-            minWidth: {
-                value: string;
-            };
-        };
-        range: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            _disabled: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-        };
-        thumb: {
-            width: {
-                value: string;
-            };
-            height: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            _disabled: {
-                backgroundColor: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: string;
-                };
-            };
-            _hover: {
-                backgroundColor: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-            };
-            _focus: {
-                boxShadow: {
-                    value: {
-                        offsetX: string;
-                        offsetY: string;
-                        blurRadius: string;
-                        spreadRadius: string;
-                        color: string;
-                    };
-                };
-            };
-        };
-        small: {
-            track: {
-                height: {
-                    value: string;
-                };
-            };
-            thumb: {
-                width: {
-                    value: string;
-                };
-                height: {
-                    value: string;
-                };
-            };
-        };
-        large: {
-            track: {
-                height: {
-                    value: string;
-                };
-            };
-            thumb: {
-                width: {
-                    value: string;
-                };
-                height: {
-                    value: string;
-                };
-            };
-        };
-    };
-    stepperfield: {
-        flexDirection: {
-            value: string;
-        };
-        input: {
-            textAlign: {
-                value: string;
-            };
-        };
-    };
-    switchfield: {
-        disabled: {
-            opacity: {
-                value: string;
-            };
-        };
-        focused: {
-            shadow: {
-                value: string;
-            };
-        };
-        large: {
-            fontSize: {
-                value: string;
-            };
-        };
-        small: {
-            fontSize: {
-                value: string;
-            };
-        };
-        label: {
-            padding: {
-                value: string;
-            };
-        };
-        thumb: {
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            checked: {
-                transform: {
-                    value: string;
-                };
-            };
-            transition: {
-                duration: {
-                    value: string;
-                };
-            };
-            width: {
-                value: string;
-            };
-        };
-        track: {
-            backgroundColor: {
-                value: string;
-            };
-            borderRadius: {
-                value: string;
-            };
-            checked: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            height: {
-                value: string;
-            };
-            padding: {
-                value: string;
-            };
-            transition: {
-                duration: {
-                    value: string;
-                };
-            };
-            width: {
-                value: string;
-            };
-        };
-    };
-    table: {
-        borderCollapse: {
-            value: string;
-        };
-        display: {
-            value: string;
-        };
-        width: {
-            value: string;
-        };
-        head: {
-            display: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-        };
-        body: {
-            display: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-        };
-        foot: {
-            display: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-        };
-        row: {
-            display: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-            hover: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            striped: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-        };
-        header: {
-            borderColor: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            display: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-            padding: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-            large: {
-                fontSize: {
-                    value: string;
-                };
-                padding: {
-                    value: string;
-                };
-            };
-            small: {
-                fontSize: {
-                    value: string;
-                };
-                padding: {
-                    value: string;
-                };
-            };
-        };
-        data: {
-            borderColor: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            display: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-            padding: {
-                value: string;
-            };
-            verticalAlign: {
-                value: string;
-            };
-            large: {
-                fontSize: {
-                    value: string;
-                };
-                padding: {
-                    value: string;
-                };
-            };
-            small: {
-                fontSize: {
-                    value: string;
-                };
-                padding: {
-                    value: string;
-                };
-            };
-        };
-        caption: {
-            captionSide: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            display: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            textAlign: {
-                value: string;
-            };
-            wordBreak: {
-                value: string;
-            };
-            large: {
-                fontSize: {
-                    value: string;
-                };
-            };
-            small: {
-                fontSize: {
-                    value: string;
-                };
-            };
-        };
-    };
-    tabs: {
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        gap: {
-            value: string;
-        };
-        item: {
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            borderStyle: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            fontSize: {
-                value: string;
-            };
-            fontWeight: {
-                value: string;
-            };
-            paddingVertical: {
-                value: string;
-            };
-            paddingHorizontal: {
-                value: string;
-            };
-            textAlign: {
-                value: string;
-            };
-            transitionDuration: {
-                value: string;
-            };
-            _hover: {
-                color: {
-                    value: string;
-                };
-            };
-            _focus: {
-                color: {
-                    value: string;
-                };
-            };
-            _active: {
-                color: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-            };
-            _disabled: {
-                color: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-            };
-        };
-    };
-    text: {
-        color: {
-            value: string;
-        };
-        primary: {
-            color: {
-                value: string;
-            };
-        };
-        secondary: {
-            color: {
-                value: string;
-            };
-        };
-        tertiary: {
-            color: {
-                value: string;
-            };
-        };
-        error: {
-            color: {
-                value: string;
-            };
-        };
-        warning: {
-            color: {
-                value: string;
-            };
-        };
-        success: {
-            color: {
-                value: string;
-            };
-        };
-        info: {
-            color: {
-                value: string;
-            };
-        };
-    };
-    togglebutton: {
-        borderColor: {
-            value: string;
-        };
-        color: {
-            value: string;
-        };
-        _hover: {
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _focus: {
-            borderColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _active: {
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _disabled: {
-            backgroundColor: {
-                value: string;
-            };
-            borderColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _pressed: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            _hover: {
-                backgroundColor: {
-                    value: string;
-                };
-            };
-        };
-        primary: {
-            backgroundColor: {
-                value: string;
-            };
-            borderWidth: {
-                value: string;
-            };
-            _focus: {
-                borderColor: {
-                    value: string;
-                };
-                backgroundColor: {
-                    value: string;
-                };
-                boxShadow: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _hover: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _disabled: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _pressed: {
-                backgroundColor: {
-                    value: string;
-                };
-                borderColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-                _focus: {
-                    backgroundColor: {
-                        value: string;
-                    };
-                    borderColor: {
-                        value: string;
-                    };
-                };
-                _hover: {
-                    borderColor: {
-                        value: string;
-                    };
-                    backgroundColor: {
-                        value: string;
-                    };
-                };
-            };
-        };
-        link: {
-            color: {
-                value: string;
-            };
-            _hover: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _focus: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-            };
-            _disabled: {
-                color: {
-                    value: string;
-                };
-            };
-            _pressed: {
-                backgroundColor: {
-                    value: string;
-                };
-                color: {
-                    value: string;
-                };
-                _hover: {
-                    backgroundColor: {
-                        value: string;
-                    };
-                };
-            };
-        };
-    };
-    togglebuttongroup: {
-        alignItems: {
-            value: string;
-        };
-        alignContent: {
-            value: string;
-        };
-        justifyContent: {
-            value: string;
-        };
-    };
-};
+import { AlertTokens } from './alert';
+import { AuthenticatorTokens } from './authenticator';
+import { BadgeTokens } from './badge';
+import { ButtonTokens } from './button';
+import { CardTokens } from './card';
+import { CheckboxTokens } from './checkbox';
+import { CheckboxFieldTokens } from './checkboxField';
+import { CopyTokens } from './copy';
+import { CountryCodeSelectTokens } from './countryCodeSelect';
+import { DividerTokens } from './divider';
+import { ExpanderTokens } from './expander';
+import { FieldTokens } from './field';
+import { FieldControlTokens } from './fieldControl';
+import { FieldGroupTokens } from './fieldGroup';
+import { FieldMessagesTokens } from './fieldMessages';
+import { FlexTokens } from './flex';
+import { HeadingTokens } from './heading';
+import { IconTokens } from './icon';
+import { ImageTokens } from './image';
+import { LinkTokens } from './link';
+import { LoaderTokens } from './loader';
+import { MenuTokens } from './menu';
+import { PaginationTokens } from './pagination';
+import { PlaceholderTokens } from './placeholder';
+import { RadioTokens } from './radio';
+import { RatingTokens } from './rating';
+import { SelectTokens } from './select';
+import { SelectFieldTokens } from './selectField';
+import { SliderFieldTokens } from './sliderField';
+import { StepperFieldTokens } from './stepperField';
+import { SwitchFieldTokens } from './switchField';
+import { TableTokens } from './table';
+import { TabsTokens } from './tabs';
+import { TextTokens } from './text';
+import { ToggleButtonTokens } from './toggleButton';
+import { ToggleButtonGroupTokens } from './toggleButtonGroup';
+export interface ComponentTokens {
+    alert: AlertTokens;
+    authenticator: AuthenticatorTokens;
+    badge: BadgeTokens;
+    button: ButtonTokens;
+    card: CardTokens;
+    checkbox: CheckboxTokens;
+    checkboxfield: CheckboxFieldTokens;
+    copy: CopyTokens;
+    countrycodeselect: CountryCodeSelectTokens;
+    divider: DividerTokens;
+    expander: ExpanderTokens;
+    field: FieldTokens;
+    fieldcontrol: FieldControlTokens;
+    fieldgroup: FieldGroupTokens;
+    fieldmessages: FieldMessagesTokens;
+    flex: FlexTokens;
+    heading: HeadingTokens;
+    icon: IconTokens;
+    image: ImageTokens;
+    link: LinkTokens;
+    loader: LoaderTokens;
+    menu: MenuTokens;
+    pagination: PaginationTokens;
+    placeholder: PlaceholderTokens;
+    radio: RadioTokens;
+    rating: RatingTokens;
+    select: SelectTokens;
+    selectfield: SelectFieldTokens;
+    sliderfield: SliderFieldTokens;
+    stepperfield: StepperFieldTokens;
+    switchfield: SwitchFieldTokens;
+    table: TableTokens;
+    tabs: TabsTokens;
+    text: TextTokens;
+    togglebutton: ToggleButtonTokens;
+    togglebuttongroup: ToggleButtonGroupTokens;
+}
+export declare const components: ComponentTokens;