@veracity/vui 2.2.0 → 2.3.0

package/dist/esm/theme/foundations/colors.d.ts

@@ -19,6 +19,7 @@ export declare const darkBlue: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const digiGreen: {
     95: string;
@@ -40,6 +41,7 @@ export declare const digiGreen: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const earth: {
     95: string;
@@ -61,6 +63,7 @@ export declare const earth: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const energyRed: {
     95: string;
@@ -82,6 +85,7 @@ export declare const energyRed: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const landGreen: {
     95: string;
@@ -103,6 +107,7 @@ export declare const landGreen: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const seaBlue: {
     95: string;
@@ -124,6 +129,7 @@ export declare const seaBlue: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const sandstone: {
     95: string;
@@ -145,6 +151,7 @@ export declare const sandstone: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const skyBlue: {
     97: string;
@@ -166,6 +173,7 @@ export declare const skyBlue: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const sunflower: {
     95: string;
@@ -187,6 +195,7 @@ export declare const sunflower: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const terracotta: {
     95: string;
@@ -208,6 +217,7 @@ export declare const terracotta: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const warmGrey: {
     95: string;
@@ -229,6 +239,7 @@ export declare const warmGrey: {
     15: string;
     10: string;
     5: string;
+    main: string;
 };
 export declare const blue: {
     10: string;
@@ -399,6 +410,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     digiGreen: {
         95: string;
@@ -420,6 +432,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     earth: {
         95: string;
@@ -441,6 +454,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     energyRed: {
         95: string;
@@ -462,6 +476,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     focusColor: string;
     landGreen: {
@@ -484,6 +499,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     sandstone: {
         95: string;
@@ -505,6 +521,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     seaBlue: {
         95: string;
@@ -526,6 +543,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     skyBlue: {
         97: string;
@@ -547,6 +565,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     sunflower: {
         95: string;
@@ -568,6 +587,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     terracotta: {
         95: string;
@@ -589,6 +609,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     warmGrey: {
         95: string;
@@ -610,6 +631,7 @@ declare const _default: {
         15: string;
         10: string;
         5: string;
+        main: string;
     };
     blue: {
         10: string;

package/dist/esm/theme/foundations/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/colors.ts"],"names":[],"mappings":"AAsFA,eAAO,MAAM,UAAU,4BAA4B,CAAA;AAEnD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAoBpB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAoBjB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAoBnB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAoBnB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;CAoBtB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAoBpB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWpB,CAAA;AAED,eAAO,MAAM,GAAG;;;;;;;;;;;CAWf,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;CAWlB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;CAIpB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED,wBAgFC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/colors.ts"],"names":[],"mappings":"AAsFA,eAAO,MAAM,UAAU,4BAA4B,CAAA;AAEnD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;CAqBjB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBnB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBnB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;CAqBtB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;CAWhB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWpB,CAAA;AAED,eAAO,MAAM,GAAG;;;;;;;;;;;CAWf,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;CAWlB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;CAIpB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED,wBAgFC"}

package/dist/esm/theme/foundations/colors.js

@@ -80,7 +80,8 @@ export const darkBlue = {
     18: 'hsl(223, 67%, 18%)',
     15: 'hsl(223, 67%, 15%)',
     10: 'hsl(223, 67%, 10%)',
-    5: 'hsl(223, 67%, 5%)'
+    5: 'hsl(223, 67%, 5%)',
+    main: 'hsl(223, 67%, 18%)'
 };
 export const digiGreen = {
     95: 'hsl(139, 100%, 95%)',
@@ -101,7 +102,8 @@ export const digiGreen = {
     20: 'hsl(139, 100%, 20%)',
     15: 'hsl(139, 100%, 15%)',
     10: 'hsl(139, 100%, 10%)',
-    5: 'hsl(139, 100%, 5%)'
+    5: 'hsl(139, 100%, 5%)',
+    main: 'hsl(139, 100%, 78%)'
 };
 export const earth = {
     95: 'hsl(35, 53%, 95%)',
@@ -122,7 +124,8 @@ export const earth = {
     20: 'hsl(35, 53%, 20%)',
     15: 'hsl(35, 53%, 15%)',
     10: 'hsl(35, 53%, 10%)',
-    5: 'hsl(35, 53%, 5%)'
+    5: 'hsl(35, 53%, 5%)',
+    main: 'hsl(35, 53%, 89%)'
 };
 export const energyRed = {
     95: 'hsl(357, 83%, 95%)',
@@ -143,7 +146,8 @@ export const energyRed = {
     20: 'hsl(357, 83%, 20%)',
     15: 'hsl(357, 83%, 15%)',
     10: 'hsl(357, 83%, 10%)',
-    5: 'hsl(357, 83%, 5%)'
+    5: 'hsl(357, 83%, 5%)',
+    main: 'hsl(357, 83%, 54%)'
 };
 export const landGreen = {
     95: 'hsl(114, 49%, 95%)',
@@ -164,7 +168,8 @@ export const landGreen = {
     20: 'hsl(114, 49%, 20%)',
     15: 'hsl(114, 49%, 15%)',
     10: 'hsl(114, 49%, 10%)',
-    5: 'hsl(114, 49%, 5%)'
+    5: 'hsl(114, 49%, 5%)',
+    main: 'hsl(114, 49%, 41%)'
 };
 export const seaBlue = {
     95: 'hsl(218, 100%, 95%)',
@@ -185,7 +190,8 @@ export const seaBlue = {
     20: 'hsl(218, 100%, 20%)',
     15: 'hsl(218, 100%, 15%)',
     10: 'hsl(218, 100%, 10%)',
-    5: 'hsl(218, 100%, 5%)'
+    5: 'hsl(218, 100%, 5%)',
+    main: 'hsl(218, 100%, 28%)'
 };
 export const sandstone = {
     95: 'hsl(40, 3%, 95%)',
@@ -206,7 +212,8 @@ export const sandstone = {
     20: 'hsl(40, 3%, 20%)',
     15: 'hsl(40, 3%, 15%)',
     10: 'hsl(40, 3%, 10%)',
-    5: 'hsl(40, 3%, 5%)'
+    5: 'hsl(40, 3%, 5%)',
+    main: 'hsl(40, 3%, 79%)'
 };
 export const skyBlue = {
     97: 'hsl(196, 74%, 97%)',
@@ -227,7 +234,8 @@ export const skyBlue = {
     20: 'hsl(196, 74%, 20%)',
     15: 'hsl(196, 74%, 15%)',
     10: 'hsl(196, 74%, 10%)',
-    5: 'hsl(196, 74%, 5%)'
+    5: 'hsl(196, 74%, 5%)',
+    main: 'hsl(196, 74%, 77%)'
 };
 export const sunflower = {
     95: 'hsl(55, 100%, 95%)',
@@ -248,7 +256,8 @@ export const sunflower = {
     20: 'hsl(55, 100%, 20%)',
     15: 'hsl(55, 100%, 15%)',
     10: 'hsl(55, 100%, 10%)',
-    5: 'hsl(55, 100%, 5%)'
+    5: 'hsl(55, 100%, 5%)',
+    main: 'hsl(55, 100%, 73%)'
 };
 export const terracotta = {
     95: 'hsl(34, 100%, 95%)',
@@ -269,7 +278,8 @@ export const terracotta = {
     20: 'hsl(34, 100%, 20%)',
     15: 'hsl(34, 100%, 15%)',
     10: 'hsl(34, 100%, 10%)',
-    5: 'hsl(34, 100%, 5%)'
+    5: 'hsl(34, 100%, 5%)',
+    main: 'hsl(34, 100%, 35%)'
 };
 export const warmGrey = {
     95: 'hsl(30, 8%, 95%)',
@@ -290,7 +300,8 @@ export const warmGrey = {
     20: 'hsl(30, 8%, 20%)',
     15: 'hsl(30, 8%, 15%)',
     10: 'hsl(30, 8%, 10%)',
-    5: 'hsl(30, 8%, 5%)'
+    5: 'hsl(30, 8%, 5%)',
+    main: 'hsl(30, 8%, 56%)'
 };
 export const blue = {
     10: '#f6fbff',

package/dist/esm/theme/foundations/index.d.ts

@@ -91,6 +91,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         digiGreen: {
             95: string;
@@ -112,6 +113,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         earth: {
             95: string;
@@ -133,6 +135,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         energyRed: {
             95: string;
@@ -154,6 +157,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         focusColor: string;
         landGreen: {
@@ -176,6 +180,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         sandstone: {
             95: string;
@@ -197,6 +202,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         seaBlue: {
             95: string;
@@ -218,6 +224,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         skyBlue: {
             97: string;
@@ -239,6 +246,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         sunflower: {
             95: string;
@@ -260,6 +268,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         terracotta: {
             95: string;
@@ -281,6 +290,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         warmGrey: {
             95: string;
@@ -302,6 +312,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         blue: {
             10: string;

package/dist/esm/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/esm/tooltip/{tooltip.setup.d.ts → consts.d.ts}

@@ -1,5 +1,7 @@
 export declare const pointerSize = 12;
-export declare const color = "prussian.80";
+export declare const bg = "darkBlue.18";
+export declare const borderRaduis = 1;
+export declare const boxShadow = 2;
 export declare const pointerPlacement: {
     top: {
         top: string;
@@ -30,4 +32,4 @@ export declare const pointerPlacement: {
         translate: string;
     };
 };
-//# sourceMappingURL=tooltip.setup.d.ts.map
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/tooltip/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/tooltip/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,EAAE,gBAAgB,CAAA;AAE/B,eAAO,MAAM,YAAY,IAAI,CAAA;AAE7B,eAAO,MAAM,SAAS,IAAI,CAAA;AAE1B,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}

package/dist/esm/tooltip/{tooltip.setup.js → consts.js}

@@ -1,5 +1,7 @@
 export const pointerSize = 12;
-export const color = 'prussian.80';
+export const bg = 'darkBlue.18';
+export const borderRaduis = 1;
+export const boxShadow = 2;
 export const pointerPlacement = {
     top: {
         top: 'auto',

package/dist/esm/tooltip/tooltip.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Box from '../box';
 import { useUp, v } from '../core';
 import { Link } from '../link';
-import { color, pointerPlacement, pointerSize } from './tooltip.setup';
+import { bg, pointerPlacement, pointerSize } from './consts';
 import { TooltipContent } from './tooltipContent';
 /**
  * A simple text popup hint.
@@ -15,7 +15,7 @@ export const Tooltip = (props) => {
     const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'Tooltip', placement = 'top' } = props;
     const isDesktop = useUp('md');
     return (React.createElement(Tippy, { content: React.createElement(TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
-            isDesktop && (React.createElement(Box, { bg: color, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })),
+            isDesktop && (React.createElement(Box, { bg: bg, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })),
             React.createElement(v.div, null,
                 text,
                 !!linkText && (React.createElement(React.Fragment, null,

package/dist/esm/tooltip/tooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,qCAAyD,YAAY,gBAgB/F,CAAA"}
+{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,qCAAyD,YAAY,gBAiB/F,CAAA"}

package/dist/esm/tooltip/tooltipContent.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import Box from '../box';
-import { color } from './tooltip.setup';
-export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }) => (React.createElement(Box, { bg: color, boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
+import { bg, borderRaduis, boxShadow } from './consts';
+export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }) => (React.createElement(Box, { bg: bg, borderRadius: borderRaduis, boxShadow: boxShadow, className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/avatar.tsx

@@ -3,10 +3,19 @@ import React from 'react'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import Image from '../image'
-import { cs } from '../utils'
+import { cs, filterUndefined } from '../utils'
 import { AvatarProps } from './avatar.types'
 import { defaultGetInitials } from './helpers'
 
+function imageExists(image_url: string) {
+  const http = new XMLHttpRequest()
+
+  http.open('HEAD', image_url, false)
+  http.send()
+
+  return http.status !== 404
+}
+
 export const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
@@ -21,6 +30,12 @@ export const AvatarBase = styled.spanBox`
   &:focus {
     border-color: transparent;
   }
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    user-select: none;
+  }
 `
 
 /** Displays user data, such as name initials or profile image. */
@@ -28,6 +43,7 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   const {
     children,
     className,
+    disabled,
     getInitials = defaultGetInitials,
     icon,
     isInteractive = props.onClick !== undefined,
@@ -38,19 +54,29 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   } = omitThemingProps(props)
   const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)
 
-  const borderRadius = isSquare ? 'none' : '50%'
+  const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'
   const initials = getInitials(name)
 
-  const interactiveProps = isInteractive
-    ? ({
-        cursor: 'pointer',
-        hoverBg,
-        activeBg,
-        focusRing: 3,
-        tabIndex: 0,
-        userSelect: 'none'
-      } as const)
-    : {}
+  const internalIcon = src && !imageExists(src) ? 'falUser' : icon
+
+  const interactiveProps =
+    !disabled && isInteractive
+      ? ({
+          cursor: 'pointer',
+          hoverBg,
+          hoverOpacity: src ? 0.85 : 1,
+          activeOpacity: src ? 0.7 : 1,
+          activeBg,
+          focusRing: 3,
+          tabIndex: 0,
+          userSelect: 'none'
+        } as const)
+      : {}
+
+  const aliasedProps = filterUndefined({
+    borderRadius: borderRadius,
+    'aria-disabled': disabled
+  })
 
   return (
     <AvatarBase
@@ -61,14 +87,15 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
       w={h}
       {...styles}
       {...interactiveProps}
+      {...aliasedProps}
       {...rest}
     >
       {children ? (
         children
-      ) : src ? (
+      ) : src && imageExists(src) ? (
         <Image {...{ borderRadius, src }} />
-      ) : icon ? (
-        <Icon name={icon} size={iconSize} />
+      ) : internalIcon ? (
+        <Icon name={internalIcon} size={iconSize} />
       ) : initials ? (
         initials
       ) : null}

package/src/avatar/avatar.types.ts

@@ -4,8 +4,10 @@ import { ThemingProps } from '../theme'
 
 export type AvatarProps = SystemProps &
   ThemingProps<'Avatar'> & {
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
+    /** Displays avatar in disabled state with appropriate styling. */
+    disabled?: boolean
     /** Custom function to compute initials based on the provided name. */
     getInitials?: (name: string) => string
     /** Renders an icon as the only content. */