feat(SW-612): Add popover component

components/TempDesignSystem/Popover/Arrow/arrow.module.css

@@ -0,0 +1,22 @@
+.arrow {
+  transform-origin: center;
+  transform: translateY(-2px);
+}
+
+[data-placement="left"] .arrow,
+[data-placement="left top"] .arrow,
+[data-placement="left bottom"] .arrow {
+  transform: rotate(270deg) translateY(-6px);
+}
+
+[data-placement="right"] .arrow,
+[data-placement="right top"] .arrow,
+[data-placement="right bottom"] .arrow {
+  transform: rotate(90deg) translateY(-6px);
+}
+
+[data-placement="bottom"] .arrow,
+[data-placement="bottom left"] .arrow,
+[data-placement="bottom right"] .arrow {
+  transform: rotate(180deg) translateY(-2px);
+}

components/TempDesignSystem/Popover/Arrow/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./arrow.module.css"
+
+export function Arrow() {
+  return (
+    <div className={styles.arrow}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="27"
+        height="13"
+        fill="none"
+      >
+        <path
+          fill="#fff"
+          d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z"
+        />
+      </svg>
+    </div>
+  )
+}