diff --git a/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormModal.js b/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormModal.js
index 415f61c2d2d..853b9bb4953 100644
--- a/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormModal.js
+++ b/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormModal.js
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { Form } from 'formik'
 import styled, { css } from 'styled-components'
 
-import { FS_BODY_1, BUTTON_TYPE_SUBMIT } from '@opentrons/components'
+import { FONT_SIZE_BODY_1, BUTTON_TYPE_SUBMIT } from '@opentrons/components'
 import { ScrollableAlertModal } from '../../../modals'
 import { TextField } from './TextField'
 import { KeyFileField } from './KeyFileField'
@@ -30,7 +30,7 @@ const StyledForm: StyledComponent<
   {||},
   typeof Form
 > = styled(Form)`
-  ${FS_BODY_1}
+  font-size: ${FONT_SIZE_BODY_1};
   display: table;
   width: 80%;
   margin-top: 0.5rem;
diff --git a/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormRow.js b/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormRow.js
index 80ee9c76b64..16576b8fb42 100644
--- a/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormRow.js
+++ b/app/src/components/RobotSettings/SelectNetwork/ConnectModal/FormRow.js
@@ -2,7 +2,7 @@
 // presentational components for the wifi connect form
 import * as React from 'react'
 import styled from 'styled-components'
-import { FW_SEMIBOLD } from '@opentrons/components'
+import { FONT_WEIGHT_SEMIBOLD } from '@opentrons/components'
 
 import type { StyledComponent } from 'styled-components'
 
@@ -20,7 +20,7 @@ const StyledLabel: StyledComponent<{||}, {||}, HTMLLabelElement> = styled.label`
   display: table-cell;
   padding-right: 1rem;
   text-align: right;
-  ${FW_SEMIBOLD}
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
 `
 
 const StyledInputWrapper: StyledComponent<
diff --git a/babel.config.js b/babel.config.js
index 0c84de2b0e3..454d413fb6a 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -12,7 +12,9 @@ module.exports = {
     },
     test: {
       plugins: [
-        'babel-plugin-styled-components',
+        // NOTE(mc, 2020-05-08): disable ssr, displayName to fix toHaveStyleRule
+        // https://github.com/styled-components/jest-styled-components/issues/294
+        ['babel-plugin-styled-components', { ssr: false, displayName: false }],
         '@babel/plugin-transform-modules-commonjs',
         'babel-plugin-dynamic-import-node',
       ],
diff --git a/components/src/controls/ControlSection.js b/components/src/controls/ControlSection.js
index 0c42c0601f8..200df3de603 100644
--- a/components/src/controls/ControlSection.js
+++ b/components/src/controls/ControlSection.js
@@ -4,7 +4,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-import { FONT_BODY_1_DARK, FW_SEMIBOLD } from '../styles'
+import { FONT_BODY_1_DARK, FONT_WEIGHT_SEMIBOLD } from '../styles'
 
 import type { StyledComponent } from 'styled-components'
 
@@ -20,7 +20,7 @@ const SectionWrapper: StyledComponent<{||}, {||}, HTMLDivElement> = styled.div`
 `
 
 const SectionTitle: StyledComponent<{||}, {||}, HTMLElement> = styled.p`
-  ${FW_SEMIBOLD}
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
   margin-bottom: 0.5rem;
 `
 
diff --git a/components/src/index.js b/components/src/index.js
index 3a3e082cfc5..44b80bcd355 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -17,6 +17,7 @@ export * from './interaction-enhancers'
 export * from './lists'
 export * from './modals'
 export * from './nav'
+export * from './primitives'
 export * from './tabbedNav'
 export * from './slotmap'
 export * from './structure'
diff --git a/components/src/primitives/Flex.js b/components/src/primitives/Flex.js
new file mode 100644
index 00000000000..94889cd0f5f
--- /dev/null
+++ b/components/src/primitives/Flex.js
@@ -0,0 +1,60 @@
+// @flow
+import styled from 'styled-components'
+import type { StyledComponent } from 'styled-components'
+
+export const ALIGN_NORMAL = 'normal'
+export const ALIGN_START = 'start'
+export const ALIGN_END = 'end'
+export const ALIGN_FLEX_START = 'flex-start'
+export const ALIGN_FLEX_END = 'flex-end'
+export const ALIGN_CENTER = 'center'
+export const ALIGN_BASELINE = 'baseline'
+export const ALIGN_STRETCH = 'stretch'
+
+export const JUSTIFY_NORMAL = 'normal'
+export const JUSTIFY_START = 'start'
+export const JUSTIFY_END = 'end'
+export const JUSTIFY_FLEX_START = 'flex-start'
+export const JUSTIFY_FLEX_END = 'flex-end'
+export const JUSTIFY_CENTER = 'center'
+export const JUSTIFY_SPACE_BETWEEN = 'space-between'
+export const JUSTIFY_SPACE_AROUND = 'space-around'
+export const JUSTIFY_SPACE_EVENLY = 'space-evenly'
+export const JUSTIFY_STRETCH = 'stretch'
+
+export const DIRECTION_ROW = 'row'
+export const DIRECTION_ROW_REVERSE = 'row-reverse'
+export const DIRECTION_COLUMN = 'column'
+export const DIRECTION_COLUMN_REVERSE = 'column-reverse'
+
+export const WRAP = 'wrap'
+export const NO_WRAP = 'nowrap'
+export const WRAP_REVERSE = 'wrap-reverse'
+
+// style props are string type for flexibility, but try to use the constants
+// defined above for safety
+export type FlexProps = {|
+  color?: string,
+  alignItems?: string,
+  justifyContent?: string,
+  direction?: string,
+  wrap?: string,
+|}
+
+/**
+ * Flexbox primitive
+ *
+ * @component
+ */
+export const Flex: StyledComponent<
+  FlexProps,
+  {||},
+  HTMLDivElement
+> = styled.div`
+  display: flex;
+  ${({ color }) => (color ? `color: ${color};` : '')}
+  ${({ alignItems: ai }) => (ai ? `align-items: ${ai};` : '')}
+  ${({ justifyContent: jc }) => (jc ? `justify-content: ${jc};` : '')}
+  ${({ direction: d }) => (d ? `flex-direction: ${d};` : '')}
+  ${({ wrap }) => (wrap ? `flex-wrap: ${wrap};` : '')}
+`
diff --git a/components/src/primitives/Flex.md b/components/src/primitives/Flex.md
new file mode 100644
index 00000000000..470ea213e42
--- /dev/null
+++ b/components/src/primitives/Flex.md
@@ -0,0 +1,22 @@
+Flexbox primitive. Renders a `div` by default with `display: flex;`
+
+```js
+import { Icon, ALIGN_CENTER, JUSTIFY_CENTER } from '@opentrons/components'
+;<Flex
+  alignItems={ALIGN_CENTER}
+  justifyContent={JUSTIFY_CENTER}
+  style={{ width: '6rem', height: '6rem' }}
+>
+  <Icon name="ot-logo" width="32" height="32" />
+</Flex>
+```
+
+`<Flex>` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component.
+
+```js
+import { DIRECTION_COLUMN } from '@opentrons/components'
+;<Flex as="ul" direction={DIRECTION_COLUMN}>
+  <li>hello</li>
+  <li>world</li>
+</Flex>
+```
diff --git a/components/src/primitives/Text.js b/components/src/primitives/Text.js
new file mode 100644
index 00000000000..c2aa122ede4
--- /dev/null
+++ b/components/src/primitives/Text.js
@@ -0,0 +1,30 @@
+// @flow
+import styled from 'styled-components'
+import type { StyledComponent } from 'styled-components'
+
+// props are string type for flexibility, but try to use constants for safety
+export type TextProps = {|
+  color?: string,
+  fontSize?: string,
+  fontWeight?: string,
+  fontStyle?: string,
+  lineHeight?: string,
+|}
+
+// TODO(mc, 2020-05-08): add variants (--font-body-2-dark, etc) as variant prop
+// or as components that compose the base Text component
+
+/**
+ * Text primitive
+ *
+ * @component
+ */
+export const Text: StyledComponent<TextProps, {||}, HTMLElement> = styled.p`
+  margin-top: 0;
+  margin-bottom: 0;
+  ${({ fontSize }) => (fontSize ? `font-size: ${fontSize};` : '')}
+  ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
+  ${({ fontStyle }) => (fontStyle ? `font-style: ${fontStyle};` : '')}
+  ${({ lineHeight }) => (lineHeight ? `line-height: ${lineHeight};` : '')}
+  ${({ color }) => (color ? `color: ${color};` : '')}
+`
diff --git a/components/src/primitives/Text.md b/components/src/primitives/Text.md
new file mode 100644
index 00000000000..09f211ea4b2
--- /dev/null
+++ b/components/src/primitives/Text.md
@@ -0,0 +1,24 @@
+Text primitive. Renders a `p` by default with `margin-top: 0; margin-bottom: 0;`
+
+```js
+import { FONT_SIZE_BODY_2 } from '@opentrons/components'
+;<Text fontSize={FONT_SIZE_BODY_2}>hello world</Text>
+```
+
+`<Text>` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component.
+
+```js
+import {
+  FONT_SIZE_HEADER,
+  LINE_HEIGHT_TITLE,
+  FONT_WEIGHT_REGULAR,
+} from '@opentrons/components'
+;<Text
+  as="h3"
+  lineHeight={LINE_HEIGHT_TITLE}
+  fontSize={FONT_SIZE_HEADER}
+  fontWeight={FONT_WEIGHT_REGULAR}
+>
+  hello h3
+</Text>
+```
diff --git a/components/src/primitives/__tests__/Flex.test.js b/components/src/primitives/__tests__/Flex.test.js
new file mode 100644
index 00000000000..ec69f44842d
--- /dev/null
+++ b/components/src/primitives/__tests__/Flex.test.js
@@ -0,0 +1,149 @@
+// @flow
+import * as React from 'react'
+import { shallow } from 'enzyme'
+
+import { C_WHITE } from '../../styles'
+import {
+  Flex,
+  ALIGN_NORMAL,
+  ALIGN_START,
+  ALIGN_END,
+  ALIGN_FLEX_START,
+  ALIGN_FLEX_END,
+  ALIGN_CENTER,
+  ALIGN_BASELINE,
+  ALIGN_STRETCH,
+  JUSTIFY_NORMAL,
+  JUSTIFY_START,
+  JUSTIFY_END,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_CENTER,
+  JUSTIFY_SPACE_BETWEEN,
+  JUSTIFY_SPACE_AROUND,
+  JUSTIFY_SPACE_EVENLY,
+  JUSTIFY_STRETCH,
+  DIRECTION_ROW,
+  DIRECTION_ROW_REVERSE,
+  DIRECTION_COLUMN,
+  DIRECTION_COLUMN_REVERSE,
+  WRAP,
+  NO_WRAP,
+  WRAP_REVERSE,
+} from '..'
+
+describe('Flex primitive component', () => {
+  it('should be a div with display: flex', () => {
+    const wrapper = shallow(<Flex />)
+    expect(wrapper.exists('div')).toBe(true)
+    expect(wrapper).toHaveStyleRule('display', 'flex')
+  })
+
+  it('should accept an `as` prop', () => {
+    const wrapper = shallow(<Flex as="nav" />)
+    expect(wrapper.exists('nav')).toBe(true)
+    expect(wrapper).toHaveStyleRule('display', 'flex')
+  })
+
+  it('should accept an `className` prop', () => {
+    const wrapper = shallow(<Flex className="extra-class" />)
+    expect(wrapper.hasClass('extra-class')).toBe(true)
+  })
+
+  it('should render children', () => {
+    const wrapper = shallow(
+      <Flex>
+        <span data-test="child" />
+      </Flex>
+    )
+    expect(wrapper.exists('[data-test="child"]')).toBe(true)
+  })
+
+  it('should take a color prop', () => {
+    const wrapper = shallow(<Flex color={C_WHITE} />)
+    expect(wrapper).toHaveStyleRule('color', '#ffffff')
+  })
+
+  it('should take an alignItems prop', () => {
+    const wrapper = shallow(<Flex alignItems={ALIGN_NORMAL} />)
+    expect(wrapper).toHaveStyleRule('align-items', 'normal')
+
+    wrapper.setProps({ alignItems: ALIGN_START })
+    expect(wrapper).toHaveStyleRule('align-items', 'start')
+
+    wrapper.setProps({ alignItems: ALIGN_END })
+    expect(wrapper).toHaveStyleRule('align-items', 'end')
+
+    wrapper.setProps({ alignItems: ALIGN_FLEX_START })
+    expect(wrapper).toHaveStyleRule('align-items', 'flex-start')
+
+    wrapper.setProps({ alignItems: ALIGN_FLEX_END })
+    expect(wrapper).toHaveStyleRule('align-items', 'flex-end')
+
+    wrapper.setProps({ alignItems: ALIGN_CENTER })
+    expect(wrapper).toHaveStyleRule('align-items', 'center')
+
+    wrapper.setProps({ alignItems: ALIGN_BASELINE })
+    expect(wrapper).toHaveStyleRule('align-items', 'baseline')
+
+    wrapper.setProps({ alignItems: ALIGN_STRETCH })
+    expect(wrapper).toHaveStyleRule('align-items', 'stretch')
+  })
+
+  it('should take a justifyContent prop', () => {
+    const wrapper = shallow(<Flex justifyContent={JUSTIFY_NORMAL} />)
+    expect(wrapper).toHaveStyleRule('justify-content', 'normal')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_START })
+    expect(wrapper).toHaveStyleRule('justify-content', 'start')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_END })
+    expect(wrapper).toHaveStyleRule('justify-content', 'end')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_FLEX_START })
+    expect(wrapper).toHaveStyleRule('justify-content', 'flex-start')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_FLEX_END })
+    expect(wrapper).toHaveStyleRule('justify-content', 'flex-end')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_CENTER })
+    expect(wrapper).toHaveStyleRule('justify-content', 'center')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_SPACE_BETWEEN })
+    expect(wrapper).toHaveStyleRule('justify-content', 'space-between')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_SPACE_AROUND })
+    expect(wrapper).toHaveStyleRule('justify-content', 'space-around')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_SPACE_EVENLY })
+    expect(wrapper).toHaveStyleRule('justify-content', 'space-evenly')
+
+    wrapper.setProps({ justifyContent: JUSTIFY_STRETCH })
+    expect(wrapper).toHaveStyleRule('justify-content', 'stretch')
+  })
+
+  it('should take a direction prop', () => {
+    const wrapper = shallow(<Flex direction={DIRECTION_ROW} />)
+    expect(wrapper).toHaveStyleRule('flex-direction', 'row')
+
+    wrapper.setProps({ direction: DIRECTION_ROW_REVERSE })
+    expect(wrapper).toHaveStyleRule('flex-direction', 'row-reverse')
+
+    wrapper.setProps({ direction: DIRECTION_COLUMN })
+    expect(wrapper).toHaveStyleRule('flex-direction', 'column')
+
+    wrapper.setProps({ direction: DIRECTION_COLUMN_REVERSE })
+    expect(wrapper).toHaveStyleRule('flex-direction', 'column-reverse')
+  })
+
+  it('should take a wrap prop', () => {
+    const wrapper = shallow(<Flex wrap={WRAP} />)
+    expect(wrapper).toHaveStyleRule('flex-wrap', 'wrap')
+
+    wrapper.setProps({ wrap: NO_WRAP })
+    expect(wrapper).toHaveStyleRule('flex-wrap', 'nowrap')
+
+    wrapper.setProps({ wrap: WRAP_REVERSE })
+    expect(wrapper).toHaveStyleRule('flex-wrap', 'wrap-reverse')
+  })
+})
diff --git a/components/src/primitives/__tests__/Text.test.js b/components/src/primitives/__tests__/Text.test.js
new file mode 100644
index 00000000000..1c9002c90d8
--- /dev/null
+++ b/components/src/primitives/__tests__/Text.test.js
@@ -0,0 +1,107 @@
+// @flow
+import * as React from 'react'
+import { shallow } from 'enzyme'
+
+import {
+  C_WHITE,
+  FONT_SIZE_DEFAULT,
+  FONT_SIZE_HEADER,
+  FONT_SIZE_BODY_2,
+  FONT_SIZE_BODY_1,
+  FONT_SIZE_CAPTION,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD,
+  LINE_HEIGHT_SOLID,
+  LINE_HEIGHT_TITLE,
+  LINE_HEIGHT_COPY,
+  FONT_STYLE_NORMAL,
+  FONT_STYLE_ITALIC,
+} from '../../styles'
+import { Text } from '..'
+
+describe('Text primitive component', () => {
+  it('should be a p', () => {
+    const wrapper = shallow(<Text />)
+    expect(wrapper.exists('p')).toBe(true)
+  })
+
+  it('should accept an `as` prop', () => {
+    const wrapper = shallow(<Text as="span" />)
+    expect(wrapper.exists('span')).toBe(true)
+  })
+
+  it('should accept an `className` prop', () => {
+    const wrapper = shallow(<Text className="extra-class" />)
+    expect(wrapper.hasClass('extra-class')).toBe(true)
+  })
+
+  it('should render children', () => {
+    const wrapper = shallow(
+      <Text>
+        <span data-test="child" />
+      </Text>
+    )
+    expect(wrapper.exists('[data-test="child"]')).toBe(true)
+  })
+
+  it('should reset margin to 0', () => {
+    const wrapper = shallow(<Text />)
+    expect(wrapper).toHaveStyleRule('margin-top', '0')
+    expect(wrapper).toHaveStyleRule('margin-bottom', '0')
+  })
+
+  it('leaves color and font-size unspecified', () => {
+    const wrapper = shallow(<Text />)
+    expect(wrapper).toHaveStyleRule('color', undefined)
+    expect(wrapper).toHaveStyleRule('font-size', undefined)
+  })
+
+  it('should take a color prop', () => {
+    const wrapper = shallow(<Text color={C_WHITE} />)
+    expect(wrapper).toHaveStyleRule('color', C_WHITE)
+  })
+
+  it('should take a fontSize prop', () => {
+    const wrapper = shallow(<Text fontSize={FONT_SIZE_DEFAULT} />)
+    expect(wrapper).toHaveStyleRule('font-size', '1rem')
+
+    wrapper.setProps({ fontSize: FONT_SIZE_HEADER })
+    expect(wrapper).toHaveStyleRule('font-size', '1.125rem')
+
+    wrapper.setProps({ fontSize: FONT_SIZE_BODY_2 })
+    expect(wrapper).toHaveStyleRule('font-size', '0.875rem')
+
+    wrapper.setProps({ fontSize: FONT_SIZE_BODY_1 })
+    expect(wrapper).toHaveStyleRule('font-size', '0.75rem')
+
+    wrapper.setProps({ fontSize: FONT_SIZE_CAPTION })
+    expect(wrapper).toHaveStyleRule('font-size', '0.625rem')
+  })
+
+  it('should take a fontWeight prop', () => {
+    const wrapper = shallow(<Text fontWeight={FONT_WEIGHT_REGULAR} />)
+    expect(wrapper).toHaveStyleRule('font-weight', '400')
+
+    wrapper.setProps({ fontWeight: FONT_WEIGHT_SEMIBOLD })
+    expect(wrapper).toHaveStyleRule('font-weight', '600')
+  })
+
+  it('should take a lineHeight prop', () => {
+    const wrapper = shallow(<Text lineHeight={LINE_HEIGHT_SOLID} />)
+    expect(wrapper).toHaveStyleRule('line-height', '1')
+
+    wrapper.setProps({ lineHeight: LINE_HEIGHT_TITLE })
+    expect(wrapper).toHaveStyleRule('line-height', '1.25')
+
+    wrapper.setProps({ lineHeight: LINE_HEIGHT_COPY })
+    expect(wrapper).toHaveStyleRule('line-height', '1.5')
+  })
+
+  it('should take a fontStyle prop', () => {
+    const wrapper = shallow(<Text fontStyle={FONT_STYLE_NORMAL} />)
+    expect(wrapper).toHaveStyleRule('font-style', 'normal')
+
+    wrapper.setProps({ fontStyle: FONT_STYLE_ITALIC })
+    expect(wrapper).toHaveStyleRule('font-style', 'italic')
+  })
+})
diff --git a/components/src/primitives/index.js b/components/src/primitives/index.js
new file mode 100644
index 00000000000..a042c63aa7a
--- /dev/null
+++ b/components/src/primitives/index.js
@@ -0,0 +1,3 @@
+// @flow
+export * from './Flex'
+export * from './Text'
diff --git a/components/src/structure/Card.js b/components/src/structure/Card.js
index c3cd077b32d..3e12babf976 100644
--- a/components/src/structure/Card.js
+++ b/components/src/structure/Card.js
@@ -40,7 +40,7 @@ const Section: StyledComponent<
   {||},
   HTMLElement
 > = styled.section`
-  ${styles.FS_BODY_2}
+  font-size: ${styles.FONT_SIZE_BODY_2};
   position: relative;
   overflow: visible;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
@@ -60,7 +60,7 @@ const Section: StyledComponent<
 
 const Title = styled.h3`
   ${styles.FONT_HEADER_DARK}
-  ${styles.FW_REGULAR}
+  font-weight: ${styles.FONT_WEIGHT_REGULAR};
   margin: 0;
   padding: ${styles.S_1} ${styles.S_1} 0;
   text-transform: capitalize;
diff --git a/components/src/styles/colors.js b/components/src/styles/colors.js
index 12c681b88e3..7b929f9fb79 100644
--- a/components/src/styles/colors.js
+++ b/components/src/styles/colors.js
@@ -1,7 +1,12 @@
 // @flow
 
+// color names
 export const C_DARK_GRAY = '#4a4a4a'
 export const C_WHITE = '#ffffff'
 
+// colors by usage
+export const COLOR_WARNING = '#e28200'
+export const COLOR_WARNING_LIGHT = '#ffd58f'
+
 // TDOD(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
 export const C_FONT_DISABLED = '#9c9c9c'
diff --git a/components/src/styles/font-size.js b/components/src/styles/font-size.js
deleted file mode 100644
index 55161ab8b3a..00000000000
--- a/components/src/styles/font-size.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// @flow
-
-import { css } from 'styled-components'
-
-// TODO(mc, 2020-03-11): since we have an established type scale from UX
-// but not an established spacing scale, keep them separate for now to make
-// this file a little easier to deal with
-// import { S_0875, S_1125 } from './spacing'
-
-export const FS_HEADER = css`
-  font-size: 1.125rem;
-`
-
-export const FS_DEFAULT = css`
-  font-size: 1rem;
-`
-
-export const FS_BODY_2 = css`
-  font-size: 0.875rem;
-`
-
-export const FS_BODY_1 = css`
-  font-size: 0.75rem;
-`
-
-export const FS_CAPTION = css`
-  font-size: 0.625rem;
-`
diff --git a/components/src/styles/font-weight.js b/components/src/styles/font-weight.js
deleted file mode 100644
index c3eaabe5e9e..00000000000
--- a/components/src/styles/font-weight.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-
-import { css } from 'styled-components'
-
-export const FW_REGULAR = css`
-  font-weight: 400;
-`
-
-export const FW_SEMIBOLD = css`
-  font-weight: 600;
-`
diff --git a/components/src/styles/index.js b/components/src/styles/index.js
index 0c773aa59b2..54ee9dbff1b 100644
--- a/components/src/styles/index.js
+++ b/components/src/styles/index.js
@@ -1,7 +1,5 @@
 // @flow
 
 export * from './colors'
-export * from './font-size'
-export * from './font-weight'
 export * from './spacing'
 export * from './typography'
diff --git a/components/src/styles/typography.js b/components/src/styles/typography.js
index 8dfd1e7ae85..a37b22c62ba 100644
--- a/components/src/styles/typography.js
+++ b/components/src/styles/typography.js
@@ -3,23 +3,47 @@
 import { css } from 'styled-components'
 
 import { C_DARK_GRAY, C_WHITE } from './colors'
-import { FS_HEADER, FS_BODY_1 } from './font-size'
-import { FW_SEMIBOLD, FW_REGULAR } from './font-weight'
 
+// font size values
+export const FONT_SIZE_HUGE = '3rem'
+export const FONT_SIZE_HEADER = '1.125rem'
+export const FONT_SIZE_DEFAULT = '1rem'
+export const FONT_SIZE_BODY_2 = '0.875rem'
+export const FONT_SIZE_BODY_1 = '0.75rem'
+export const FONT_SIZE_CAPTION = '0.625rem'
+export const FONT_SIZE_TINY = '0.325rem'
+export const FONT_SIZE_MICRO = '0.2rem'
+
+// line height values
+export const LINE_HEIGHT_SOLID = 1
+export const LINE_HEIGHT_TITLE = 1.25
+export const LINE_HEIGHT_COPY = 1.5
+
+// font weight values
+export const FONT_WEIGHT_LIGHT = 300
+export const FONT_WEIGHT_REGULAR = 400
+export const FONT_WEIGHT_SEMIBOLD = 600
+export const FONT_WEIGHT_BOLD = 800
+
+// font style values
+export const FONT_STYLE_NORMAL = 'normal'
+export const FONT_STYLE_ITALIC = 'italic'
+
+// font property sets
 export const FONT_HEADER_DARK = css`
-  ${FS_HEADER}
-  ${FW_SEMIBOLD}
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
   color: ${C_DARK_GRAY};
 `
 
 export const FONT_BODY_1_DARK = css`
-  ${FS_BODY_1}
-  ${FW_REGULAR}
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
   color: ${C_DARK_GRAY};
 `
 
 export const FONT_BODY_1_LIGHT = css`
-  ${FS_BODY_1}
-  ${FW_REGULAR}
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
   color: ${C_WHITE};
 `
diff --git a/components/styleguide.config.js b/components/styleguide.config.js
index 6de782877b4..1fd21d92295 100644
--- a/components/styleguide.config.js
+++ b/components/styleguide.config.js
@@ -68,6 +68,10 @@ module.exports = {
       name: 'Tooltips',
       components: 'src/tooltips/[A-Z]*.js',
     },
+    {
+      name: 'Primitives',
+      components: 'src/primitives/[A-Z]*.js',
+    },
   ],
   getComponentPathLine(componentPath) {
     const name = path.basename(componentPath, '.js')
diff --git a/package.json b/package.json
index f510213b0e9..acc960fd0ca 100755
--- a/package.json
+++ b/package.json
@@ -52,9 +52,9 @@
     "electron-notarize": "^0.1.1",
     "electron-publisher-s3": "^20.17.2",
     "electron-rebuild": "^1.10.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.3.5",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-config-standard": "^12.0.0",
@@ -82,7 +82,7 @@
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.1.0",
-    "jest-styled-components": "7.0.0",
+    "jest-styled-components": "7.0.2",
     "lerna": "^3.16.4",
     "lost": "^8.3.1",
     "madge": "^3.6.0",
diff --git a/yarn.lock b/yarn.lock
index 201c2d08df0..0df0b56ab67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3408,13 +3408,13 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-airbnb-prop-types@^2.13.2:
-  version "2.13.2"
-  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz#43147a5062dd2a4a5600e748a47b64004cc5f7fc"
-  integrity sha512-2FN6DlHr6JCSxPPi25EnqGaXC4OC3/B3k1lCd6MMYrZ51/Gf/1qDfaR+JElzWa+Tl7cY2aYOlsYJGFeQyVHIeQ==
+airbnb-prop-types@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
+  integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
   dependencies:
-    array.prototype.find "^2.0.4"
-    function.prototype.name "^1.1.0"
+    array.prototype.find "^2.1.0"
+    function.prototype.name "^1.1.1"
     has "^1.0.3"
     is-regex "^1.0.4"
     object-is "^1.0.1"
@@ -3422,7 +3422,7 @@ airbnb-prop-types@^2.13.2:
     object.entries "^1.1.0"
     prop-types "^15.7.2"
     prop-types-exact "^1.2.0"
-    react-is "^16.8.6"
+    react-is "^16.9.0"
 
 ajv-errors@^1.0.0:
   version "1.0.0"
@@ -3752,22 +3752,21 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-array.prototype.find@^2.0.4:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
-  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
+array.prototype.find@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.1.tgz#3baca26108ca7affb08db06bf0be6cb3115a969c"
+  integrity sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.13.0"
+    es-abstract "^1.17.4"
 
-array.prototype.flat@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
-  integrity sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==
+array.prototype.flat@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.10.0"
-    function-bind "^1.1.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 arrify@^1.0.1:
   version "1.0.1"
@@ -4993,7 +4992,7 @@ cheerio@1.0.0-rc.2:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
-cheerio@^1.0.0-rc.2:
+cheerio@^1.0.0-rc.3:
   version "1.0.0-rc.3"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
   integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
@@ -7230,65 +7229,76 @@ env-variable@0.0.x:
   version "0.0.4"
   resolved "https://registry.npmjs.org/env-variable/-/env-variable-0.0.4.tgz#0d6280cf507d84242befe35a512b5ae4be77c54e"
 
-enzyme-adapter-react-16@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz#204722b769172bcf096cb250d33e6795c1f1858f"
-  integrity sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==
+enzyme-adapter-react-16@^1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.2.tgz#b16db2f0ea424d58a808f9df86ab6212895a4501"
+  integrity sha512-SkvDrb8xU3lSxID8Qic9rB8pvevDbLybxPK6D/vW7PrT0s2Cl/zJYuXvsd1EBTz0q4o3iqG3FJhpYz3nUNpM2Q==
   dependencies:
-    enzyme-adapter-utils "^1.12.0"
+    enzyme-adapter-utils "^1.13.0"
+    enzyme-shallow-equal "^1.0.1"
     has "^1.0.3"
     object.assign "^4.1.0"
-    object.values "^1.1.0"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    react-is "^16.8.6"
+    react-is "^16.12.0"
     react-test-renderer "^16.0.0-0"
     semver "^5.7.0"
 
-enzyme-adapter-utils@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz#96e3730d76b872f593e54ce1c51fa3a451422d93"
-  integrity sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==
+enzyme-adapter-utils@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.0.tgz#01c885dde2114b4690bf741f8dc94cee3060eb78"
+  integrity sha512-YuEtfQp76Lj5TG1NvtP2eGJnFKogk/zT70fyYHXK2j3v6CtuHqc8YmgH/vaiBfL8K1SgVVbQXtTcgQZFwzTVyQ==
   dependencies:
-    airbnb-prop-types "^2.13.2"
-    function.prototype.name "^1.1.0"
+    airbnb-prop-types "^2.15.0"
+    function.prototype.name "^1.1.2"
     object.assign "^4.1.0"
-    object.fromentries "^2.0.0"
+    object.fromentries "^2.0.2"
     prop-types "^15.7.2"
-    semver "^5.6.0"
+    semver "^5.7.1"
 
-enzyme-to-json@^3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz#f8eb82bd3d5941c9d8bc6fd9140030777d17d0af"
-  integrity sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==
+enzyme-shallow-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz#7afe03db3801c9b76de8440694096412a8d9d49e"
+  integrity sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==
   dependencies:
-    lodash "^4.17.4"
+    has "^1.0.3"
+    object-is "^1.0.2"
 
-enzyme@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
-  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
+enzyme-to-json@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.4.4.tgz#b30726c59091d273521b6568c859e8831e94d00e"
+  integrity sha512-50LELP/SCPJJGic5rAARvU7pgE3m1YaNj7JLM+Qkhl5t7PAs6fiyc8xzc50RnkKPFQCv0EeFVjEWdIFRGPWMsA==
   dependencies:
-    array.prototype.flat "^1.2.1"
-    cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.1.0"
+    lodash "^4.17.15"
+    react-is "^16.12.0"
+
+enzyme@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
+  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
+  dependencies:
+    array.prototype.flat "^1.2.3"
+    cheerio "^1.0.0-rc.3"
+    enzyme-shallow-equal "^1.0.1"
+    function.prototype.name "^1.1.2"
     has "^1.0.3"
-    html-element-map "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-callable "^1.1.4"
-    is-number-object "^1.0.3"
-    is-regex "^1.0.4"
-    is-string "^1.0.4"
+    html-element-map "^1.2.0"
+    is-boolean-object "^1.0.1"
+    is-callable "^1.1.5"
+    is-number-object "^1.0.4"
+    is-regex "^1.0.5"
+    is-string "^1.0.5"
     is-subset "^0.1.1"
     lodash.escape "^4.0.1"
     lodash.isequal "^4.5.0"
-    object-inspect "^1.6.0"
-    object-is "^1.0.1"
+    object-inspect "^1.7.0"
+    object-is "^1.0.2"
     object.assign "^4.1.0"
-    object.entries "^1.0.4"
-    object.values "^1.0.4"
-    raf "^3.4.0"
+    object.entries "^1.1.1"
+    object.values "^1.1.1"
+    raf "^3.4.1"
     rst-selector-parser "^2.2.3"
-    string.prototype.trim "^1.1.2"
+    string.prototype.trim "^1.2.1"
 
 err-code@^1.0.0:
   version "1.1.2"
@@ -7313,7 +7323,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.5.0:
+es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.5.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
   integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
@@ -7325,7 +7335,24 @@ es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.13
     is-regex "^1.0.4"
     object-keys "^1.0.12"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.4, es-abstract@^1.17.5:
+  version "1.17.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
+  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
+
+es-abstract@^1.5.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -7362,6 +7389,15 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 es6-object-assign@^1.0.3, es6-object-assign@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
@@ -8673,7 +8709,7 @@ fstream@^1.0.12:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
+function-bind@^1.0.2, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
@@ -8681,19 +8717,24 @@ function.name-polyfill@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/function.name-polyfill/-/function.name-polyfill-1.0.6.tgz#c54e37cae0a77dfcb49d47982815b0826b5c60d9"
 
-function.prototype.name@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
-  integrity sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==
+function.prototype.name@^1.1.1, function.prototype.name@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
+  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
   dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    is-callable "^1.1.3"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.0"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
+functions-have-names@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
+  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -9272,6 +9313,11 @@ has-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
   integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
 
+has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
 has-unicode@^2.0.0, has-unicode@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -9548,10 +9594,10 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
-html-element-map@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.1.tgz#3c4fcb4874ebddfe4283b51c8994e7713782b592"
-  integrity sha512-BZSfdEm6n706/lBfXKWa4frZRZcT5k1cOusw95ijZsHlI+GdgY0v95h6IzO3iIDf2ROwq570YTwqNPqHcNMozw==
+html-element-map@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.2.0.tgz#dfbb09efe882806af63d990cf6db37993f099f22"
+  integrity sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==
   dependencies:
     array-filter "^1.0.0"
 
@@ -10119,10 +10165,10 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
-  integrity sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=
+is-boolean-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
 
 is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
@@ -10148,6 +10194,11 @@ is-callable@^1.1.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
+is-callable@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
+  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
+
 is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -10314,10 +10365,10 @@ is-npm@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
   integrity sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==
 
-is-number-object@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
-  integrity sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
 is-number@^3.0.0:
   version "3.0.0"
@@ -10419,6 +10470,13 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
+  dependencies:
+    has "^1.0.3"
+
 is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
@@ -10459,10 +10517,10 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
-  integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
 is-subset@^0.1.1:
   version "0.1.1"
@@ -10924,10 +10982,10 @@ jest-snapshot@^25.1.0:
     pretty-format "^25.1.0"
     semver "^7.1.1"
 
-jest-styled-components@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.0.tgz#3e1b7dcd077800ea5191e1cc95b314917a2ed668"
-  integrity sha512-A1nl8q1ptZj1t5wd0x/UYjnqfld1GhZwRDPS9w0eD5P5R8G+Q4uHaBAbUjf+Arjexqh2BxfrGkTc3tDuhtdifg==
+jest-styled-components@7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.2.tgz#b7711871ea74a04491b12bad123fa35cc65a2a80"
+  integrity sha512-i1Qke8Jfgx0Why31q74ohVj9S2FmMLUE8bNRSoK4DgiurKkXG6HC4NPhcOLAz6VpVd9wXkPn81hOt4aAQedqsA==
   dependencies:
     css "^2.2.4"
 
@@ -13117,16 +13175,24 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
-  integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
+object-inspect@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
+  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
   integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
 
+object-is@^1.0.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.0.tgz#11bd22348dd2e096a045ab06f6c85bcc340fa032"
@@ -13140,6 +13206,11 @@ object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
 object-keys@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
@@ -13160,7 +13231,7 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.entries@^1.0.4, object.entries@^1.1.0:
+object.entries@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
   integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
@@ -13170,6 +13241,16 @@ object.entries@^1.0.4, object.entries@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.entries@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.1.tgz#ee1cf04153de02bb093fec33683900f57ce5399b"
+  integrity sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 object.fromentries@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
@@ -13180,6 +13261,16 @@ object.fromentries@^2.0.0:
     function-bind "^1.1.1"
     has "^1.0.1"
 
+object.fromentries@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -13193,15 +13284,6 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.6.1"
-    function-bind "^1.1.0"
-    has "^1.0.1"
-
 object.values@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
@@ -13212,6 +13294,16 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.values@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 obuf@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
@@ -15232,9 +15324,10 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
-raf@^3.4.0:
+raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
   dependencies:
     performance-now "^2.1.0"
 
@@ -15444,7 +15537,7 @@ react-is@^16.3.2:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
 
-react-is@^16.6.0:
+react-is@^16.6.0, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -17690,6 +17783,49 @@ string.prototype.trim@^1.1.2:
     es-abstract "^1.5.0"
     function-bind "^1.0.2"
 
+string.prototype.trim@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz#141233dff32c82bfad80684d7e5f0869ee0fb782"
+  integrity sha512-MjGFEeqixw47dAMFMtgUro/I0+wNqZB5GKXGt1fFr24u3TzDXCPu7J9Buppzoe3r/LqkSDLDDJzE15RGWDGAVw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
+string.prototype.trimend@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimleft@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
+  integrity sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    string.prototype.trimstart "^1.0.0"
+
+string.prototype.trimright@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz#c76f1cef30f21bbad8afeb8db1511496cfb0f2a3"
+  integrity sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    string.prototype.trimend "^1.0.0"
+
+string.prototype.trimstart@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 string_decoder@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"