@veracity/vui 2.6.2 → 2.7.0

package/src/header/header.types.ts

@@ -61,7 +61,7 @@ export type HeaderNotificationsProps = ButtonProps & HeaderNotificationsData
 
 export type HeaderProps = SystemProps &
   ThemingProps<'Header'> & {
-    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. @deprecated; header should always be 72 px.*/
     headerHeight?: number
   }
 
@@ -100,6 +100,23 @@ export type LoggedInHeaderProps = HeaderProps & {
   services?: HeaderServicesData | JSX.Element
 }
 
+export type LoggedInAppHeaderProps = HeaderProps & {
+  /** Socket for account popover icon on the right side. */
+  account?: HeaderAccountData | JSX.Element
+  /** Socket for the app name on the left side. */
+  applicationName: string
+  /** Socket for logo on the left side. */
+  logo?: LogoData | JSX.Element
+  /** Socket for main links in the middle-right. */
+  mainLinks?: HeaderLinkData[] | JSX.Element
+  /** Socket for notifications icon on the right side. */
+  notifications?: HeaderNotificationsData | JSX.Element
+  /** Socket for services menu icon on the right side. */
+  services?: HeaderServicesData | JSX.Element
+  /** Socket for showing the main Links up front. by default they are folded into the hamburger menu. */
+  showMainLinks?: boolean
+}
+
 export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for create account prompt on the right side. */
   createAccount?: HeaderCreateAccountData | JSX.Element

package/src/header/headerAccount.tsx

@@ -27,16 +27,19 @@ export function HeaderAccount(props: HeaderAccountProps) {
 
   const name = isObject<HeaderAccountUserInfoData>(userInfo) ? userInfo.displayName : ''
 
+  const variant = styles?.trigger?.variant ?? 'solidDarkBlue'
+
   return (
     <Popover isLazy={false} offset={[0, 8]} options={popoverOptions} placement="bottom-end" {...rest}>
       <Popover.Trigger
         as={Avatar}
         className="vui-headerAccountTrigger"
         isInteractive
-        ml={2}
+        ml={1}
         name={name}
+        size="lg"
         title="Account"
-        variant="solidDarkBlue"
+        variant={variant}
         {...styles.trigger}
         {...triggerProps}
       />

package/src/header/headerAccount.types.ts

@@ -34,6 +34,8 @@ export type HeaderAccountUserInfoData = {
   companyName?: string
   /** Displays user name in account user info section. */
   displayName?: string
+  isApplication?: boolean
+  role?: string
 }
 
 export type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData

package/src/header/headerAccountUserInfo.tsx

@@ -10,7 +10,7 @@ import { HeaderAccountUserInfoProps } from './headerAccount.types'
 
 /** Displays user information, like username and company name, within HeaderAccount part. */
 export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((props, ref) => {
-  const { children, className, companyName, displayName, ...rest } = props
+  const { children, className, companyName, displayName, isApplication, role, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext())
 
   return (
@@ -22,17 +22,27 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
       spaceX={2}
       {...styles.accountUserInfo}
       {...rest}
+      lineHeight={isApplication ? '18px' : 'inherit'}
+      pr={isApplication ? 0 : 'inherit'}
+      textAlign={isApplication ? 'right' : 'inherit'}
     >
       {children ?? (
         <>
-          <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="lg" variant="solidDarkBlue" />
+          {!isApplication && (
+            <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="xl" variant="solidDarkBlue" />
+          )}
           <Box column>
             {displayName && (
-              <T mb={0.5} weight="demi">
+              <T fontSize={isApplication ? '12px' : 'inherit'} mb={isApplication ? 0 : 0.5} weight="demi">
                 {displayName}
               </T>
             )}
-            {companyName && <T>{companyName}</T>}
+            {companyName && <T fontSize={isApplication ? '12px' : 'inherit'}>{companyName}</T>}
+            {role && (
+              <T color="sandstone.55" fontSize={isApplication ? '12px' : 'inherit'}>
+                {role}
+              </T>
+            )}
           </Box>
         </>
       )}

package/src/header/headerApplicationName.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { useUp, vui } from '../core'
+import { Heading } from '../heading'
+import { HeadingProps } from '../heading/heading.types'
+import { cs } from '../utils'
+
+/** Logo displayed in the left corner of the Header. */
+export const HeaderApplicationName = vui<'div', HeadingProps>((props, ref) => {
+  const { title, ...rest } = props
+
+  const isTablet = useUp('md')
+
+  const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile'
+
+  const mobileProps = isTablet
+    ? {
+        fontSize: 18,
+        mt: 0
+      }
+    : {
+        fontSize: 16,
+        mt: '112px',
+        position: 'absolute',
+        mx: '-16px',
+        w: '100%',
+        bg: 'skyBlue.97',
+        py: '8px',
+        px: '16px',
+        lineHeight: '24px',
+        borderBottom: '1px solid darkBlue.main',
+        borderTop: '1px solid darkBlue.main'
+      }
+
+  return (
+    <Heading
+      className={cs('vui-headerApplicationName', additionalClassName)}
+      size="title"
+      {...rest}
+      {...(mobileProps as any)}
+    >
+      {title}
+    </Heading>
+  )
+})
+
+export default HeaderApplicationName

package/src/header/headerCreateAccount.tsx

@@ -14,7 +14,9 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
   const { isMobile, links } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext()).createAccount
 
-  const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 }
+  const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 }
+
+  const linkVariant = isMobile ? 'dark' : styles?.link?.variant ?? 'dark'
 
   return (
     <Box
@@ -28,11 +30,11 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
     >
       {children ?? (
         <>
-          <T size="sm" {...styles.text}>
+          <T size="sm" {...styles.text} color={isMobile ? 'darkBlue.main' : styles?.text?.color ?? 'darkBlue.main'}>
             New to Veracity?
           </T>
 
-          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" {...styles.link}>
+          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" variant={linkVariant}>
             Create account
           </Link>
         </>

package/src/header/headerDivider.tsx

@@ -5,7 +5,7 @@ import Divider, { DividerProps } from '../divider'
 import { cs } from '../utils'
 import { useHeaderContext } from './context'
 
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext())

package/src/header/headerLinkItem.tsx

@@ -19,10 +19,28 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
 
   const linkActiveProps = isActive
     ? isMobile
-      ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+      ? {
+          bg: 'skyBlue.95',
+          borderColor: 'seaBlue.main',
+          borderLeftWidth: 6,
+          hoverBg: 'skyBlue.90',
+          pl: '10px',
+          activeBorderBottomWidth: 0,
+          pt: '0px'
+        }
       : { borderBottomWidth: 4, pt: '4px' }
     : {}
 
+  const linkMobileProps = isMobile
+    ? {
+        color: 'darkBlue.main',
+        hoverBg: 'skyBlue.90',
+        activeBorderColor: 'seaBlue.main',
+        activeBorderLeftWidth: 6,
+        pt: '0'
+      }
+    : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' }
+
   const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' }
 
   return (
@@ -30,14 +48,14 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
       className={cs('vui-headerLinkItem', className)}
       iconLeft={icon}
       linkProps={{
-        ...linkActiveProps,
-        borderColor: 'prussian.80',
         href: url,
         ringInset: true,
         transition: 'all 0.1s, border-width 0s, padding 0s',
-        w: { xs: '100%', md: 'max-content' },
+        w: { xs: '100%', lg: 'max-content' },
         ...styles.link,
-        ...linkProps
+        ...linkProps,
+        ...linkMobileProps,
+        ...linkActiveProps
       }}
       onClick={onClick}
       ref={ref}

package/src/header/headerLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { vui } from '../core'
+import { useStyleConfig, vui } from '../core'
 import { Logo } from '../logo'
 import { LogoProps } from '../logo/logo.types'
 import { useHeaderContext } from './context'
@@ -10,10 +10,12 @@ 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
 
   return (
-    <Logo brand={brand} className={className} ref={ref} src={src} url={logoUrl} {...rest}>
+    <Logo brand={brand} className={className} ref={ref} src={src} styles={styles} url={logoUrl} {...rest}>
       {children}
     </Logo>
   )

package/src/header/headerMainLinks.tsx

@@ -13,7 +13,13 @@ export const HeaderMainLinks = vui<'ul', HeaderMainLinksProps>((props, ref) => {
   const { isMobile } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext())
 
-  const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' }
+  const screenStyles = isMobile
+    ? {
+        borderBottom: '1px solid sandstone.main',
+        flexDirection: 'column',
+        mb: 1
+      }
+    : { h: '100%' }
 
   return (
     <List

package/src/header/headerMobileContent.tsx

@@ -5,7 +5,7 @@ import { useStyleConfig, vui } from '../core'
 import { cs, mergeRefs } from '../utils'
 import { useHeaderContext } from './context'
 
-/** Displays some of the Header content when on a mobile screen. */
+/** Displays part of the Header content when on a mobile screen. */
 export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
   const { className, ...rest } = props
   const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}

package/src/header/headerMobileToggle.tsx

@@ -17,8 +17,8 @@ export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
   return (
     <IconButton
       className={cs('vui-headerMobileToggle', className)}
-      icon={<Icon name={iconName} scale={2} />}
-      ml={2}
+      icon={<Icon name={iconName} />}
+      ml={1}
       onClick={() => setIsMobileOpen(s => !s)}
       p="3px"
       ref={mergeRefs(ref, mobileToggleRef)}

package/src/header/headerNotifications.tsx

@@ -6,21 +6,23 @@ import { cs } from '../utils'
 import { useHeaderContext } from './context'
 import { HeaderNotificationsProps } from './header.types'
 
+/*@formatter:off*/
 const Badge = styled.spanBox`
   align-items: center;
-  background-color: hsl(357, 83%, 60%);
+  background-color: energyRed.main;
   border-radius: round;
   color: white;
   display: flex;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: medium;
-  height: 16px;
+  height: 20px;
   justify-content: center;
   position: absolute;
   right: 1px;
   top: 1px;
-  width: 16px;
+  width: 20px;
 `
+/*@formatter:on*/
 
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, ref) => {
@@ -38,6 +40,7 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
       position="relative"
       px="7px"
       ref={ref}
+      size="lg"
       title="Notifications"
       variant="tertiaryDark"
       {...styles.container}

package/src/header/headerServices.tsx

@@ -33,7 +33,13 @@ export function HeaderServices(props: HeaderServicesProps) {
     <>
       <RenderOnScreen minWidth="lg">
         <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
-          <Menu.Button icon="falTh" ml={1} title="My services" {...styles.button} {...buttonProps} />
+          <Menu.Button
+            className="vui-services-trigger"
+            icon="falTh"
+            title="My services"
+            {...styles.button}
+            {...buttonProps}
+          />
 
           <Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
             <ListContent links={links} />
@@ -42,7 +48,7 @@ export function HeaderServices(props: HeaderServicesProps) {
       </RenderOnScreen>
 
       <RenderOnScreen maxWidth="lg">
-        <List borderBottom="1px solid grey.40" heading="My Services" {...styles.list}>
+        <List borderBottom="1px solid sandstone.main" heading="My Services" {...styles.list}>
           <ListContent links={links} />
         </List>
       </RenderOnScreen>

package/src/header/headerSignIn.tsx

@@ -12,12 +12,15 @@ export const HeaderSignIn = vui<'button', HeaderSignInProps>((props, ref) => {
   const { links } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext())
 
+  const buttonVariant = styles?.signIn?.button?.variant ?? 'primaryDark'
+
   return (
     <Button
       as="a"
       className={cs('vui-headerSignIn', className)}
       href={url ?? links.signIn}
       ref={ref}
+      variant={buttonVariant}
       {...styles.signIn}
       {...rest}
     >

package/src/header/index.tsx

@@ -5,6 +5,7 @@ export * from './header.types'
 export * from './headerAccount'
 export * from './headerAccount.types'
 export * from './headerAccountUserInfo'
+export * from './headerApplicationName'
 export * from './headerContent'
 export * from './headerCreateAccount'
 export * from './headerDivider'

package/src/header/loggedInHeader.tsx

@@ -6,7 +6,7 @@ import { cs, isJsx } from '../utils'
 import Header from './header'
 import { LoggedInHeaderProps } from './header.types'
 
-/** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
+/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
   const { account, children, className, logo, mainLinks, services, notifications, ...rest } = props
 

package/src/header/theme.ts

@@ -1,6 +1,8 @@
 const baseStyle = {}
 
-const defaultProps = {}
+const defaultProps = {
+  variant: 'default'
+}
 
 const parts = [
   'container',
@@ -23,26 +25,70 @@ const parts = [
 const sizes = {}
 
 const variants = {
-  dark: {
+  default: {
     container: {
-      bg: 'prussian.80',
-      borderBottom: 0
+      borderColor: 'darkBlue.main'
     },
-    account: {
-      trigger: {
-        bg: 'white',
-        color: 'prussian.80',
-        hoverBg: 'blue.20',
-        activeBg: 'blue.30'
+    createAccount: {
+      link: {
+        variant: 'dark'
+      }
+    },
+    linkItem: {
+      container: {
+        hoverBg: 'skyBlue.90',
+        activeBg: 'transparent',
+        activeBorderColor: 'darkBlue.main'
+      },
+      link: {
+        color: 'darkBlue.main',
+        borderColor: 'darkBlue.main'
+      }
+    },
+    logo: {
+      svg: {
+        pathFill: '#0F204B' // darkBlue.main
+      }
+    },
+    divider: {
+      color: 'darkBlue.main'
+    },
+    mobileToggle: {
+      color: 'darkBlue.main'
+    },
+    notifications: {
+      container: {
+        color: 'darkBlue.main'
       }
     },
+    services: {
+      button: {
+        color: 'darkBlue.main'
+      },
+      list: {
+        variant: 'blue'
+      }
+    },
+    signIn: {
+      background: 'darkBlue.main'
+    }
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      borderBottom: 0
+    },
     createAccount: {
       link: {
-        color: { xs: 'blue.80', md: 'blue.60' },
-        hoverColor: { xs: 'blue.60', md: 'blue.40' }
+        variant: 'light'
       },
       text: {
-        color: { md: 'white' }
+        color: 'white'
+      }
+    },
+    account: {
+      trigger: {
+        variant: 'primaryLight'
       }
     },
     divider: {
@@ -50,16 +96,18 @@ const variants = {
     },
     linkItem: {
       container: {
-        hoverBg: { xs: 'blue.20', md: 'prussian.60' },
-        activeBg: { xs: 'blue.30', md: 'prussian.50' }
+        hoverBg: 'seaBlue.25',
+        activeBg: 'transparent',
+        activeBorderColor: 'digiGreen.main'
       },
       link: {
-        borderColor: 'pink.80'
+        color: 'white',
+        borderColor: 'digiGreen.main'
       }
     },
     logo: {
       svg: {
-        pathFill: 'white'
+        pathFill: '#FFFFFF'
       }
     },
     mainLinks: {
@@ -69,19 +117,30 @@ const variants = {
       top: '100%'
     },
     mobileToggle: {
-      variant: 'solid'
+      color: 'white'
     },
     notifications: {
       container: {
-        variant: 'solid'
+        variant: 'solid',
+        color: 'white',
+        borderColor: 'transparent'
+      },
+      icon: {
+        color: 'white'
       }
     },
     services: {
       button: {
-        variant: 'solid'
+        color: 'white'
+      },
+      list: {
+        variant: 'blue'
       }
     },
     signIn: {
+      button: {
+        variant: 'primaryLight'
+      },
       colorScheme: 'pink'
     }
   }

package/src/icons/baseIcons/conc/conAPI.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M57.383 26.6631L61.433 28.1531L61.443 28.1431C61.983 28.3431 62.343 28.9331 62.303 29.5731L61.883 37.1631C61.853 37.8031 61.443 38.3531 60.893 38.4931L56.903 39.5331C56.723 40.1231 56.533 40.6931 56.323 41.2531C55.683 42.9331 54.863 44.5631 53.873 46.1031L55.683 50.0231C55.933 50.5531 55.763 51.2131 55.283 51.6431L49.623 56.7131C49.153 57.1331 48.473 57.2331 47.983 56.9431L44.423 54.8631C42.293 56.0131 40.013 56.8531 37.633 57.3731L36.143 61.4231C35.953 61.9431 35.413 62.2831 34.803 62.2831H34.713L27.123 61.8731C26.483 61.8431 25.933 61.4331 25.793 60.8831L24.753 56.8931C24.163 56.7131 23.593 56.5231 23.033 56.3131C21.353 55.6831 19.723 54.8631 18.183 53.8731L14.263 55.6831C13.733 55.9231 13.073 55.7631 12.643 55.2831L7.57303 49.6231C7.14303 49.1431 7.05303 48.4631 7.34303 47.9731L9.42303 44.4231C8.27303 42.2831 7.43303 40.0031 6.91303 37.6331L2.86303 36.1431C2.32303 35.9431 1.96303 35.3531 2.00303 34.7131L2.43303 27.1231C2.46303 26.4831 2.87303 25.9331 3.42303 25.7931L7.41303 24.7531C7.59303 24.1531 7.78303 23.5931 7.99303 23.0331C8.62303 21.3531 9.44303 19.7231 10.433 18.1831L8.62303 14.2631C8.38303 13.7431 8.54303 13.0831 9.02303 12.6531L14.683 7.5731C15.153 7.1431 15.833 7.0531 16.323 7.3431L19.873 9.4231C22.013 8.2731 24.283 7.4331 26.663 6.9131L28.153 2.8631C28.353 2.3131 28.923 1.9631 29.583 2.0031L37.183 2.4131C37.823 2.4531 38.373 2.8631 38.513 3.4131L39.553 7.4031C40.153 7.5831 40.723 7.7731 41.273 7.9831C42.953 8.6131 44.583 9.4331 46.123 10.4231L50.043 8.6131C50.553 8.3731 51.223 8.5331 51.653 9.0131L56.723 14.6731C57.143 15.1431 57.243 15.8231 56.953 16.3131L54.873 19.8731C56.023 22.0131 56.863 24.2931 57.383 26.6631ZM55.283 37.8931L59.903 36.6831L59.893 36.6731L60.263 29.8431L55.633 28.1431L55.523 27.5931C55.023 25.0431 54.113 22.6031 52.833 20.3431L52.543 19.8431L54.963 15.7231L50.403 10.6331L45.923 12.7031L45.453 12.3931C43.903 11.3531 42.253 10.5031 40.533 9.8531C39.863 9.6031 39.173 9.3831 38.423 9.1731L37.863 9.0231L36.653 4.4031L29.823 4.0331L28.123 8.6631L27.573 8.7731C25.023 9.2731 22.583 10.1831 20.323 11.4631L19.823 11.7531L15.703 9.3331L10.613 13.9031L12.683 18.3831L12.363 18.8531C11.323 20.4031 10.473 22.0531 9.82303 23.7731C9.57303 24.4431 9.35303 25.1331 9.14303 25.8831L8.99303 26.4431L4.37303 27.6531L4.00303 34.4831L8.63303 36.1831L8.74303 36.7331C9.24303 39.2831 10.153 41.7231 11.433 43.9831L11.723 44.4831L9.30303 48.6031L13.873 53.6931L18.353 51.6231L18.823 51.9331C20.373 52.9731 22.023 53.8231 23.743 54.4731C24.413 54.7231 25.103 54.9431 25.853 55.1531L26.413 55.3031L27.623 59.9231L34.453 60.2931L36.153 55.6631L36.703 55.5531C39.253 55.0531 41.693 54.1431 43.953 52.8631L44.453 52.5731L48.573 54.9931L53.663 50.4331L51.593 45.9531L51.913 45.4831C52.953 43.9331 53.803 42.2831 54.453 40.5631C54.703 39.8931 54.923 39.2031 55.133 38.4531L55.283 37.8931ZM11.9229 25.4031C15.6429 14.2431 27.7429 8.1931 38.9029 11.9131V11.9231C44.3029 13.7231 48.6929 17.5331 51.2329 22.6231C53.7729 27.7131 54.1829 33.5031 52.3829 38.9031C50.5829 44.3031 46.7829 48.6831 41.6829 51.2331C38.6829 52.7331 35.4329 53.4931 32.1729 53.4931C29.9029 53.4931 27.6229 53.1231 25.4029 52.3831C20.0029 50.5831 15.6229 46.7831 13.0729 41.6831C10.5329 36.5931 10.1229 30.8031 11.9229 25.4031ZM40.7929 49.4431C45.4129 47.1331 48.8629 43.1631 50.4929 38.2631H50.4429C52.0729 33.3631 51.7029 28.1231 49.3929 23.5031C47.3429 19.4031 43.9829 16.2331 39.8229 14.4331C40.4529 16.0331 40.6829 18.2931 39.2729 21.1031C40.6029 22.0831 41.5829 23.4531 42.0829 25.0731C42.6929 27.0631 42.4929 29.1631 41.5229 30.9931L40.3229 33.2631L37.5929 31.8131C37.5829 31.8431 37.5629 31.9131 37.5629 31.9131L36.4629 33.9731C36.2829 34.3131 35.9429 34.5031 35.5829 34.5031C35.4229 34.5031 35.2629 34.4631 35.1129 34.3831C34.6329 34.1231 34.4429 33.5231 34.7029 33.0331L35.8029 30.9731C35.8229 30.9431 35.8729 30.8931 35.8729 30.8931L31.0629 28.3331C31.0529 28.3631 31.0329 28.4331 31.0329 28.4331L29.9329 30.4931C29.7529 30.8331 29.4129 31.0231 29.0529 31.0231C28.8929 31.0231 28.7329 30.9831 28.5829 30.9031C28.1029 30.6431 27.9129 30.0431 28.1729 29.5531L29.2729 27.4931C29.2929 27.4631 29.3429 27.4131 29.3429 27.4131L26.6129 25.9631L27.8229 23.6931C29.6929 20.1531 33.9329 18.6631 37.5629 20.1131C39.3929 16.3631 37.5429 14.0531 36.8929 13.4031C35.3229 13.0031 33.7329 12.8031 32.1629 12.8031C24.0729 12.8031 16.5129 17.9331 13.8129 26.0231C12.1829 30.9231 12.5529 36.1631 14.8629 40.7831C16.8629 44.7831 20.1129 47.9031 24.1329 49.7231C23.1529 46.7231 24.0329 44.4731 24.9229 43.1431C23.6229 42.1631 22.6629 40.8031 22.1729 39.2131C21.5629 37.2231 21.7629 35.1231 22.7329 33.2931L23.9329 31.0231L37.6729 38.3231L36.4629 40.5931C35.0729 43.2231 32.3729 44.7231 29.5829 44.7231C28.5929 44.7231 27.6029 44.5231 26.6429 44.1331C25.8629 45.2431 24.9629 47.4631 26.7129 50.6831C31.4129 52.0631 36.3829 51.6431 40.7929 49.4431ZM24.0829 38.6331C24.5429 40.1131 25.5329 41.3231 26.8929 42.0431C29.7129 43.5431 33.2129 42.4631 34.7129 39.6531L34.9829 39.1531L24.7729 33.7331L24.5029 34.2331C23.7729 35.5931 23.6329 37.1531 24.0829 38.6331ZM29.6029 24.6431L29.3329 25.1431H29.3229L39.5329 30.5631L39.8029 30.0631C40.5329 28.7031 40.6729 27.1431 40.2229 25.6631C39.7629 24.1831 38.7729 22.9731 37.4129 22.2531C34.6029 20.7531 31.0929 21.8331 29.6029 24.6431Z'],
+  name: 'conAPI'
+} as IconDefinition

package/src/icons/baseIcons/conc/conClock.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M32.3333 22C32.8856 22 33.3333 22.4477 33.3333 23V32.9036L43.5037 42.0913C43.9135 42.4615 43.9456 43.0939 43.5754 43.5037C43.2052 43.9135 42.5728 43.9456 42.163 43.5754L31.3333 33.7921V23C31.3333 22.4477 31.781 22 32.3333 22Z M32.3333 8C32.8856 8 33.3333 8.44772 33.3333 9V12.5C33.3333 13.0523 32.8856 13.5 32.3333 13.5C31.781 13.5 31.3333 13.0523 31.3333 12.5V9C31.3333 8.44772 31.781 8 32.3333 8Z M32.3333 51.1667C32.8856 51.1667 33.3333 51.6144 33.3333 52.1667V55.6667C33.3333 56.2189 32.8856 56.6667 32.3333 56.6667C31.781 56.6667 31.3333 56.2189 31.3333 55.6667V52.1667C31.3333 51.6144 31.781 51.1667 32.3333 51.1667Z M56.6667 32.3333C56.6667 32.8856 56.219 33.3333 55.6667 33.3333H52.1667C51.6144 33.3333 51.1667 32.8856 51.1667 32.3333C51.1667 31.781 51.6144 31.3333 52.1667 31.3333H55.6667C56.219 31.3333 56.6667 31.781 56.6667 32.3333Z M13.5 32.3333C13.5 32.8856 13.0523 33.3333 12.5 33.3333H9C8.44772 33.3333 8 32.8856 8 32.3333C8 31.781 8.44772 31.3333 9 31.3333H12.5C13.0523 31.3333 13.5 31.781 13.5 32.3333Z M53.4065 44.5C53.1304 44.9783 52.5188 45.1422 52.0405 44.866L49.2209 43.2381C48.7426 42.962 48.5787 42.3504 48.8549 41.8721C49.131 41.3938 49.7426 41.2299 50.2209 41.5061L53.0405 43.134C53.5188 43.4101 53.6827 44.0217 53.4065 44.5Z M15.8117 22.7946C15.5356 23.2729 14.924 23.4368 14.4457 23.1606L11.6261 21.5327C11.1478 21.2566 10.9839 20.645 11.2601 20.1667C11.5362 19.6884 12.1478 19.5245 12.6261 19.8007L15.4457 21.4286C15.924 21.7047 16.0879 22.3163 15.8117 22.7946Z M44.5 53.4065C44.0217 53.6827 43.4101 53.5188 43.134 53.0405L41.5061 50.2209C41.2299 49.7426 41.3938 49.131 41.8721 48.8549C42.3504 48.5787 42.962 48.7426 43.2381 49.2209L44.866 52.0405C45.1422 52.5188 44.9783 53.1304 44.5 53.4065Z M22.7946 15.8117C22.3163 16.0879 21.7047 15.924 21.4286 15.4457L19.8007 12.6261C19.5245 12.1478 19.6884 11.5362 20.1667 11.2601C20.645 10.9839 21.2566 11.1478 21.5327 11.6261L23.1606 14.4457C23.4368 14.924 23.2729 15.5356 22.7946 15.8117Z M20.1667 53.4065C19.6884 53.1304 19.5245 52.5188 19.8006 52.0405L21.4285 49.2209C21.7047 48.7426 22.3163 48.5787 22.7946 48.8549C23.2729 49.131 23.4367 49.7426 23.1606 50.2209L21.5327 53.0405C21.2565 53.5188 20.645 53.6827 20.1667 53.4065Z M41.8721 15.8117C41.3938 15.5356 41.2299 14.924 41.506 14.4457L43.1339 11.6261C43.4101 11.1478 44.0217 10.9839 44.5 11.2601C44.9783 11.5362 45.1421 12.1478 44.866 12.6261L43.2381 15.4457C42.9619 15.924 42.3503 16.0879 41.8721 15.8117Z M11.2601 44.5C10.984 44.0217 11.1479 43.4101 11.6262 43.134L14.4458 41.5061C14.9241 41.2299 15.5357 41.3938 15.8118 41.8721C16.0879 42.3504 15.9241 42.962 15.4458 43.2381L12.6262 44.866C12.1479 45.1422 11.5363 44.9783 11.2601 44.5Z M48.8549 22.7946C48.5788 22.3163 48.7427 21.7047 49.221 21.4286L52.0406 19.8007C52.5189 19.5245 53.1305 19.6884 53.4066 20.1667C53.6828 20.645 53.5189 21.2566 53.0406 21.5327L50.221 23.1606C49.7427 23.4368 49.1311 23.2729 48.8549 22.7946Z M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C60 16.536 47.464 4 32 4ZM2 32C2 15.4315 15.4315 2 32 2C48.5685 2 62 15.4315 62 32C62 48.5685 48.5685 62 32 62C15.4315 62 2 48.5685 2 32Z'],
+  name: 'conClock'
+} as IconDefinition

package/src/icons/baseIcons/conc/conSaveTimeAndMoney.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M33.3514 4C23.3211 4 14.6387 9.69876 10.4222 18H19C19.5523 18 20 18.4477 20 19C20 19.5523 19.5523 20 19 20H7V8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8V16.408C13.6705 7.82793 22.8255 2 33.3514 2C48.6121 2 61 14.254 61 29.3905C61 42.2359 52.0776 53.0051 40.052 55.9709C39.5157 56.1032 38.9738 55.7757 38.8416 55.2395C38.7094 54.7032 39.0368 54.1613 39.5731 54.0291C50.7386 51.2754 59 41.2821 59 29.3905C59 15.3769 47.5259 4 33.3514 4ZM27.1875 40.9375C25.9375 39.7292 24.5208 38.625 22.9375 37.625L25.6875 33.125C26.1042 32.4583 26.125 31.7708 25.75 31.0625C25.375 30.3542 24.7917 30 24 30H12C11.2083 30 10.625 30.3542 10.25 31.0625C9.875 31.7708 9.91667 32.4583 10.375 33.125L13.0625 37.625C5.6875 42.3333 2 48.375 2 55.75C2 57.4583 2.66667 58.9167 4 60.125C5.33333 61.375 6.95833 62 8.875 62H27.125C29.0417 62 30.6667 61.375 32 60.125C33.3333 58.9167 34 57.4583 34 55.75V54.75C34 54.5833 33.9375 54 33.8125 53C33.6875 51.9583 33.5 51.1042 33.25 50.4375C33.0417 49.7292 32.6667 48.75 32.125 47.5C31.5833 46.25 30.9375 45.1458 30.1875 44.1875C29.4375 43.1875 28.4375 42.1042 27.1875 40.9375ZM15.0625 37L12 32H24L20.9375 37H15.0625ZM32 55.5625V55.75C32 56.9167 31.5208 57.9167 30.5625 58.75C29.6042 59.5833 28.4583 60 27.125 60H8.875C7.54167 60 6.39583 59.5833 5.4375 58.75C4.47917 57.9167 4 56.9167 4 55.75V55.5625C4 54.4375 4.125 53.2917 4.375 52.125C4.625 50.9583 5.08333 49.625 5.75 48.125C6.41667 46.5833 7.5 45.0208 9 43.4375C10.5 41.8125 12.3542 40.3333 14.5625 39H21.4375C23.6458 40.3333 25.5 41.8125 27 43.4375C28.5 45.0208 29.5833 46.5833 30.25 48.125C30.9167 49.625 31.375 50.9583 31.625 52.125C31.875 53.2917 32 54.4375 32 55.5625ZM21.375 50.5C21 49.9583 20.5 49.6042 19.875 49.4375L16.8125 48.5C16.3958 48.375 16.1875 48.1042 16.1875 47.6875C16.1875 47.4375 16.2708 47.2292 16.4375 47.0625C16.6042 46.8542 16.7917 46.75 17 46.75H18.875C19.2083 46.75 19.5 46.8333 19.75 47C19.875 47.0833 19.9792 47.125 20.0625 47.125C20.2292 47.125 20.3542 47.0833 20.4375 47L21.25 46.1875C21.375 46.1042 21.4375 45.9792 21.4375 45.8125C21.4375 45.6458 21.3542 45.5 21.1875 45.375C20.5625 44.9167 19.8542 44.6667 19.0625 44.625V43.5625C19.0625 43.1875 18.8958 43 18.5625 43H17.4375C17.1042 43 16.9167 43.1875 16.875 43.5625V44.625C16.0833 44.6667 15.3958 44.9792 14.8125 45.5625C14.2708 46.1458 14 46.8542 14 47.6875C14 48.3542 14.1875 48.9583 14.5625 49.5C14.9792 50.0417 15.5 50.3958 16.125 50.5625L19.1875 51.5C19.6042 51.625 19.8125 51.9167 19.8125 52.375C19.8125 52.5833 19.7292 52.7917 19.5625 53C19.3958 53.1667 19.2083 53.25 19 53.25H17.125C16.7917 53.25 16.5 53.1667 16.25 53C16.125 52.9167 16.0208 52.875 15.9375 52.875C15.7708 52.875 15.6458 52.9375 15.5625 53.0625L14.75 53.8125C14.625 53.8958 14.5625 54.0208 14.5625 54.1875C14.5625 54.3542 14.625 54.5 14.75 54.625C15.4167 55.0833 16.1458 55.3333 16.9375 55.375V56.4375C16.9375 56.8125 17.1042 57 17.4375 57H18.5625C18.8958 57 19.0625 56.8125 19.0625 56.4375V55.375C19.4792 55.375 19.8542 55.2917 20.1875 55.125C20.5625 54.9583 20.875 54.75 21.125 54.5C21.4167 54.2083 21.625 53.875 21.75 53.5C21.9167 53.125 22 52.7292 22 52.3125C22 51.6458 21.7917 51.0417 21.375 50.5ZM33.2637 19.616C33.816 19.616 34.2637 20.0637 34.2637 20.616V30.0198L43.8907 35.5077C44.3705 35.7812 44.5377 36.3919 44.2642 36.8717C43.9907 37.3515 43.38 37.5187 42.9002 37.2452L32.2637 31.1819V20.616C32.2637 20.0637 32.7115 19.616 33.2637 19.616ZM34.2637 7.10706C34.2637 6.55477 33.816 6.10706 33.2637 6.10706C32.7115 6.10706 32.2637 6.55477 32.2637 7.10706V10.4843C32.2637 11.0366 32.7115 11.4843 33.2637 11.4843C33.816 11.4843 34.2637 11.0366 34.2637 10.4843V7.10706ZM56.7786 29.6219C56.7786 30.1742 56.3309 30.6219 55.7786 30.6219H52.4014C51.8491 30.6219 51.4014 30.1742 51.4014 29.6219C51.4014 29.0697 51.8491 28.6219 52.4014 28.6219H55.7786C56.3309 28.6219 56.7786 29.0697 56.7786 29.6219ZM52.2621 41.7455C52.7404 42.0216 53.352 41.8577 53.6281 41.3794C53.9043 40.9012 53.7404 40.2896 53.2621 40.0134L50.5414 38.4426C50.0631 38.1665 49.4515 38.3303 49.1754 38.8086C48.8992 39.2869 49.0631 39.8985 49.5414 40.1747L52.2621 41.7455ZM45.0212 49.9865C44.5429 50.2626 43.9314 50.0987 43.6552 49.6204L42.0844 46.8997C41.8083 46.4214 41.9721 45.8098 42.4504 45.5337C42.9287 45.2576 43.5403 45.4214 43.8165 45.8997L45.3873 48.6204C45.6634 49.0987 45.4995 49.7103 45.0212 49.9865ZM22.7112 13.3442C22.9873 13.8225 23.5989 13.9864 24.0772 13.7102C24.5555 13.4341 24.7194 12.8225 24.4432 12.3442L22.8724 9.6235C22.5963 9.14521 21.9847 8.98133 21.5064 9.25747C21.0281 9.53362 20.8642 10.1452 21.1404 10.6235L22.7112 13.3442ZM42.4504 13.7102C41.9721 13.4341 41.8082 12.8225 42.0844 12.3442L43.6552 9.6235C43.9313 9.14521 44.5429 8.98133 45.0212 9.25747C45.4995 9.53362 45.6634 10.1452 45.3872 10.6235L43.8164 13.3442C43.5403 13.8225 42.9287 13.9864 42.4504 13.7102ZM49.5415 19.0694C49.0632 19.3455 48.8993 19.9571 49.1754 20.4354C49.4516 20.9137 50.0632 21.0776 50.5415 20.8014L53.2622 19.2306C53.7405 18.9545 53.9044 18.3429 53.6282 17.8646C53.3521 17.3863 52.7405 17.2224 52.2622 17.4986L49.5415 19.0694Z'],
+  name: 'conSaveTimeAndMoney'
+} as IconDefinition

package/src/icons/baseIcons/conc/conVesselConnect.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M21.5 8C18.1848 8 15.0054 9.31696 12.6612 11.6612C10.317 14.0054 9 17.1848 9 20.5C9 21.0523 8.55228 21.5 8 21.5C7.44772 21.5 7 21.0523 7 20.5C7 16.6544 8.52767 12.9662 11.247 10.247C13.9662 7.52767 17.6544 6 21.5 6C22.0523 6 22.5 6.44772 22.5 7C22.5 7.55228 22.0523 8 21.5 8Z M16.9038 15.9038C18.1228 14.6848 19.7761 14 21.5 14C22.0523 14 22.5 13.5523 22.5 13C22.5 12.4477 22.0523 12 21.5 12C19.2457 12 17.0837 12.8955 15.4896 14.4896C13.8955 16.0837 13 18.2457 13 20.5C13 21.0523 13.4477 21.5 14 21.5C14.5523 21.5 15 21.0523 15 20.5C15 18.7761 15.6848 17.1228 16.9038 15.9038Z M19 20C19 21.1046 19.8954 22 21 22C22.1046 22 23 21.1046 23 20C23 18.8954 22.1046 18 21 18C19.8954 18 19 18.8954 19 20Z M27 25C27 24.4477 27.4477 24 28 24H34C34.5523 24 35 24.4477 35 25V28H36.5C36.8483 28 37.1716 28.1813 37.3533 28.4785L42.9542 37.6437L47.3672 39.3857C47.6237 39.4869 47.827 39.6897 47.9291 39.9459C48.0311 40.2021 48.0228 40.4891 47.906 40.739L39.1788 59.4232C39.0144 59.7751 38.6611 60 38.2727 60H23.7273C23.3389 60 22.9856 59.7751 22.8212 59.4232L14.094 40.739C13.9772 40.4891 13.9689 40.2021 14.0709 39.9459C14.173 39.6897 14.3763 39.4869 14.6328 39.3857L19.0458 37.6437L24.6467 28.4785C24.8284 28.1813 25.1516 28 25.5 28H27V25ZM20.2438 39.321L20.3318 39.3747L20.4031 39.2581L29.1642 35.7998C30.3438 35.3342 31.6562 35.3342 32.8358 35.7998L41.5969 39.2581L41.6681 39.3747L41.7561 39.321L45.6441 40.8557L37.6361 58H24.3639L16.3559 40.8557L20.2438 39.321ZM39.8651 36.4243L33.5702 33.9395C31.9187 33.2876 30.0813 33.2876 28.4298 33.9395L22.1348 36.4243L26.0608 30H35.9391L39.8651 36.4243ZM33 26V28H29V26H33Z M42 28C42 26.8954 42.8954 26 44 26C45.1046 26 46 26.8954 46 28C46 29.1046 45.1046 30 44 30C42.8954 30 42 29.1046 42 28Z M50 28.5C50 26.7761 49.3152 25.1228 48.0962 23.9038C46.8772 22.6848 45.2239 22 43.5 22C42.9477 22 42.5 21.5523 42.5 21C42.5 20.4477 42.9477 20 43.5 20C45.7543 20 47.9163 20.8955 49.5104 22.4896C51.1045 24.0837 52 26.2457 52 28.5C52 29.0523 51.5523 29.5 51 29.5C50.4477 29.5 50 29.0523 50 28.5Z M52.3388 19.6612C54.683 22.0054 56 25.1848 56 28.5C56 29.0523 56.4477 29.5 57 29.5C57.5523 29.5 58 29.0523 58 28.5C58 24.6544 56.4723 20.9662 53.753 18.247C51.0338 15.5277 47.3456 14 43.5 14C42.9477 14 42.5 14.4477 42.5 15C42.5 15.5523 42.9477 16 43.5 16C46.8152 16 49.9946 17.317 52.3388 19.6612Z'],
+  name: 'conVesselConnect',
+  pathProps: { fillRule: 'evenodd', clipRule: 'evenodd' }
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,3 +1,7 @@
+export { default as conAPI } from './conc/conAPI'
+export { default as conClock } from './conc/conClock'
+export { default as conSaveTimeAndMoney } from './conc/conSaveTimeAndMoney'
+export { default as conVesselConnect } from './conc/conVesselConnect'
 export { default as conCertificate } from './conc/conCertificate'
 export { default as conCreateDataset } from './conc/conCreateDataset'
 export { default as conDatabase } from './conc/conDatabase'

package/src/icons/baseIcons/types.ts

@@ -1,4 +1,8 @@
 export type BaseIcon =
+  | 'conAPI'
+  | 'conClock'
+  | 'conSaveTimeAndMoney'
+  | 'conVesselConnect'
   | 'conCertificate'
   | 'conCreateDataset'
   | 'conDatabase'

package/src/list/listItem.tsx

@@ -22,6 +22,7 @@ const ListItemLink = vui<'a', LinkProps>((props, ref) => (
   />
 ))
 
+/*@formatter:off*/
 export const ListItemBase = styled.liBox`
   display: flex;
   line-height: normal;
@@ -38,6 +39,7 @@ export const ListItemBase = styled.liBox`
     z-index: 1;
   }
 `
+/*@formatter:on*/
 
 /**
  * Displays a list item with text and optional icons. Can be shown as interactive or selected.