@veracity/vui 2.5.1 → 2.6.0

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

@@ -1,8 +1,18 @@
 import { Property } from 'csstype';
 /** Concatenates individual className arguments and returns a single string. */
 export declare function cs(...classNames: any[]): string;
+/** Parses HSL color code. */
+export declare function parseHSL(color: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+/** Builds RGBA string. */
+export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
+/** Converts hsl color value to rgb with optional alpha property. */
+export declare function HSLToRGBA(h: number, s: number, l: number, alpha?: number): string;
 /** Styling to add ellipsis for long texts. */
 export declare const ellipsisOverflow: {
     overflow: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/esm/utils/styles.js

@@ -2,6 +2,14 @@
 export function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
 }
+/** Parses HSL color code. */
+export function parseHSL(color) {
+    const regexp = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g;
+    const res = regexp?.exec?.(color)?.slice?.(1);
+    return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 };
+}
+/** Builds RGBA string. */
+export const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -15,7 +23,48 @@ export function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return buildRGBA(r, g, b, alpha);
+}
+/** Converts hsl color value to rgb with optional alpha property. */
+export function HSLToRGBA(h, s, l, alpha) {
+    s /= 100;
+    l /= 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(((h / 60) % 2) - 1)), m = l - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (0 <= h && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (60 <= h && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (120 <= h && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (180 <= h && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (240 <= h && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else if (300 <= h && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    r = Math.round((r + m) * 255);
+    g = Math.round((g + m) * 255);
+    b = Math.round((b + m) * 255);
+    return buildRGBA(r, g, b, alpha);
 }
 /** Styling to add ellipsis for long texts. */
 export const ellipsisOverflow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.5.1",
+  "version": "2.6.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/box/box.tsx

@@ -20,9 +20,10 @@ export const Box = vui<'div', BoxProps>((props, ref) => {
     className,
     column,
     direction,
-    hoverShadow,
+    elevation,
+    hoverShadow: hoverBoxShadow,
     justify,
-    radius,
+    radius: borderRadius,
     shadow,
     wrap,
     ...rest
@@ -35,11 +36,10 @@ export const Box = vui<'div', BoxProps>((props, ref) => {
 
   const aliasedProps = filterUndefined<BoxProps>({
     alignItems: align ?? alignItems,
-    borderRadius: radius,
-    boxShadow: shadow,
+    borderRadius,
+    boxShadow: elevation ?? shadow,
     flexDirection: direction ?? flexDirection,
     flexWrap: wrap ? 'wrap' : undefined,
-    hoverBoxShadow: hoverShadow,
     justifyContent: justify ?? justifyContent
   })
 

package/src/box/box.types.ts

@@ -15,6 +15,8 @@ export type BoxProps = SystemProps &
     column?: boolean
     /** Alias for flexDirection prop. @deprecated */
     direction?: FlexboxesProps['flexDirection']
+    /** Alias for boxShadow prop. @deprecated */
+    elevation?: EffectsProps['boxShadow']
     /** Alias for hoverBoxShadow prop. @deprecated */
     hoverShadow?: EffectsProps['hoverBoxShadow']
     /** Alias for justifyContent prop. @deprecated */

package/src/button/button.types.ts

@@ -5,7 +5,7 @@ import { AnyString } from '../utils'
 
 export type ButtonProps = SystemProps &
   ThemingProps<'Button'> & {
-    /** Available theme colors for this component. @deprecated */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: string
     /** Icon for the drop-down element. @default falAngleDown */
     dropDownIcon?: IconProp

package/src/buttonGroup/buttonGroup.tsx

@@ -41,10 +41,6 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
     border-color: ${p => th.color(p.innerBorderColor)};
   }
 
-  > *:disabled {
-    border-color: disabled .border;
-  }
-
   //
   > .${activeClassName} {
     background-color: ${p => th.color('skyBlue.90')};

package/src/core/links.tsx

@@ -18,11 +18,8 @@ export function getLoggedInLink(link: string, isLoggedIn?: boolean) {
   try {
     const url = new URL(link)
 
-    if (isLoggedIn) {
-      url.searchParams.append('loggedin', '1')
-    } else {
-      url.searchParams.delete('loggedin')
-    }
+    if (isLoggedIn) url.searchParams.append('loggedin', '1')
+    else url.searchParams.delete('loggedin')
 
     return url.toString()
   } catch {
@@ -63,9 +60,7 @@ export function useLoadLinks(env?: Environment, isLoggedIn?: boolean) {
 
       const data = await response.json()
 
-      if (isObject(data)) {
-        setLinks(updateLoggedInParam(data))
-      }
+      if (isObject(data)) setLinks(updateLoggedInParam(data))
     } catch {
       console.error('Failed to retrieve links')
     }

package/src/dialog/dialog.tsx

@@ -16,7 +16,7 @@ import DialogTitle from './dialogTitle'
 
 export const DialogBase = styled.divBox`
   background-color: white;
-  border-radius: md;
+  border-radius: 1px;
   box-shadow: 4;
   display: flex;
   flex-direction: column;

package/src/dialog/dialogCloseButton.tsx

@@ -14,16 +14,14 @@ export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, r
 
   return (
     <CloseButton
-      activeBg="grey.30"
       className={cs('vui-dialogCloseButton', className)}
-      color="grey.80"
-      hoverBg="grey.20"
       onClick={onClose}
       position="absolute"
       ref={ref}
       right={16}
       size="sm"
       top={16}
+      variant="tertiaryDark"
       {...styles.closeButton}
       {...rest}
     />

package/src/footer/footer.tsx

@@ -1,49 +1,127 @@
 import React from 'react'
 
-import { styled, vui, VuiComponent } from '../core'
+import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
+import { Link } from '../link'
+import { T } from '../t'
 import { cs } from '../utils'
 import { FooterProvider } from './context'
-import { FooterProps } from './footer.types'
+import { FooterLinkData, FooterProps } from './footer.types'
 import FooterColumn from './footerColumn'
 import FooterContent from './footerContent'
 import FooterHeading from './footerHeading'
 import FooterLink from './footerLink'
 import FooterRow from './footerRow'
 import FooterSection from './footerSection'
-import FooterTrademark from './footerTrademark'
+import FooterSlimColumn from './footerSlimColumn'
+import { defaultLinkedInUrl, FooterTrademark } from './footerTrademark'
 
+/*@formatter:off*/
 export const FooterBase = styled.divBox`
-  background-color: prussian.80;
+  background-color: darkBlue.main;
   color: white;
   padding: 5 3;
 `
+/*@formatter:on*/
 
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui<'div', FooterProps>((props, ref) => {
-  const { children, className, columns, linkedIn, size, variant, ...rest } = props
+  const { children, className, columns, linkedIn, size, variant, isSlim, ...rest } = props
 
   const context = { size, variant }
 
+  const styles = useStyleConfig('Footer', props)
+
+  const slimLinks: FooterLinkData[] = [
+    {
+      id: 'home',
+      text: 'veracity.com',
+      url: 'https://www.veracity.com/'
+    }
+  ]
+
+  columns?.map(column => {
+    column.map(section => {
+      section.links?.map(link => {
+        if (!link) return
+
+        if (['home', 'support', 'status'].includes(link.id || '')) {
+          slimLinks.push(link)
+        }
+      })
+    })
+  })
+
+  const downMd = useDown('md')
+  const downLg = useDown('lg')
+
   return (
     <FooterProvider value={context}>
-      <FooterBase className={cs('vui-footer', className)} ref={ref} {...rest}>
-        <FooterContent>
-          {children ??
-            (columns && (
-              <FooterRow>
-                {columns.map((sections, index) => (
-                  <FooterColumn key={index} sections={sections} />
-                ))}
-              </FooterRow>
-            ))}
-
-          {children || columns ? <Divider borderColor="grey.60" my={4} /> : null}
-
-          <FooterRow>
-            <FooterTrademark linkedIn={linkedIn} />
-          </FooterRow>
-        </FooterContent>
+      <FooterBase
+        className={cs('vui-footer', className)}
+        py={isSlim ? (downMd ? '16px' : '9px') : 5}
+        {...styles.container}
+        ref={ref}
+        {...rest}
+      >
+        {isSlim && (
+          <FooterContent alignContent="center" alignItems="center" maxW={{ xs: 343, sm: 305, md: 720, lg: 975 }}>
+            <FooterRow>
+              {slimLinks.map((link, index) => {
+                /** if the screen is small drop one specific link */
+                if (downLg && link?.id === 'support') return
+
+                return (
+                  <FooterSlimColumn key={index}>
+                    <FooterLink {...link} />
+                  </FooterSlimColumn>
+                )
+              })}
+
+              {downMd && <Divider borderColor="sandstone.main" mb={0.5} mt={1} w={1} />}
+
+              <FooterSlimColumn centerV>
+                <T size="xs">
+                  <T size="xs" weight="demi">
+                    Veracity by DNV
+                  </T>
+                  , DNV AS
+                </T>
+              </FooterSlimColumn>
+              <FooterSlimColumn>
+                <Link
+                  fontWeight="demi"
+                  href={linkedIn ?? defaultLinkedInUrl}
+                  iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="xs" />}
+                  isExternal
+                  size={{ _: 'sm', md: 'md' }}
+                  {...styles.link}
+                >
+                  <FooterHeading fontSize="16px" mb={0} text="Follow us" />
+                </Link>
+              </FooterSlimColumn>
+            </FooterRow>
+          </FooterContent>
+        )}
+
+        {!isSlim && (
+          <FooterContent>
+            {children ??
+              (columns && (
+                <FooterRow>
+                  {columns.map((sections, index) => (
+                    <FooterColumn key={index} sections={sections} />
+                  ))}
+                </FooterRow>
+              ))}
+
+            {children || columns ? <Divider borderColor="sandstone.main" my={4} /> : null}
+
+            <FooterRow>
+              <FooterTrademark linkedIn={linkedIn} />
+            </FooterRow>
+          </FooterContent>
+        )}
       </FooterBase>
     </FooterProvider>
   )

package/src/footer/footer.types.ts

@@ -26,6 +26,7 @@ export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
   Pick<FooterTrademarkProps, 'linkedIn'> & {
     /** Data defining content of multiple columns. */
     columns?: FooterColumnData[]
+    isSlim?: boolean
   }
 
 /** Section consists of multiple links with text (label) and url */

package/src/footer/footerColumn.tsx

@@ -16,8 +16,9 @@ const FooterColumn = vui<'div', FooterColumnProps>((props, ref) => {
     <Box
       className={cs('vui-footerColumn', className)}
       column
-      flex={{ xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }}
-      p={1.5}
+      flex={{ xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }}
+      minW={164}
+      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
       ref={ref}
       spaceY={4}
       {...styles.column}

package/src/footer/footerContent.tsx

@@ -15,7 +15,8 @@ export const FooterContent = vui<'div', FooterContentProps>((props, ref) => {
     <Box
       className={cs('vui-footerContent', className)}
       column
-      maxW={1200}
+      fontSize={{ xs: 12, sm: 12, md: 14 }}
+      maxW={{ xs: 344, sm: 412, md: 780, lg: 782, xl: 888 }}
       mx="auto"
       ref={ref}
       w="100%"

package/src/footer/footerLink.tsx

@@ -15,7 +15,7 @@ export const FooterLink = vui<'a', LinkProps>((props, ref) => {
       className={cs('vui-footerLink', className)}
       py={0.5}
       ref={ref}
-      size="sm"
+      size={{ _: 'sm', md: 'md' }}
       variant="white"
       {...styles.link}
       {...rest}

package/src/footer/footerSlimColumn.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Box, { BoxProps } from '../box'
+import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { useFooterContext } from './context'
+
+/** Organizes sections with links into a single column. Different width per breakpoint. */
+const FooterSlimColumn = vui<'div', BoxProps>((props, ref) => {
+  const { children, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
+
+  return (
+    <Box
+      className={cs('vui-footerSlimColumn')}
+      column
+      flex={{ xs: '0 0 50%', sm: '0 0 20%', md: '0 0 20%' }}
+      minW={164}
+      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+      ref={ref}
+      spaceY={4}
+      {...styles.column}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+})
+
+export default FooterSlimColumn

package/src/footer/footerTrademark.tsx

@@ -8,8 +8,9 @@ import { cs } from '../utils'
 import { useFooterContext } from './context'
 import { FooterTrademarkProps } from './footer.types'
 import FooterColumn from './footerColumn'
+import FooterHeading from './footerHeading'
 
-const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform'
+export const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform'
 
 /** Section includes a heading and a set of links. */
 export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) => {
@@ -22,11 +23,11 @@ export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) =>
         <Link
           fontWeight="demi"
           href={linkedIn ?? defaultLinkedInUrl}
-          iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
+          iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="sm" />}
           isExternal
-          variant="white"
+          {...styles.link}
         >
-          Follow us
+          <FooterHeading mb={0} text="Follow us" />
         </Link>
       </FooterColumn>
 

package/src/footer/theme.ts

@@ -1,12 +1,50 @@
 const baseStyle = {}
 
-const defaultProps = {}
+const defaultProps = {
+  variant: 'default'
+}
 
 const parts = ['container', 'column', 'content', 'heading', 'link', 'row', 'section', 'trademark']
 
 const sizes = {}
 
-const variants = {}
+const variants = {
+  default: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    },
+    link: {
+      color: 'white'
+    }
+  },
+  developer: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    },
+
+    link: {
+      color: 'digiGreen.main'
+    }
+  },
+  light: {
+    container: {
+      bg: 'white',
+      color: 'darkBlue.main'
+    },
+    row: {
+      color: 'black'
+    },
+
+    link: {
+      color: 'seaBlue.main'
+    },
+    heading: {
+      color: 'darkBlue.main'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/header/headerAccount.tsx

@@ -32,7 +32,6 @@ export function HeaderAccount(props: HeaderAccountProps) {
       <Popover.Trigger
         as={Avatar}
         className="vui-headerAccountTrigger"
-        colorScheme="prussian"
         isInteractive
         ml={2}
         name={name}

package/src/header/headerAccountUserInfo.tsx

@@ -25,13 +25,7 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
     >
       {children ?? (
         <>
-          <Avatar
-            className="vui-headerAccountUserInfoAvatar"
-            // colorScheme="prussian"
-            name={displayName}
-            size="lg"
-            // variant="solid"
-          />
+          <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="lg" />
           <Box column>
             {displayName && (
               <T mb={0.5} weight="demi">

package/src/header/headerDivider.tsx

@@ -12,7 +12,7 @@ export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
 
   return (
     <Divider
-      borderColor="prussian.80"
+      borderColor="darkBlue.main"
       className={cs('vui-headerDivider', className)}
       h={40}
       isVertical

package/src/header/headerMobileToggle.tsx

@@ -17,7 +17,6 @@ export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
   return (
     <IconButton
       className={cs('vui-headerMobileToggle', className)}
-      colorScheme="prussian"
       icon={<Icon name={iconName} scale={2} />}
       ml={2}
       onClick={() => setIsMobileOpen(s => !s)}

package/src/header/headerServices.tsx

@@ -33,14 +33,7 @@ export function HeaderServices(props: HeaderServicesProps) {
     <>
       <RenderOnScreen minWidth="lg">
         <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
-          <Menu.Button
-            colorScheme="prussian"
-            icon="falTh"
-            ml={1}
-            title="My services"
-            {...styles.button}
-            {...buttonProps}
-          />
+          <Menu.Button icon="falTh" ml={1} title="My services" {...styles.button} {...buttonProps} />
 
           <Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
             <ListContent links={links} />

package/src/heading/heading.tsx

@@ -9,7 +9,7 @@ export const HeadingBase = styled.h2Box`
   transition-duration: fast;
 `
 
-/** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
+/** Used to define headings and titles for pages, articles, panels, etc. */
 export const Heading = vui<'h2', HeadingProps>((props, ref) => {
   const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Heading', props)

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

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8365 32 16C32 7.16345 24.8366 0 16 0C7.16344 0 0 7.16345 0 16C0 24.8365 7.16344 32 16 32ZM21.8359 13.3936L21.2136 17.375H17.9452V27H13.5617V17.375H10V13.3936H13.5617V10.359C13.5617 6.90698 15.656 5 18.8602 5C20.3949 5 22 5.26904 22 5.26904V8.65881H20.2312C18.4887 8.65881 17.9452 9.72058 17.9452 10.8098V13.3936H21.8359Z'],
+  name: 'cubCircleFB'
+} as IconDefinition

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import {IconDefinition} from '../../types'
+
+export default {
+    details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM7.31384 24H11.2529V11.3147H7.31384V24ZM7 7.28132C7 8.54095 8.02167 9.58428 9.28127 9.58428C10.5404 9.58428 11.5625 8.54095 11.5625 7.28132C11.5625 6.02138 10.5412 5 9.28127 5C8.02136 5 7 6.02138 7 7.28132ZM22.0651 24H26V17.0318C26 13.6219 25.2671 10.9966 21.2805 10.9966C19.364 10.9966 18.0794 12.0484 17.5535 13.0451H17.4983V11.3147H13.7204V24H17.6553V17.7188C17.6553 16.0648 17.9691 14.4659 20.0171 14.4659C22.0354 14.4659 22.0651 16.3532 22.0651 17.8249V24Z'],
+    name: 'cubCircleLinkedIn',
+    pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
+} as IconDefinition

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import {IconDefinition} from '../../types'
+
+export default {
+    details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8365 32 16C32 7.16345 24.8366 0 16 0C7.16344 0 0 7.16345 0 16C0 24.8365 7.16344 32 16 32ZM24.7526 12.0765C24.7526 11.8796 24.7526 11.6827 24.7386 11.486C25.6181 10.839 26.3859 10.0375 27 9.13757C26.1904 9.48901 25.3109 9.74219 24.4036 9.84058C25.3388 9.2782 26.0507 8.39221 26.3858 7.33752C25.5203 7.85779 24.5431 8.23755 23.5241 8.43433C22.7005 7.54846 21.5279 7 20.2297 7C17.731 7 15.7208 9.03906 15.7208 11.5422C15.7208 11.8938 15.7627 12.2452 15.8325 12.5828C12.0914 12.3859 8.75505 10.5859 6.53549 7.82971C6.14461 8.50464 5.9213 9.27808 5.9213 10.1218C5.9213 11.6969 6.71695 13.089 7.93143 13.9047C7.19164 13.8766 6.49361 13.6656 5.89337 13.3281V13.3844C5.89337 15.5922 7.44292 17.4203 9.5089 17.8422C9.13202 17.9406 8.72717 17.9968 8.32236 17.9968C8.02917 17.9968 7.75002 17.9688 7.47079 17.9265C8.04315 19.7266 9.70433 21.0344 11.6866 21.0765C10.1371 22.3 8.19667 23.0172 6.08884 23.0172C5.71191 23.0172 5.36296 23.0032 5 22.9609C6.9962 24.2546 9.36929 25 11.9239 25C20.2158 25 24.7526 18.0812 24.7526 12.0765Z'],
+    name: 'cubCircleTwitter',
+    pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
+} as IconDefinition

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

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M19.8409 16.0142L14.3523 13.0536V18.9747L19.8409 16.0142Z M16 32C24.8365 32 32 24.8365 32 16C32 7.16345 24.8365 0 16 0C7.16345 0 0 7.16345 0 16C0 24.8365 7.16345 32 16 32ZM24.7046 9.4187C25.6081 9.64917 26.3197 10.3282 26.5612 11.1906C27 12.7534 27 16.0142 27 16.0142C27 16.0142 27 19.2749 26.5612 20.8378C26.3197 21.7 25.6081 22.3508 24.7046 22.5813C23.0669 23 16.5 23 16.5 23C16.5 23 9.93314 23 8.29544 22.5813C7.39194 22.3508 6.68033 21.7 6.43881 20.8378C6 19.2749 6 16.0142 6 16.0142C6 16.0142 6 12.7534 6.43881 11.1906C6.68033 10.3282 7.39194 9.64929 8.29544 9.4187C9.93314 9 16.5 9 16.5 9C16.5 9 23.0669 9 24.7046 9.4187Z'],
+  name: 'cubCircleYoutube'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -19,6 +19,10 @@ export { default as conUploadFile } from './conc/conUploadFile'
 export { default as conUploadFile1 } from './conc/conUploadFile1'
 export { default as conUploadFile2 } from './conc/conUploadFile2'
 export { default as cubBellship } from './cub/cubBellship'
+export { default as cubCircleFB } from './cub/cubCircleFB'
+export { default as cubCircleLinkedIn } from './cub/cubCircleLinkedIn'
+export { default as cubCircleTwitter } from './cub/cubCircleTwitter'
+export { default as cubCircleYoutube } from './cub/cubCircleYoutube'
 export { default as cubDNV } from './cub/cubDNV'
 export { default as cubPowerBi } from './cub/cubPowerBi'
 export { default as cubVeracity } from './cub/cubVeracity'