gd-design-library 0.2.0 → 0.3.1

package/tokens/index.d.ts

@@ -1,8 +1,11 @@
+export * from './separator';
+export * from './draganddrop';
+export * from './avatar';
+export * from './chatbubble';
 export * from './radiogroup';
 export * from './searchModal';
 export * from './inputfile';
 export * from './searchModal';
-export * from './internal';
 export * from './carousel';
 export * from './progressbar';
 export * from './card';
@@ -44,10 +47,286 @@ export * from './header';
 export * from './draganddropfiles';
 export * from './slider';
 export * from './scroll';
-export * from './internal';
 export * from './utils';
 export * from './types/index.types';
 export declare const defaultTokens: {
+    separator: {
+        default: {
+            alignItems: string;
+            justifyItems: string;
+            gap: string | number;
+        };
+        horizontal: {
+            width: string;
+            display: string;
+            flexDirection: import('../types').FlexDirection;
+        };
+        vertical: {
+            height: string;
+            display: string;
+            flexDirection: import('../types').FlexDirection;
+        };
+        line: {
+            default: {};
+            horizontal: {
+                width: string;
+            };
+            vertical: {
+                height: string;
+            };
+        };
+        label: {
+            default: {};
+            attrs: {
+                xs: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+                sm: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+                md: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+                lg: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+                xl: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+                xxl: {
+                    $variant: import('../types').TypographyVariant;
+                    $as: import('../types').TypographyVariant;
+                };
+            };
+        };
+    };
+    draganddrop: {
+        default: {
+            position: string;
+        };
+        dragAndDropArea: {
+            default: {
+                backgroundColor: string;
+                border: string;
+                borderRadius: string;
+                padding: string;
+            };
+            hover: {
+                '&:hover': {
+                    backgroundColor: string;
+                    border: string;
+                    borderRadius: string;
+                };
+            };
+            disabled: {
+                cursor: string;
+                backgroundColor: string;
+            };
+            error: {
+                border: string;
+            };
+            loading: {
+                backgroundColor: string;
+                cursor: string;
+            };
+        };
+        dragOverContent: {
+            default: {
+                backgroundColor: string;
+                width: string;
+                height: string;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                border: string;
+                borderRadius: string;
+            };
+        };
+        uploadIcon: {
+            default: {
+                name: string;
+                width: number;
+                height: number;
+            };
+            disabled: {
+                fill: string;
+            };
+        };
+        contentTypography: {
+            default: {
+                margin: number;
+            };
+            disabled: {
+                color: string;
+            };
+        };
+    };
+    avatar: {
+        default: {
+            borderRadius: string;
+            position: string;
+            width: number;
+            height: number;
+        };
+        imageWrapper: {
+            default: {
+                borderRadius: string;
+                overflow: string;
+                height: string;
+                width: string;
+                alignContent: string;
+                backgroundColor: any;
+            };
+        };
+        badge: {
+            default: {
+                position: string;
+                borderRadius: string;
+                backgroundColor: any;
+                width: number;
+                height: number;
+                border: string;
+                top: number;
+                right: number;
+            };
+            size: {
+                xs: {
+                    width: number;
+                    height: number;
+                    border: string;
+                    top: number;
+                    right: number;
+                };
+                sm: {
+                    width: number;
+                    height: number;
+                    border: string;
+                    top: number;
+                    right: number;
+                };
+                md: {
+                    width: number;
+                    height: number;
+                    border: string;
+                    top: number;
+                    right: number;
+                };
+                lg: {
+                    width: number;
+                    height: number;
+                    border: string;
+                    top: number;
+                    right: number;
+                };
+                xl: {
+                    width: number;
+                    height: number;
+                    border: string;
+                    top: number;
+                    right: number;
+                };
+            };
+        };
+        fallbackText: {
+            default: {
+                variant: import('../types').TypographyVariant;
+                align: import('../types').TextAlign;
+            };
+            size: {
+                xs: {
+                    variant: import('../types').TypographyVariant;
+                };
+                sm: {
+                    variant: import('../types').TypographyVariant;
+                };
+                md: {
+                    variant: import('../types').TypographyVariant;
+                };
+                lg: {
+                    variant: import('../types').TypographyVariant;
+                };
+                xl: {
+                    variant: import('../types').TypographyVariant;
+                };
+            };
+        };
+        size: {
+            xs: {
+                width: number;
+                height: number;
+            };
+            sm: {
+                width: number;
+                height: number;
+            };
+            md: {
+                width: number;
+                height: number;
+            };
+            lg: {
+                width: number;
+                height: number;
+            };
+            xl: {
+                width: number;
+                height: number;
+            };
+        };
+    };
+    chatbubble: {
+        default: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            display: string;
+            flexDirection: import('../types').FlexDirection;
+            gap: string | number;
+            clear: string;
+            margin: string;
+        };
+        question: {
+            padding: string;
+            textAlign: string;
+            float: string;
+            backgroundColor: string;
+            minWidth: string;
+            maxWidth: string;
+        };
+        answer: {
+            padding: string | number;
+        };
+        pending: {};
+        fulfilled: {};
+        rejected: {};
+        content: {
+            default: {
+                gap: string | number;
+                display: string;
+                flexDirection: import('../types').FlexDirection;
+            };
+            pending: {
+                alignItems: string;
+            };
+            fulfilled: {};
+            rejected: {};
+        };
+        actions: {
+            display: string;
+            flexDirection: import('../types').FlexDirection;
+        };
+        loader: {
+            props: {
+                name: string;
+                size: string;
+                withWrapper: boolean;
+            };
+        };
+    };
     radiogroup: {
         input: {
             position: string;
@@ -69,8 +348,8 @@ export declare const defaultTokens: {
                 color: string;
                 width: string;
                 height: string;
-                alignContent: import('..').TextAlign;
-                textAlign: import('..').TextAlign;
+                alignContent: import('../types').TextAlign;
+                textAlign: import('../types').TextAlign;
             };
             disabled: {};
             selected: {};
@@ -116,11 +395,11 @@ export declare const defaultTokens: {
         layouts: {
             column: {
                 display: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
             row: {
                 display: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
             grid: {
                 display: string;
@@ -141,12 +420,14 @@ export declare const defaultTokens: {
     carousel: {
         default: {};
         container: {
-            position: string;
-            overflow: string;
-            width: string;
-            display: string;
-            zIndex: number;
-            gap: string;
+            default: {
+                position: string;
+                overflow: string;
+                width: string;
+                display: string;
+                zIndex: number;
+                gap: string;
+            };
             variant: {
                 cards: {
                     gap: string;
@@ -245,11 +526,13 @@ export declare const defaultTokens: {
             marginTop: string;
         };
         carouselDot: {
-            width: string;
-            height: string;
-            border: string;
-            cursor: string;
-            transition: string;
+            default: {
+                width: string;
+                height: string;
+                border: string;
+                cursor: string;
+                transition: string;
+            };
             active: {
                 backgroundColor: string;
                 width: string;
@@ -261,11 +544,13 @@ export declare const defaultTokens: {
             };
         };
         carouselThumbs: {
-            display: string;
-            justifyContent: string;
-            gap: string;
+            default: {
+                display: string;
+                justifyContent: string;
+                gap: string;
+            };
             vertical: {
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 flex: string;
                 overflowX: string;
                 alignItems: string;
@@ -275,7 +560,9 @@ export declare const defaultTokens: {
             };
         };
         carouselThumbsViewport: {
-            overflow: string;
+            default: {
+                overflow: string;
+            };
             vertical: {
                 maxHeight: string;
             };
@@ -284,6 +571,7 @@ export declare const defaultTokens: {
             };
         };
         carouselThumbsWrapper: {
+            default: {};
             vertical: {
                 display: string;
                 height: string;
@@ -293,18 +581,20 @@ export declare const defaultTokens: {
             };
         };
         carouselThumb: {
-            minWidth: string;
-            minHeight: string;
-            border: string;
-            padding: number;
-            background: string;
-            cursor: string;
-            opacity: number;
-            transition: string;
-            active: {
+            default: {
+                minWidth: string;
+                minHeight: string;
+                border: string;
+                padding: number;
+                background: string;
+                cursor: string;
                 opacity: number;
+                transition: string;
+                '&:hover': {
+                    opacity: number;
+                };
             };
-            '&:hover': {
+            active: {
                 opacity: number;
             };
             vertical: {
@@ -340,7 +630,7 @@ export declare const defaultTokens: {
         };
         input: {
             default: {
-                '&[type="search"]': {
+                '& input[type="search"]': {
                     padding: string;
                     height: string;
                     fontSize: string;
@@ -371,29 +661,37 @@ export declare const defaultTokens: {
         loader: {
             default: {
                 display: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 gap: string | number;
             };
         };
         items: {
             default: {
                 display: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
             newSearchBtn: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                textAlign: string;
-                color: string;
-                padding: string;
+                styles: {
+                    '.gd-button__content': {
+                        justifyContent: string;
+                    };
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                    color: string;
+                    padding: string;
+                };
+                attrs: {
+                    variant: import('../types').ButtonVariant;
+                };
             };
             noResult: {
                 fontSize: string;
                 fontWeight: number;
                 lineHeight: string;
                 display: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 alignItems: string;
                 gap: string | number;
                 padding: string;
@@ -408,13 +706,21 @@ export declare const defaultTokens: {
                 color: string;
             };
             item: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                textAlign: string;
-                gap: string | number;
-                padding: string;
-                color: string;
+                styles: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                    gap: string | number;
+                    padding: string;
+                    color: string;
+                    '.gd-button__content': {
+                        display: string;
+                    };
+                };
+                attrs: {
+                    variant: import('../types').ButtonVariant;
+                };
             };
             itemRow: {
                 alignItems: string;
@@ -533,7 +839,7 @@ export declare const defaultTokens: {
         };
         Vertical: {
             default: {
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 '&:hover': {
                     boxShadow: string;
                 };
@@ -550,7 +856,7 @@ export declare const defaultTokens: {
         };
         Horizontal: {
             default: {
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 '&:hover': {
                     boxShadow: string;
                 };
@@ -611,7 +917,7 @@ export declare const defaultTokens: {
                     fontWeight: number;
                     lineHeight: string;
                     color: string;
-                    flexDirection: import('..').FlexDirection;
+                    flexDirection: import('../types').FlexDirection;
                 };
             };
             Horizontal: {
@@ -626,7 +932,7 @@ export declare const defaultTokens: {
                     fontWeight: number;
                     lineHeight: string;
                     color: string;
-                    flexDirection: import('..').FlexDirection;
+                    flexDirection: import('../types').FlexDirection;
                 };
             };
         };
@@ -701,7 +1007,7 @@ export declare const defaultTokens: {
             width: string;
             '& input': {
                 width: string;
-                textAlign: import('..').TextAlign;
+                textAlign: import('../types').TextAlign;
             };
         };
         navButton: {
@@ -904,7 +1210,10 @@ export declare const defaultTokens: {
             error: string;
             success: string;
             info: string;
-            link: string;
+            link: {
+                default: string;
+                hover: string;
+            };
             warning: string;
             primary: {
                 default: string;
@@ -1057,12 +1366,12 @@ export declare const defaultTokens: {
                 '&::after': {
                     content: string;
                     position: string;
-                    top: `${number}px` | `${number}rem` | `${number}%`;
-                    right: `${number}px` | `${number}rem` | `${number}%`;
-                    bottom: `${number}px` | `${number}rem` | `${number}%`;
-                    left: `${number}px` | `${number}rem` | `${number}%`;
+                    top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                    right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                    bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                    left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
                     border: string;
-                    borderRadius: `${number}px` | `${number}rem` | `${number}%` | undefined;
+                    borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
                 };
             };
             '&:disabled, &:disabled *': {
@@ -1080,6 +1389,9 @@ export declare const defaultTokens: {
         };
         content: {
             default: {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
                 width: string;
                 minWidth: string;
             };
@@ -1140,6 +1452,7 @@ export declare const defaultTokens: {
         };
         text: {
             primary: {
+                padding: string;
                 background: any;
                 color: any;
                 '&:hover': {
@@ -1150,6 +1463,7 @@ export declare const defaultTokens: {
                 };
             };
             secondary: {
+                padding: string;
                 background: any;
                 color: any;
                 '&:not(:disabled):hover': {
@@ -1162,10 +1476,18 @@ export declare const defaultTokens: {
         };
         inherit: {
             primary: {
-                padding: number;
+                backgroundColor: string;
+                padding: string;
+                '&:disabled': {
+                    background: string;
+                };
             };
             secondary: {
-                padding: number;
+                padding: string;
+                backgroundColor: string;
+                '&:hover': {
+                    background: string;
+                };
             };
         };
     };
@@ -1181,7 +1503,7 @@ export declare const defaultTokens: {
                 width: string;
             };
             withGap: {
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
                 alignItems: string;
                 gap: string;
             };
@@ -1212,7 +1534,6 @@ export declare const defaultTokens: {
                 };
                 '&[readonly], &:disabled': {
                     color: string;
-                    backgroundColor: string;
                     cursor: string;
                 };
                 '&[type="checkbox"]': {
@@ -1228,12 +1549,12 @@ export declare const defaultTokens: {
                         '&::after': {
                             content: string;
                             position: string;
-                            top: `${number}px` | `${number}rem` | `${number}%`;
-                            right: `${number}px` | `${number}rem` | `${number}%`;
-                            bottom: `${number}px` | `${number}rem` | `${number}%`;
-                            left: `${number}px` | `${number}rem` | `${number}%`;
+                            top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
                             border: string;
-                            borderRadius: `${number}px` | `${number}rem` | `${number}%` | undefined;
+                            borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
                         };
                     };
                 };
@@ -1265,12 +1586,12 @@ export declare const defaultTokens: {
                         '&::after': {
                             content: string;
                             position: string;
-                            top: `${number}px` | `${number}rem` | `${number}%`;
-                            right: `${number}px` | `${number}rem` | `${number}%`;
-                            bottom: `${number}px` | `${number}rem` | `${number}%`;
-                            left: `${number}px` | `${number}rem` | `${number}%`;
+                            top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
+                            left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
                             border: string;
-                            borderRadius: `${number}px` | `${number}rem` | `${number}%` | undefined;
+                            borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
                         };
                     };
                     '&[readonly], &:disabled': {
@@ -1406,7 +1727,7 @@ export declare const defaultTokens: {
             };
             "&.Link--disabled": {
                 color: string;
-                cursor: import('..').Cursors;
+                cursor: import('../types').Cursors;
                 textDecoration: string;
                 backgroundColor: string;
                 '&::after': {
@@ -1668,45 +1989,136 @@ export declare const defaultTokens: {
         };
     };
     loader: {
-        default: {
-            border: string;
-            borderTop: string;
-            borderRadius: string;
-        };
-        xs: {
-            borderWidth: string;
-            width: string;
-            height: string;
-            minWidth: string;
-            minHeight: string;
-        };
-        sm: {
-            borderWidth: string;
-            width: string;
-            height: string;
-            maxWidth: string;
-            maxHeight: string;
-        };
-        md: {
-            borderWidth: string;
-            width: string;
-            height: string;
-            maxWidth: string;
-            maxHeight: string;
+        default: {};
+        inline: {};
+        section: {};
+        fullPage: {};
+        circle: {
+            default: {
+                border: string;
+                borderTop: string;
+                borderRadius: string;
+            };
+            xs: {
+                borderWidth: string;
+                width: string;
+                height: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            sm: {
+                borderWidth: string;
+                width: string;
+                height: string;
+                maxWidth: string;
+                maxHeight: string;
+            };
+            md: {
+                borderWidth: string;
+                width: string;
+                height: string;
+                maxWidth: string;
+                maxHeight: string;
+            };
+            lg: {
+                borderWidth: string;
+                width: string;
+                height: string;
+                maxWidth: string;
+                maxHeight: string;
+            };
+            xl: {
+                borderWidth: string;
+                width: string;
+                height: string;
+                maxWidth: string;
+                maxHeight: string;
+            };
         };
-        lg: {
-            borderWidth: string;
-            width: string;
-            height: string;
-            maxWidth: string;
-            maxHeight: string;
+        dots: {
+            default: {
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+            };
+            xs: {
+                gap: string | number;
+                '.dot': {
+                    background: string;
+                    width: string;
+                    height: string;
+                    '&:nth-of-type(1)': {
+                        animationDelay: string;
+                    };
+                    '&:nth-of-type(2)': {
+                        animationDelay: string;
+                    };
+                };
+            };
+            sm: {
+                gap: string | number;
+                '.dot': {
+                    background: string;
+                    width: string;
+                    height: string;
+                    '&:nth-of-type(1)': {
+                        animationDelay: string;
+                    };
+                    '&:nth-of-type(2)': {
+                        animationDelay: string;
+                    };
+                };
+            };
+            md: {
+                gap: string | number;
+                '.dot': {
+                    background: string;
+                    width: string;
+                    height: string;
+                    '&:nth-of-type(1)': {
+                        animationDelay: string;
+                    };
+                    '&:nth-of-type(2)': {
+                        animationDelay: string;
+                    };
+                };
+            };
+            lg: {
+                gap: string | number;
+                '.dot': {
+                    background: string;
+                    width: string;
+                    height: string;
+                    '&:nth-of-type(1)': {
+                        animationDelay: string;
+                    };
+                    '&:nth-of-type(2)': {
+                        animationDelay: string;
+                    };
+                };
+            };
+            xl: {
+                gap: string | number;
+                '.dot': {
+                    background: string;
+                    width: string;
+                    height: string;
+                    '&:nth-of-type(1)': {
+                        animationDelay: string;
+                    };
+                    '&:nth-of-type(2)': {
+                        animationDelay: string;
+                    };
+                };
+            };
         };
-        xl: {
-            borderWidth: string;
-            width: string;
-            height: string;
-            maxWidth: string;
-            maxHeight: string;
+        animation: {
+            circle: {
+                name: string;
+            };
+            dots: {
+                name: string;
+            };
         };
     };
     switchToggle: {
@@ -1716,6 +2128,7 @@ export declare const defaultTokens: {
             padding: string;
             border: string;
         };
+        disabled: {};
     };
     skeleton: {
         default: {
@@ -1794,6 +2207,14 @@ export declare const defaultTokens: {
                 transform: string;
             };
         };
+        bounceKeyframes: {
+            '0%, 80%, 100%': {
+                transform: string;
+            };
+            '40%': {
+                transform: string;
+            };
+        };
         slideIn: {
             '0%': {
                 transform: string;
@@ -1841,7 +2262,7 @@ export declare const defaultTokens: {
         container: {
             position: string;
             display: string;
-            flexDirection: string;
+            flexDirection: import('../types').FlexDirection;
             gap: string;
             padding: string;
             boxSizing: string;
@@ -1871,13 +2292,12 @@ export declare const defaultTokens: {
         };
         snackbar: {
             default: {
-                position: "relative";
+                position: string;
                 boxShadow: string;
                 width: string;
-                fontFamily: "\"Fira Sans\", sans-serif";
                 fontSize: string;
-                display: "flex";
-                flexDirection: "column";
+                display: string;
+                flexDirection: import('../types').FlexDirection;
                 gap: string;
                 color: string;
                 padding: string;
@@ -1897,12 +2317,6 @@ export declare const defaultTokens: {
             };
         };
         positions: {
-            default: {
-                bottom: number;
-                right: number;
-                alignItems: string;
-                flexDirection: import('..').FlexDirection;
-            };
             "top-left": {
                 top: number;
                 left: number;
@@ -1923,24 +2337,24 @@ export declare const defaultTokens: {
                 bottom: number;
                 left: number;
                 alignItems: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
             "bottom-center": {
                 bottom: number;
                 left: string;
                 transform: string;
                 alignItems: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
             "bottom-right": {
                 bottom: number;
                 right: number;
                 alignItems: string;
-                flexDirection: import('..').FlexDirection;
+                flexDirection: import('../types').FlexDirection;
             };
         };
         closeButton: {
-            position: "absolute";
+            position: string;
             top: string;
             right: string;
             background: string;
@@ -1958,15 +2372,19 @@ export declare const defaultTokens: {
             };
             success: {
                 name: string;
+                fill: string;
             };
             error: {
                 name: string;
+                fill: string;
             };
             warning: {
                 name: string;
+                fill: string;
             };
             info: {
                 name: string;
+                fill: string;
             };
         };
         snackbarBody: {
@@ -1976,16 +2394,13 @@ export declare const defaultTokens: {
         };
         snackbarContent: {
             display: string;
-            flexDirection: import('..').FlexDirection;
+            flexDirection: import('../types').FlexDirection;
             alignItems: string;
+            gap: string | number;
             flex: number;
         };
         actionsContainer: {
-            display: string;
-            justifyContent: string;
-            flexDirection: import('..').FlexDirection;
-            gap: string;
-            paddingTop: string;
+            paddingTop: string | number;
         };
     };
     list: {
@@ -2082,6 +2497,7 @@ export declare const defaultTokens: {
             position: string;
             display: string;
         };
+        initiatorWrapper: {};
         dropdown: {
             position: string;
             textAlign: string;
@@ -2108,32 +2524,41 @@ export declare const defaultTokens: {
                 justifyContent: string;
                 alignItems: string;
                 minWidth: string;
-                textAlign: import('..').TextAlign;
+                textAlign: import('../types').TextAlign;
+                '.gd-button__content': {
+                    justifyContent: string;
+                };
+            };
+            attrs: {
+                variant: import('../types').ButtonVariant;
+                color: import('../types').ButtonColorVariant;
             };
         };
         item: {
+            default: {
+                cursor: import('../types').Cursors;
+                '&:hover, &.active': {
+                    backgroundColor: string;
+                };
+            };
             disabled: {
                 opacity: number;
-                cursor: import('..').Cursors;
+                cursor: import('../types').Cursors;
                 pointerEvents: string;
             };
-            base: {
-                cursor: string;
-                '&:hover:not(.disabled), &.active': {
-                    backgroundColor: string;
-                };
-                '&.disabled': {
-                    cursor: string;
-                    opacity: string;
-                };
-            };
         };
         arrowIconWrapper: {
-            transform: {
-                open: string;
-                close: string;
+            default: {
                 transition: string;
             };
+            transform: {
+                open: {
+                    transform: string;
+                };
+                close: {
+                    transform: string;
+                };
+            };
         };
         arrowIcon: {
             name: string;
@@ -2141,6 +2566,15 @@ export declare const defaultTokens: {
             width: number;
             height: number;
         };
+        adornment: {
+            default: {
+                display: string;
+                alignItems: string;
+                flexDirection: import('../types').FlexDirection;
+                position: string;
+                zIndex: number;
+            };
+        };
     };
     search: {
         default: {};
@@ -2361,7 +2795,7 @@ export declare const defaultTokens: {
             active: {};
             inactive: {};
             complete: {
-                cursor: import('..').Cursors;
+                cursor: import('../types').Cursors;
             };
         };
         stepIcon: {
@@ -2654,6 +3088,7 @@ export declare const defaultTokens: {
                 gap: string;
                 calculateJustify: string;
             };
+            disabled: {};
         };
         slider: {
             default: {
@@ -2684,6 +3119,17 @@ export declare const defaultTokens: {
                 };
             };
         };
+        checkbox: {
+            border: number;
+            clip: string;
+            height: string;
+            margin: string;
+            overflow: string;
+            padding: number;
+            position: string;
+            whiteSpace: string;
+            width: string;
+        };
     };
     chat: {
         wrapper: {
@@ -2702,17 +3148,28 @@ export declare const defaultTokens: {
                 position: string;
                 width: string;
                 height: string;
-                paddingLeft: string;
-                paddingRight: string;
-                '@media (min-width: 768px)': {
+                display: string;
+                flexDirection: string;
+                justifyContent: string;
+                paddingBottom: string | number;
+                gap: string | number;
+                '@media (max-width: 768px)': {
+                    paddingLeft: string;
+                    paddingRight: string;
+                };
+                '@media (min-width: 768px) and (max-width: 1280px)': {
+                    paddingLeft: string;
+                    paddingRight: string;
+                };
+                '@media (min-width: 1280px)': {
                     paddingLeft: string;
                     paddingRight: string;
                 };
             };
         };
         mainHeader: {
+            minHeight: string;
             height: string;
-            maxHeight: string;
             display: string;
             overflow: string;
             alignItems: string;
@@ -2738,6 +3195,7 @@ export declare const defaultTokens: {
             minHeight: string;
         };
         sidebarWrapper: {
+            default: {};
             auto: {
                 '@media (max-width: 768px)': {
                     position: string;
@@ -2763,8 +3221,8 @@ export declare const defaultTokens: {
             };
         };
         sidebarHeader: {
+            minHeight: string;
             height: string;
-            maxHeight: string;
             display: string;
             overflow: string;
             alignItems: string;
@@ -2809,26 +3267,46 @@ export declare const defaultTokens: {
                 opacity: string;
                 cursor: string;
             };
-        };
-        thumb: {
-            isolation: string;
-            appearance: string;
-            backgroundColor: string;
-            borderRadius: string;
-            blockSize: string;
-            inlineSize: string;
-            boxSizing: string;
-            border: string;
-            marginTop: string;
-        };
-        track: {
-            blockSize: string;
-            borderRadius: string;
-            backgroundRepeat: string;
-            backgroundColor: string;
-            backgroundImage: string;
-            backgroundPositionX: string;
-            backgroundSize: string;
+            '&::-webkit-slider-thumb': {
+                isolation: string;
+                appearance: string;
+                backgroundColor: string;
+                borderRadius: string;
+                blockSize: string;
+                inlineSize: string;
+                boxSizing: string;
+                border: string;
+                marginTop: string;
+            };
+            '&::-webkit-slider-runnable-track': {
+                blockSize: string;
+                borderRadius: string;
+                backgroundRepeat: string;
+                backgroundColor: string;
+                backgroundImage: string;
+                backgroundPositionX: string;
+                backgroundSize: string;
+            };
+            '&::-moz-range-thumb': {
+                isolation: string;
+                appearance: string;
+                backgroundColor: string;
+                borderRadius: string;
+                blockSize: string;
+                inlineSize: string;
+                boxSizing: string;
+                border: string;
+                marginTop: string;
+            };
+            '&::-moz-range-track': {
+                blockSize: string;
+                borderRadius: string;
+                backgroundRepeat: string;
+                backgroundColor: string;
+                backgroundImage: string;
+                backgroundPositionX: string;
+                backgroundSize: string;
+            };
         };
     };
     menu: {