@veracity/vui 2.30.0-beta.0 → 2.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.30.0-beta.0",
+  "version": "2.30.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",
@@ -54,4 +54,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/badge/theme.ts

@@ -9,6 +9,17 @@ const defaultProps = {
 const parts = ['container', 'icon', 'text']
 
 const sizes = {
+  xxs: {
+    container: {
+      borderRadius: 'lg',
+      fontSize: 'sm',
+      h: 16,
+      spaceX: 2,
+    },
+    icon: {
+      size: 'xs',
+    },
+  },
   xs: {
     container: {
       borderRadius: 'lg',

package/src/button/button.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useMemo } from 'react'
+import { Fragment, useMemo, useCallback } from 'react'
 
 import { useButtonGroupContext } from '../buttonGroup/context'
 import type { VuiComponent } from '../core'
@@ -10,6 +10,14 @@ import ButtonText from './buttonText'
 import { buttonStateMapping, loadingIconProps } from './consts'
 import { ButtonProvider } from './context'
 
+// Constants
+const DEFAULT_BORDER_WIDTH = 1
+const DEFAULT_BOX_SHADOW = '2'
+const DEFAULT_DISABLED_OPACITY = 0.5
+const BUTTON_TYPE = 'button'
+const FOCUS_RING_SIZE = 3
+
+// Memoized styled components
 const ContentWrapper = styled.span`
   visibility: hidden;
 `
@@ -35,8 +43,165 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
   transition-duration: fast;
   user-select: none;
   width: fit-content;
+
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {
+    background-color: #d3eef8;
+    color: #003591;
+    border-color-left: #003591;
+  }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {
+    background-color: #003591;
+    color: #91ffba;
+    border-color-left: #91ffba;
+  }
 `
 
+const useButtonStyles = (mergedProps: any, variant: any) => {
+  const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {}
+
+  return useMemo(() => {
+    const container = styles.container || {}
+    const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container
+    return { styles, borderWidth, h, spaceX, buttonStyles }
+  }, [mergedProps, variant])
+}
+
+// Utility function to extract numeric value from responsive or themed props
+const extractNumericValue = (value: any): number => {
+  if (typeof value === 'number') return value
+  if (typeof value === 'string') {
+    const parsed = parseInt(value, 10)
+    return isNaN(parsed) ? DEFAULT_BORDER_WIDTH : parsed
+  }
+  return DEFAULT_BORDER_WIDTH
+}
+
+const useSpacingProps = (
+  borderWidthProp: any,
+  borderWidth: number | undefined,
+  spaceX: number,
+  icon: any,
+  iconLeft: any,
+  iconRight: any,
+  isLoading: boolean,
+  isSplit: boolean,
+) => {
+  return useMemo(() => {
+    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH
+    const spaceXItem = spaceX - border
+    const spaceXText = spaceX * 2 - border
+
+    return {
+      border,
+      iconLeftMr: `${spaceXItem + 1}px`,
+      iconRightMl: isSplit ? 'auto' : `${spaceXItem + 1}px`,
+      pl: `${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px`,
+      pr: `${icon || iconRight ? spaceXItem : spaceXText}px`,
+    }
+  }, [borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit])
+}
+
+const useDisabledProps = (disabled: boolean, styles: any) => {
+  return useMemo(
+    () =>
+      disabled
+        ? {
+            'aria-disabled': disabled,
+            disabledBg: styles?.container?.disabledBg ?? 'bg',
+            disabledBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',
+            disabledColor: styles?.container?.disabledColor ?? 'color',
+            hoverBg: styles?.container?.disabledBg ?? 'bg',
+            hoverBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',
+            hoverColor: styles?.container?.disabledColor ?? 'color',
+            activeBg: styles?.container?.disabledBg ?? 'bg',
+            cursor: 'not-allowed',
+            opacity: styles?.container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,
+          }
+        : {},
+    [disabled, styles?.container],
+  )
+}
+
+const useActiveProps = (isActive: boolean, styles: any) => {
+  return useMemo(
+    () =>
+      isActive
+        ? filterUndefined({
+            bg: styles?.container?.activeBg,
+            borderBg: styles?.container?.activeBorderBg,
+            color: styles?.container?.activeColor,
+          })
+        : {},
+    [isActive, styles?.container],
+  )
+}
+
+const useAliasedProps = (
+  isRound: boolean,
+  h: number,
+  styles: any,
+  isElevated: boolean,
+  icon: any,
+  hasState: boolean,
+  isFullWidth: boolean,
+) => {
+  return useMemo(
+    () =>
+      filterUndefined({
+        borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
+        boxShadow: isElevated ? DEFAULT_BOX_SHADOW : undefined,
+        minW: icon ? 0 : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
+        w: isFullWidth ? '100%' : undefined,
+      }),
+    [isRound, h, styles?.container?.borderRadius, isElevated, icon, hasState, isFullWidth],
+  )
+}
+
+const useButtonClassName = (className: string | undefined, isActive: boolean, variantProp: string | undefined) => {
+  return useMemo(
+    () =>
+      cs(
+        'vui-button',
+        className,
+        isActive && activeClassName,
+        variantProp ? `vui-button-variant-${variantProp}` : undefined,
+      ),
+    [className, isActive, variantProp],
+  )
+}
+
+const useIconRenderer = (
+  icon: any,
+  iconLeft: any,
+  iconRight: any,
+  isLoading: boolean,
+  spacingProps: any,
+  children: any,
+  text: any,
+  isTruncated: boolean,
+) => {
+  return useMemo(
+    () => ({
+      main: isString(icon) ? <ButtonIcon name={icon} /> : icon,
+      left: isLoading ? (
+        <ButtonIcon mr={spacingProps.iconLeftMr} {...loadingIconProps} />
+      ) : isString(iconLeft) ? (
+        <ButtonIcon mr={spacingProps.iconLeftMr} name={iconLeft} />
+      ) : (
+        iconLeft
+      ),
+      right: isString(iconRight) ? (
+        <ButtonIcon ml={!children && !text ? 0 : spacingProps.iconRightMl} name={iconRight} />
+      ) : (
+        iconRight
+      ),
+      content: children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text),
+    }),
+    [icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated],
+  )
+}
+
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
  *
@@ -73,118 +238,128 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     variant: variantProp,
     ...rest
   } = mergedProps
-  const hasState = Boolean(state) && state !== 'idle'
-  const states = { ...buttonStateMapping, ...stateMapping }
-
-  const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
-
-  const iconRight = isDropDown ? 'falAngleDown' : iconRightProp
-
-  const variant = filterUndefined({
-    variant: states[state]?.variant ?? variantProp,
-  })
-
-  const styles = useStyleConfig('Button', { ...mergedProps, ...variant })
-  const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container
-
-  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
-
-  const Content = hasState ? ContentWrapper : Fragment
-
-  // Apply more space for text and less space for icons
-  const border = borderWidthProp ?? borderWidth ?? 1
-  const spaceXItem = spaceX - border
-  const spaceXText = spaceX * 2 - border
-  const iconLeftMr = spaceXItem + 1 + 'px'
-  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px'
-  const pl = (icon || iconLeft || isLoading ? spaceXItem : spaceXText) + 'px'
-  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
-
-  let ariaLabel = ''
-
-  if (title) ariaLabel = title
-
-  const isActiveProps = isActive
-    ? filterUndefined({
-        bg: styles?.container?.activeBg,
-        borderBg: styles?.container?.activeBorderBg,
-        color: styles?.container?.activeColor,
-      })
-    : {}
-
-  const disabledProps = disabled
-    ? {
-        'aria-disabled': disabled,
-        disabledBg: 'bg',
-        disabledBorderColor: 'borderColor',
-        disabledColor: 'color',
-        hoverBg: 'bg',
-        hoverBorderColor: 'borderColor',
-        hoverColor: 'color',
-        activeBg: 'bg',
-        cursor: 'not-allowed',
-        opacity: 0.5,
-      }
-    : {}
-
-  const aliasedProps = filterUndefined({
-    borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
-    boxShadow: isElevated ? '2' : undefined,
-    minW: icon ? 0 : undefined,
-    pointerEvents: hasState ? 'none' : undefined,
-    w: isFullWidth ? '100%' : undefined,
-  })
+
+  // Memoized calculations
+  const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state])
+  const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping])
+  const stateData = useMemo(() => states[state] ?? {}, [states, state])
+  const { iconProps: stateIconProps, ...stateProps } = stateData
+
+  const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp])
+
+  const variant = useMemo(
+    () =>
+      filterUndefined({
+        variant: stateData?.variant ?? variantProp,
+      }),
+    [stateData?.variant, variantProp],
+  )
+
+  // Custom hooks for optimization
+  const { styles, borderWidth, h, spaceX, buttonStyles } = useButtonStyles(mergedProps, variant)
+  const spacingProps = useSpacingProps(
+    borderWidthProp,
+    borderWidth,
+    spaceX,
+    icon,
+    iconLeft,
+    iconRight,
+    isLoading ?? false,
+    isSplit ?? false,
+  )
+  const disabledProps = useDisabledProps(disabled ?? false, styles)
+  const isActiveProps = useActiveProps(isActive ?? false, styles)
+  const aliasedProps = useAliasedProps(
+    isRound ?? false,
+    h,
+    styles,
+    isElevated ?? false,
+    icon,
+    hasState,
+    isFullWidth ?? false,
+  )
+  const buttonClassName = useButtonClassName(className, isActive ?? false, variantProp)
+  const IconRenderer = useIconRenderer(
+    icon,
+    iconLeft,
+    iconRight,
+    isLoading ?? false,
+    spacingProps,
+    children,
+    text,
+    isTruncated ?? false,
+  )
+
+  // Memoized context value
+  const contextValue = useMemo(
+    () => filterUndefined({ disabled, size, variant: variant.variant }),
+    [disabled, size, variant.variant],
+  )
+
+  // Memoized content wrapper
+  const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState])
+
+  // Memoized aria label
+  const ariaLabel = useMemo(() => title || '', [title])
+
+  // Optimized event handler
+  const handleStateClick = useCallback((e: { stopPropagation: () => void }) => {
+    e.stopPropagation()
+  }, [])
+
+  // Memoized final props
+  const finalProps = useMemo(
+    () => ({
+      borderWidth: spacingProps.border,
+      className: buttonClassName,
+      disabled,
+      focusRing: FOCUS_RING_SIZE,
+      h,
+      pl: spacingProps.pl,
+      pr: spacingProps.pr,
+      ref,
+      title: title || ariaLabel,
+      type: BUTTON_TYPE,
+      variant,
+      ...buttonStyles,
+      ...isActiveProps,
+      ...disabledProps,
+      ...aliasedProps,
+      ...rest,
+    }),
+    [
+      spacingProps,
+      buttonClassName,
+      disabled,
+      h,
+      ref,
+      title,
+      ariaLabel,
+      variant,
+      buttonStyles,
+      isActiveProps,
+      disabledProps,
+      aliasedProps,
+      rest,
+    ],
+  )
 
   return (
-    <ButtonProvider value={context}>
-      <ButtonBase
-        borderWidth={border}
-        className={cs(
-          'vui-button',
-          className,
-          isActive && activeClassName,
-          variantProp ? `vui-button-variant-${variantProp}` : undefined,
-        )}
-        disabled={disabled}
-        focusRing={3}
-        h={h}
-        pl={pl}
-        pr={pr}
-        ref={ref}
-        title={title || ariaLabel}
-        type="button"
-        variant={variant}
-        {...buttonStyles}
-        {...isActiveProps}
-        {...disabledProps}
-        {...aliasedProps}
-        {...rest}
-      >
+    <ButtonProvider value={contextValue}>
+      <ButtonBase {...finalProps}>
         {hasState && (
-          <StateWrapper onClick={(e: { stopPropagation: () => void }) => e.stopPropagation()} {...stateProps}>
+          <StateWrapper onClick={handleStateClick} {...stateProps}>
             <ButtonIcon m="auto" {...stateIconProps} />
           </StateWrapper>
         )}
 
         <Content>
-          {isString(icon) ? <ButtonIcon name={icon} /> : icon}
+          {IconRenderer.main}
           {!icon && (
             <>
-              {isLoading ? (
-                <ButtonIcon mr={iconLeftMr} {...loadingIconProps} />
-              ) : isString(iconLeft) ? (
-                <ButtonIcon mr={iconLeftMr} name={iconLeft} />
-              ) : (
-                iconLeft
-              )}
-
-              {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
-
-              {isString(iconRight) ? (
-                <ButtonIcon ml={!children && !text ? 0 : iconRightMl} name={iconRight} />
-              ) : (
-                iconRight
-              )}
+              {IconRenderer.left}
+              {IconRenderer.content}
+              {IconRenderer.right}
             </>
           )}
         </Content>

package/src/button/buttons.tsx

@@ -7,11 +7,11 @@ export const AppButton = vui<'button', ButtonProps>((props, ref) => (
 ))
 
 export const BackButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton icon="falArrowLeft" ref={ref} variant="tertiaryDark" {...props} />
+  <IconButton icon="uiArrowLeft" ref={ref} variant="tertiaryDark" {...props} />
 ))
 
 export const CloseButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton icon="falTimes" ref={ref} variant="tertiaryDark" {...props} />
+  <IconButton icon="uiTimes" ref={ref} variant="tertiaryDark" {...props} />
 ))
 
 export const CTAButton = vui<'button', ButtonProps>((props, ref) => (

package/src/button/consts.ts

@@ -11,7 +11,7 @@ export const buttonStateMapping: ButtonStateMapping = {
     variant: 'solidRed',
     iconProps: {
       animation: 'fadeDown',
-      icon: 'falTimesCircle',
+      icon: 'uiTimesCircle',
     },
   },
   loading: {
@@ -22,7 +22,7 @@ export const buttonStateMapping: ButtonStateMapping = {
     variant: 'solidGreen',
     iconProps: {
       animation: 'fadeDown',
-      icon: 'falCheckCircle',
+      icon: 'uiCheckCircle',
     },
   },
 }

package/src/button/theme.ts

@@ -274,6 +274,42 @@ const variants: Record<string, Record<string, Record<string, string>>> = {
       color: 'landGreen.30',
     },
   },
+  menuLight: {
+    container: {
+      bg: '#ffffff',
+      hoverBg: '#D3EEF8',
+      activeBg: '#E9F7FC',
+      hoverActiveBg: '#D3EEF8',
+      disabledBg: '#F8F7F7',
+      borderColor: 'transparent',
+      hoverBorderColor: '#003591',
+      activeBorderColor: '#003591',
+      color: '#1A1A19',
+      hoverColor: '#1A1A19',
+      activeColor: '#003591',
+      disabledColor: '#908D89',
+      disabledBorderColor: 'transparent',
+      disabledOpacity: '1',
+    },
+  },
+  menuDark: {
+    container: {
+      bg: '#0F204B',
+      hoverBg: '#003591',
+      activeBg: '#0041B2',
+      hoverActiveBg: '#003591',
+      disabledBg: '#0F204B',
+      borderColor: 'transparent',
+      hoverBorderColor: '#91FFB4',
+      activeBorderColor: '#91FFB4',
+      color: '#FFFFFF',
+      hoverColor: '#FFFFFF',
+      activeColor: '#91FFBA',
+      disabledColor: '#FFFFFF',
+      disabledBorderColor: 'transparent',
+      disabledOpacity: '1',
+    },
+  },
 }
 
 // buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark

package/src/calendar/components/calendarHeader.tsx

@@ -38,7 +38,7 @@ export const CalendarHeader: FC<Props> = ({
         className="icon"
         disabled={prevDisabled}
         h={size}
-        icon="falChevronLeft"
+        icon="uiChevronLeft"
         onClick={() => onChangeViewItem('prev')}
         size="sm"
         w={size}
@@ -48,7 +48,7 @@ export const CalendarHeader: FC<Props> = ({
         className="icon"
         disabled={nextDisabled}
         h={size}
-        icon="falChevronRight"
+        icon="uiChevronRight"
         onClick={() => onChangeViewItem('next')}
         size="sm"
         w={size}

package/src/chat/chatInput.tsx

@@ -92,7 +92,7 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
   return (
     <Box className={cs('vui-chat-input')} justifyContent="space-between" ref={ref} {...styles?.input} {...rest}>
       {!!onNewTopicClick && status === ChatInputStatus.Default && (
-        <Button animation="fadeUp" icon="falPlus" mr={1} onClick={() => onNewTopicClick?.()} />
+        <Button animation="fadeUp" icon="uiPlus" mr={1} onClick={() => onNewTopicClick?.()} />
       )}
       {status === ChatInputStatus.Processing ? (
         <Box borderColor={inputColors.border} borderWidth={1} center justifyContent="flex-start" py={0.5} w="100%">

package/src/chat/chatMessage.tsx

@@ -6,7 +6,7 @@ import { cs } from '../utils'
 
 const defaultAvatar: AvatarProps = {
   variant: 'solidDarkBlue',
-  icon: 'cubVeracity',
+  icon: 'brandVeracity',
 }
 
 /**

package/src/checkbox/checkbox.tsx

@@ -67,9 +67,9 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
     className,
     defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,
     disabled,
-    icon: iconProp = 'cuiCheckboxUnselected',
-    iconChecked = 'cuiCheckboxSelected',
-    iconIndeterminate = 'cuiCheckboxIndeterminate',
+    icon: iconProp = 'uiCheckboxUnselected',
+    iconChecked = 'uiCheckboxSelected',
+    iconIndeterminate = 'uiCheckboxIndeterminate',
     id,
     inputProps,
     inputRef,

package/src/footer/footer.tsx

@@ -157,7 +157,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                       aria-label={link.text}
                       fontWeight="demi"
                       href={link.url}
-                      iconLeft={<Link.Icon name={`cubCircle${link.text}`} radius="50%" size="xs" />}
+                      iconLeft={<Link.Icon name={`brandCircle${link.text}`} radius="50%" size="xs" />}
                       isExternal
                       key={index}
                       mr={1}
@@ -205,7 +205,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 <Link
                   fontWeight="demi"
                   href={linkedIn ?? defaultLinkedInUrl}
-                  iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="xs" />}
+                  iconLeft={<Link.Icon mr={1} name="brandCircleLinkedIn" radius="50%" size="xs" />}
                   isExternal
                   size={{ _: 'sm', md: 'md' }}
                   {...styles.link}

package/src/footer/footerTrademark.tsx

@@ -21,7 +21,7 @@ export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) =>
         <Link
           fontWeight="demi"
           href={linkedIn ?? defaultLinkedInUrl}
-          iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="sm" />}
+          iconLeft={<Link.Icon mr={1} name="brandCircleLinkedIn" radius="50%" size="sm" />}
           isExternal
           {...styles.link}
         >

package/src/header/headerServices.tsx

@@ -35,7 +35,7 @@ export function HeaderServices(props: HeaderServicesProps) {
         <Menu isLazy={false} offset={[offsetX, 17]} placement="bottom-end" size="lg" {...rest}>
           <Menu.Button
             className="vui-services-trigger"
-            icon="falTh"
+            icon="uiTh"
             ml={1}
             size="lg"
             title="My services"

package/src/header/headerSupport.tsx

@@ -56,7 +56,7 @@ export function HeaderSupport(props: HeaderSupportProps) {
         <Menu.Button
           className="vui-app-info-trigger"
           color={styles.button.color}
-          icon="falQuestionCircle"
+          icon="uiQuestionCircle"
           ml={1}
           size="lg"
           title="Support"

package/src/header/theme.ts

@@ -41,7 +41,7 @@ const variants = {
         activeBorderColor: 'darkBlue.main',
       },
       link: {
-        size: 'lg',
+        size: 'md',
         color: 'darkBlue.main',
         borderColor: 'darkBlue.main',
         hoverColor: 'darkBlue.main',
@@ -109,7 +109,7 @@ const variants = {
         activeBorderColor: 'digiGreen.main',
       },
       link: {
-        size: 'lg',
+        size: 'md',
         color: 'white',
         borderColor: 'digiGreen.main',
         hoverBg: 'seaBlue.25',

package/src/icon/helpers.ts

@@ -6,12 +6,11 @@ import type { GetIconDetailsResult, IconProp } from './icon.types'
 
 const PREFIX_MAP: Record<string, string> = {
   con: 'con',
-  bas: 'base',
   bra: 'brand',
 }
 /** Optimized prefix normalization with constant time lookup */
 function normalizeIconPrefix(prefix: string) {
-  return PREFIX_MAP[prefix] || (prefix.startsWith('ui') ? 'ui' : prefix)
+  return PREFIX_MAP[prefix] || (prefix.startsWith('ui') ? 'fa' : prefix)
 }
 
 /**

package/src/icons/baseIcons/brand/{brandCircleLinkedin.ts → brandCircleLinkedIn.ts}

@@ -2,7 +2,7 @@ import type {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: 'brandCircleLinkedin',
+  name: 'brandCircleLinkedIn',
   oldName: 'cubCircleLinkedIn',
   pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
 } as IconDefinition