@veracity/vui 1.9.1 → 2.0.0

package/dist/esm/theme/components.d.ts

@@ -75,6 +75,133 @@ declare const _default: {
             };
         };
     };
+    Badge: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            xs: {
+                container: {
+                    borderRadius: string;
+                    fontSize: string;
+                    h: number;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+            sm: {
+                container: {
+                    fontSize: string;
+                    h: number;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+            md: {
+                container: {
+                    fontSize: string;
+                    h: number;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+            lg: {
+                container: {
+                    fontSize: string;
+                    h: number;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+        };
+        variants: {
+            subtleSandstone: {
+                container: {
+                    bg: string;
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            subtleEarth: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            subtleBlue: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            subtleBlue2: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            subtleRed: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            subtleYellow: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            subtleGreen: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            solidBlue: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            solidDarkBlue: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                };
+            };
+            solidRed: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            solidYellow: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+            solidGreen: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
+    };
     Box: {
         baseStyle: {};
         defaultProps: {};
@@ -102,13 +229,12 @@ declare const _default: {
     Button: {
         baseStyle: {};
         defaultProps: {
-            colorScheme: string;
             size: string;
             variant: string;
         };
         parts: string[];
         sizes: {
-            xs: {
+            sm: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -120,7 +246,7 @@ declare const _default: {
                 };
                 text: {};
             };
-            sm: {
+            md: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -132,7 +258,7 @@ declare const _default: {
                 };
                 text: {};
             };
-            md: {
+            lg: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -144,7 +270,7 @@ declare const _default: {
                 };
                 text: {};
             };
-            lg: {
+            xl: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -158,39 +284,204 @@ declare const _default: {
             };
         };
         variants: {
-            outlined: (props: import("..").Dict<any>) => {
+            primaryDark: {
                 container: {
+                    bg: string;
                     borderColor: string;
+                    color: string;
+                    hoverBg: string;
                     hoverBorderColor: string;
-                    focusRing: number;
+                    hoverColor: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
+                };
+            };
+            primaryLight: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
                     hoverBg: string;
+                    hoverBorderColor: string;
+                    hoverColor: string;
                     activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
+                };
+            };
+            secondaryDark: {
+                container: {
                     bg: string;
-                    borderWidth: number;
+                    borderColor: string;
                     color: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    hoverColor: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
                 };
             };
-            solid: (props: import("..").Dict<any>) => {
+            secondaryLight: {
                 container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
                     hoverBg: string;
                     hoverBorderColor: string;
+                    hoverColor: string;
                     activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
+                };
+            };
+            tertiaryDark: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    hoverColor: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
+                };
+            };
+            tertiaryLight: {
+                container: {
                     bg: string;
                     borderColor: string;
-                    borderWidth: number;
                     color: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    hoverColor: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                    activeColor: string;
                 };
             };
-            text: (props: import("..").Dict<any>) => {
+            solidBlue: {
                 container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
                     hoverBg: string;
                     hoverBorderColor: string;
+                    focusBg: string;
                     activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            blueOutlined: {
+                container: {
                     bg: string;
                     borderColor: string;
-                    borderWidth: number;
                     color: string;
-                    focusRing: number;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            blueText: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            solidGreen: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            solidRed: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            subtleBlue: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    disabledBg: string;
+                    disabledBorderColor: string;
+                    disabledColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    activeBorderColor: string;
+                };
+            };
+            subtleRed: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    color: string;
+                };
+            };
+            subtleYellow: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    color: string;
+                };
+            };
+            subtleGreen: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    focusBg: string;
+                    activeBg: string;
+                    color: string;
                 };
             };
         };
@@ -380,39 +671,97 @@ declare const _default: {
         };
     };
     Heading: {
-        baseStyle: {};
+        baseStyle: {
+            color: string;
+        };
         defaultProps: {
             size: string;
         };
         sizes: {
+            title: {
+                as: string;
+                fontFamily: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
+                lineHeight: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
             h1: {
                 as: string;
-                fontSize: string;
-                lineHeight: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
+                lineHeight: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
+            lead: {
+                as: string;
+                color: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
+                lineHeight: {
+                    desktop: string;
+                    mobile: string;
+                };
             };
             h2: {
                 as: string;
-                fontSize: string;
-                lineHeight: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
+                lineHeight: {
+                    desktop: string;
+                    mobile: string;
+                };
             };
             h3: {
                 as: string;
-                fontSize: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
                 lineHeight: string;
             };
             h4: {
                 as: string;
-                fontSize: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
                 lineHeight: string;
             };
             h5: {
                 as: string;
-                fontSize: string;
-                lineHeight: string;
+                fontSize: {
+                    desktop: string;
+                    mobile: string;
+                };
+                fontWeight: string;
+                lineHeight: {
+                    desktop: string;
+                    mobile: string;
+                };
             };
             h6: {
                 as: string;
                 fontSize: string;
+                fontWeight: string;
                 lineHeight: string;
             };
         };
@@ -440,6 +789,10 @@ declare const _default: {
                 height: number;
                 width: number;
             };
+            xl: {
+                height: number;
+                width: number;
+            };
         };
         variants: {};
     };
@@ -514,7 +867,6 @@ declare const _default: {
     Link: {
         baseStyle: {};
         defaultProps: {
-            colorScheme: string;
             size: string;
             variant: string;
         };
@@ -523,6 +875,7 @@ declare const _default: {
             sm: {
                 container: {
                     fontSize: string;
+                    lineHeight: string;
                 };
                 icon: {
                     size: string;
@@ -531,6 +884,7 @@ declare const _default: {
             md: {
                 container: {
                     fontSize: string;
+                    lineHeight: string;
                 };
                 icon: {
                     size: string;
@@ -539,6 +893,16 @@ declare const _default: {
             lg: {
                 container: {
                     fontSize: string;
+                    lineHeight: string;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+            xl: {
+                container: {
+                    fontSize: string;
+                    lineHeight: string;
                 };
                 icon: {
                     size: string;
@@ -546,13 +910,13 @@ declare const _default: {
             };
         };
         variants: {
-            default: (props: import("..").Dict<any>) => {
+            default: () => {
                 container: {
                     color: string;
                     hoverColor: string;
                 };
             };
-            light: (props: import("..").Dict<any>) => {
+            light: () => {
                 container: {
                     color: string;
                     hoverColor: string;
@@ -563,6 +927,12 @@ declare const _default: {
                     hoverTextDecoration: string;
                 };
             };
+            white: () => {
+                container: {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
         };
     };
     List: {
@@ -703,23 +1073,40 @@ declare const _default: {
     Notification: {
         baseStyle: {};
         defaultProps: {
-            colorScheme: string;
             variant: string;
         };
         parts: string[];
         sizes: {};
         variants: {
-            subtle: (props: import("..").Dict<any>) => {
+            subtleBlue: {
                 container: {
                     bg: string;
                     borderColor: string;
-                    borderWidth: number;
                     color: string;
                 };
                 button: {
+                    borderColor: string;
+                };
+            };
+            subtleRed: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                };
+            };
+            subtleYellow: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                };
+            };
+            subtleGreen: {
+                container: {
+                    bg: string;
+                    borderColor: string;
                     color: string;
-                    hoverBg: string;
-                    activeBg: string;
                 };
             };
         };
@@ -742,14 +1129,6 @@ declare const _default: {
                 fontSize: string;
                 lineHeight: string;
             };
-            xl: {
-                fontSize: string;
-                lineHeight: string;
-            };
-            xxl: {
-                fontSize: string;
-                lineHeight: string;
-            };
         };
         variants: {};
     };
@@ -1107,7 +1486,16 @@ declare const _default: {
                 fontSize: string;
             };
         };
-        variants: {};
+        variants: {
+            label: {
+                fontSize: string;
+                fontWeight: string;
+            };
+            caption: {
+                fontSize: string;
+                fontWeight: string;
+            };
+        };
     };
     Table: {
         baseStyle: {};
@@ -1140,6 +1528,11 @@ declare const _default: {
                 };
             };
             striped: {};
+            basic: {
+                td: {
+                    borderBottom: string;
+                };
+            };
         };
     };
     Tabs: {
@@ -1147,22 +1540,71 @@ declare const _default: {
         defaultProps: {};
         parts: string[];
         sizes: {
-            sm: {};
-            md: {};
-            lg: {};
-            xl: {};
+            sm: {
+                tabsNavBar: {
+                    borderWidth: string;
+                    fontSize: string;
+                    h: string;
+                    py: string;
+                };
+            };
+            md: {
+                tabsNavBar: {
+                    borderWidth: string;
+                    fontSize: string;
+                    h: string;
+                    py: string;
+                };
+            };
+            lg: {
+                tabsNavBar: {
+                    borderWidth: string;
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+            };
+            xl: {
+                tabsNavBar: {
+                    borderWidth: string;
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+            };
+            xxl: {
+                tabsNavBar: {
+                    borderWidth: string;
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+            };
         };
         variants: {};
     };
     Tag: {
         baseStyle: {};
         defaultProps: {
-            colorScheme: string;
             size: string;
             variant: string;
         };
         parts: string[];
         sizes: {
+            xs: {
+                container: {
+                    borderRadius: string;
+                    fontSize: string;
+                    h: number;
+                    spaceX: number;
+                };
+                button: {
+                    size: string;
+                };
+                icon: {
+                    size: string;
+                };
+            };
             sm: {
                 container: {
                     fontSize: string;
@@ -1204,31 +1646,166 @@ declare const _default: {
             };
         };
         variants: {
-            solid: (props: import("..").Dict<any>) => {
+            subtleGrey: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    borderColor: string;
+                    color: string;
+                    activeBg: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                    activeBg: string;
+                };
+            };
+            subtleBlue: {
                 container: {
+                    bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    borderColor: string;
+                    color: string;
+                };
+                button: {
                     bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                };
+            };
+            subtleRed: {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    color: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                };
+            };
+            subtleYellow: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    borderColor: string;
                     color: string;
-                    focusRing: number;
                 };
                 button: {
+                    bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                };
+            };
+            subtleGreen: {
+                container: {
                     bg: string;
+                    hoverBg: string;
+                    borderColor: string;
+                    color: string;
+                    activeBg: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
                     color: string;
                 };
             };
-            subtle: (props: import("..").Dict<any>) => {
+            solidBlue: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    borderColor: string;
+                    color: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    activeBorderColor: string;
+                    color: string;
+                };
+            };
+            solidDarkBlue: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    borderColor: string;
+                    color: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                };
+            };
+            solidRed: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    borderColor: string;
+                    color: string;
+                };
+                button: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    activeBorderColor: string;
+                    color: string;
+                };
+            };
+            solidYellow: {
                 container: {
+                    bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    borderColor: string;
+                    color: string;
+                };
+                button: {
                     bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    hoverBorderColor: string;
+                    color: string;
+                };
+            };
+            solidGreen: {
+                container: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    borderColor: string;
                     color: string;
                 };
                 button: {
+                    bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    hoverBorderColor: string;
+                    activeBorderColor: string;
                     color: string;
                 };
             };