1 files changed, 39 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
new file mode 100644
index 000000000..fd218b0cd
--- /dev/null
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -0,0 +1,39 @@
+import { MediaChoice, stylesForMedia } from '../../style/media';
+import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
+
+export interface FlexProps {
+    direction?: 'row' | 'column';
+    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?: MediaChoice;
+    height?: MediaChoice;
+    backgroundColor?: ColorOption;
+    inline?: boolean;
+    flexGrow?: number | string;
+}
+
+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 => stylesForMedia('width', props.width || 'auto')}
+    ${props => stylesForMedia('height', props.height || 'auto')}
+`;
+
+Flex.defaultProps = {
+    direction: 'row',
+    flexWrap: 'nowrap',
+    justify: 'center',
+    align: 'center',
+};
+
+Flex.displayName = 'Flex';