From 298764bdcd14c79d125432aee93941de31a85742 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Thu, 27 Feb 2020 12:58:35 -0800
Subject: [PATCH 01/19] Update to doctocat@0.17.0

---
 docs/package.json | 2 +-
 docs/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index efdb0618cee..c77f764401d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,7 +11,7 @@
     "node": "10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^0.16.9",
+    "@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/yarn.lock b/docs/yarn.lock
index e7169d45b10..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.9":
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.9.tgz#7ab8b769ac02c9ceaa1d43d150e24b0e75989f6c"
-  integrity sha512-Nz23CpAorBMntpVuvCJfUK/1CKD0BxdjqAIvDbfaHzgUZgLSXthAdXupQl1OEp4EPnDb2Egv3ZBt4CT5ssfdNQ==
+"@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"

From 19ed689982581071492cbd5b0313e72ab5202e07 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Thu, 27 Feb 2020 14:12:13 -0800
Subject: [PATCH 02/19] Initial take on Popover

---
 docs/content/Popover.md                       |  83 ++++++
 .../src/@primer/gatsby-theme-doctocat/nav.yml |   2 +
 src/Popover.js                                | 252 ++++++++++++++++++
 src/index.js                                  |   1 +
 src/theme.js                                  |   3 +
 5 files changed, 341 insertions(+)
 create mode 100644 docs/content/Popover.md
 create mode 100644 src/Popover.js

diff --git a/docs/content/Popover.md b/docs/content/Popover.md
new file mode 100644
index 00000000000..7093b45f12a
--- /dev/null
+++ b/docs/content/Popover.md
@@ -0,0 +1,83 @@
+---
+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.
+
+A popover must exist within an element with a `relative` position in order for it to be positioned correctly. 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 vertical 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 />)
+```
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 522ed7973ff..e26c80af33d 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/src/Popover.js b/src/Popover.js
new file mode 100644
index 00000000000..7fa5d0d1969
--- /dev/null
+++ b/src/Popover.js
@@ -0,0 +1,252 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled, {css} from 'styled-components'
+import classnames from 'classnames'
+import {COMMON, LAYOUT, get} from './constants'
+import theme from './theme'
+import elementType from './utils/elementType'
+import Link from './Link'
+import Box from './Box'
+import BorderBox from './BorderBox'
+
+const Popover = styled(Box).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')};
+
+  ${LAYOUT};
+`
+
+const PopoverMessage = styled(BorderBox)`
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: ${get('space.4')};
+
+  // 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('colors.popover.caretColor')};
+  }
+
+  &::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('colors.popover.caretColor')};
+    }
+
+    &::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('colors.popover.caretColor')};
+    }
+
+    &::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('colors.popover.caretColor')};
+    }
+
+    &::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);
+    }
+  }
+
+  // ${Popover}.caret-pos--large &  {
+  //   @include breakpoint(sm) {
+  //     min-width: 320px;
+  //   }
+  // }
+`
+
+Popover.Content = function PopoverContent({className, caret, children, ...props}) {
+  const caretClassName = `caret-pos--${caret}`
+  const newClassName = classnames(className, caretClassName)
+
+  return (
+    <PopoverMessage className={newClassName} {...props}>
+      {children}
+    </PopoverMessage>
+  )
+}
+
+Popover.defaultProps = {
+  caret: 'top',
+  theme
+}
+
+Popover.propTypes = {
+  caret: PropTypes.oneOf([
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'bottom-left',
+    'bottom-right',
+    'top-left',
+    'top-right',
+    'left-bottom',
+    'left-top',
+    'right-bottom',
+    'right-top'
+  ]),
+  open: PropTypes.bool,
+  relative: PropTypes.bool,
+  theme: PropTypes.object,
+  ...Box.propTypes,
+  ...Link.propTypes,
+  ...LAYOUT.propTYpes
+}
+
+Popover.Content.defaultProps = {
+  theme
+}
+
+Popover.Content.propTypes = {
+  theme: PropTypes.object,
+  ...BorderBox.propTypes
+}
+
+export default Popover
diff --git a/src/index.js b/src/index.js
index aae9fab2b24..fd261aa8b13 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 21e51859e57..a22126a83cd 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -58,6 +58,9 @@ const colors = {
   },
   filterList: {
     hoverBg: '#eaecef'
+  },
+  popover: {
+    caretColor: 'rgba(27, 31, 35, 0.15)'
   }
 }
 

From 55ca8411d12e98fcee3824ebdacc21a8681e4142 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Thu, 27 Feb 2020 14:20:07 -0800
Subject: [PATCH 03/19] remove unused imports

---
 src/Popover.js | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 7fa5d0d1969..36556abb6be 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,8 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import classnames from 'classnames'
-import {COMMON, LAYOUT, get} from './constants'
+import {LAYOUT, get} from './constants'
 import theme from './theme'
 import elementType from './utils/elementType'
 import Link from './Link'
@@ -21,7 +20,7 @@ const Popover = styled(Box).attrs(({className, caret}) => {
   ${LAYOUT};
 `
 
-const PopoverMessage = styled(BorderBox)`
+Popover.Content = styled(BorderBox)`
   position: relative;
   width: 232px;
   margin-right: auto;
@@ -201,23 +200,13 @@ const PopoverMessage = styled(BorderBox)`
   // }
 `
 
-Popover.Content = function PopoverContent({className, caret, children, ...props}) {
-  const caretClassName = `caret-pos--${caret}`
-  const newClassName = classnames(className, caretClassName)
-
-  return (
-    <PopoverMessage className={newClassName} {...props}>
-      {children}
-    </PopoverMessage>
-  )
-}
-
 Popover.defaultProps = {
   caret: 'top',
   theme
 }
 
 Popover.propTypes = {
+  as: elementType,
   caret: PropTypes.oneOf([
     'top',
     'bottom',
@@ -245,6 +234,7 @@ Popover.Content.defaultProps = {
 }
 
 Popover.Content.propTypes = {
+  as: elementType,
   theme: PropTypes.object,
   ...BorderBox.propTypes
 }

From 635e2047e0a26fc782783ef4e9b065c56348b175 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Thu, 27 Feb 2020 14:59:45 -0800
Subject: [PATCH 04/19] :art:

---
 src/Popover.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 36556abb6be..0f0e75cd33c 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -53,7 +53,7 @@ Popover.Content = styled(BorderBox)`
   // Bottom-oriented carets
   ${Popover}.caret-pos--bottom & ,
   ${Popover}.caret-pos--bottom-right & ,
-  ${Popover}.caret-pos--bottom-left &  {
+  ${Popover}.caret-pos--bottom-left & {
     &::before,
     &::after {
       top: auto;
@@ -74,7 +74,7 @@ Popover.Content = styled(BorderBox)`
 
   // Top & Bottom: Right-oriented carets
   ${Popover}.caret-pos--top-right & ,
-  ${Popover}.caret-pos--bottom-right &  {
+  ${Popover}.caret-pos--bottom-right & {
     right: -9px;
     margin-right: 0;
 
@@ -95,7 +95,7 @@ Popover.Content = styled(BorderBox)`
 
   // Top & Bottom: Left-oriented carets
   ${Popover}.caret-pos--top-left & ,
-  ${Popover}.caret-pos--bottom-left &  {
+  ${Popover}.caret-pos--bottom-left & {
     left: -9px;
     margin-left: 0;
 
@@ -116,7 +116,7 @@ Popover.Content = styled(BorderBox)`
   ${Popover}.caret-pos--right-bottom & ,
   ${Popover}.caret-pos--left & ,
   ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom &  {
+  ${Popover}.caret-pos--left-bottom & {
     &::before,
     &::after {
       top: 50%;
@@ -138,7 +138,7 @@ Popover.Content = styled(BorderBox)`
   // Right-oriented carets
   ${Popover}.caret-pos--right & ,
   ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom &  {
+  ${Popover}.caret-pos--right-bottom & {
     &::before {
       right: -${get('space.3')};
       border-left-color: ${get('colors.popover.caretColor')};
@@ -154,7 +154,7 @@ Popover.Content = styled(BorderBox)`
   // Left-oriented carets
   ${Popover}.caret-pos--left & ,
   ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom &  {
+  ${Popover}.caret-pos--left-bottom & {
     &::before {
       left: -${get('space.3')};
       border-right-color: ${get('colors.popover.caretColor')};
@@ -169,7 +169,7 @@ Popover.Content = styled(BorderBox)`
 
   // Right & Left: Top-oriented carets
   ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--left-top &  {
+  ${Popover}.caret-pos--left-top & {
     &::before,
     &::after {
       top: ${get('space.4')};
@@ -178,7 +178,7 @@ Popover.Content = styled(BorderBox)`
 
   // Right & Left: Bottom-oriented carets
   ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left-bottom &  {
+  ${Popover}.caret-pos--left-bottom & {
     &::before,
     &::after {
       top: auto;
@@ -193,7 +193,7 @@ Popover.Content = styled(BorderBox)`
     }
   }
 
-  // ${Popover}.caret-pos--large &  {
+  // ${Popover}.caret-pos--large & {
   //   @include breakpoint(sm) {
   //     min-width: 320px;
   //   }

From 1cd22444d72f1e59f2bb01deaccd0a12f4d01338 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 11:49:23 -0700
Subject: [PATCH 05/19] Fix theme namespace for Popover

---
 src/Popover.js |  8 ++++----
 src/theme.js   | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 0f0e75cd33c..70c9b8a46cd 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -40,7 +40,7 @@ Popover.Content = styled(BorderBox)`
     top: -${get('space.3')};
     margin-left: -9px;
     border: ${get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${get('colors.popover.caretColor')};
+    border-bottom-color: ${get('popovers.colors.caret')};
   }
 
   &::after {
@@ -62,7 +62,7 @@ Popover.Content = styled(BorderBox)`
 
     &::before {
       bottom: -${get('space.3')};
-      border-top-color: ${get('colors.popover.caretColor')};
+      border-top-color: ${get('popovers.colors.caret')};
     }
 
     &::after {
@@ -141,7 +141,7 @@ Popover.Content = styled(BorderBox)`
   ${Popover}.caret-pos--right-bottom & {
     &::before {
       right: -${get('space.3')};
-      border-left-color: ${get('colors.popover.caretColor')};
+      border-left-color: ${get('popovers.colors.caret')};
     }
 
     &::after {
@@ -157,7 +157,7 @@ Popover.Content = styled(BorderBox)`
   ${Popover}.caret-pos--left-bottom & {
     &::before {
       left: -${get('space.3')};
-      border-right-color: ${get('colors.popover.caretColor')};
+      border-right-color: ${get('popovers.colors.caret')};
     }
 
     &::after {
diff --git a/src/theme.js b/src/theme.js
index 7b3ec5a793e..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: {
@@ -198,9 +204,7 @@ const theme = {
   },
   space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'],
   buttons,
-  popover: {
-    caretColor: 'rgba(27, 31, 35, 0.15)'
-  }
+  popovers
 }
 
 export default theme

From 1e3078d199794c122887fe29d1cf451bafd0381a Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 11:49:33 -0700
Subject: [PATCH 06/19] Give Popover a background color

---
 src/Popover.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Popover.js b/src/Popover.js
index 70c9b8a46cd..48fb76e2ffc 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -26,6 +26,7 @@ Popover.Content = styled(BorderBox)`
   margin-right: auto;
   margin-left: auto;
   padding: ${get('space.4')};
+  background-color: ${get('colors.white')};
 
   // Carets
   &::before,

From 7a8019f05531ba25a4be9fb8a571a937cc23329e Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:10:32 -0700
Subject: [PATCH 07/19] Fix typo

---
 docs/content/Popover.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index 7093b45f12a..364510769c6 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -28,7 +28,7 @@ A popover must exist within an element with a `relative` position in order for i
 
 ## 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 vertical alignment of the popover.
+`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) {

From 27b574454003c3a61a42bfc3e1d604a6f3b1b97d Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:17:54 -0700
Subject: [PATCH 08/19] Remove unnecessary props

---
 src/Popover.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 48fb76e2ffc..fc0b2742431 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -4,7 +4,6 @@ import classnames from 'classnames'
 import {LAYOUT, get} from './constants'
 import theme from './theme'
 import elementType from './utils/elementType'
-import Link from './Link'
 import Box from './Box'
 import BorderBox from './BorderBox'
 
@@ -226,7 +225,6 @@ Popover.propTypes = {
   relative: PropTypes.bool,
   theme: PropTypes.object,
   ...Box.propTypes,
-  ...Link.propTypes,
   ...LAYOUT.propTYpes
 }
 

From 1de4a7878553b6e6bd45e79e9a2f7193761d4637 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:18:14 -0700
Subject: [PATCH 09/19] Add Popover typings

---
 index.d.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 44689f8d24a..fe4d2a22d8d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -221,6 +221,33 @@ declare module '@primer/components' {
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
+  export interface PopoverProps extends BoxProps, LayoutProps {
+    as?: React.ReactType
+    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 {
+    as?: React.ReactType
+  }
+
+  export const Popover: React.FunctionComponent<PopoverProps> & {
+    Content: React.FunctionComponent<PopoverContentProps>
+  }
+
   export interface PositionComponentProps
     extends PositionProps,
       CommonProps,
@@ -506,6 +533,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

From 78d5455b507d271932667bb30a9d6cf311439456 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:28:23 -0700
Subject: [PATCH 10/19] Remove redundant system props

---
 src/Popover.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index fc0b2742431..6b46d1022f8 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import classnames from 'classnames'
-import {LAYOUT, get} from './constants'
+import {get} from './constants'
 import theme from './theme'
 import elementType from './utils/elementType'
 import Box from './Box'
@@ -15,8 +15,6 @@ const Popover = styled(Box).attrs(({className, caret}) => {
   position: ${props => (props.relative ? 'relative' : 'absolute')};
   z-index: 100;
   display: ${props => (props.open ? 'block' : 'none')};
-
-  ${LAYOUT};
 `
 
 Popover.Content = styled(BorderBox)`
@@ -224,8 +222,7 @@ Popover.propTypes = {
   open: PropTypes.bool,
   relative: PropTypes.bool,
   theme: PropTypes.object,
-  ...Box.propTypes,
-  ...LAYOUT.propTYpes
+  ...Box.propTypes
 }
 
 Popover.Content.defaultProps = {

From 7cc88b8b47d761a3626ba8b38b1c69a02a25b2d4 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:28:52 -0700
Subject: [PATCH 11/19] Refactor caret positions

---
 src/Popover.js | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 6b46d1022f8..d3e63bae96f 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -198,6 +198,21 @@ Popover.Content = styled(BorderBox)`
   // }
 `
 
+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
@@ -205,20 +220,7 @@ Popover.defaultProps = {
 
 Popover.propTypes = {
   as: elementType,
-  caret: PropTypes.oneOf([
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'bottom-left',
-    'bottom-right',
-    'top-left',
-    'top-right',
-    'left-bottom',
-    'left-top',
-    'right-bottom',
-    'right-top'
-  ]),
+  caret: PropTypes.oneOf(CARET_POSITIONS),
   open: PropTypes.bool,
   relative: PropTypes.bool,
   theme: PropTypes.object,

From d21ba83335d01034d3737bc81469e694287a8754 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:29:02 -0700
Subject: [PATCH 12/19] Add Popover tests

---
 src/__tests__/Popover.js                    |   57 +
 src/__tests__/__snapshots__/Popover.js.snap | 2859 +++++++++++++++++++
 2 files changed, 2916 insertions(+)
 create mode 100644 src/__tests__/Popover.js
 create mode 100644 src/__tests__/__snapshots__/Popover.js.snap

diff --git a/src/__tests__/Popover.js b/src/__tests__/Popover.js
new file mode 100644
index 00000000000..7ea4261f03a
--- /dev/null
+++ b/src/__tests__/Popover.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import Popover, {CARET_POSITIONS} from '../Popover'
+import {render} from '../utils/testing'
+import {BORDER, COMMON, LAYOUT} 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.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__/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"
+/>
+`;

From e5821ef689d159d4635012d92598867bed551464 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:36:42 -0700
Subject: [PATCH 13/19] Update snapshots from theme change

---
 src/__tests__/__snapshots__/BreadcrumbItem.js.snap   | 5 +++++
 src/__tests__/__snapshots__/FilterListItem.js.snap   | 5 +++++
 src/__tests__/__snapshots__/SubNavLink.js.snap       | 5 +++++
 src/__tests__/__snapshots__/UnderlineNavLink.js.snap | 5 +++++
 4 files changed, 20 insertions(+)

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__/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",

From 5da5a2a6ca5ae4b80d1f9bdae748c38320d4e8b8 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 12:41:08 -0700
Subject: [PATCH 14/19] Remove old copy-paste CSS

---
 src/Popover.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index d3e63bae96f..9cd35d9d413 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -190,12 +190,6 @@ Popover.Content = styled(BorderBox)`
       bottom: calc(${get('space.3')} + 1px);
     }
   }
-
-  // ${Popover}.caret-pos--large & {
-  //   @include breakpoint(sm) {
-  //     min-width: 320px;
-  //   }
-  // }
 `
 
 export const CARET_POSITIONS = [

From f40da923d842aab74613f6bf226aac213ff58b6a Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 14:05:00 -0700
Subject: [PATCH 15/19] Reword positioning docs

---
 docs/content/Popover.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index 364510769c6..ae2388a79a3 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -6,7 +6,9 @@ Popovers are used to bring attention to specific user interface elements, typica
 
 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.
 
-A popover must exist within an element with a `relative` position in order for it to be positioned correctly. It can be useful to give the `Popover.Content` element a margin to help align the popover.
+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
 

From b9a7f4a3c8a72098b862565360669b7bb28df22f Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 14:09:53 -0700
Subject: [PATCH 16/19] Fix Popover typings

---
 index.d.ts | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fe4d2a22d8d..d034ff481db 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -221,28 +221,25 @@ declare module '@primer/components' {
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
-  export interface PopoverProps extends BoxProps, LayoutProps {
-    as?: React.ReactType
+  export interface PopoverProps extends BoxProps {
     caret?:
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right'
-      | 'bottom-left'
-      | 'bottom-right'
-      | 'top-left'
-      | 'top-right'
-      | 'left-bottom'
-      | 'left-top'
-      | 'right-bottom'
-      | 'right-top'
+    | '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 {
-    as?: React.ReactType
-  }
+  export interface PopoverContentProps extends BorderBoxProps { }
 
   export const Popover: React.FunctionComponent<PopoverProps> & {
     Content: React.FunctionComponent<PopoverContentProps>

From 2777673b925d4e1f77adc42bedd41e39bdbec476 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 14:30:38 -0700
Subject: [PATCH 17/19] Add System Props section to Popover docs

---
 docs/content/Popover.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index ae2388a79a3..29f20a76ad2 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -83,3 +83,28 @@ function CaretSelector(props) {
 
 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. |

From 623f55e16b7465b8a63c76661343de65177d3e11 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Wed, 25 Mar 2020 14:41:28 -0700
Subject: [PATCH 18/19] Fix system props style overrides for Popover

---
 index.d.ts               |  2 +-
 src/Popover.js           | 16 ++++++++++++----
 src/__tests__/Popover.js |  3 ++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index d034ff481db..1cd8d7c942c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -221,7 +221,7 @@ declare module '@primer/components' {
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
-  export interface PopoverProps extends BoxProps {
+  export interface PopoverProps extends CommonProps, LayoutProps, PositionProps {
     caret?:
     | 'top'
     | 'bottom'
diff --git a/src/Popover.js b/src/Popover.js
index 9cd35d9d413..60baef64dd2 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import classnames from 'classnames'
-import {get} from './constants'
+import {COMMON, LAYOUT, POSITION, get} from './constants'
 import theme from './theme'
 import elementType from './utils/elementType'
-import Box from './Box'
 import BorderBox from './BorderBox'
 
-const Popover = styled(Box).attrs(({className, caret}) => {
+const Popover = styled.div.attrs(({className, caret}) => {
   return {
     className: classnames(className, `caret-pos--${caret}`)
   }
@@ -15,6 +14,10 @@ const Popover = styled(Box).attrs(({className, caret}) => {
   position: ${props => (props.relative ? 'relative' : 'absolute')};
   z-index: 100;
   display: ${props => (props.open ? 'block' : 'none')};
+
+  ${COMMON};
+  ${LAYOUT};
+  ${POSITION};
 `
 
 Popover.Content = styled(BorderBox)`
@@ -25,6 +28,9 @@ Popover.Content = styled(BorderBox)`
   padding: ${get('space.4')};
   background-color: ${get('colors.white')};
 
+  ${COMMON};
+  ${LAYOUT};
+
   // Carets
   &::before,
   &::after {
@@ -218,7 +224,9 @@ Popover.propTypes = {
   open: PropTypes.bool,
   relative: PropTypes.bool,
   theme: PropTypes.object,
-  ...Box.propTypes
+  ...COMMON.propTypes,
+  ...LAYOUT.propTypes,
+  ...POSITION.propTypes
 }
 
 Popover.Content.defaultProps = {
diff --git a/src/__tests__/Popover.js b/src/__tests__/Popover.js
index 7ea4261f03a..b630f9d16fb 100644
--- a/src/__tests__/Popover.js
+++ b/src/__tests__/Popover.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Popover, {CARET_POSITIONS} from '../Popover'
 import {render} from '../utils/testing'
-import {BORDER, COMMON, LAYOUT} from '../constants'
+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'
@@ -11,6 +11,7 @@ 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)

From 2cd0ec7b11cbba060b912dc7477d5bb8fa289df1 Mon Sep 17 00:00:00 2001
From: Michelle Tilley <michelle@michelletilley.net>
Date: Thu, 26 Mar 2020 16:10:42 -0700
Subject: [PATCH 19/19] Let's get some bundle sizes in here

---
 .github/workflows/bundlesize.yml | 23 +++++++++++++++++++++++
 package.json                     | 13 +++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 .github/workflows/bundlesize.yml

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/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"
+      }
+    ]
   }
 }