@veracity/vui 1.1.3 → 1.2.0-beta.0

package/dist/esm/tabs/tabsNavBar.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import Box from '../box';
 import { vui } from '../core';
+import { Icon } from '../icon';
 import { List, ListItem } from '../list';
 import { cs } from '../utils';
+const iconSizeMapper = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg'
+};
 export const TabsNavBar = vui((props, ref) => {
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
-    return (React.createElement(List, { borderBottom: "1px solid grey.40", className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => tab?.id !== undefined && onNavItemClick(tab.id), position: "relative" },
-        tab.title,
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
+    const iconSize = iconSizeMapper?.[size] || 'md';
+    return (React.createElement(List, { borderBottom: showBorder ? '1px solid grey.40' : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative" },
+        React.createElement(Box, { alignItems: "center" },
+            !!tab.icon && React.createElement(Icon, { mr: 1, name: tab.icon, size: iconSize }),
+            tab.title),
         !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 export default TabsNavBar;

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

@@ -136,17 +136,6 @@ declare const _default: {
                     color: string;
                 };
             };
-            subtle: (props: import("..").Dict<any>) => {
-                container: {
-                    hoverBg: string;
-                    hoverBorderColor: string;
-                    activeBg: string;
-                    bg: string;
-                    borderColor: string;
-                    borderWidth: number;
-                    color: string;
-                };
-            };
             text: (props: import("..").Dict<any>) => {
                 container: {
                     hoverBg: string;

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

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}

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

@@ -332,17 +332,6 @@ declare const defaultTheme: {
                         color: string;
                     };
                 };
-                subtle: (props: import("..").Dict<any>) => {
-                    container: {
-                        hoverBg: string;
-                        hoverBorderColor: string;
-                        activeBg: string;
-                        bg: string;
-                        borderColor: string;
-                        borderWidth: number;
-                        color: string;
-                    };
-                };
                 text: (props: import("..").Dict<any>) => {
                     container: {
                         hoverBg: string;

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAkCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAoCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}

package/dist/esm/toast/Toast.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Box } from '../box';
 import { VuiProvider } from '../core';
 import { Notification } from '../notification';
 import { zIndices } from '../theme';
-import { addContainer, uid } from '../utils';
+import { addContainer, reactDomRender, uid } from '../utils';
 const wrapperId = 'toastsWrapper';
 const setup = {
     options: {
@@ -13,10 +12,12 @@ const setup = {
     },
     componentList: []
 };
-const render = () => 
-// eslint-disable-next-line react/no-render-return-value
-ReactDOM.render(React.createElement(VuiProvider, null,
-    React.createElement(Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, setup.componentList.map(item => (React.createElement("div", { key: item.id }, item.component))))), document.getElementById(wrapperId));
+const render = () => {
+    const wrapper = document.getElementById(wrapperId);
+    const content = (React.createElement(VuiProvider, null,
+        React.createElement(Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, setup.componentList.map(item => (React.createElement("div", { key: item.id }, item.component))))));
+    reactDomRender(wrapper, content);
+};
 const hide = (id) => {
     setup.componentList = setup.componentList.filter(i => i.id !== id);
     render();

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBAmC1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA0C1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/esm/tooltip/tooltip.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Box from '../box';
+import { useUp } from '../core';
+import { Link } from '../link';
 import Popover from '../popover';
-import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup';
+import { color, pointerPlacement, pointerSize } from './tooltip.setup';
 /**
  * A simple text popup hint.
  *
@@ -9,12 +11,16 @@ import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup
  *
  * */
 export const Tooltip = (props) => {
-    const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props;
+    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
+    const isDesktop = useUp('md');
     return (React.createElement(Popover, { placement: placement, trigger: "mouseenter" },
         React.createElement(Popover.Trigger, { as: Box, display: "inline-block" },
             React.createElement(Box, { display: "inline-block" }, children)),
-        React.createElement(Popover.Content, { animation: isAnimated ? animation[placement] : undefined, bg: color, color: "white", m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
-            !isAnimated && (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` })),
-            text)));
+        React.createElement(Popover.Content, { bg: color, color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
+            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` })),
+            text,
+            !!linkText && (React.createElement(React.Fragment, null,
+                "\u00A0",
+                React.createElement(Link, { variant: "light", ...linkProps }, linkText))))));
 };
 export default Tooltip;

package/dist/esm/tooltip/tooltip.setup.d.ts

@@ -1,10 +1,4 @@
-export declare const animation: {
-    top: string;
-    right: string;
-    bottom: string;
-    left: string;
-};
-export declare const pointerSize = 8;
+export declare const pointerSize = 12;
 export declare const color = "prussian.80";
 export declare const pointerPlacement: {
     top: {

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;CAKrB,CAAA;AAED,eAAO,MAAM,WAAW,IAAI,CAAA;AAE5B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}
+{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}

package/dist/esm/tooltip/tooltip.setup.js

@@ -1,10 +1,4 @@
-export const animation = {
-    top: 'fadeDown',
-    right: 'fadeLeft',
-    bottom: 'fadeUp',
-    left: 'fadeRight'
-};
-export const pointerSize = 8;
+export const pointerSize = 12;
 export const color = 'prussian.80';
 export const pointerPlacement = {
     top: {
@@ -25,13 +19,13 @@ export const pointerPlacement = {
         top: `50%`,
         bottom: 'auto',
         left: 'auto',
-        right: '0',
+        right: '-4px',
         translate: '-50%, -50%'
     },
     right: {
         top: `50%`,
         bottom: 'auto',
-        left: `${pointerSize / 2}px`,
+        left: '2px',
         right: 'auto',
         translate: '0, -50%'
     }

package/dist/esm/tooltip/tooltip.types.d.ts

@@ -1,13 +1,17 @@
-import { ReactNode } from 'react';
-export declare type TooltipProps = {
+import { ChildrenProp } from '../core';
+import { LinkProps } from '../link';
+export interface TooltipProps extends ChildrenProp {
+    /** Font size. */
+    fontSize?: '16px' | '14px';
     /** Displays given text at the tooltip. */
     text?: string;
     /** Tooltip position. */
     placement?: 'top' | 'left' | 'bottom' | 'right';
-    /** Displays the tooltip with animation, without the arrow pointer. */
-    isAnimated?: boolean;
     /** Sets maximum width to the tooltip body. */
     maxWidth?: string;
-    children?: ReactNode;
-};
+    /** Link text that will be concatenated to the end of the tooltip text. */
+    linkText?: string;
+    /** The <Link /> props.  */
+    linkProps?: LinkProps;
+}
 //# sourceMappingURL=tooltip.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,oBAAY,YAAY,GAAG;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA"}
+{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,iBAAiB;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB"}

package/dist/esm/utils/dom.d.ts

@@ -1,7 +1,10 @@
 export declare const addElement: (id: string) => HTMLElement;
 export declare const removeElement: (id: string) => void;
+export declare const addBodyClass: (className: string) => void;
+export declare const removeBodyClass: (className: string) => void;
+export declare const removeElements: (className: string) => void;
 export declare const addElementClass: (id: string, className: string) => void;
 export declare const removeElementClass: (id: string, className: string) => void;
-export declare const appendToBody: (rootElem: HTMLElement) => void;
+export declare const appendToBody: (rootElem: HTMLElement) => HTMLElement;
 export declare const addContainer: (id: string) => void;
 //# sourceMappingURL=dom.d.ts.map

package/dist/esm/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,SAEjD,CAAA;AAED,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA;AAErG,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,IAGlD,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,gBAAwC,CAAA;AAE1F,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}

package/dist/esm/utils/dom.js

@@ -5,22 +5,24 @@ export const addElement = (id) => {
 };
 export const removeElement = (id) => {
     const element = document.getElementById(id);
-    if (element)
-        element.remove();
+    element?.remove?.();
+};
+export const addBodyClass = (className) => document.body.classList.add(className);
+export const removeBodyClass = (className) => document.body.classList.remove(className);
+export const removeElements = (className) => {
+    const elements = document.getElementsByClassName(className);
+    for (let i = 0, len = elements.length; i < len; i++)
+        elements[i]?.remove?.();
 };
 export const addElementClass = (id, className) => {
     const element = document.getElementById(id);
-    if (element)
-        element.classList.add(className);
+    element?.classList?.add?.(className);
 };
 export const removeElementClass = (id, className) => {
     const element = document.getElementById(id);
-    if (element)
-        element.classList.remove(className);
-};
-export const appendToBody = (rootElem) => {
-    document.body.appendChild(rootElem);
+    element?.classList?.remove?.(className);
 };
+export const appendToBody = (rootElem) => document.body.appendChild(rootElem);
 export const addContainer = (id) => {
     const toastContainer = document.getElementById(id);
     if (!toastContainer)

package/dist/esm/utils/react.d.ts

@@ -1,4 +1,4 @@
-import React, { DependencyList, RefObject } from 'react';
+import React, { DependencyList, ReactNode, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -36,5 +36,7 @@ export declare function useIds(id: string, prefixes: string[]): string[];
  * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
  */
 export declare function useIsMounted(): () => boolean;
+/** A resolver to render a DOM node depending on React major version. */
+export declare function reactDomRender(wrapper: HTMLElement | null, content: ReactNode): void;
 export {};
 //# sourceMappingURL=react.d.ts.map

package/dist/esm/utils/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EACT,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,QAU7E"}

package/dist/esm/utils/react.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { isArray, isFunction } from './assertion';
 import { runIfFn } from './function';
 /**
@@ -110,3 +111,18 @@ export function useIsMounted() {
     }, []);
     return useCallback(() => isMounted.current, []);
 }
+/** A resolver to render a DOM node depending on React major version. */
+export function reactDomRender(wrapper, content) {
+    if (!wrapper)
+        return;
+    if (ReactDOM?.createRoot) {
+        // Rendering for React 18
+        const root = ReactDOM?.createRoot?.(wrapper);
+        root?.render?.(content);
+    }
+    else {
+        // Rendering for legacy React 17
+        ;
+        ReactDOM?.render?.(content, wrapper);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.1.3",
+  "version": "1.2.0-beta.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/button/button.tsx

@@ -143,7 +143,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         {...rest}
       >
         {hasState && (
-          <StateWrapper onClick={e => e.stopPropagation()} {...stateProps}>
+          <StateWrapper onClick={(e: { stopPropagation: () => void }) => e.stopPropagation()} {...stateProps}>
             <ButtonIcon m="auto" {...stateIconProps} />
           </StateWrapper>
         )}

package/src/button/theme.ts

@@ -36,31 +36,6 @@ function variantSolid(props: Dict) {
   return { container }
 }
 
-function variantSubtle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    hoverBg: `${c}.30`,
-    hoverBorderColor: `${c}.30`,
-    activeBg: `${c}.40`,
-    bg: `${c}.20`,
-    borderColor: `${c}.20`,
-    borderWidth: 1,
-    color: `${c}.90`
-  }
-
-  // Special cases
-  if (c === 'prussian') {
-    container.activeBg = 'blue.40'
-    container.hoverBg = 'blue.30'
-    container.hoverBorderColor = 'blue.30'
-    container.bg = 'blue.20'
-    container.borderColor = 'blue.20'
-  }
-
-  return { container }
-}
-
 function variantText(props: Dict) {
   const { colorScheme: c } = props
 
@@ -149,7 +124,6 @@ const sizes = {
 const variants = {
   outlined: variantOutlined,
   solid: variantSolid,
-  subtle: variantSubtle,
   text: variantText
 }
 

package/src/core/types.ts

@@ -1,5 +1,5 @@
-import { ReactChild, ReactChildren, ReactFragment, ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 export interface ChildrenProp {
-  children?: JSX.Element[] | JSX.Element | ReactChildren | ReactChild | ReactFragment | ReactNode | null
+  children?: ReactNode
 }

package/src/dialog/consts.ts

@@ -27,3 +27,9 @@ export const dialogStatusMapping: DialogStatusMapping = {
     }
   }
 }
+
+export const containerId = 'vui-dynamic-container'
+
+export const modalClass = 'vui-modal'
+
+export const noScrollClass = 'vui-no-scroll'

package/src/dialog/index.ts

@@ -11,3 +11,5 @@ export * from './dialogHeader'
 export * from './dialogIcon'
 export * from './dialogSubmitButton'
 export * from './dialogTitle'
+export * from './showConfirm'
+export * from './showPrompt'

package/src/dialog/showConfirm.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { VuiProvider } from '../core'
+import { Dialog } from '../dialog'
+import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
+import { containerId, modalClass, noScrollClass } from './consts'
+
+export const showConfirm = (title: string, message: string): Promise<boolean> => {
+  addContainer(containerId)
+
+  const hide = () => {
+    removeElement(containerId)
+    removeElements(modalClass)
+    removeBodyClass(noScrollClass)
+  }
+
+  return new Promise(resolve => {
+    const confirmDialog = (
+      <VuiProvider>
+        <Dialog
+          body={message}
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              hide()
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(true)
+              hide()
+            },
+            text: 'Confirm'
+          }}
+          title={title}
+        />
+      </VuiProvider>
+    )
+
+    reactDomRender(document.getElementById(containerId), confirmDialog)
+  })
+}

package/src/dialog/showPrompt.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { VuiProvider } from '../core'
+import { Dialog } from '../dialog'
+import { Input } from '../input'
+import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
+import { containerId, modalClass, noScrollClass } from './consts'
+
+export const showPrompt = (title: string, value = ''): Promise<string | false> => {
+  const state = { value }
+
+  const setValue = (value: string) => (state.value = value)
+
+  addContainer(containerId)
+
+  const hide = () => {
+    removeElement(containerId)
+    removeElements(modalClass)
+    removeBodyClass(noScrollClass)
+  }
+
+  return new Promise(resolve => {
+    const promptDialog = (
+      <VuiProvider>
+        <Dialog
+          body={
+            <Box px={3} py={2}>
+              <Input defaultValue={value} onChange={e => setValue(e.target.value)} />
+            </Box>
+          }
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              hide()
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(state.value)
+              hide()
+            },
+            text: 'Submit'
+          }}
+          title={title}
+        />
+      </VuiProvider>
+    )
+
+    reactDomRender(document.getElementById(containerId), promptDialog)
+  })
+}

package/src/header/header.types.ts

@@ -5,6 +5,7 @@ import { ButtonProps } from '../button'
 import { LinksDict } from '../core'
 import { IconProp } from '../icon'
 import { ListItemProps, ListProps } from '../list'
+import { LogoData } from '../logo/logo.types'
 import { MenuProps } from '../menu'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -44,15 +45,6 @@ export type HeaderLinkData = {
 
 export type HeaderLinkItemProps = ListItemProps & HeaderLinkData
 
-export type HeaderLogoData = {
-  /** Loads logo svg from the given source. */
-  src?: string
-  /** Renders logo wrapper as a link with given url as href. */
-  url?: string
-}
-
-export type HeaderLogoProps = BoxProps & HeaderLogoData
-
 export type HeaderMainLinksProps = ListProps & {
   /** Array of objects with data for each link. */
   links?: HeaderLinkData[]
@@ -99,7 +91,7 @@ export type LoggedInHeaderProps = HeaderProps & {
   /** Socket for account popover icon on the right side. */
   account?: HeaderAccountData | JSX.Element
   /** Socket for logo on the left side. */
-  logo?: HeaderLogoData | JSX.Element
+  logo?: LogoData | JSX.Element
   /** Socket for main links in the middle-right. */
   mainLinks?: HeaderLinkData[] | JSX.Element
   /** Socket for notifications icon on the right side. */
@@ -112,7 +104,7 @@ export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for create account prompt on the right side. */
   createAccount?: HeaderCreateAccountData | JSX.Element
   /** Socket for logo on the left side. */
-  logo?: HeaderLogoData | JSX.Element
+  logo?: LogoData | JSX.Element
   /** Socket for links in the middle-right section. */
   mainLinks?: HeaderLinkData[] | JSX.Element
   /** Socket for sign in button on the right side. */

package/src/header/headerLogo.tsx

@@ -1,37 +1,21 @@
 import React from 'react'
 
-import Box from '../box'
-import { cdnUrl, useStyleConfig, vui } from '../core'
-import Svg from '../svg'
-import { cs } from '../utils'
+import { vui } from '../core'
+import { Logo } from '../logo'
+import { LogoProps } from '../logo/logo.types'
 import { useHeaderContext } from './context'
-import { HeaderLogoProps } from './header.types'
 
-const defaultLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
-
-/** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
-export const HeaderLogo = vui<'div', HeaderLogoProps>((props, ref) => {
-  const { children, className, src = defaultLogo, url, ...rest } = props
+/** Logo displayed in the left corner of the Header. */
+export const HeaderLogo = vui<'div', LogoProps>((props, ref) => {
+  const { brand, children, className, src, url, ...rest } = props
   const { links } = useHeaderContext() ?? {}
-  const styles = useStyleConfig('Header', useHeaderContext()).logo
 
   const logoUrl = url ?? links.home
-  const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {}
 
   return (
-    <Box
-      centerV
-      className={cs('vui-headerLogo', className)}
-      flexShrink={0}
-      h={40}
-      mr={2}
-      ref={ref}
-      {...styles.container}
-      {...linkProps}
-      {...rest}
-    >
-      {children ?? <Svg aria-label="logo" h="100%" src={src} {...styles.svg} />}
-    </Box>
+    <Logo brand={brand} className={className} ref={ref} src={src} url={logoUrl} {...rest}>
+      {children}
+    </Logo>
   )
 })
 

package/src/icons/baseIcons/cub/cubBellship.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 33, [], '', 'M0.0322266 16.2178C0.0322266 7.44344 7.17902 0.282227 16 0.282227C24.821 0.282227 31.9678 7.44344 31.9678 16.2178C31.9678 25.0566 24.821 32.2178 16 32.2178C7.17902 32.2178 0.0322266 25.0566 0.0322266 16.2178ZM15.9994 30.9917C24.1116 30.9917 30.6793 24.3463 30.6793 16.2178C30.6793 8.0893 24.1116 1.50777 15.9994 1.50777C7.88668 1.50777 1.31958 8.08871 1.31958 16.2178C1.31958 24.3469 7.88727 30.9917 15.9994 30.9917ZM13.4247 8.66898C12.6516 8.66898 12.2653 8.41075 12.2653 7.76607C12.2653 6.86316 13.8747 6.60494 15.7423 6.60494C17.3522 6.60494 19.0901 6.86316 19.0901 7.76607H19.8633C19.8633 6.34671 17.8028 5.95907 15.678 5.95907C13.489 5.95907 11.4928 6.34612 11.4928 7.70107C11.4928 8.86279 12.2011 9.31366 13.4247 9.31366H18.0605C18.961 9.31366 19.2193 9.63629 19.2193 10.0883C19.2193 10.9912 18.3176 11.3783 15.8066 11.3783C12.845 11.3783 12.2653 11.0562 12.1368 10.346H11.4285C11.4928 11.8941 13.4247 12.088 15.8715 12.088C19.5413 12.088 19.9281 11.1201 19.9281 10.0877C19.9281 9.18425 19.349 8.66839 18.0611 8.66839H13.4247V8.66898ZM15.8066 13.0565C10.9137 13.0565 9.30377 11.1207 9.30377 8.99161C9.36805 7.37902 10.4632 4.92735 15.678 4.92735C21.0221 4.92735 23.5974 7.89489 23.5974 7.89489L24.6282 6.79816C24.6282 6.79816 21.666 3.50799 15.6138 3.50799C10.5274 3.50799 6.98618 6.08848 6.98618 8.99161C6.98618 13.3141 12.2659 14.3464 15.0989 14.5402V16.1528H12.3951V17.7016H15.0989V24.6046C15.0989 25.0566 14.5198 25.3792 14.133 25.3792C13.6176 25.3792 13.1027 25.121 12.4588 24.7984C11.8791 24.4758 11.3642 23.9599 11.3642 23.9599H12.3945C12.3945 23.9599 11.1708 23.3146 10.5268 22.7343C10.0114 22.3473 9.11094 21.5082 9.11094 21.5082C9.11094 21.5082 9.17521 22.6693 9.30377 23.5078C9.4972 24.2825 9.88346 25.5081 10.2697 26.0239V24.7984C10.2697 24.7984 10.978 26.0239 12.3302 26.863C13.6818 27.7021 13.7467 27.5083 14.3907 27.8309C15.0989 28.1536 15.2275 28.218 15.4852 28.6056C15.678 28.9926 15.7429 29.2509 15.7429 29.2509H16.2577C16.2577 29.2509 16.2577 28.9926 16.5154 28.6056C16.7089 28.2186 16.9017 28.1536 17.5463 27.8309C18.2533 27.5083 18.3182 27.7021 19.6056 26.863C20.9578 26.0245 21.666 24.7984 21.666 24.7984V26.0239C22.1166 25.5075 22.5034 24.2819 22.6969 23.5078C22.8248 22.6693 22.8891 21.5082 22.8891 21.5082C22.8891 21.5082 21.9886 22.3467 21.4726 22.7343C20.7007 23.3146 19.6056 23.9599 19.6056 23.9599H20.6364C20.6364 23.9599 20.1204 24.4763 19.5413 24.7984C18.8973 25.121 18.3825 25.3792 17.8677 25.3792C17.4171 25.3792 16.9017 25.0566 16.9017 24.6046V17.7016H19.6704V16.1528H16.9017V14.5402C19.5413 14.2176 21.6018 13.2497 23.1474 12.2818C24.0491 11.6365 24.5639 11.0562 24.5639 11.0562L23.6622 10.0239C23.6616 10.0239 20.7007 13.1209 15.8066 13.0565Z'],
+	name: 'cubBellship'
+} as IconDefinition