feat(system): add Separator primitive

packages/status-react/package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-context-menu": "^0.1.6",
     "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "@radix-ui/react-separator": "^0.1.4",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@radix-ui/react-visually-hidden": "^0.1.4",
     "@status-im/core": "^0.0.0",

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

@@ -0,0 +1 @@
+export { Separator } from './separator'

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

@@ -0,0 +1,31 @@
+import { Root } from '@radix-ui/react-separator'
+
+import { styled } from '~/src/styles/config'
+
+export const Separator = styled(Root, {
+  border: 'none',
+  margin: 0,
+  flexShrink: 0,
+  backgroundColor: '$accent-7',
+  cursor: 'default',
+
+  variants: {
+    size: {
+      '1': {
+        '&[data-orientation="horizontal"]': {
+          height: '1px',
+          width: '100%',
+        },
+
+        '&[data-orientation="vertical"]': {
+          width: '1px',
+          height: '100%',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: '1',
+  },
+})