✨ Add default flex to Media container

Author: exah

src/media.js

@@ -3,7 +3,7 @@ import { Flex } from './flex'
 import { Box } from './box'
 
 const Media = (props) => (
-  <Flex {...props} />
+  <Flex flex='1 1 auto' {...props} />
 )
 
 const MediaSide = (props) => (
@@ -14,10 +14,8 @@ const MediaContent = (props) => (
   <Box flex='1 1 auto' {...props} />
 )
 
-Object.assign(Media, {
-  Side: MediaSide,
-  Content: MediaContent
-})
+Media.Side = MediaSide
+Media.Content = MediaContent
 
 export {
   Media,

test/__snapshots__/index.js.snap

@@ -1514,11 +1514,24 @@ exports[`Layout 1`] = `
 `;
 
 exports[`Media 1`] = `
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
 .emotion-4 {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   min-width: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1535,16 +1548,6 @@ exports[`Media 1`] = `
   flex: 0 0 auto;
 }
 
-.emotion-2 {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
 <div
   className="emotion-4 emotion-5"
 >