1 files changed, 20 insertions, 16 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 327e91926..274c46b9e 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react';
-
+import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -8,23 +7,28 @@ export interface FlexProps {
     flexWrap?: 'wrap' | 'nowrap';
     justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
-    width?: string;
+    width?: MediaChoice;
+    height?: MediaChoice;
     backgroundColor?: ColorOption;
-    className?: string;
+    inline?: boolean;
+    flexGrow?: number | string;
 }
 
-const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
-    <div className={className}>{children}</div>
-);
-
-export const Flex = styled(PlainFlex)`
-    display: flex;
-    flex-direction: ${props => props.direction};
-    flex-wrap: ${props => props.flexWrap};
-    justify-content: ${props => props.justify};
-    align-items: ${props => props.align};
-    ${props => cssRuleIfExists(props, 'width')}
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+export const Flex =
+    styled.div <
+    FlexProps >
+    `
+    && {
+        display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+        flex-direction: ${props => props.direction};
+        flex-wrap: ${props => props.flexWrap};
+        ${props => cssRuleIfExists(props, 'flexGrow')}
+        justify-content: ${props => props.justify};
+        align-items: ${props => props.align};
+        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        ${props => (props.width ? stylesForMedia('width', props.width) : '')}
+        ${props => (props.height ? stylesForMedia('height', props.height) : '')}
+    }
 `;
 
 Flex.defaultProps = {