@veracity/vui 1.1.3 → 1.2.0-beta.1

package/src/icons/baseIcons/fal/falUserHeadset.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M22 22H21.7062C20.9462 22 20.2062 22.1812 19.4875 22.425V22.425C17.225 23.1925 14.7725 23.1925 12.51 22.425C11.7925 22.1812 11.0544 22.0012 10.2963 22.0012H10H10C5.58221 22.0012 2.00069 25.5822 2 30V30C2 31.1046 2.89543 32 4 32H28V32C29.1046 32 30 31.1046 30 30C30 25.5817 26.4183 22 22 22V22ZM4 30V30C4.00343 26.6877 6.68769 24.0035 9.99998 24H10.2962C10.7287 24 11.2287 24.1012 11.8687 24.3181H11.8687C14.5471 25.2265 17.4503 25.2265 20.1287 24.3181C20.7731 24.1 21.2744 23.9988 21.7062 23.9988H22V23.9988C25.3123 24.0022 27.9965 26.6865 28 29.9988L4 30ZM5 14V14C5.55229 14 6 13.5523 6 13V12C6 6.48625 10.4863 2 16 2C21.5138 2 26 6.48625 26 12V13V12.9998C25.997 15.76 23.7603 17.9968 21.0002 18H19.0002C19.0002 16.8954 18.1047 16 17.0002 16H15.0002V16C13.8956 16 13.0002 16.8954 13.0002 18C13.0002 19.1046 13.8956 20 15.0002 20H21.0002V20C24.8642 19.9952 27.9953 16.864 28.0002 13V12C28 5.3825 22.6175 0 16 0C9.38247 0 3.99997 5.3825 3.99997 12V13V13C3.99997 13.5523 4.44769 14 4.99997 14H5ZM16 6V6C19.2988 5.98528 21.985 8.64758 21.9997 11.9464C22.0064 13.4387 21.4542 14.8794 20.4519 15.985C20.4519 15.9906 20.46 15.9944 20.4631 16H21V16C22.0315 15.9977 22.9892 15.4645 23.5344 14.5887C23.8125 13.7725 24 12.9112 24 12C24 7.58173 20.4183 4 16 4C11.5817 4 8 7.58173 8 12C8 14.5262 9.19375 16.75 11.0219 18.2169C11.0181 18.1438 11 18.0744 11 18V18C11.0045 17.2955 11.1972 16.605 11.5581 16V16C9.33446 13.5628 9.50758 9.78436 11.9448 7.56068C13.0527 6.54986 14.5003 5.99274 16 5.99999V6Z'],
+	name: 'falUserHeadset'
+} as IconDefinition

package/src/icons/baseIcons/fas/fasChartNetwork.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M28.8 12.8C30.565 12.8 32 11.365 32 9.59995C32 7.83495 30.565 6.39995 28.8 6.39995C27.035 6.39995 25.6 7.83495 25.6 9.59995C25.6 11.365 27.035 12.8 28.8 12.8ZM3.2 15.2C1.435 15.2 0 16.635 0 18.4C0 20.165 1.435 21.6 3.2 21.6C4.965 21.6 6.4 20.165 6.4 18.4C6.4 16.635 4.965 15.2 3.2 15.2ZM25.68 13.34L24.72 12.06L22.32 13.86L23.28 15.14L25.68 13.34ZM28.8 22.4C28.08 22.4 27.42 22.65 26.885 23.05L22.085 20.17C22.275 19.61 22.4 19.02 22.4 18.395C22.4 15.3 19.895 12.795 16.8 12.795C16.38 12.795 15.97 12.85 15.58 12.94L13.54 8.56995C14.07 7.99995 14.4 7.23995 14.4 6.39995C14.4 4.63495 12.965 3.19995 11.2 3.19995C9.435 3.19995 8 4.63495 8 6.39995C8 8.16495 9.435 9.59995 11.2 9.59995C11.255 9.59995 11.305 9.58495 11.36 9.58495L13.41 13.975C12.075 14.995 11.2 16.59 11.2 18.4C11.2 21.495 13.705 24 16.8 24C18.405 24 19.84 23.315 20.86 22.235L25.65 25.11C25.625 25.27 25.6 25.4349 25.6 25.6C25.6 27.365 27.035 28.8 28.8 28.8C30.565 28.8 32 27.365 32 25.6C32 23.835 30.565 22.4 28.8 22.4ZM16.8 20.8C15.475 20.8 14.4 19.725 14.4 18.4C14.4 17.075 15.475 16 16.8 16C18.125 16 19.2 17.075 19.2 18.4C19.2 19.725 18.125 20.8 16.8 20.8ZM7.6 19.2H10V17.6H7.6V19.2Z'],
+	name: 'fasChartNetwork'
+} as IconDefinition

package/src/icons/baseIcons/fas/fasPuzzlePiece.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [33, 32, [], '', 'M29.3579 16.0362C27.0513 16.0362 26.0524 17.7913 24.7991 17.7913C21.4672 17.7913 24.5 8.00001 24.5 8.00001C24.5 8.00001 13.5951 12.4445 13.5951 7.81684C13.5951 5.82645 15.6111 5.24739 15.6111 3.03989C15.6111 1.06756 14.0492 0 12.1966 0C10.2714 0 8.50962 1.0495 8.50962 3.13034C8.50962 5.42834 10.2713 6.4235 10.2713 7.67201C10.2714 11.54 0.5 9.26434 0.5 9.26434V27.7775C0.5 27.7775 10.4242 30.0579 10.4242 26.1852C10.4242 24.9367 8.20195 23.957 8.20195 21.659C8.20195 19.5781 9.82695 18.5287 11.734 18.5287C13.6047 18.5287 15.1667 19.5962 15.1667 21.5685C15.1667 23.776 13.1507 24.3551 13.1507 26.3455C13.1507 29.7234 20.3548 27.7749 23.219 27.7749C23.219 27.7749 21.2899 21.1026 24.6539 21.1026C26.6517 21.1026 27.2329 23.1111 29.4487 23.1111C31.4285 23.1111 32.5 21.555 32.5 19.6913C32.5 17.7913 31.4466 16.0362 29.3579 16.0362Z'],
+	name: 'fasPuzzlePiece'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,3 +1,5 @@
+export { default as cubBellship } from './cub/cubBellship'
+export { default as cubDNV } from './cub/cubDNV'
 export { default as cubPowerBi } from './cub/cubPowerBi'
 export { default as cubVeracity } from './cub/cubVeracity'
 export { default as cuiCheckboxIndeterminate } from './cui/cuiCheckboxIndeterminate'
@@ -12,6 +14,8 @@ export { default as culCircleChartAlt } from './cul/culCircleChartAlt'
 export { default as culCovid } from './cul/culCovid'
 export { default as culDeepSearch } from './cul/culDeepSearch'
 export { default as culDotsMenu } from './cul/culDotsMenu'
+export { default as culFileDownloadAlt } from './cul/culFileDownloadAlt'
+export { default as culFilterAlt } from './cul/culFilterAlt'
 export { default as culGlobePlus } from './cul/culGlobePlus'
 export { default as culListDense } from './cul/culListDense'
 export { default as culMapMarkerStar } from './cul/culMapMarkerStar'
@@ -145,12 +149,14 @@ export { default as falCompressAlt } from './fal/falCompressAlt'
 export { default as falCopy } from './fal/falCopy'
 export { default as falCreditCard } from './fal/falCreditCard'
 export { default as falDatabase } from './fal/falDatabase'
+export { default as falDollarSign } from './fal/falDollarSign'
 export { default as falDotCircle } from './fal/falDotCircle'
 export { default as falDownload } from './fal/falDownload'
 export { default as falEdit } from './fal/falEdit'
 export { default as falEllipsisH } from './fal/falEllipsisH'
 export { default as falEllipsisV } from './fal/falEllipsisV'
 export { default as falEnvelope } from './fal/falEnvelope'
+export { default as falEuroSign } from './fal/falEuroSign'
 export { default as falExchange } from './fal/falExchange'
 export { default as falExclamationCircle } from './fal/falExclamationCircle'
 export { default as falExclamationTriangle } from './fal/falExclamationTriangle'
@@ -220,6 +226,7 @@ export { default as falPlug } from './fal/falPlug'
 export { default as falPlus } from './fal/falPlus'
 export { default as falPlusCircle } from './fal/falPlusCircle'
 export { default as falPlusSquare } from './fal/falPlusSquare'
+export { default as falPoundSign } from './fal/falPoundSign'
 export { default as falPrint } from './fal/falPrint'
 export { default as falPuzzlePiece } from './fal/falPuzzlePiece'
 export { default as falQuestionCircle } from './fal/falQuestionCircle'
@@ -237,6 +244,7 @@ export { default as falShieldAlt } from './fal/falShieldAlt'
 export { default as falShieldCheck } from './fal/falShieldCheck'
 export { default as falShip } from './fal/falShip'
 export { default as falShoppingBasket } from './fal/falShoppingBasket'
+export { default as falShoppingCart } from './fal/falShoppingCart'
 export { default as falSignIn } from './fal/falSignIn'
 export { default as falSignInAlt } from './fal/falSignInAlt'
 export { default as falSignOut } from './fal/falSignOut'
@@ -272,6 +280,7 @@ export { default as falUserCircle } from './fal/falUserCircle'
 export { default as falUserCog } from './fal/falUserCog'
 export { default as falUserEdit } from './fal/falUserEdit'
 export { default as falUserFriends } from './fal/falUserFriends'
+export { default as falUserHeadset } from './fal/falUserHeadset'
 export { default as falUserPlus } from './fal/falUserPlus'
 export { default as falUsers } from './fal/falUsers'
 export { default as falUsersClass } from './fal/falUsersClass'
@@ -286,11 +295,13 @@ export { default as fasCaretDown } from './fas/fasCaretDown'
 export { default as fasCaretLeft } from './fas/fasCaretLeft'
 export { default as fasCaretRight } from './fas/fasCaretRight'
 export { default as fasCaretUp } from './fas/fasCaretUp'
+export { default as fasChartNetwork } from './fas/fasChartNetwork'
 export { default as fasCheckCircle } from './fas/fasCheckCircle'
 export { default as fasDiamond } from './fas/fasDiamond'
 export { default as fasFolder } from './fas/fasFolder'
 export { default as fasMapMarkerAlt } from './fas/fasMapMarkerAlt'
 export { default as fasMapMarkerExclamation } from './fas/fasMapMarkerExclamation'
+export { default as fasPuzzlePiece } from './fas/fasPuzzlePiece'
 export { default as fasQuoteLeft } from './fas/fasQuoteLeft'
 export { default as fasQuoteRight } from './fas/fasQuoteRight'
 export { default as fasSolarPanel } from './fas/fasSolarPanel'

package/src/icons/baseIcons/types.ts

@@ -1,4 +1,6 @@
 export type BaseIcon =
+  | 'cubBellship'
+  | 'cubDNV'
   | 'cubPowerBi'
   | 'cubVeracity'
   | 'cuiCheckboxIndeterminate'
@@ -13,6 +15,8 @@ export type BaseIcon =
   | 'culCovid'
   | 'culDeepSearch'
   | 'culDotsMenu'
+  | 'culFileDownloadAlt'
+  | 'culFilterAlt'
   | 'culGlobePlus'
   | 'culListDense'
   | 'culMapMarkerStar'
@@ -146,12 +150,14 @@ export type BaseIcon =
   | 'falCopy'
   | 'falCreditCard'
   | 'falDatabase'
+  | 'falDollarSign'
   | 'falDotCircle'
   | 'falDownload'
   | 'falEdit'
   | 'falEllipsisH'
   | 'falEllipsisV'
   | 'falEnvelope'
+  | 'falEuroSign'
   | 'falExchange'
   | 'falExclamationCircle'
   | 'falExclamationTriangle'
@@ -221,6 +227,7 @@ export type BaseIcon =
   | 'falPlus'
   | 'falPlusCircle'
   | 'falPlusSquare'
+  | 'falPoundSign'
   | 'falPrint'
   | 'falPuzzlePiece'
   | 'falQuestionCircle'
@@ -238,6 +245,7 @@ export type BaseIcon =
   | 'falShieldCheck'
   | 'falShip'
   | 'falShoppingBasket'
+  | 'falShoppingCart'
   | 'falSignIn'
   | 'falSignInAlt'
   | 'falSignOut'
@@ -273,6 +281,7 @@ export type BaseIcon =
   | 'falUserCog'
   | 'falUserEdit'
   | 'falUserFriends'
+  | 'falUserHeadset'
   | 'falUserPlus'
   | 'falUsers'
   | 'falUsersClass'
@@ -287,11 +296,13 @@ export type BaseIcon =
   | 'fasCaretLeft'
   | 'fasCaretRight'
   | 'fasCaretUp'
+  | 'fasChartNetwork'
   | 'fasCheckCircle'
   | 'fasDiamond'
   | 'fasFolder'
   | 'fasMapMarkerAlt'
   | 'fasMapMarkerExclamation'
+  | 'fasPuzzlePiece'
   | 'fasQuoteLeft'
   | 'fasQuoteRight'
   | 'fasSolarPanel'

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './image'
 export * from './input'
 export * from './link'
 export * from './list'
+export * from './logo'
 export * from './menu'
 export * from './modal'
 export * from './notification'

package/src/input/input.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import T from '../t'
+import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import { inputStateMapping } from './consts'
 import { InputProvider } from './context'

package/src/link/link.types.ts

@@ -10,6 +10,8 @@ export type LinkProps = SystemProps &
     decoration?: TypographyProps['textDecoration']
     /** Alias for hoverTextDecoration prop. @deprecated */
     hoverDecoration?: TypographyProps['textDecoration']
+    /** Href attribute value for the a tag. */
+    href?: string
     /** Socket displaying an icon on the left. */
     iconLeft?: IconProp | JSX.Element
     /** Socket displaying an icon on the right. */

package/src/logo/Logo.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Box from '../box'
+import { cdnUrl, vui } from '../core'
+import Svg from '../svg'
+import { cs } from '../utils'
+import { LogoProps } from './logo.types'
+
+const veracityLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
+const dnvLogo = `${cdnUrl}/common/icons/logos/dnv-logo.svg`
+
+/** Brand logo. By default Veracity logo is used. */
+export const Logo = vui<'div', LogoProps>((props, ref) => {
+  const { brand, children, className, src, url, ...rest } = props
+
+  let svgSrc = src
+
+  if (!svgSrc) svgSrc = brand === 'dnv' ? dnvLogo : veracityLogo
+
+  const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}
+
+  return (
+    <Box centerV className={cs('vui-logo', className)} flexShrink={0} h={40} mr={2} ref={ref} {...linkProps} {...rest}>
+      {children ?? <Svg aria-label="logo" h="100%" src={svgSrc} />}
+    </Box>
+  )
+})
+
+export default Logo

package/src/logo/index.ts

@@ -0,0 +1 @@
+export * from './Logo'

package/src/logo/logo.types.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '../box/box.types'
+
+export type LogoData = {
+  /** Brand name. */
+  brand?: 'veracity' | 'dnv'
+  /** Loads logo svg from the given source. */
+  src?: string
+  /** Renders logo wrapper as a link with given url as href. */
+  url?: string
+}
+
+export type LogoProps = BoxProps & LogoData

package/src/modal/focusLock.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react'
 import ReactFocusLock from 'react-focus-lock'
 
-import { ChildrenProp } from '../core/types'
+import { ChildrenProp } from '../core'
 import { FocusLockProps } from './focusLock.types'
 
 /**

package/src/modal/modal.types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react'
+
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { MouseEvent } from '../utils'
@@ -14,7 +16,7 @@ export type ModalProps = SystemProps &
     /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
     allowPinchZoom?: boolean
     /** A single child content element. */
-    children: React.ReactElement
+    children: ReactElement
     /** Props passed to internal ModalContent component. */
     contentProps?: ModalContentProps
     /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */

package/src/modal/modalManager.ts

@@ -1,5 +1,7 @@
 import { Ref, useEffect } from 'react'
 
+import { addBodyClass, removeBodyClass } from '../utils/dom'
+
 /** State management for nested modals. */
 class ModalManager {
   modals: any[] = []
@@ -25,12 +27,12 @@ export function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLo
   useEffect(() => {
     if (isOpen) {
       manager.add(ref)
-      if (!disableScrollLock) document.body.classList.add('no-scroll')
+      if (!disableScrollLock) addBodyClass('vui-no-scroll')
     }
 
     return () => {
       manager.remove(ref)
-      if (!disableScrollLock) document.body.classList.remove('no-scroll')
+      if (!disableScrollLock) removeBodyClass('vui-no-scroll')
     }
   }, [isOpen, ref])
 }

package/src/modal/modalStyle.ts

@@ -2,7 +2,7 @@ import { createGlobalStyle } from '../core'
 
 export default createGlobalStyle`
 
-body.no-scroll {
+body.vui-no-scroll {
 	overflow: hidden !important;
 	overscroll-behavior: contain;
 }

package/src/popover/popoverContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../box'
-import { useStyleConfig, vui } from '../core'
+import { useStyleConfig, v, vui } from '../core'
 import { cs, mergeRefs } from '../utils'
 import { usePopoverContext } from './context'
 import { PopoverContentProps } from './popover.types'
@@ -17,7 +17,7 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
 
   return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
-    <div data-popover-workaround>
+    <v.div ring={0}>
       <Box
         bg="white"
         borderRadius="md"
@@ -25,12 +25,13 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
         className={cs('vui-popoverContent', className)}
         overflowY="auto"
         ref={mergeRefs(setPopper, ref)}
+        ring={0}
         {...styles.content}
         {...rest}
       >
         {shouldRenderChildren ? children : null}
       </Box>
-    </div>
+    </v.div>
   )
 })
 

package/src/portal/portal.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 
-import { ChildrenProp } from '../core/types'
+import { ChildrenProp } from '../core'
 import { PortalProps } from './portal.types'
 
 /** Provided children are portaled to document.body or custom container. */

package/src/table/tbody.tsx

@@ -35,9 +35,7 @@ export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
         rows?.map((row, index) => (
           <Tr key={index}>
             {columns?.map(column => (
-              <Td key={column.field} {...column}>
-                {row[column.field]}
-              </Td>
+              <Td key={column.field}>{row[column.field]}</Td>
             ))}
           </Tr>
         ))}

package/src/tabs/tabs.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { Children, ReactElement, useEffect } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
@@ -16,7 +16,7 @@ export const TabsBase = styled.divBox<TabsProps>`
  * Implements Tabs navigation to switch between views.
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
-  const { activeTabId, children, className, size, onTabClick, ...rest } = props
+  const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
@@ -26,16 +26,16 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
   useEffect(() => {
     const t: TabProps[] = []
     if (children) {
-      ;(children as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
-        if (child?.props?.title) {
+      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
+        if (child?.props?.title)
           t.push({
             id: index,
             title: child.props.title,
+            icon: child.props.icon,
             children: child.props.children,
             disabled: child.props.disabled,
             onClick: child.props.onClick
           })
-        }
       })
     }
     setTabs(t)
@@ -60,6 +60,7 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           activeNavItem={activeTabIndex}
           animationDirection={animationDirection}
           onNavItemClick={onNavItemClick}
+          showBorder={showBorder}
           size={size}
           tabs={tabs}
         />

package/src/tabs/tabs.types.ts

@@ -1,31 +1,37 @@
 import { ReactNode } from 'react'
 
+import { ChildrenProp } from '../core'
+import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
 
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
+export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined
 
 export type TabsProps = SystemProps &
-  ThemingProps<'Tabs'> & {
+  ThemingProps<'Tabs'> &
+  ChildrenProp & {
     activeTabId?: number
-    children?: ReactNode | ReactNode[]
+    showBorder?: boolean
     onTabClick?: (id: number) => void
   }
 
-export type TabProps = SystemProps & {
-  id?: number
-  title: ReactNode
-  children?: ReactNode
-  disabled?: boolean
-  onClick?: () => void
-}
+export type TabProps = SystemProps &
+  ChildrenProp & {
+    icon?: IconProp
+    id?: number
+    title: ReactNode
+    disabled?: boolean
+    onClick?: () => void
+  }
 
 export type TabNavBarProps = {
   tabs: TabProps[]
   onNavItemClick: (id: number) => void
   activeNavItem?: number
   animationDirection?: AnimationDirection
+  showBorder?: boolean
   size?: TabsSize
 }

package/src/tabs/tabsNavBar.tsx

@@ -2,16 +2,25 @@ 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'
-import { TabNavBarProps } from './tabs.types'
+import { cs, Dict } from '../utils'
+import { NavBarIconSize, TabNavBarProps } from './tabs.types'
+
+const iconSizeMapper: Dict = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg'
+}
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
-  const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props
+  const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
+  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'
 
   return (
     <List
-      borderBottom="1px solid grey.40"
+      borderBottom={showBorder ? '1px solid grey.40' : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
@@ -25,10 +34,13 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           disabled={tab.disabled}
           display="inline-flex"
           key={tab.id}
-          onClick={() => tab?.id !== undefined && onNavItemClick(tab.id)}
+          onClick={() => onNavItemClick?.(tab.id || 0)}
           position="relative"
         >
-          {tab.title}
+          <Box alignItems="center">
+            {!!tab.icon && <Icon mr={1} name={tab.icon} size={iconSize} />}
+            {tab.title}
+          </Box>
           {!tab.disabled && tab.id === activeNavItem && (
             <Box
               animation={animationDirection}

package/src/toast/Toast.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode } from 'react'
-import ReactDOM from 'react-dom'
 
 import { Box } from '../box'
 import { VuiProvider } from '../core'
 import { Notification, NotificationStatus } from '../notification'
 import { zIndices } from '../theme'
-import { addContainer, uid } from '../utils'
+import { addContainer, reactDomRender, uid } from '../utils'
 import { ToastOptions, ToastSetup } from './toast.types'
 
 const wrapperId = 'toastsWrapper'
@@ -18,9 +17,8 @@ const setup: ToastSetup = {
   componentList: []
 }
 
-const render = (): void =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(
+const render = (): void => {
+  const content = (
     <VuiProvider>
       <Box
         bottom="1rem"
@@ -36,10 +34,12 @@ const render = (): void =>
           <div key={item.id}>{item.component}</div>
         ))}
       </Box>
-    </VuiProvider>,
-    document.getElementById(wrapperId)
+    </VuiProvider>
   )
 
+  reactDomRender(wrapperId, content)
+}
+
 const hide = (id: string): void => {
   setup.componentList = setup.componentList.filter(i => i.id !== id)
   render()

package/src/tooltip/tooltip.setup.ts

@@ -1,11 +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'
 
@@ -28,13 +21,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/src/tooltip/tooltip.tsx

@@ -1,8 +1,10 @@
 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'
 import { TooltipProps } from './tooltip.types'
 
 /**
@@ -12,24 +14,23 @@ import { TooltipProps } from './tooltip.types'
  *
  * */
 export const Tooltip = (props: TooltipProps) => {
-  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 (
     <Popover placement={placement} trigger="mouseenter">
       <Popover.Trigger as={Box} display="inline-block">
         <Box display="inline-block">{children}</Box>
       </Popover.Trigger>
-      <Popover.Content
-        animation={isAnimated ? animation[placement] : undefined}
-        bg={color}
-        color="white"
-        m={1}
-        maxW={maxWidth}
-        p={1}
-        pl={2}
-        pr={2}
-      >
-        {!isAnimated && (
+      <Popover.Content bg={color} color="white" fontSize={fontSize} m={1} maxW={maxWidth} p={1} pl={2} pr={2}>
+        {isDesktop && (
           <Box
             bg={color}
             bottom={pointerPlacement[placement].bottom}
@@ -43,6 +44,14 @@ export const Tooltip = (props: TooltipProps) => {
           />
         )}
         {text}
+        {!!linkText && (
+          <>
+            &nbsp;
+            <Link variant="light" {...linkProps}>
+              {linkText}
+            </Link>
+          </>
+        )}
       </Popover.Content>
     </Popover>
   )

package/src/tooltip/tooltip.types.ts

@@ -1,13 +1,17 @@
-import { ReactNode } from 'react'
+import { ChildrenProp } from '../core'
+import { LinkProps } from '../link'
 
-export type TooltipProps = {
+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
 }