/** @jsx jsx */
import PropTypes from "prop-types"
import {css, jsx} from "@emotion/core"

const Bubble = props => (
  <div
    css={css`
      color: ${props.color ? props.color : "inherit"};
      background: ${props.background ? props.background : "inherit"};
      border-radius: ${props.radius ? `${props.radius}px` : 0};
      border: 1px solid ${props.border};
      padding: ${props.padding ? `${props.padding}px` : 0};
      font-size: ${props.fontSize};
      font-family: ${props.fontFamily};
    `}
  >
    {props.children}
  </div>
)

Bubble.propTypes = {
  color: PropTypes.string,
  background: PropTypes.string,
  border: PropTypes.string,
  padding: PropTypes.number,
  radius: PropTypes.number,
  fontSize: PropTypes.string,
  fontFamily: PropTypes.string,
  children: PropTypes.array,
}

export default Bubble

@@ -43,16 +43,17 @@
 p-types%22
+;
 %0Aimport 
@@ -57,16 +57,17 @@
 rt %7B
+ 
 css, jsx
 %7D fr
@@ -62,16 +62,17 @@
 css, jsx
+ 
 %7D from %22
@@ -85,16 +85,17 @@
 on/core%22
+;
 %0A%0Aconst 
@@ -103,21 +103,23 @@
 ubble = 
+(
 props
+)
  =%3E (%0A  
@@ -545,16 +545,17 @@
 %3C/div%3E%0A)
+;
 %0A%0ABubble
@@ -694,16 +694,55 @@
  radius:
+ PropTypes.oneOfType(%5BPropTypes.string,
  PropTyp
@@ -746,24 +746,26 @@
 Types.number
+%5D)
 ,%0A  fontSize
@@ -846,16 +846,17 @@
 array,%0A%7D
+;
 %0A%0Aexport
@@ -870,9 +870,10 @@
 t Bubble
+;
 %0A

Fix radius proptype