How to use the ic-snacks.colors.GRAY_46 function in ic-snacks

import {colors} from 'ic-snacks'

export const container = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  height: 40,
  width: '100%',
  cursor: 'pointer',

  ':hover': {}
}

export const icon = {
  color: colors.GRAY_46,
  padding: 4,
  borderRadius: 3,
  transition: 'transform 150ms',
}

export const iconOpen = {
  transform: 'rotate(-180deg)',
}

export const iconHover = {
  background: colors.GRAY_93,
}

export const navGroupTitle = {
  fontSize: 14,
  fontWeight: 600,

}

export const subtitle = {
  ...gray20,
  ...spaced,
  ...spacing.MARGIN_BOTTOM_LG,
  fontSize: 20,
  lineHeight: '34px',
}

export const bodyTitle2 = {
  ...spaced,
  fontSize: 16,
  fontWeight: 700,
  lineHeight: '20px',
  color: colors.GRAY_46,
  textTransform: 'uppercase',
}

export const body = {
  ...spaced,
  ...spacing.MARGIN_BOTTOM_SM,
  fontSize: 16,
  lineHeight: '20px',
}

}

export const selected = {
  ...container,
  borderWidth: 2,
  borderStyle: 'solid',
}

export const swatch = {
  flexBasis: 125,
}

export const info = {
  fontSize: 16,
  fontWeight: 600,
  color: colors.GRAY_46,
  textAlign: 'center',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  flex: 1,
}

groups[group].map(icon => (
                <div style="{{">
                  </div>}
                  &gt;
                    {icon}