@veracity/vui 2.8.4 → 2.9.0-beta.0

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

@@ -1,15 +1,15 @@
 import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
 /** Type for a a no-op function stub. */
-export declare type AnyFunction = (...args: any[]) => any;
+export type AnyFunction = (...args: any[]) => any;
 /** Type for any number without breaking autocompletion. */
-export declare type AnyNumber = number & {};
+export type AnyNumber = number & {};
 /** Type for any string without breaking autocompletion. */
-export declare type AnyString = string & {};
+export type AnyString = string & {};
 /** Type of change event defaulted to input element */
-export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
+export type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
 /** Type of change event handler defaulted to input element */
-export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
-export declare type CreateContextOptions = {
+export type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
+export type CreateContextOptions = {
     /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
     /** Accessing context outside of provider won't throw error */
@@ -18,32 +18,32 @@ export declare type CreateContextOptions = {
     name?: string;
 };
 /** Return value of the createContext function. */
-export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
+export type CreateContextReturn<T> = [React.Provider<T>, () => T];
 /** Basic dictionary typing. */
-export declare type Dict<T = any> = Record<string, T>;
+export type Dict<T = any> = Record<string, T>;
 /** Classic application's environment names. */
-export declare type Environment = 'Prod' | 'Stag' | 'Test';
+export type Environment = 'Prod' | 'Stag' | 'Test';
 /** Type of blur/focus event defaulted to any html element */
-export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
+export type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
 /** Type of blur/focus event handler defaulted to any html element */
-export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
+export type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
 /** Type of keyboard event defaulted to any html element */
-export declare type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
+export type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
 /** Type of keyboard event handler defaulted to any html element */
-export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
+export type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
 /** Type of mouse event defaulted to any html element */
-export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
+export type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
 /** Type of mouse event handler defaulted to any html element */
-export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
+export type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
 /** Merges component/element base props and custom props */
-export declare type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
+export type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
 /** Merges component/element base props and custom props including ref */
-export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
+export type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
 /** Render props of component's children. */
-export declare type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
+export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
 /** Merges props definitions, overriding source keys */
-export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
-export declare type Sort<T = string> = {
+export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
+export type Sort<T = string> = {
     key: T;
     order: 'asc' | 'desc';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.8.4",
+  "version": "2.9.0-beta.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",
@@ -26,8 +26,8 @@
     "@xstyled/styled-components": "2.5.0",
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
-    "react-focus-lock": "2.8.1",
-    "styled-components": "5.3.3",
+    "react-focus-lock": "2.9.4",
+    "styled-components": "5.3.6",
     "tippy.js": "6.3.7"
   },
   "peerDependencies": {

package/src/accordion/accordion.tsx

@@ -6,6 +6,7 @@ import { cs, filterUndefined } from '../utils'
 import { AccordionItemProps, AccordionProps } from './accordion.types'
 import AccordionItem from './accordionItem'
 import AccordionItemHorizontal from './accordionItemHorizontal'
+import { borderColor, defaultItemTitleHoverBg } from './consts'
 import { AccordionProvider } from './context'
 
 export const AccordionBase = styled.divBox`
@@ -16,21 +17,39 @@ export const AccordionBase = styled.divBox`
 
 /** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui<'div', AccordionProps>((props, ref) => {
-  const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size, ...rest } = props
+  const {
+    children,
+    className,
+    itemTitleHoverBg = defaultItemTitleHoverBg,
+    items,
+    orientation = 'vertical',
+    iconPosition = 'end',
+    size,
+    ...rest
+  } = props
   const styles = useStyleConfig('Accordion', props)
 
   const context = useMemo(() => filterUndefined({ size }), [size])
 
   const aliasedProps = filterUndefined<AccordionProps>({})
 
+  const isVertical = orientation === 'vertical'
   return (
     <AccordionProvider value={context}>
-      <AccordionBase className={cs('vui-accordion', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-        {orientation === 'vertical' ? (
+      <AccordionBase
+        borderLeft={isVertical ? undefined : `1px solid ${borderColor}`}
+        borderTop={isVertical ? `1px solid ${borderColor}` : undefined}
+        className={cs('vui-accordion', className)}
+        ref={ref}
+        {...styles}
+        {...aliasedProps}
+        {...rest}
+      >
+        {isVertical ? (
           <List w="100%">
             {items
               ? items?.map?.((item: AccordionItemProps, key: number) => (
-                  <AccordionItem itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
+                  <AccordionItem iconPosition={iconPosition} itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
                 ))
               : children}
           </List>

package/src/accordion/accordion.types.ts

@@ -5,15 +5,18 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AccordionOrientation = 'vertical' | 'horizontal'
+export type AccordionIconPosition = 'end' | 'start'
 
 export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
-    /** Items AccordionOrientation @default 'vertical' */
+    /** Items AccordionOrientation @default "vertical" */
     orientation?: AccordionOrientation
-    /** Hover color for the item title @default "blue.10" */
+    /** Hover color for the item title @default "skyBlue.95" */
     itemTitleHoverBg?: string
     /** Collection of Accordion items */
     items?: AccordionItemProps[]
+    /** Icon position for vertical orientation @default "end" */
+    iconPosition?: AccordionIconPosition
   }
 
 export type AccordionItemId = string | number
@@ -36,7 +39,9 @@ export type AccordionItemProps = ListItemProps & {
   contentPx?: string | number
   /** Collapsed state */
   collapsed?: boolean
-  /** Hover color for the item title @default "blue.10" */
+  /** The icon position @default "end" */
+  iconPosition?: AccordionIconPosition
+  /** Hover color for the item title @default "skyBlue.95" */
   itemTitleHoverBg?: string
   /** Title */
   title?: string | ReactNode

package/src/accordion/accordionItem.tsx

@@ -6,6 +6,7 @@ import { ListItem } from '../list'
 import { cs } from '../utils'
 import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
+import { borderColor, defaultItemTitleHoverBg, expandedItemTitleHoverBg } from './consts'
 import { useAccordionContext } from './context'
 
 /** An accordion item. */
@@ -17,7 +18,8 @@ export const AccordionItem = (props: AccordionItemProps) => {
     content,
     disabled,
     id,
-    itemTitleHoverBg = 'blue.10',
+    iconPosition = 'end',
+    itemTitleHoverBg = defaultItemTitleHoverBg,
     title,
     onToggle,
     ...rest
@@ -37,9 +39,12 @@ export const AccordionItem = (props: AccordionItemProps) => {
     }
   }
 
+  const isIconStart = iconPosition === 'start'
+  const isIconEnd = iconPosition === 'end'
+
   return (
     <ListItem
-      borderBottom="1px solid grey.40"
+      borderBottom={`1px solid ${borderColor}`}
       className={cs('vui-accordion-item', className)}
       disabled={disabled}
       flexDirection="column"
@@ -51,17 +56,26 @@ export const AccordionItem = (props: AccordionItemProps) => {
     >
       <Box
         cursor={disabled ? 'not-allowed' : 'pointer'}
-        hoverBg={itemTitleHoverBg}
-        justifyContent="space-between"
+        hoverBg={disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : expandedItemTitleHoverBg}
+        justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}
         onClick={toggle}
         px={2}
         w="100%"
         {...styles.item}
       >
-        <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'}>{title}</Box>
-        <Box>
-          <AccordionItemArrow collapsed={collapsedInternal} />
+        {isIconStart && (
+          <Box>
+            <AccordionItemArrow collapsed={collapsedInternal} />
+          </Box>
+        )}
+        <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'} ml={isIconStart ? 2 : 0}>
+          {title}
         </Box>
+        {isIconEnd && (
+          <Box>
+            <AccordionItemArrow collapsed={collapsedInternal} />
+          </Box>
+        )}
       </Box>
       {!collapsedInternal && (
         <Box mb={2} mt={2} px={2} py={1} w="100%">

package/src/accordion/accordionItemArrow.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import Icon from '../icon'
 import { AccordionItemArrowProps } from './accordion.types'
+import { iconColor } from './consts'
 
 const names = {
   horizontal: {
@@ -15,7 +16,7 @@ const names = {
 }
 
 const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }: AccordionItemArrowProps) => (
-  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
+  <Icon color={iconColor} name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
 )
 
 export default React.memo(AccordionItemArrow)

package/src/accordion/accordionItemHorizontal.tsx

@@ -5,6 +5,7 @@ import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
 import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
+import { borderColor, defaultItemTitleHoverBg, expandedItemTitleHoverBg } from './consts'
 import { useAccordionContext } from './context'
 
 /** An accordion item (horizontal AccordionOrientation). */
@@ -17,7 +18,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
     disabled,
     id,
     contentPx,
-    itemTitleHoverBg = 'blue.10',
+    itemTitleHoverBg = defaultItemTitleHoverBg,
     title,
     onToggle,
     ...rest
@@ -46,7 +47,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
     <Box
       alignItems={collapsedInternal ? 'normal' : 'baseline'}
       bg={disabled ? 'disabled.bg' : undefined}
-      borderRight="1px solid grey.40"
+      borderRight={`1px solid ${borderColor}`}
       className={cs('vui-accordion-item-horizontal', className)}
       color={disabled ? 'disabled.color' : undefined}
       column
@@ -62,7 +63,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
       <Box
         {...styles.item}
         cursor={cursor}
-        hoverBg={itemTitleHoverBg}
+        hoverBg={disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : expandedItemTitleHoverBg}
         justifyContent="space-between"
         minH={styles.item.minH}
         onClick={toggle}

package/src/accordion/consts.ts

@@ -0,0 +1,7 @@
+export const expandedItemTitleHoverBg = 'skyBlue.90'
+
+export const defaultItemTitleHoverBg = 'skyBlue.95'
+
+export const borderColor = 'sandstone.main'
+
+export const iconColor = 'sandstone.10'

package/src/button/button.tsx

@@ -24,7 +24,6 @@ const StateWrapper = styled.span`
 
 export const ButtonBase = styled.buttonBox<ButtonProps>`
   align-items: center;
-  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -132,7 +131,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     : {}
 
   const aliasedProps = filterUndefined({
-    borderRadius: isRound ? h / 2 : 0,
+    borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
     boxShadow: isElevated ? '2' : undefined,
     minW: icon ? 0 : undefined,
     pointerEvents: hasState ? 'none' : undefined,
@@ -144,7 +143,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
       <ButtonBase
         aria-label={ariaLabel}
         borderWidth={border}
-        className={cs('vui-button', className, isActive && activeClassName)}
+        className={cs('vui-button', className, isActive && activeClassName, `vui-button-variant-${variantProp}`)}
         disabled={disabled}
         focusRing={3}
         h={h}

package/src/button/theme.ts

@@ -282,6 +282,23 @@ const variants = {
       activeBg: 'landGreen.85',
       color: 'landGreen.30'
     }
+  },
+
+  // buttonGroupRounded is an internal variant, used in buttonGroup;
+  buttonGroupRounded: {
+    container: {
+      bg: 'white',
+      borderColor: 'sandstone.79',
+      color: 'sandstone.10',
+      hoverBg: 'seaBlue.20',
+      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+      hoverColor: 'white',
+      activeBg: 'seaBlue.35',
+      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+      activeColor: 'white',
+      borderRadius: 'round',
+      marginRight: '22px'
+    }
   }
 }
 

package/src/buttonGroup/buttonGroup.tsx

@@ -6,7 +6,7 @@ import { ButtonGroupProps } from './buttonGroup.types'
 import { ButtonGroupProvider } from './context'
 import { getInnerBorderColor } from './helpers'
 
-export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorderColor: string }>`
+export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
   display: flex;
 
   // Border color between Buttons
@@ -16,23 +16,19 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
 
   // First Button
   > *:first-of-type:not(:last-of-type) {
-    border-bottom-right-radius: 0;
     border-right-width: 1px;
-    border-top-right-radius: 0;
   }
 
   // Middle Buttons
   > *:not(:first-of-type):not(:last-of-type) {
     border-left-width: 0px;
-    border-radius: 0;
     border-right-width: 1px;
   }
 
   // Last Button
   > *:not(:first-of-type):last-of-type {
-    border-bottom-left-radius: 0;
     border-left-width: 0px;
-    border-top-left-radius: 0;
+    margin-right: 0;
   }
 
   // Border color
@@ -42,9 +38,22 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
   }
 
   //
-  > .${activeClassName} {
+  > .${activeClassName}.vui-button-variant-secondaryDark {
     background-color: ${p => th.color('skyBlue.90')};
   }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded {
+    background-color: ${p => th.color('seaBlue.main')};
+    color: ${p => th.color('white')};
+  }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
+    background-color: ${p => th.color('seaBlue.20')};
+  }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {
+    background-color: ${p => th.color('seaBlue.35')};
+  }
 `
 
 /**
@@ -52,14 +61,22 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
-  const { className, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props
+  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props
 
-  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
+  const context = useMemo(
+    () =>
+      filterUndefined({
+        disabled,
+        size,
+        variant: variant === 'default' ? 'secondaryDark' : 'buttonGroupRounded'
+      }),
+    [disabled, size, variant]
+  )
 
   return (
     <ButtonGroupProvider value={context}>
       <ButtonGroupBase
-        className={cs('vui-buttonGroup', className)}
+        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}
         {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
         {...rest}
       />

package/src/buttonGroup/buttonGroup.types.ts

@@ -9,4 +9,6 @@ export type ButtonGroupProps = SystemProps &
     disabled?: boolean
     /** Border color between the buttons. */
     innerBorderColor?: string
+    /** variant of the button-group. */
+    variant?: string
   }

package/src/dialog/dialogHeader.tsx

@@ -37,7 +37,7 @@ export const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {
         <>
           {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}
 
-          {isJsx(title) ? title : title && <DialogTitle {...title} />}
+          {isJsx(title) ? title : title && <DialogTitle {...(title as any)} />}
 
           {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}
         </>

package/src/header/theme.ts

@@ -42,7 +42,9 @@ const variants = {
       },
       link: {
         color: 'darkBlue.main',
-        borderColor: 'darkBlue.main'
+        borderColor: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
+        activeColor: 'darkBlue.main'
       }
     },
     logo: {
@@ -54,16 +56,21 @@ const variants = {
       color: 'darkBlue.main'
     },
     mobileToggle: {
-      color: 'darkBlue.main'
+      color: 'darkBlue.main',
+      hoverColor: 'darkBlue.main',
+      activeColor: 'darkBlue.main'
     },
     notifications: {
       container: {
-        color: 'darkBlue.main'
+        color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main'
       }
     },
     services: {
       button: {
-        color: 'darkBlue.main'
+        color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
+        activeColor: 'darkBlue.main'
       },
       list: {
         variant: 'blue'
@@ -102,7 +109,11 @@ const variants = {
       },
       link: {
         color: 'white',
-        borderColor: 'digiGreen.main'
+        borderColor: 'digiGreen.main',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
+        activeColor: 'white'
       }
     },
     logo: {
@@ -117,12 +128,19 @@ const variants = {
       top: '100%'
     },
     mobileToggle: {
-      color: 'white'
+      color: 'white',
+      hoverBg: 'seaBlue.25',
+      hoverColor: 'white',
+      activeBg: 'seaBlue.35',
+      activeColor: 'white'
     },
     notifications: {
       container: {
         variant: 'solid',
         color: 'white',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
         borderColor: 'transparent'
       },
       icon: {
@@ -131,7 +149,11 @@ const variants = {
     },
     services: {
       button: {
-        color: 'white'
+        color: 'white',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
+        activeColor: 'white'
       },
       list: {
         variant: 'blue'

package/src/heading/heading.types.ts

@@ -12,7 +12,7 @@ export type HeadingProps = SystemProps &
     /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration']
     /** Displays given text if no children are provided. */
-    text?: React.ReactText
+    text?: React.ReactNode
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight']
   }

package/src/list/listDivider.tsx

@@ -10,7 +10,11 @@ export const ListDivider = vui<'hr', DividerProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('List', useListContext())
 
-  return <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />
+  return (
+    <li>
+      <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />
+    </li>
+  )
 })
 
 export default ListDivider

package/src/list/listHeading.tsx

@@ -6,23 +6,25 @@ import { cs } from '../utils'
 import { useListContext } from './context'
 
 /** Displays a heading within the List. */
-export const ListHeading = vui<'span', TProps>((props, ref) => {
+export const ListHeading = vui<'li', TProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('List', useListContext())
 
   return (
-    <T
-      className={cs('vui-listHeading', className)}
-      display="inline-block"
-      px={2}
-      py={1}
-      ref={ref}
-      size="sm"
-      textTransform="uppercase"
-      weight="medium"
-      {...styles.heading}
-      {...rest}
-    />
+    <li>
+      <T
+        className={cs('vui-listHeading', className)}
+        display="inline-block"
+        px={2}
+        py={1}
+        ref={ref}
+        size="sm"
+        textTransform="uppercase"
+        weight="medium"
+        {...styles.heading}
+        {...rest}
+      />
+    </li>
   )
 })
 

package/src/list/theme.ts

@@ -7,7 +7,7 @@ const baseStyle = {
     px: 2
   },
   heading: {
-    color: 'sandstone.60'
+    color: 'sandstone.45'
   }
 }