diff --git a/.github/workflows/bundlesize.yml b/.github/workflows/bundlesize.yml
new file mode 100644
index 00000000000..4a9a31ff88d
--- /dev/null
+++ b/.github/workflows/bundlesize.yml
@@ -0,0 +1,23 @@
+name: 💾 Bundlesize
+on:
+  push:
+    branches-ignore:
+      - master
+
+jobs:
+  bundlesize:
+    name: Check Bundle Size
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          path: 'old'
+          ref: 'master'
+      - uses: actions/checkout@v2
+        with:
+          path: 'new'
+
+      - name: Check Bundle Size Change
+        uses: "BinaryMuse/action-bundlesize@master"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
new file mode 100644
index 00000000000..29f20a76ad2
--- /dev/null
+++ b/docs/content/Popover.md
@@ -0,0 +1,110 @@
+---
+title: Popover
+---
+
+Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+
+Two components make up a popover; the `Popover` component controls the absolute positioning of the popover, and `Popover.Content` renders the inner content of the popover as well as the caret.
+
+By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the `relative` property.
+
+It can be useful to give the `Popover.Content` element a margin to help align the popover.
+
+## Default Example
+
+```jxs live
+<Relative>
+  <Text textAlign="center" display="block">
+    <ButtonPrimary>Hello!</ButtonPrimary>
+  </Text>
+
+  <Popover relative open={true} caret="top">
+    <Popover.Content mt={2}>
+      <Heading fontSize={2}>Popover heading</Heading>
+      <Text as="p">Message about this particular piece of UI.</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+</Relative>
+```
+
+## Caret position
+
+`Popover` supports various caret positions, which you can specify via the `caret` property. This demo shows all the valid values for the prop. The default is `top`. Note that the `top-left`, `bottom-left`, `top-right`, and `bottom-right` values modify the horizontal alignment of the popover.
+
+```javascript live noinline
+function PopoverDemo(props) {
+  const [pos, setPos] = React.useState('top')
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Box>
+      <Heading as="h3" fontSize={3}>Caret Position</Heading>
+      <CaretSelector current={pos} onChange={setPos} />
+      <Heading as="h3" fontSize={3}>Popover Visibility</Heading>
+      <Box my={2}>
+        <label>
+          <input type="checkbox" value={open} checked={open}
+            onChange={() => setOpen(open => !open)}/> Open
+        </label>
+      </Box>
+
+      <Relative pt={4}>
+        <Popover relative open={open} caret={pos}>
+          <Popover.Content>
+            <Heading fontSize={2}><code>{pos}</code> caret</Heading>
+            <Text as="p">Message about this particular piece of UI.</Text>
+            <Button onClick={() => setOpen(false)}>Got it!</Button>
+          </Popover.Content>
+        </Popover>
+      </Relative>
+    </Box>
+  )
+}
+
+function CaretSelector(props) {
+  const choices = [
+    'top',         'bottom',      'left',         'right',
+    'left-bottom', 'left-top',    'right-bottom', 'right-top',
+    'top-left',    'bottom-left', 'top-right',    'bottom-right'
+  ].map((dir) => (
+    <label>
+      <input key={dir} type='radio' name='caret' value={dir}
+        checked={dir === props.current} onChange={() => props.onChange(dir)} /> {dir}
+    </label>
+))
+
+  return (
+    <Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
+      {choices}
+    </Grid>
+  )
+}
+
+render(<PopoverDemo />)
+```
+
+## System props
+
+`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+### Popover
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| as | String | 'div' | Sets the HTML tag for the component. |
+| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. |
+| open | Boolean | false | Controls the visibility of the popover. |
+| relative | Boolean | false | Set to true to render the popover using relative positioning. |
+
+#### Caret Positions
+
+The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `right`, `bottom-left`, `bottom-right`, `top-left`, `top-right`, `left-bottom`, `left-top`, `right-bottom`, or `right-top`.
+
+### Popover.Content
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| as | String | 'div' | Sets the HTML tag for the component. |
diff --git a/docs/package.json b/docs/package.json
index db421f50ba5..c77f764401d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,7 +11,7 @@
     "node": "10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^0.16.10",
+    "@primer/gatsby-theme-doctocat": "^0.17.0",
     "@primer/octicons-react": "^9.2.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index f728ce3699b..7f9f8399039 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -62,6 +62,8 @@
       url: /Link
     - title: PointerBox
       url: /PointerBox
+    - title: Popover
+      url: /Popover
     - title: Position
       url: /Position
     - title: ProgressBar
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 73f503253bb..1883df2d92f 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1234,10 +1234,10 @@
     react-is "16.10.2"
     styled-system "5.1.2"
 
-"@primer/gatsby-theme-doctocat@^0.16.10":
-  version "0.16.10"
-  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.10.tgz#9798bca7b08b548e8b9bd62f8ca7a8be9003d5a5"
-  integrity sha512-173EeoIEwf1cAO3te4XDYg+kjQwLhtlOU2LAHty8T7Hb8hjOLysBPO3rmmtz583+eWhASA0GBb6cvR5S6/OQHg==
+"@primer/gatsby-theme-doctocat@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.17.0.tgz#01295b47729fc1ae6c245b5bcc717fc33c088051"
+  integrity sha512-0vshaWRPogBo7F9nhmxdhuf7SwgFrsgNJ3FXEO4GisCWQ2BWb3VzYtMx2q7f7z4z99O0g/cIQUzDTU5xPVgGug==
   dependencies:
     "@babel/preset-env" "^7.5.5"
     "@babel/preset-react" "^7.0.0"
diff --git a/index.d.ts b/index.d.ts
index 44689f8d24a..1cd8d7c942c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -221,6 +221,30 @@ declare module '@primer/components' {
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
+  export interface PopoverProps extends CommonProps, LayoutProps, PositionProps {
+    caret?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'top-left'
+    | 'top-right'
+    | 'left-bottom'
+    | 'left-top'
+    | 'right-bottom'
+    | 'right-top'
+    open?: boolean
+    relative?: boolean
+  }
+
+  export interface PopoverContentProps extends BorderBoxProps { }
+
+  export const Popover: React.FunctionComponent<PopoverProps> & {
+    Content: React.FunctionComponent<PopoverContentProps>
+  }
+
   export interface PositionComponentProps
     extends PositionProps,
       CommonProps,
@@ -506,6 +530,10 @@ declare module '@primer/components/src/PointerBox' {
   import {PointerBox} from '@primer/components'
   export default PointerBox
 }
+declare module '@primer/components/src/Popover' {
+  import {Popover} from '@primer/components'
+  export default Popover
+}
 declare module '@primer/components/src/Relative' {
   import {Relative} from '@primer/components'
   export default Relative
diff --git a/package.json b/package.json
index 1a45401723c..2bdb5f20ce6 100644
--- a/package.json
+++ b/package.json
@@ -83,5 +83,18 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "styled-components": "4.x || 5.x"
+  },
+  "actionBundlesize": {
+    "build": "yarn && yarn dist",
+    "files": [
+      {
+        "path": "dist/index.esm.js",
+        "name": "ESM Build"
+      },
+      {
+        "path": "dist/index.esm.js",
+        "name": "UMD Build"
+      }
+    ]
   }
 }
diff --git a/src/Popover.js b/src/Popover.js
new file mode 100644
index 00000000000..60baef64dd2
--- /dev/null
+++ b/src/Popover.js
@@ -0,0 +1,242 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import classnames from 'classnames'
+import {COMMON, LAYOUT, POSITION, get} from './constants'
+import theme from './theme'
+import elementType from './utils/elementType'
+import BorderBox from './BorderBox'
+
+const Popover = styled.div.attrs(({className, caret}) => {
+  return {
+    className: classnames(className, `caret-pos--${caret}`)
+  }
+})`
+  position: ${props => (props.relative ? 'relative' : 'absolute')};
+  z-index: 100;
+  display: ${props => (props.open ? 'block' : 'none')};
+
+  ${COMMON};
+  ${LAYOUT};
+  ${POSITION};
+`
+
+Popover.Content = styled(BorderBox)`
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: ${get('space.4')};
+  background-color: ${get('colors.white')};
+
+  ${COMMON};
+  ${LAYOUT};
+
+  // Carets
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -${get('space.3')};
+    margin-left: -9px;
+    border: ${get('space.2')} solid transparent; // TODO: solid?
+    border-bottom-color: ${get('popovers.colors.caret')};
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -${get('space.2')};
+    border: 7px solid transparent; // todo: solid
+    border-bottom-color: ${get('colors.white')};
+  }
+
+  // Bottom-oriented carets
+  ${Popover}.caret-pos--bottom & ,
+  ${Popover}.caret-pos--bottom-right & ,
+  ${Popover}.caret-pos--bottom-left & {
+    &::before,
+    &::after {
+      top: auto;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      bottom: -${get('space.3')};
+      border-top-color: ${get('popovers.colors.caret')};
+    }
+
+    &::after {
+      bottom: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-top-color: ${get('colors.white')};
+    }
+  }
+
+  // Top & Bottom: Right-oriented carets
+  ${Popover}.caret-pos--top-right & ,
+  ${Popover}.caret-pos--bottom-right & {
+    right: -9px;
+    margin-right: 0;
+
+    &::before,
+    &::after {
+      left: auto;
+      margin-left: 0;
+    }
+
+    &::before {
+      right: 20px;
+    }
+
+    &::after {
+      right: 21px;
+    }
+  }
+
+  // Top & Bottom: Left-oriented carets
+  ${Popover}.caret-pos--top-left & ,
+  ${Popover}.caret-pos--bottom-left & {
+    left: -9px;
+    margin-left: 0;
+
+    &::before,
+    &::after {
+      left: ${get('space.4')};
+      margin-left: 0;
+    }
+
+    &::after {
+      left: calc(${get('space.4')} + 1px);
+    }
+  }
+
+  // Right- & Left-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: 50%;
+      left: auto;
+      margin-left: 0;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      // stylelint-disable-next-line primer/spacing
+      margin-top: calc((${get('space.2')} + 1px) * -1);
+    }
+
+    &::after {
+      margin-top: -${get('space.2')};
+    }
+  }
+
+  // Right-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & {
+    &::before {
+      right: -${get('space.3')};
+      border-left-color: ${get('popovers.colors.caret')};
+    }
+
+    &::after {
+      right: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-left-color: ${get('colors.white')};
+    }
+  }
+
+  // Left-oriented carets
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before {
+      left: -${get('space.3')};
+      border-right-color: ${get('popovers.colors.caret')};
+    }
+
+    &::after {
+      left: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-right-color: ${get('colors.white')};
+    }
+  }
+
+  // Right & Left: Top-oriented carets
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--left-top & {
+    &::before,
+    &::after {
+      top: ${get('space.4')};
+    }
+  }
+
+  // Right & Left: Bottom-oriented carets
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: auto;
+    }
+
+    &::before {
+      bottom: ${get('space.3')};
+    }
+
+    &::after {
+      bottom: calc(${get('space.3')} + 1px);
+    }
+  }
+`
+
+export const CARET_POSITIONS = [
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'bottom-left',
+  'bottom-right',
+  'top-left',
+  'top-right',
+  'left-bottom',
+  'left-top',
+  'right-bottom',
+  'right-top'
+]
+
+Popover.defaultProps = {
+  caret: 'top',
+  theme
+}
+
+Popover.propTypes = {
+  as: elementType,
+  caret: PropTypes.oneOf(CARET_POSITIONS),
+  open: PropTypes.bool,
+  relative: PropTypes.bool,
+  theme: PropTypes.object,
+  ...COMMON.propTypes,
+  ...LAYOUT.propTypes,
+  ...POSITION.propTypes
+}
+
+Popover.Content.defaultProps = {
+  theme
+}
+
+Popover.Content.propTypes = {
+  as: elementType,
+  theme: PropTypes.object,
+  ...BorderBox.propTypes
+}
+
+export default Popover
diff --git a/src/__tests__/Popover.js b/src/__tests__/Popover.js
new file mode 100644
index 00000000000..b630f9d16fb
--- /dev/null
+++ b/src/__tests__/Popover.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import Popover, {CARET_POSITIONS} from '../Popover'
+import {render} from '../utils/testing'
+import {BORDER, COMMON, LAYOUT, POSITION} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('Popover and Popover.Content', () => {
+  it('implements system props', () => {
+    expect(Popover).toImplementSystemProps(COMMON)
+    expect(Popover).toImplementSystemProps(LAYOUT)
+    expect(Popover).toImplementSystemProps(POSITION)
+
+    expect(Popover.Content).toImplementSystemProps(COMMON)
+    expect(Popover.Content).toImplementSystemProps(LAYOUT)
+    expect(Popover.Content).toImplementSystemProps(BORDER)
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(
+      <Popover caret="top" open>
+        <Popover.Content>Hello!</Popover.Content>
+      </Popover>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('has default theme', () => {
+    expect(Popover).toSetDefaultTheme()
+    expect(Popover.Content).toSetDefaultTheme()
+  })
+
+  it('renders with default props', () => {
+    expect(render(<Popover />)).toMatchSnapshot()
+    expect(render(<Popover.Content />)).toMatchSnapshot()
+  })
+
+  for (const pos of CARET_POSITIONS) {
+    it(`renders correctly for a caret position of ${pos}`, () => {
+      const element = (
+        <Popover caret={pos} open>
+          <Popover.Content>Hello!</Popover.Content>
+        </Popover>
+      )
+
+      expect(render(element)).toMatchSnapshot()
+    })
+  }
+
+  it('renders both elements as a <div>', () => {
+    expect(render(<Popover />).type).toEqual('div')
+    expect(render(<Popover.Content />).type).toEqual('div')
+  })
+})
diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
index 2cb15070f8d..1d89748a790 100644
--- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
+++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
@@ -292,6 +292,11 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
         "small": "544px",
         "xlarge": "1280px",
       },
+      "popovers": Object {
+        "colors": Object {
+          "caret": "rgba(27, 31, 35, 0.15)",
+        },
+      },
       "radii": Array [
         "0",
         "3px",
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
index 52fefdf3da4..6fb22ed9084 100644
--- a/src/__tests__/__snapshots__/FilterListItem.js.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -305,6 +305,11 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
         "small": "544px",
         "xlarge": "1280px",
       },
+      "popovers": Object {
+        "colors": Object {
+          "caret": "rgba(27, 31, 35, 0.15)",
+        },
+      },
       "radii": Array [
         "0",
         "3px",
diff --git a/src/__tests__/__snapshots__/Popover.js.snap b/src/__tests__/__snapshots__/Popover.js.snap
new file mode 100644
index 00000000000..dfa98493cf5
--- /dev/null
+++ b/src/__tests__/__snapshots__/Popover.js.snap
@@ -0,0 +1,2859 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover and Popover.Content renders correctly for a caret position of bottom 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--bottom"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of bottom-left 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--bottom-left"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of bottom-right 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--bottom-right"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of left 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--left"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of left-bottom 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--left-bottom"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of left-top 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--left-top"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of right 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--right"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of right-bottom 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--right-bottom"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of right-top 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--right-top"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of top 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--top"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of top-left 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--top-left"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders correctly for a caret position of top-right 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c2 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c2::before,
+.c2::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c2::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c2::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--top-right"
+  open={true}
+>
+  <div
+    className="c2"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover and Popover.Content renders with default props 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: none;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--bottom-left .c2::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c0.caret-pos--top-right .c2,
+.c0.caret-pos--bottom-right .c2 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before,
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--bottom-right .c2::before {
+  right: 20px;
+}
+
+.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--bottom-right .c2::after {
+  right: 21px;
+}
+
+.c0.caret-pos--top-left .c2,
+.c0.caret-pos--bottom-left .c2 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::before,
+.c0.caret-pos--bottom-left .c2::before,
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--bottom-left .c2::after {
+  left: calc(24px + 1px);
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  margin-top: -8px;
+}
+
+.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--right-bottom .c2::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--right .c2::after,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--right-bottom .c2::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c0.caret-pos--left .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c0.caret-pos--left .c2::after,
+.c0.caret-pos--left-top .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c0.caret-pos--right-top .c2::before,
+.c0.caret-pos--left-top .c2::before,
+.c0.caret-pos--right-top .c2::after,
+.c0.caret-pos--left-top .c2::after {
+  top: 24px;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before,
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  top: auto;
+}
+
+.c0.caret-pos--right-bottom .c2::before,
+.c0.caret-pos--left-bottom .c2::before {
+  bottom: 16px;
+}
+
+.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--left-bottom .c2::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0 c1 caret-pos--top"
+/>
+`;
+
+exports[`Popover and Popover.Content renders with default props 2`] = `
+.c0 {
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #fff;
+}
+
+.c0::before,
+.c0::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c0::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(27,31,35,0.15);
+}
+
+.c0::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.c1.caret-pos--bottom .c0::before,
+.c1.caret-pos--bottom-right .c0::before,
+.c1.caret-pos--bottom-left .c0::before,
+.c1.caret-pos--bottom .c0::after,
+.c1.caret-pos--bottom-right .c0::after,
+.c1.caret-pos--bottom-left .c0::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c1.caret-pos--bottom .c0::before,
+.c1.caret-pos--bottom-right .c0::before,
+.c1.caret-pos--bottom-left .c0::before {
+  bottom: -16px;
+  border-top-color: rgba(27,31,35,0.15);
+}
+
+.c1.caret-pos--bottom .c0::after,
+.c1.caret-pos--bottom-right .c0::after,
+.c1.caret-pos--bottom-left .c0::after {
+  bottom: -14px;
+  border-top-color: #fff;
+}
+
+.c1.caret-pos--top-right .c0,
+.c1.caret-pos--bottom-right .c0 {
+  right: -9px;
+  margin-right: 0;
+}
+
+.c1.caret-pos--top-right .c0::before,
+.c1.caret-pos--bottom-right .c0::before,
+.c1.caret-pos--top-right .c0::after,
+.c1.caret-pos--bottom-right .c0::after {
+  left: auto;
+  margin-left: 0;
+}
+
+.c1.caret-pos--top-right .c0::before,
+.c1.caret-pos--bottom-right .c0::before {
+  right: 20px;
+}
+
+.c1.caret-pos--top-right .c0::after,
+.c1.caret-pos--bottom-right .c0::after {
+  right: 21px;
+}
+
+.c1.caret-pos--top-left .c0,
+.c1.caret-pos--bottom-left .c0 {
+  left: -9px;
+  margin-left: 0;
+}
+
+.c1.caret-pos--top-left .c0::before,
+.c1.caret-pos--bottom-left .c0::before,
+.c1.caret-pos--top-left .c0::after,
+.c1.caret-pos--bottom-left .c0::after {
+  left: 24px;
+  margin-left: 0;
+}
+
+.c1.caret-pos--top-left .c0::after,
+.c1.caret-pos--bottom-left .c0::after {
+  left: calc(24px + 1px);
+}
+
+.c1.caret-pos--right .c0::before,
+.c1.caret-pos--right-top .c0::before,
+.c1.caret-pos--right-bottom .c0::before,
+.c1.caret-pos--left .c0::before,
+.c1.caret-pos--left-top .c0::before,
+.c1.caret-pos--left-bottom .c0::before,
+.c1.caret-pos--right .c0::after,
+.c1.caret-pos--right-top .c0::after,
+.c1.caret-pos--right-bottom .c0::after,
+.c1.caret-pos--left .c0::after,
+.c1.caret-pos--left-top .c0::after,
+.c1.caret-pos--left-bottom .c0::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
+
+.c1.caret-pos--right .c0::before,
+.c1.caret-pos--right-top .c0::before,
+.c1.caret-pos--right-bottom .c0::before,
+.c1.caret-pos--left .c0::before,
+.c1.caret-pos--left-top .c0::before,
+.c1.caret-pos--left-bottom .c0::before {
+  margin-top: calc((8px + 1px) * -1);
+}
+
+.c1.caret-pos--right .c0::after,
+.c1.caret-pos--right-top .c0::after,
+.c1.caret-pos--right-bottom .c0::after,
+.c1.caret-pos--left .c0::after,
+.c1.caret-pos--left-top .c0::after,
+.c1.caret-pos--left-bottom .c0::after {
+  margin-top: -8px;
+}
+
+.c1.caret-pos--right .c0::before,
+.c1.caret-pos--right-top .c0::before,
+.c1.caret-pos--right-bottom .c0::before {
+  right: -16px;
+  border-left-color: rgba(27,31,35,0.15);
+}
+
+.c1.caret-pos--right .c0::after,
+.c1.caret-pos--right-top .c0::after,
+.c1.caret-pos--right-bottom .c0::after {
+  right: -14px;
+  border-left-color: #fff;
+}
+
+.c1.caret-pos--left .c0::before,
+.c1.caret-pos--left-top .c0::before,
+.c1.caret-pos--left-bottom .c0::before {
+  left: -16px;
+  border-right-color: rgba(27,31,35,0.15);
+}
+
+.c1.caret-pos--left .c0::after,
+.c1.caret-pos--left-top .c0::after,
+.c1.caret-pos--left-bottom .c0::after {
+  left: -14px;
+  border-right-color: #fff;
+}
+
+.c1.caret-pos--right-top .c0::before,
+.c1.caret-pos--left-top .c0::before,
+.c1.caret-pos--right-top .c0::after,
+.c1.caret-pos--left-top .c0::after {
+  top: 24px;
+}
+
+.c1.caret-pos--right-bottom .c0::before,
+.c1.caret-pos--left-bottom .c0::before,
+.c1.caret-pos--right-bottom .c0::after,
+.c1.caret-pos--left-bottom .c0::after {
+  top: auto;
+}
+
+.c1.caret-pos--right-bottom .c0::before,
+.c1.caret-pos--left-bottom .c0::before {
+  bottom: 16px;
+}
+
+.c1.caret-pos--right-bottom .c0::after,
+.c1.caret-pos--left-bottom .c0::after {
+  bottom: calc(16px + 1px);
+}
+
+<div
+  className="c0"
+/>
+`;
diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap
index 8660b96f274..c18f1a79131 100644
--- a/src/__tests__/__snapshots__/SubNavLink.js.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.js.snap
@@ -332,6 +332,11 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
         "small": "544px",
         "xlarge": "1280px",
       },
+      "popovers": Object {
+        "colors": Object {
+          "caret": "rgba(27, 31, 35, 0.15)",
+        },
+      },
       "radii": Array [
         "0",
         "3px",
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index b3c44d16a10..7060a25b054 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
@@ -309,6 +309,11 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
         "small": "544px",
         "xlarge": "1280px",
       },
+      "popovers": Object {
+        "colors": Object {
+          "caret": "rgba(27, 31, 35, 0.15)",
+        },
+      },
       "radii": Array [
         "0",
         "3px",
diff --git a/src/index.js b/src/index.js
index 61ac8bed24e..c94c997caad 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,6 +35,7 @@ export {default as Label} from './Label'
 export {default as LabelGroup} from './LabelGroup'
 export {default as Link} from './Link'
 export {default as PointerBox} from './PointerBox'
+export {default as Popover} from './Popover'
 export {default as ProgressBar} from './ProgressBar'
 export {default as SideNav} from './SideNav'
 export {default as StateLabel} from './StateLabel'
diff --git a/src/theme.js b/src/theme.js
index 242c787e9f0..79bbd79b2ac 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -152,6 +152,12 @@ const buttons = {
   }
 }
 
+const popovers = {
+  colors: {
+    caret: 'rgba(27, 31, 35, 0.15)'
+  }
+}
+
 const theme = {
   breakpoints: ['544px', '768px', '1012px', '1280px'],
   maxWidths: {
@@ -197,7 +203,8 @@ const theme = {
     primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)'
   },
   space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'],
-  buttons
+  buttons,
+  popovers
 }
 
 export default theme