Improve utilities and try to use them in simple form component

1 files changed, 9 insertions, 1 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index f928ed25b..8366d5748 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -10,13 +10,16 @@ export interface ContainerProps {
     right?: string;
     bottom?: string;
     left?: string;
+    width?: string;
     maxWidth?: string;
-    margin: string;
+    margin?: string;
     marginTop?: string;
     marginRight?: string;
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
+    boxShadow?: string;
+    borderRadius?: string;
     className?: string;
     backgroundColor?: ColorOption;
 }
@@ -32,6 +35,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'right')}
     ${props => cssRuleIfExists(props, 'bottom')}
     ${props => cssRuleIfExists(props, 'left')}
+    ${props => cssRuleIfExists(props, 'width')}
     ${props => cssRuleIfExists(props, 'max-width')}
     ${props => cssRuleIfExists(props, 'margin')}
     ${props => cssRuleIfExists(props, 'margin-top')}
@@ -39,9 +43,13 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'margin-bottom')}
     ${props => cssRuleIfExists(props, 'margin-left')}
     ${props => cssRuleIfExists(props, 'padding')}
+    ${props => cssRuleIfExists(props, 'box-shadow')}
+    ${props => cssRuleIfExists(props, 'border-radius')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 
 Container.defaultProps = {
     display: 'inline-block',
 };
+
+Container.displayName = 'Container';