From 5c353b11c2c8f440bf1b11da385b19a313b57265 Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 9 Aug 2023 14:00:26 +0200
Subject: [PATCH] updating Box and Stack api

---
 packages/libs/react-ui/src/components/Box/Box.tsx     | 9 ++++++---
 packages/libs/react-ui/src/components/Stack/Stack.tsx | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Box/Box.tsx b/packages/libs/react-ui/src/components/Box/Box.tsx
index dd888fdf9d..16f0434b38 100644
--- a/packages/libs/react-ui/src/components/Box/Box.tsx
+++ b/packages/libs/react-ui/src/components/Box/Box.tsx
@@ -5,6 +5,7 @@ export interface IBoxProps
   extends Partial<
     Pick<
       Sprinkles,
+      | 'display'
       | 'margin'
       | 'marginX'
       | 'marginY'
@@ -14,12 +15,13 @@ export interface IBoxProps
       | 'marginRight'
     >
   > {
-  component?: ElementType;
+  as?: ElementType;
   children?: React.ReactNode;
 }
 
 export const Box = ({
-  component = 'div',
+  as = 'div',
+  display = 'block',
   margin = undefined,
   marginX = undefined,
   marginY = undefined,
@@ -30,9 +32,10 @@ export const Box = ({
   children,
 }: IBoxProps): React.ReactElement => {
   return createElement(
-    component,
+    as,
     {
       className: sprinkles({
+        display,
         margin,
         marginX,
         marginY,
diff --git a/packages/libs/react-ui/src/components/Stack/Stack.tsx b/packages/libs/react-ui/src/components/Stack/Stack.tsx
index 2340db6821..9f289da7ae 100644
--- a/packages/libs/react-ui/src/components/Stack/Stack.tsx
+++ b/packages/libs/react-ui/src/components/Stack/Stack.tsx
@@ -25,12 +25,12 @@ export interface IStackProps
   direction?: Sprinkles['flexDirection'];
   wrap?: Sprinkles['flexWrap'];
   spacing?: Sprinkles['gap'];
-  component?: ElementType;
+  as?: ElementType;
   children?: React.ReactNode;
 }
 
 export const Stack = ({
-  component = 'div',
+  as = 'div',
   margin = undefined,
   marginX = undefined,
   marginY = undefined,
@@ -54,7 +54,7 @@ export const Stack = ({
   children,
 }: IStackProps): React.ReactElement => {
   return createElement(
-    component,
+    as,
     {
       className: sprinkles({
         display: 'flex',