feat(SW-612): Add popover component

components/TempDesignSystem/Popover/index.tsx

@@ -0,0 +1,50 @@
+import { useRef } from "react"
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  OverlayArrow,
+  Popover as RAPopover,
+} from "react-aria-components"
+
+import { CloseLargeIcon } from "@/components/Icons"
+
+import { Arrow } from "./Arrow"
+import { PopoverProps } from "./popover"
+
+import styles from "./popover.module.css"
+
+export default function Popover({
+  triggerContent,
+  children,
+  ...props
+}: PopoverProps) {
+  let triggerRef = useRef(null)
+
+  return (
+    <DialogTrigger>
+      <Button className={styles.trigger}>{triggerContent}</Button>
+
+      <RAPopover
+        {...props}
+        offset={16}
+        crossOffset={-24}
+        className={styles.root}
+      >
+        <OverlayArrow>
+          <Arrow />
+        </OverlayArrow>
+        <Dialog>
+          {({ close }) => (
+            <>
+              <Button className={styles.closeButton} onPress={close}>
+                <CloseLargeIcon height={20} width={20} />
+              </Button>
+              {children}
+            </>
+          )}
+        </Dialog>
+      </RAPopover>
+    </DialogTrigger>
+  )
+}