@veracity/vui 2.15.3 → 2.16.0

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

@@ -2463,6 +2463,80 @@ declare const defaultTheme: {
                 };
             };
         };
+        StepperIndicator: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                sm: {};
+                md: {};
+            };
+            variants: {
+                active: {
+                    button: {
+                        bg: string;
+                    };
+                    icon: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                completed: {
+                    button: {
+                        bg: string;
+                    };
+                    icon: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                optional: {
+                    button: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                    };
+                    icon: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                pending: {
+                    button: {
+                        bg: string;
+                        color: string;
+                    };
+                    icon: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                error: {
+                    button: {
+                        bg: string;
+                        color: string;
+                    };
+                    icon: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+        StepperVertical: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {};
+                md: {};
+            };
+            variants: {};
+        };
         Spinner: {
             baseStyle: {
                 container: {

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

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

package/dist/esm/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAoHnB;yBA9He,YAAY"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAwHnB;yBAlIe,YAAY"}

package/dist/esm/tutorial/tutorialCard.js

@@ -22,13 +22,13 @@ export function TutorialCard({ actionLabel = 'Action', className, title, readMor
     return (React.createElement(Card, { bg: tutorialColors.bg, className: className, color: tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580 },
         React.createElement(Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' } },
             React.createElement(H4, { color: tutorialColors.color }, title),
-            !isFinalStep && React.createElement(Button, { icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" })),
+            !isFinalStep && (React.createElement(Button, { "aria-label": "close", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))),
         React.createElement(Box, { flex: 5, row: true }, steps?.map?.(s => (React.createElement(TutorialStep, { active: s.key === activeStep, content: s.step.content, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
         React.createElement(Box, { alignItems: "center", justifyContent: "space-between", mt: 0 },
             React.createElement(Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available" },
-                React.createElement(Button, { color: tutorialColors.buttonColor, disabled: isStartStep, icon: "falArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }),
+                React.createElement(Button, { "aria-label": "previous", color: tutorialColors.buttonColor, disabled: isStartStep, icon: "falArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }),
                 React.createElement(Box, { className: "vuiTutorialStepDots" }, steps?.map?.(s => (React.createElement(Icon, { color: s.key === activeStep ? tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: tutorialColors.buttonColor, key: s.key, name: "cusDotFull", onClick: () => setActiveStep(s.key) })))),
-                React.createElement(Button, { color: tutorialColors.buttonColor, disabled: isFinalStep, icon: "falArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })),
+                React.createElement(Button, { "aria-label": "next", color: tutorialColors.buttonColor, disabled: isFinalStep, icon: "falArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })),
             (showSkipButton || isFinalStep || !!onAction) && (React.createElement(Box, { alignItems: "center", justifyContent: "space-between" },
                 showSkipButton && !isFinalStep && (React.createElement(Button, { mr: 2, onClick: onDismiss, variant: "primaryLight" }, "Skip")),
                 isFinalStep && (React.createElement(Button, { mr: 2, onClick: onFinish, variant: "primaryLight" }, "Finish")),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.15.3",
+  "version": "2.16.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/avatar/avatar.tsx

@@ -124,7 +124,7 @@ function LazyImageOrDefault({
   ) : icon ? (
     <Icon name={icon} size={iconSize} />
   ) : initials ? (
-    <>initials</>
+    <>{initials}</>
   ) : (
     <Icon name="falUser" size={iconSize} />
   )

package/src/button/button.tsx

@@ -100,10 +100,6 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   let ariaLabel = ''
 
   if (title) ariaLabel = title
-  else {
-    if (isString(text)) ariaLabel = text
-    else if (isReactText(text)) ariaLabel = text.toString()
-  }
 
   const disabledProps = disabled
     ? {

package/src/button/theme.ts

@@ -142,7 +142,6 @@ const variants = {
       activeColor: 'buttonTypeTertiaryActiveTextColorLight'
     }
   },
-
   solidBlue: {
     container: {
       bg: 'seaBlue.main',
@@ -159,7 +158,6 @@ const variants = {
       activeBorderColor: 'seaBlue.35'
     }
   },
-
   blueOutlined: {
     container: {
       bg: 'white',
@@ -174,7 +172,6 @@ const variants = {
       activeBorderColor: 'seaBlue.35'
     }
   },
-
   blueText: {
     container: {
       bg: 'transparent',
@@ -190,7 +187,6 @@ const variants = {
       activeBorderColor: 'skyBlue.90'
     }
   },
-
   solidGreen: {
     container: {
       bg: 'landGreen.35',
@@ -206,7 +202,6 @@ const variants = {
       activeBorderColor: 'landGreen.41'
     }
   },
-
   solidRed: {
     container: {
       bg: 'energyRed.45',
@@ -223,7 +218,6 @@ const variants = {
       activeBorderColor: 'energyRed.50'
     }
   },
-
   // subtleBlue is an internal variant, used in notification; based on primaryDark
   subtleBlue: {
     container: {
@@ -241,7 +235,6 @@ const variants = {
       activeBorderColor: 'skyBlue.85'
     }
   },
-
   // subtleRed is an internal variant, used in notification; based on primaryDark
   subtleRed: {
     container: {
@@ -255,7 +248,6 @@ const variants = {
       color: 'energyRed.45'
     }
   },
-
   // subtleYellow is an internal variant, used in notification; based on primaryDark
   subtleYellow: {
     container: {
@@ -269,7 +261,6 @@ const variants = {
       color: 'sunflower.15'
     }
   },
-
   // subtleGreen is an internal variant, used in notification; based on primaryDark
   subtleGreen: {
     container: {
@@ -283,7 +274,6 @@ const variants = {
       color: 'landGreen.30'
     }
   },
-
   // buttonGroupRounded is an internal variant, used in buttonGroup;
   buttonGroupRounded: {
     container: {

package/src/calendar/calendar.styles.ts

@@ -16,12 +16,13 @@ export const current = css`
 `
 
 export const isDisabled = css`
-  color: ${th.color('sandstone.main')} !important;
+  background-color: ${th.color('sandstone.97')} !important;
+  color: ${th.color('sandstone.55')} !important;
   cursor: not-allowed;
 `
 
 export const isHidden = css`
-  color: ${th.color('darkBlue.75')} !important;
+  color: ${th.color('sandstone.55')} !important;
 `
 
 export const isToday = css`

package/src/calendar/components/calendarHeader.tsx

@@ -34,6 +34,7 @@ export const CalendarHeader: FC<Props> = ({
     </Box>
     <Box className="vui-calendar-header-right" flex="1" justify="flex-end">
       <IconButton
+        aria-label="previous"
         className="icon"
         disabled={prevDisabled}
         h={size}
@@ -43,6 +44,7 @@ export const CalendarHeader: FC<Props> = ({
         w={size}
       />
       <IconButton
+        aria-label="next"
         className="icon"
         disabled={nextDisabled}
         h={size}

package/src/copyToClipboard/copyToClipboard.tsx

@@ -21,6 +21,7 @@ export const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref)
 
   return (
     <Button
+      aria-label="copy to clipboard"
       className={cs('vui-copy-to-clipboard', className)}
       disabled={disabled || isCopyDisabled}
       icon="falCopy"

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useReducer } from 'react'
 import { ThemeProvider } from 'styled-components'
 
-import PopoverStyle from '../../popover/popoverStyle'
+import PopoverStyle from '../../popover/globalStyle'
 import { Portal } from '../../portal'
 import defaultTheme, { VuiTheme } from '../../theme'
 import { Toaster } from '../../toast'

package/src/footer/footer.tsx

@@ -161,6 +161,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 <Box>
                   {applicationSocialLinks?.map((link, index) => (
                     <Link
+                      aria-label={link.text}
                       fontWeight="demi"
                       href={link.url}
                       iconLeft={<Link.Icon name={`cubCircle${link.text}`} radius="50%" size="xs" />}

package/src/header/headerAccountUserInfo.tsx

@@ -61,7 +61,7 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
                 color={localColor}
                 fontSize={isApplication ? '12px' : 'inherit'}
                 isTruncated
-                opacity={0.5}
+                opacity={0.65}
                 pr={1}
                 title={role}
               >

package/src/index.ts

@@ -43,6 +43,8 @@ export * from './radio'
 export * from './select'
 export * from './sidemenu'
 export * from './skeleton'
+export * from './stepperIndicator'
+export * from './stepperVertical'
 export * from './spinner'
 export * from './svg'
 export * from './switch'

package/src/menu/menuList.tsx

@@ -45,4 +45,6 @@ MenuList.Icon = List.Icon
 MenuList.Item = List.Item
 MenuList.Text = List.Text
 
+MenuList.displayName = 'MenuList'
+
 export default MenuList

package/src/notification/notification.tsx

@@ -66,7 +66,14 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
         {action}
 
         {onClose && (
-          <NotificationButton alignSelf={alignSelf} icon="falTimes" onClick={onClose} variant={variant} w="32px" />
+          <NotificationButton
+            alignSelf={alignSelf}
+            aria-label="close"
+            icon="falTimes"
+            onClick={onClose}
+            variant={variant}
+            w="32px"
+          />
         )}
       </Box>
     </NotificationProvider>

package/src/pagination/paginationNavigation.tsx

@@ -19,13 +19,13 @@ export const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {
       {children ??
         items.map(item => (
           <Fragment key={item}>
-            {item === 'previous' && <PaginationPrevNext direction="previous" />}
+            {item === 'previous' && <PaginationPrevNext aria-label="previous" direction="previous" />}
 
             {isNumber(item) && <PaginationButton page={item} />}
 
             {isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}
 
-            {item === 'next' && <PaginationPrevNext direction="next" />}
+            {item === 'next' && <PaginationPrevNext aria-label="next" direction="next" />}
           </Fragment>
         ))}
     </Box>

package/src/popover/index.ts

@@ -3,7 +3,6 @@ export * from './context'
 export { default, default as Popover } from './popover'
 export * from './popover.types'
 export { default as PopoverContent } from './popoverContent'
-export { default as PopoverStyle } from './popoverStyle'
 export { default as PopoverTrigger } from './popoverTrigger'
 export { default as usePopover } from './usePopover'
 export * from './usePopover.types'

package/src/popover/popoverContent.tsx

@@ -17,7 +17,7 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
 
   return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
-    <v.div ring={0}>
+    <v.div className="vui-popoverContainer" ring={0}>
       <Box
         bg="white"
         borderRadius="md"

package/src/sidemenu/sidemenu.tsx

@@ -81,6 +81,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
         </Box>
         <Box className="vui-sidemenu-bottom" w="100%" {...styles.bottom}>
           <Button
+            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}
             borderRadius={0}
             justifyContent={justifyContent}
             minH={size === 'lg' ? '56px' : '40px'}

package/src/sidemenu/sidemenuItem.tsx

@@ -91,6 +91,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
           {innerContent}
           {hasChildrenExpanded && (
             <Button
+              aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}
               className="vui-sidemenu-item-expand"
               icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}
               mr={1}

package/src/stepperIndicator/index.ts

@@ -0,0 +1,3 @@
+export * from './stepperIndicator'
+export { default } from './stepperIndicator'
+export * from './stepperIndicator'

package/src/stepperIndicator/stepperIndicator.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Box from '../box'
+import Button from '../button'
+import { useStyleConfig, vui } from '../core'
+import Icon from '../icon'
+import T from '../t'
+import { cs } from '../utils'
+import { StepperIndicatorProps } from './stepperIndicatorTypes'
+
+const Content = ({ number, variant, size }: any) => {
+  if (typeof number === 'undefined') return null
+  if (variant === 'completed') return <Icon name="falCheck" size={size} />
+  if (variant === 'error') return <Icon name="falTimes" size={size} />
+  return <T fontWeight={600}>{number}</T>
+}
+
+/**
+ * Implements stepper indicator **
+ */
+export const StepperIndicator = vui<'div', StepperIndicatorProps>((props, ref) => {
+  const { icon, number, className, size, variant, ...rest } = props
+  const styles = useStyleConfig('StepperIndicator', props)
+
+  return icon ? (
+    <Button
+      className={cs('vui-stepperIndicator', className)}
+      icon={icon}
+      ref={ref}
+      {...styles.icon}
+      {...rest}
+      isRound
+      minW="auto"
+      pointerEvents="none"
+      size={size}
+    />
+  ) : (
+    <Button
+      className={cs('vui-stepperIndicator', className)}
+      ref={ref}
+      {...styles.button}
+      {...rest}
+      isRound
+      minW="auto"
+      outline="6px solid white"
+      pointerEvents="none"
+      position="relative"
+      size={size}
+    >
+      <Box mx={0.5} position="relative" />
+      <Box fontSize={`${size === 'md' ? 16 : 13}px`} mx={0.5} position="absolute">
+        <Content number={number} size={size} variant={variant} />
+      </Box>
+    </Button>
+  )
+})
+
+StepperIndicator.displayName = 'StepperIndicator'
+
+export default StepperIndicator

package/src/stepperIndicator/stepperIndicatorTypes.ts

@@ -0,0 +1,12 @@
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type StepperIndicatorProps = SystemProps &
+  ThemingProps<'StepperIndicator'> & {
+    icon?: IconProp
+    className?: string
+    number?: number
+  }
+
+export type StepperIndicatorVariant = 'active' | 'completed' | 'optional' | 'pending' | 'error'

package/src/stepperIndicator/theme.ts

@@ -0,0 +1,70 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'active'
+}
+
+const sizes = {
+  sm: {},
+  md: {}
+}
+
+const variants = {
+  active: {
+    button: {
+      bg: 'seaBlue.main'
+    },
+    icon: {
+      bg: 'white',
+      color: 'seaBlue.main'
+    }
+  },
+  completed: {
+    button: {
+      bg: 'landGreen.41'
+    },
+    icon: {
+      bg: 'white',
+      color: 'landGreen.41'
+    }
+  },
+  optional: {
+    button: {
+      bg: 'white',
+      borderColor: 'seaBlue.45',
+      color: 'seaBlue.45'
+    },
+    icon: {
+      bg: 'white',
+      color: 'seaBlue.45'
+    }
+  },
+  pending: {
+    button: {
+      bg: 'sandstone.90',
+      color: 'sandstone.45'
+    },
+    icon: {
+      bg: 'white',
+      color: 'sandstone.45'
+    }
+  },
+  error: {
+    button: {
+      bg: 'energyRed.45',
+      color: 'white'
+    },
+    icon: {
+      bg: 'white',
+      color: 'energyRed.45'
+    }
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/stepperVertical/consts.ts

@@ -0,0 +1,21 @@
+export const variantColor = {
+  active: 'seaBlue.main',
+  completed: 'landGreen.41',
+  optional: 'seaBlue.45',
+  pending: 'sandstone.90',
+  error: 'energyRed.main'
+}
+
+export const titleColor = {
+  active: 'sandstone.10',
+  completed: 'sandstone.10',
+  optional: 'sandstone.10',
+  pending: 'sandstone.55',
+  error: 'energyRed.main'
+}
+
+export const boldTitles = ['active', 'error']
+
+export const stepClassName = 'vui-stepVertical'
+
+export const tailClassName = stepClassName + 'Tail'

package/src/stepperVertical/context.ts

@@ -0,0 +1,5 @@
+import { createContext, Dict } from '../utils'
+
+const [StepperVerticalProvider, useStepperVerticalContext] = createContext<Dict>({ isOptional: true })
+
+export { StepperVerticalProvider, useStepperVerticalContext }

package/src/stepperVertical/index.ts

@@ -0,0 +1,4 @@
+export * from './stepperVertical'
+export * from './stepVertical'
+export { default } from './stepperVertical'
+export * from './stepperVerticalTypes'

package/src/stepperVertical/stepVertical.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { styled, vui } from '../core'
+import { StepperIndicator } from '../stepperIndicator'
+import { cs } from '../utils'
+import { stepClassName } from './consts'
+import { useStepperVerticalContext } from './context'
+import { StepVerticalProps } from './stepperVerticalTypes'
+import StepVerticalTail from './stepVerticalTail'
+import StepVerticalTitle from './stepVerticalTitle'
+
+export const StepVerticalBase = styled.divBox`
+  display: flex;
+  position: relative;
+  width: 100%;
+`
+
+/**
+ * Implements a vertical step component
+ */
+export const StepVertical = vui<'div', StepVerticalProps>(
+  ({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
+    const context = useStepperVerticalContext()
+    const size = context?.size || propSize
+    return (
+      <StepVerticalBase className={cs(stepClassName, className)} ref={ref}>
+        <StepVerticalTail size={size} variant={variant as any} />
+        <Box flex={`0 0 ${size === 'md' ? 40 : 30}px`}>
+          <StepperIndicator icon={icon} number={number} size={size} variant={variant} />
+        </Box>
+        <Box flex="1" flexDirection="column">
+          {!!title && (
+            <StepVerticalTitle size={size} variant={variant as any}>
+              {title}
+            </StepVerticalTitle>
+          )}
+          {!!description && (
+            <Box color="sandstone.45" fontSize={`${size === 'md' ? 14 : 12}px`}>
+              {description}
+            </Box>
+          )}
+          <Box>{children}</Box>
+        </Box>
+      </StepVerticalBase>
+    )
+  }
+)
+
+StepVertical.displayName = 'StepVertical'
+
+export default StepVertical