feat: adding flex box

src/atoms/box.ts

@@ -0,0 +1,39 @@
+export const Box = (styled: any) =>
+    styled('div', {
+        display: 'flex',
+        width: '100%',
+        wordWrap: 'break-word',
+        items: 'center',
+    });
+
+export const HBox = (styled: any) =>
+    styled(Box, {
+        variants: {
+            direction: {
+                rowReverse: {
+                    flexDirection: 'row-reverse',
+                },
+            },
+        },
+    });
+
+export const VBox = (styled: any) =>
+    styled(Box, {
+        flexDirection: 'column',
+        variants: {
+            direction: {
+                columnReverse: {
+                    flexDirection: 'column-reverse',
+                },
+            },
+        },
+    });
+
+export const FormBox = (styled: any) =>
+    styled('form', {
+        display: 'flex',
+        w: '100%',
+        wordWrap: 'break-word',
+        items: 'center',
+        flexDirection: 'column',
+    });

src/atoms/index.ts

@@ -1,10 +1,12 @@
+import { Box } from './box';
 import { Button } from './button';
 import { Card } from './card';
 import { Input } from './input';
 import { Overlay, OverlayInteract } from './overlay';
 import { Text } from './text';
 
 export const sidanAtoms = (styled: any) => ({
+    Box: Box(styled),
     Card: Card(styled),
     Button: Button(styled),
     Input: Input(styled),