diff --git a/.changeset/fuzzy-weeks-peel.md b/.changeset/fuzzy-weeks-peel.md
new file mode 100644
index 00000000000..647a9e6a271
--- /dev/null
+++ b/.changeset/fuzzy-weeks-peel.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Popover: Remove `caret` from Popover
diff --git a/packages/react/src/Popover/Popover.docs.json b/packages/react/src/Popover/Popover.docs.json
index 83b8b93d5c2..41c3f9e0270 100644
--- a/packages/react/src/Popover/Popover.docs.json
+++ b/packages/react/src/Popover/Popover.docs.json
@@ -12,12 +12,6 @@
       "defaultValue": "div",
       "description": "Sets the underlying HTML tag for the component"
     },
-    {
-      "name": "caret",
-      "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ",
-      "defaultValue": "'top'",
-      "description": "Controls the position of the caret"
-    },
     {
       "name": "open",
       "type": "boolean",
diff --git a/packages/react/src/Popover/Popover.figma.tsx b/packages/react/src/Popover/Popover.figma.tsx
index 9ce95da1600..99411bb4269 100644
--- a/packages/react/src/Popover/Popover.figma.tsx
+++ b/packages/react/src/Popover/Popover.figma.tsx
@@ -15,23 +15,9 @@ figma.connect(Popover, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Prim
     body: figma.string('body'),
     heading: figma.string('heading'),
     action: figma.children('Action'),
-    caret: figma.enum('caret', {
-      top: 'top',
-      'top-left': 'top-left',
-      'top-right': 'top-right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom-left',
-      'bottom-right': 'bottom-right',
-      left: 'left',
-      'left-top': 'left-top',
-      'left-bottom': 'left-bottom',
-      right: 'right',
-      'right-top': 'right-top',
-      'right-bottom': 'right-bottom',
-    }),
   },
-  example: ({caret, heading, body, action}) => (
-    <Popover caret={caret}>
+  example: ({heading, body, action}) => (
+    <Popover>
       <Popover.Content>
         <Heading
           sx={{
diff --git a/packages/react/src/Popover/Popover.stories.tsx b/packages/react/src/Popover/Popover.stories.tsx
index f5f10946b0e..99874a3d766 100644
--- a/packages/react/src/Popover/Popover.stories.tsx
+++ b/packages/react/src/Popover/Popover.stories.tsx
@@ -11,7 +11,7 @@ export default {
 } as Meta<typeof Popover>
 
 export const Default = () => (
-  <Popover relative open={true} caret="top">
+  <Popover relative open={true}>
     <Popover.Content sx={{marginTop: 2}}>
       <Heading sx={{fontSize: 2}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
@@ -31,31 +31,11 @@ export const Playground: StoryFn<typeof Popover> = args => (
 )
 
 Playground.args = {
-  caret: 'top',
   open: true,
   relative: true,
 }
 
 Playground.argTypes = {
-  caret: {
-    control: {
-      type: 'radio',
-    },
-    options: [
-      'top',
-      'bottom',
-      'left',
-      'right',
-      'bottom-left',
-      'bottom-right',
-      'top-left',
-      'top-right',
-      'left-bottom',
-      'left-top',
-      'right-bottom',
-      'right-top',
-    ],
-  },
   open: {
     control: {
       type: 'boolean',
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 711391b338d..e91f904ec5b 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -1,36 +1,17 @@
-import {clsx} from 'clsx'
 import styled from 'styled-components'
 import {get} from '../constants'
 import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-type CaretPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'top-left'
-  | 'top-right'
-  | 'left-bottom'
-  | 'left-top'
-  | 'right-bottom'
-  | 'right-top'
-
 type StyledPopoverProps = {
-  /**
-   * @deprecated `caret` is deprecated and will be removed in v38.
-   */
-  caret?: CaretPosition
   relative?: boolean
   open?: boolean
 } & SxProp
 
-const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret = 'top'}) => {
+const Popover = styled.div.attrs<StyledPopoverProps>(({className}) => {
   return {
-    className: clsx(className, `caret-pos--${caret}`),
+    className,
   }
 })<StyledPopoverProps>`
   position: ${props => (props.relative ? 'relative' : 'absolute')};
@@ -48,173 +29,6 @@ const PopoverContent = styled.div<SxProp>`
   margin-left: auto;
   padding: ${get('space.4')};
   background-color: ${get('colors.canvas.overlay')};
-
-  // 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.border.default')};
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -${get('space.2')};
-    border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${get('colors.canvas.overlay')};
-  }
-
-  // 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.border.default')};
-    }
-
-    &::after {
-      bottom: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-top-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // 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.border.default')};
-    }
-
-    &::after {
-      right: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-left-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // 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.border.default')};
-    }
-
-    &::after {
-      left: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-right-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // 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);
-    }
-  }
-
   ${sx};
 `
 
diff --git a/packages/react/src/__tests__/Popover.test.tsx b/packages/react/src/__tests__/Popover.test.tsx
index bb1265b25ca..6e3845f09a1 100644
--- a/packages/react/src/__tests__/Popover.test.tsx
+++ b/packages/react/src/__tests__/Popover.test.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
-import type {PopoverProps} from '../Popover'
 import Popover from '../Popover'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
 const comp = (
-  <Popover caret="top" open>
+  <Popover open>
     <Popover.Content>Hello!</Popover.Content>
   </Popover>
 )
@@ -24,7 +23,7 @@ describe('Popover', () => {
 
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(
-      <Popover caret="top" open>
+      <Popover open>
         <Popover.Content>Hello!</Popover.Content>
       </Popover>,
     )
@@ -32,33 +31,6 @@ describe('Popover', () => {
     expect(results).toHaveNoViolations()
   })
 
-  const CARET_POSITIONS: PopoverProps['caret'][] = [
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'bottom-left',
-    'bottom-right',
-    'top-left',
-    'top-right',
-    'left-bottom',
-    'left-top',
-    'right-bottom',
-    'right-top',
-  ]
-
-  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/packages/react/src/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Popover.test.tsx.snap
deleted file mode 100644
index 7ac013f95a9..00000000000
--- a/packages/react/src/__tests__/__snapshots__/Popover.test.tsx.snap
+++ /dev/null
@@ -1,2485 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popover renders correctly for a caret position of bottom 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--bottom"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--bottom-left"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--bottom-right"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left-bottom"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left-top 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left-top"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of right 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--right"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--right-bottom"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of right-top 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--right-top"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of top 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--top"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of top-left 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--top-left"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of top-right 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c3 {
-  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c3::before,
-.c3::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c3::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c3::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--top-right"
-  open={true}
->
-  <div
-    className="c2 c3"
-  >
-    Hello!
-  </div>
-</div>
-`;