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>
-`;