feat(system): add Popover component

packages/status-react/src/system/popover/index.tsx

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger } from './popover'

packages/status-react/src/system/popover/popover.docs.mdx

@@ -0,0 +1,5 @@
+# Popover
+
+```tsx
+import { Popover } from '@status-im/components'
+```

packages/status-react/src/system/popover/popover.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import * as Primitive from '@radix-ui/react-popover'
+
+import { Content } from './styles'
+
+interface TriggerProps {
+  children: [React.ReactElement, React.ReactElement]
+}
+
+const PopoverTrigger = (props: TriggerProps) => {
+  const { children } = props
+
+  const [trigger, content] = children
+
+  return (
+    <Primitive.Root>
+      <Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
+      {content}
+    </Primitive.Root>
+  )
+}
+
+interface PopoverProps {
+  children: React.ReactNode
+}
+
+const Popover = (props: PopoverProps, ref) => {
+  const { children } = props
+
+  return (
+    <Content as={Primitive.Content} portalled={true} ref={ref}>
+      {children}
+    </Content>
+  )
+}
+
+const _Popover = forwardRef(Popover)
+
+export { _Popover as Popover, PopoverTrigger }

packages/status-react/src/system/popover/styles.tsx

@@ -0,0 +1,13 @@
+import { styled } from '~/src/styles/config'
+
+import type { VariantProps } from '~/src/styles/config'
+
+export type Variants = VariantProps<typeof Content>
+
+export const Content = styled('div', {
+  backgroundColor: 'white',
+  padding: '$4',
+  borderRadius: 8,
+  boxShadow:
+    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+})