From 73dbbcafc3f901d85dd649294ac36799cb30f69b Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Mon, 28 Jan 2019 14:18:30 -0800
Subject: [PATCH 01/16] open styles

---
 src/Details.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/Details.js b/src/Details.js
index ad30afb8d35..c73ef63c4d3 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -4,7 +4,24 @@ import styled from 'styled-components'
 import {COMMON} from './constants'
 import theme from './theme'
 
+const openStyles = `
+  & > summary::before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 80;
+    display: block;
+    cursor: default;
+    content: " ";
+    background: transparent;
+  }
+  background: 'red';
+`
+
 const DetailsReset = styled('details')`
+  ${props => props.open ? openStyles : `background: 'red';`}
   & > summary {
     list-style: none;
   }

From 2e10981631d159bef7250ec3e94f4ac0ab15f857 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 11:14:09 -0800
Subject: [PATCH 02/16] move Button styles to separate file

---
 src/Button.js       | 58 +++-------------------------------------
 src/ButtonStyles.js | 65 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 55 deletions(-)
 create mode 100644 src/ButtonStyles.js

diff --git a/src/Button.js b/src/Button.js
index 34e6ed06b5f..a093133c1b0 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON, get} from './constants'
 import theme from './theme'
+import getButtonStyles from  './ButtonStyles'
 import {width} from 'styled-system'
 
 function fontSize({size = '14px', ...props}) {
@@ -17,64 +18,11 @@ const ButtonBase = ({is: Tag, onClick, disabled, theme, ...rest}) => {
 }
 
 const Button = styled(ButtonBase)`
-    position: relative;
-    display: inline-block;
-    padding: 6px 12px;
-    color: ${get('colors.gray.9')};
-    background-color: ${get('colors.gray.1')};
-    background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%);
-    font-size: ${get('fontSizes.1')}px;
-    font-weight: ${get('fontWeights.bold')};
-    line-height: 20px;
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    background-repeat: repeat-x;
-    background-position: -1px -1px;
-    background-size: 110% 110%;
-    border: 1px solid ${get('colors.button.border')};
-    border-radius: 0.25em;
-    appearance: none;
+    ${props => props.theme ? getButtonStyles(props.theme) : ''};
     ${fontSize};
     ${COMMON};
     ${width};
-
-    &:hover {
-      background-color: ${get('colors.button.hoverBg')};
-      background-image: linear-gradient(-180deg, ${get('colors.button.bg2')} 0%, ${get('colors.button.hoverBg')} 90%);
-      background-position: -0.5em center;
-      border-color: ${get('colors.blackfade35')};
-      text-decoration: none;
-      background-repeat: repeat-x;
-    }
-
-    &:active {
-      background-color: ${get('colors.button.activeBg')};
-      background-image: none;
-      box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset; //$btn-active-shadow;
-      border-color: ${get('colors.button.border')} //convert black to rbg here
-    }
-
-    &:selected {
-      background-color: ${get('colors.button.activeBg')};
-      background-image: none;
-      box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset; //$btn-active-shadow;
-      border-color: ${get('colors.button.border')};
-    }
-
-    &:disabled {
-      color: ${get('colors.button.disabledColor')};
-      background-color: ${get('colors.gray.1')};
-      background-image: none;
-      border-color: ${get('colors.blackfade20')}
-      box-shadow: none;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${get('colors.button.focusShadow')} 0px 0px 0px 0.2em;
-    }`
+`
 
 Button.defaultProps = {
   is: 'button',
diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js
new file mode 100644
index 00000000000..b19ffbe739e
--- /dev/null
+++ b/src/ButtonStyles.js
@@ -0,0 +1,65 @@
+import {get} from './constants'
+
+const getButtonStyles = (theme) => {
+  return (
+    `
+      position: relative;
+      display: inline-block;
+      padding: 6px 12px;
+      color: ${get('colors.gray.9')(theme)};
+      background-color: ${get('colors.gray.1')(theme)};
+      background-image: linear-gradient(-180deg, ${get('colors.gray.0')(theme)} 0%, ${get('colors.button.bg2')(theme)} 90%);
+      font-size: ${get('fontSizes.1')(theme)}px;
+      font-weight: ${get('fontWeights.bold')(theme)};
+      line-height: 20px;
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+      background-repeat: repeat-x;
+      background-position: -1px -1px;
+      background-size: 110% 110%;
+      border: 1px solid ${get('colors.button.border')(theme)};
+      border-radius: 0.25em;
+      appearance: none;
+
+      &:hover {
+        background-color: ${get('colors.button.hoverBg')(theme)};
+        background-image: linear-gradient(-180deg, ${get('colors.button.bg2')(theme)} 0%, ${get('colors.button.hoverBg')(theme)} 90%);
+        background-position: -0.5em center;
+        border-color: ${get('colors.blackfade35')(theme)};
+        text-decoration: none;
+        background-repeat: repeat-x;
+      }
+
+      &:active {
+        background-color: ${get('colors.button.activeBg')(theme)};
+        background-image: none;
+        box-shadow: ${get('colors.blackfade15')(theme)} 0px 0.15em 0.3em inset;
+        border-color: ${get('colors.button.border')(theme)} //convert black to rbg here
+      }
+
+      &:selected {
+        background-color: ${get('colors.button.activeBg')(theme)};
+        background-image: none;
+        box-shadow: ${get('colors.blackfade15')(theme)} 0px 0.15em 0.3em inset;
+        border-color: ${get('colors.button.border')(theme)};
+      }
+
+      &:disabled {
+        color: ${get('colors.button.disabledColor')(theme)};
+        background-color: ${get('colors.gray.1')(theme)};
+        background-image: none;
+        border-color: ${get('colors.blackfade20')(theme)}
+        box-shadow: none;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: ${get('colors.button.focusShadow')(theme)} 0px 0px 0px 0.2em;
+      }
+    `
+  )
+}
+
+export default getButtonStyles

From bafb2ba42e9745f9c30399fc10765165046e1294 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 11:14:18 -0800
Subject: [PATCH 03/16] use Context in Details

---
 src/Details.js  | 33 +++++++++++++++++++++++++++------
 src/Dropdown.js | 16 +++++++++++-----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/Details.js b/src/Details.js
index ad30afb8d35..da723402d1a 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -16,11 +16,31 @@ const DetailsReset = styled('details')`
   }
 `
 
+const overlayStyles = `
+background: red;
+  & > summary::before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 80;
+    display: block;
+    cursor: default;
+    content: " ";
+    background: transparent;
+  }
+`
+
+export const DetailsContext = React.createContext({
+  toggle: () => {},
+});
+
 class DetailsBase extends React.Component {
   constructor(props) {
     super(props)
-    this.state = {open: Boolean(props.open)}
     this.toggle = this.toggle.bind(this)
+    this.state = {open: Boolean(props.open), toggle: this.toggle}
   }
 
   toggle(event) {
@@ -31,13 +51,14 @@ class DetailsBase extends React.Component {
   }
 
   render() {
-    const {children, render = getRenderer(children), ...rest} = this.props
+    const {children, render = getRenderer(children), overlay, ...rest} = this.props
     const {open} = this.state
-
     return (
-      <DetailsReset {...rest} open={open}>
-        {render({open, toggle: this.toggle})}
-      </DetailsReset>
+      <DetailsContext.Provider value={this.state}>
+        <DetailsReset {...rest} open={open} css="background: red">
+          {render({open, toggle: this.toggle})}
+        </DetailsReset>
+      </DetailsContext.Provider>
     )
   }
 }
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 1fd1dbae5b9..fbc02468721 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -6,8 +6,10 @@ import Details from './Details'
 import {COMMON, get} from './constants'
 import getDirectionStyles from './DropdownStyles'
 import theme from './theme'
+import {DetailsContext} from './Details';
 
-const Dropdown = styled(Details)`
+const DropdownBase = (props) => <Details overlay {...props}/>
+const Dropdown = styled(DropdownBase)`
   position: relative;
   display: inline-block;
   ${COMMON};
@@ -25,10 +27,14 @@ const DropdownCaret = styled.div`
 
 const DropdownButton = ({children, ...rest}) => {
   return (
-    <Button is="summary" aria-haspopup="true" {...rest}>
-      {children}
-      <DropdownCaret />
-    </Button>
+    <DetailsContext.Consumer>
+      {({toggle}) => (
+        <Button is='summary' aria-haspopup='true' onClick={toggle} {...rest}>
+          {children}
+          <DropdownCaret/>
+        </Button>
+      )}
+    </DetailsContext.Consumer>
   )
 }
 

From f5825bd5f8c18b6b9da04c5327374ca95245d105 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 11:21:47 -0800
Subject: [PATCH 04/16] update react

---
 package-lock.json | 495 ++++++++++------------------------------------
 package.json      |   2 +-
 2 files changed, 101 insertions(+), 396 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6cff0258297..c94c2c3aa4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "8.0.0-beta",
+  "version": "9.0.0-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -69,7 +69,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
       "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -168,6 +167,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
       "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -889,31 +889,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/babel-utils": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz",
-      "integrity": "sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==",
-      "requires": {
-        "@emotion/hash": "^0.6.6",
-        "@emotion/memoize": "^0.6.6",
-        "@emotion/serialize": "^0.9.1",
-        "convert-source-map": "^1.5.1",
-        "find-root": "^1.1.0",
-        "source-map": "^0.7.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
-        }
-      }
-    },
-    "@emotion/hash": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
-      "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="
-    },
     "@emotion/is-prop-valid": {
       "version": "0.6.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz",
@@ -927,32 +902,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
       "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
     },
-    "@emotion/serialize": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz",
-      "integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==",
-      "requires": {
-        "@emotion/hash": "^0.6.6",
-        "@emotion/memoize": "^0.6.6",
-        "@emotion/unitless": "^0.6.7",
-        "@emotion/utils": "^0.8.2"
-      }
-    },
-    "@emotion/stylis": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz",
-      "integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ=="
-    },
-    "@emotion/unitless": {
-      "version": "0.6.7",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz",
-      "integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg=="
-    },
-    "@emotion/utils": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
-      "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
-    },
     "@githubprimer/octicons-react": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.2.tgz",
@@ -1320,7 +1269,8 @@
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
     },
     "acorn": {
       "version": "5.7.3",
@@ -1429,7 +1379,8 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -1865,6 +1816,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
       "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "dev": true,
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -1874,12 +1826,14 @@
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
         },
         "chalk": {
           "version": "1.1.3",
           "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -1891,12 +1845,14 @@
         "js-tokens": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+          "dev": true
         },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1904,7 +1860,8 @@
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
         }
       }
     },
@@ -1944,6 +1901,7 @@
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
       "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
+      "dev": true,
       "requires": {
         "babel-messages": "^6.23.0",
         "babel-runtime": "^6.26.0",
@@ -1959,6 +1917,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
           "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
+          "dev": true,
           "requires": {
             "repeating": "^2.0.0"
           }
@@ -1966,12 +1925,14 @@
         "jsesc": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
-          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
+          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
+          "dev": true
         },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -2129,6 +2090,7 @@
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
       "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-template": "^6.24.1"
@@ -2160,6 +2122,7 @@
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
       "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -2179,59 +2142,6 @@
         "babel-runtime": "^6.22.0"
       }
     },
-    "babel-plugin-emotion": {
-      "version": "9.2.10",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.10.tgz",
-      "integrity": "sha512-ezELJPqCSA+FJ1XgUlOFbk1dilM+db610GdX81D+IBiqwEu9l1ifEP7oLslL3bew3LKT+PcbSltNBDvZACBe2g==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/babel-utils": "^0.6.4",
-        "@emotion/hash": "^0.6.2",
-        "@emotion/memoize": "^0.6.1",
-        "@emotion/stylis": "^0.7.0",
-        "babel-core": "^6.26.3",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "find-root": "^1.1.0",
-        "mkdirp": "^0.5.1",
-        "source-map": "^0.5.7",
-        "touch": "^2.0.1"
-      },
-      "dependencies": {
-        "babel-core": {
-          "version": "6.26.3",
-          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "requires": {
-            "babel-code-frame": "^6.26.0",
-            "babel-generator": "^6.26.0",
-            "babel-helpers": "^6.24.1",
-            "babel-messages": "^6.23.0",
-            "babel-register": "^6.26.0",
-            "babel-runtime": "^6.26.0",
-            "babel-template": "^6.26.0",
-            "babel-traverse": "^6.26.0",
-            "babel-types": "^6.26.0",
-            "babylon": "^6.18.0",
-            "convert-source-map": "^1.5.1",
-            "debug": "^2.6.9",
-            "json5": "^0.5.1",
-            "lodash": "^4.17.4",
-            "minimatch": "^3.0.4",
-            "path-is-absolute": "^1.0.1",
-            "private": "^0.1.8",
-            "slash": "^1.0.0",
-            "source-map": "^0.5.7"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
-      }
-    },
     "babel-plugin-istanbul": {
       "version": "4.1.6",
       "resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
@@ -2280,7 +2190,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.9.2.tgz",
       "integrity": "sha512-McnheW8RkBkur/mQw7rEwQO/oUUruQ/nIIj5LIRpsVL8pzG1oo1Y53xyvAYeOfamIrl4/ta7g1G/kuTR1ekO3A==",
-      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.0.0",
         "babel-plugin-syntax-jsx": "^6.18.0",
@@ -2845,6 +2754,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
       "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
+      "dev": true,
       "requires": {
         "babel-core": "^6.26.0",
         "babel-runtime": "^6.26.0",
@@ -2859,6 +2769,7 @@
           "version": "6.26.3",
           "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
           "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
           "requires": {
             "babel-code-frame": "^6.26.0",
             "babel-generator": "^6.26.0",
@@ -2884,12 +2795,14 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         },
         "source-map-support": {
           "version": "0.4.18",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
           "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+          "dev": true,
           "requires": {
             "source-map": "^0.5.6"
           }
@@ -2900,6 +2813,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -2908,7 +2822,8 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "dev": true
         }
       }
     },
@@ -2916,6 +2831,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
       "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-traverse": "^6.26.0",
@@ -2928,6 +2844,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
       "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+      "dev": true,
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-messages": "^6.23.0",
@@ -2943,7 +2860,8 @@
         "globals": {
           "version": "9.18.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
+          "dev": true
         }
       }
     },
@@ -2951,6 +2869,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
       "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "esutils": "^2.0.2",
@@ -2961,14 +2880,16 @@
         "to-fast-properties": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
+          "dev": true
         }
       }
     },
     "babylon": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true
     },
     "bail": {
       "version": "1.0.3",
@@ -2979,7 +2900,8 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
     },
     "base": {
       "version": "0.11.2",
@@ -3095,6 +3017,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3299,12 +3222,6 @@
         }
       }
     },
-    "buffer-from": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
-      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==",
-      "dev": true
-    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -3751,7 +3668,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -3846,6 +3764,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
       "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
+      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -3873,7 +3792,8 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
+      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3912,46 +3832,6 @@
         "elliptic": "^6.0.0"
       }
     },
-    "create-emotion": {
-      "version": "9.2.6",
-      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.6.tgz",
-      "integrity": "sha512-4g46va26lw6DPfKF7HeWY3OI/qoaNSwpvO+li8dMydZfC6f6+ZffwlYHeIyAhGR8Z8C8c0H9J1pJbQRtb9LScw==",
-      "requires": {
-        "@emotion/hash": "^0.6.2",
-        "@emotion/memoize": "^0.6.1",
-        "@emotion/stylis": "^0.6.10",
-        "@emotion/unitless": "^0.6.2",
-        "csstype": "^2.5.2",
-        "stylis": "^3.5.0",
-        "stylis-rule-sheet": "^0.0.10"
-      },
-      "dependencies": {
-        "@emotion/stylis": {
-          "version": "0.6.12",
-          "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.12.tgz",
-          "integrity": "sha512-yS+t7l5FeYeiIyADyqjFBJvdotpphHb2S3mP4qak5BpV7ODvxuyAVF24IchEslW+A1MWHAhn5SiOW6GZIumiEQ=="
-        }
-      }
-    },
-    "create-emotion-server": {
-      "version": "9.2.10",
-      "resolved": "https://registry.npmjs.org/create-emotion-server/-/create-emotion-server-9.2.10.tgz",
-      "integrity": "sha512-49kTETlrN3QzPljAFasM2P3wetYaKyyZG731KXw/6ONvKJhTdMalBFM0GsfxawyOZYRWDe+bUobkrdGJZV7Cfw==",
-      "dev": true,
-      "requires": {
-        "html-tokenize": "^2.0.0",
-        "multipipe": "^1.0.2",
-        "through": "^2.3.8"
-      }
-    },
-    "create-emotion-styled": {
-      "version": "9.2.8",
-      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.8.tgz",
-      "integrity": "sha512-2LrNM5MREWzI5hZK+LyiBHglwE18WE3AEbBQgpHQ1+zmyLSm/dJsUZBeFAwuIMb+TjNZP0KsMZlV776ufOtFdg==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.6.1"
-      }
-    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4066,8 +3946,7 @@
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
-      "dev": true
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
     },
     "css-color-names": {
       "version": "0.0.1",
@@ -4166,7 +4045,6 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.2.tgz",
       "integrity": "sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==",
-      "dev": true,
       "requires": {
         "css-color-keywords": "^1.0.0",
         "fbjs": "^0.8.5",
@@ -4262,11 +4140,6 @@
         "cssom": "0.3.x"
       }
     },
-    "csstype": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
-      "integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw=="
-    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -4344,6 +4217,7 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -4664,47 +4538,6 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
-    "duplexer2": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "^2.0.2"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
-      }
-    },
     "duplexify": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.1.tgz",
@@ -4805,33 +4638,6 @@
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
       "dev": true
     },
-    "emotion": {
-      "version": "9.2.8",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.8.tgz",
-      "integrity": "sha512-4CT7S2+TDcd9qTSosd3VibERAsaZjhraeLxLWRuV6epX5XdHQjeLFqAlion/iT8M3UNQx9bqmlOTd+KaUj2M8Q==",
-      "requires": {
-        "babel-plugin-emotion": "^9.2.8",
-        "create-emotion": "^9.2.6"
-      }
-    },
-    "emotion-server": {
-      "version": "9.2.8",
-      "resolved": "https://registry.npmjs.org/emotion-server/-/emotion-server-9.2.8.tgz",
-      "integrity": "sha512-BIZlF++OwNdryoht5hBNDKo6YPtUILQq1/LxF3djGcJ5OuYOOGxQdymdySLd1Y6wXVCGo323d6asAN59cSWpiA==",
-      "dev": true,
-      "requires": {
-        "create-emotion-server": "^9.2.8"
-      }
-    },
-    "emotion-theming": {
-      "version": "9.2.6",
-      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.6.tgz",
-      "integrity": "sha512-sbZStubPmaDuMhs3+saH4XegnoMgbVtEY2giD1MP+maDinCnJdzf/1Apcip1wo5HMAN7vrjvpmcY13pH34xR6g==",
-      "dev": true,
-      "requires": {
-        "hoist-non-react-statics": "^2.3.1"
-      }
-    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -4984,7 +4790,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "escodegen": {
       "version": "1.11.0",
@@ -5798,11 +5605,6 @@
         }
       }
     },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
     "find-up": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -7141,6 +6943,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -7181,8 +6984,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-id-selector": {
       "version": "1.0.0",
@@ -7323,6 +7125,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
       "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
+      "dev": true,
       "requires": {
         "os-homedir": "^1.0.0",
         "os-tmpdir": "^1.0.1"
@@ -7361,19 +7164,6 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
-    "html-tokenize": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.0.tgz",
-      "integrity": "sha1-izqaXetHXK5qb5ZxYA0sIKspglE=",
-      "dev": true,
-      "requires": {
-        "buffer-from": "~0.1.1",
-        "inherits": "~2.0.1",
-        "minimist": "~0.0.8",
-        "readable-stream": "~1.0.27-1",
-        "through2": "~0.4.1"
-      }
-    },
     "htmlescape": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz",
@@ -7586,6 +7376,7 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -7794,6 +7585,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
       "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "dev": true,
       "requires": {
         "number-is-nan": "^1.0.0"
       }
@@ -9382,7 +9174,8 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+      "dev": true
     },
     "jsonfile": {
       "version": "4.0.0",
@@ -9823,8 +9616,7 @@
     "memoize-one": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz",
-      "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==",
-      "dev": true
+      "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw=="
     },
     "memory-fs": {
       "version": "0.4.1",
@@ -10097,6 +9889,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -10210,6 +10003,7 @@
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -10217,7 +10011,8 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
         }
       }
     },
@@ -10260,17 +10055,8 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
-    "multipipe": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
-      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
-      "dev": true,
-      "requires": {
-        "duplexer2": "^0.1.2",
-        "object-assign": "^4.1.0"
-      }
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
     },
     "mute-stream": {
       "version": "0.0.7",
@@ -10961,7 +10747,8 @@
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
     },
     "nwsapi": {
       "version": "2.0.9",
@@ -11023,12 +10810,6 @@
       "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
       "dev": true
     },
-    "object-keys": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
-      "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=",
-      "dev": true
-    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@@ -11179,7 +10960,8 @@
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
     },
     "os-locale": {
       "version": "2.1.0",
@@ -11195,7 +10977,8 @@
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
     },
     "osenv": {
       "version": "0.1.5",
@@ -11406,7 +11189,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -11584,8 +11368,7 @@
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
     },
     "prelude-ls": {
       "version": "1.1.2",
@@ -11629,38 +11412,6 @@
       "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
       "dev": true
     },
-    "primer-alerts": {
-      "version": "1.5.9",
-      "resolved": "https://registry.npmjs.org/primer-alerts/-/primer-alerts-1.5.9.tgz",
-      "integrity": "sha1-w6vFQV2ldkWhMlSy+WRC2uagMis=",
-      "requires": {
-        "primer-support": "4.6.0"
-      }
-    },
-    "primer-avatars": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/primer-avatars/-/primer-avatars-1.5.6.tgz",
-      "integrity": "sha1-rUpQB8/0soyAQ6KM32LRLOMomRI=",
-      "requires": {
-        "primer-support": "4.6.0"
-      }
-    },
-    "primer-branch-name": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/primer-branch-name/-/primer-branch-name-1.0.7.tgz",
-      "integrity": "sha1-X59bB8sXC+qL4oJC0HO4GZ19meo=",
-      "requires": {
-        "primer-support": "4.6.0"
-      }
-    },
-    "primer-buttons": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/primer-buttons/-/primer-buttons-2.6.0.tgz",
-      "integrity": "sha1-gCb4oWoUIB8ph6C0MLr172dR2Vw=",
-      "requires": {
-        "primer-support": "4.6.0"
-      }
-    },
     "primer-colors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/primer-colors/-/primer-colors-1.0.1.tgz",
@@ -11675,14 +11426,6 @@
         "primer-support": "4.6.0"
       }
     },
-    "primer-labels": {
-      "version": "1.5.9",
-      "resolved": "https://registry.npmjs.org/primer-labels/-/primer-labels-1.5.9.tgz",
-      "integrity": "sha1-R6HVaQmM4ALaxI0BdqtKrRoCQ+I=",
-      "requires": {
-        "primer-support": "4.6.0"
-      }
-    },
     "primer-layout": {
       "version": "1.4.9",
       "resolved": "https://registry.npmjs.org/primer-layout/-/primer-layout-1.4.9.tgz",
@@ -11772,7 +11515,8 @@
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
+      "dev": true
     },
     "process": {
       "version": "0.11.10",
@@ -12019,14 +11763,14 @@
       "dev": true
     },
     "react": {
-      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz",
-      "integrity": "sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==",
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
+      "integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.0"
       }
     },
     "react-dom": {
@@ -12040,15 +11784,6 @@
         "prop-types": "^15.6.0"
       }
     },
-    "react-emotion": {
-      "version": "9.2.8",
-      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.8.tgz",
-      "integrity": "sha512-wBtVqGLQR49QG8hl5KDxIMBZtRR6W7n39bk9tq+YU1bfh0RmfLfr5Uatz5NDg86A+XDVX5jFhtXaKxHuKQDCaw==",
-      "requires": {
-        "babel-plugin-emotion": "^9.2.8",
-        "create-emotion-styled": "^9.2.8"
-      }
-    },
     "react-error-overlay": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
@@ -12472,6 +12207,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
       "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "dev": true,
       "requires": {
         "is-finite": "^1.0.0"
       }
@@ -12859,7 +12595,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -13084,6 +12821,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "scheduler": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
+      "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -13323,7 +13069,8 @@
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
+      "dev": true
     },
     "slice-ansi": {
       "version": "1.0.0",
@@ -13895,7 +13642,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.2.tgz",
       "integrity": "sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==",
-      "dev": true,
       "requires": {
         "@emotion/is-prop-valid": "^0.6.8",
         "@emotion/unitless": "^0.7.0",
@@ -13912,14 +13658,12 @@
         "@emotion/unitless": {
           "version": "0.7.3",
           "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
-          "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==",
-          "dev": true
+          "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
         },
         "react-is": {
           "version": "16.6.3",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
-          "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==",
-          "dev": true
+          "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA=="
         }
       }
     },
@@ -13975,7 +13719,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -14401,27 +14144,6 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
-    "through2": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
-      "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "~1.0.17",
-        "xtend": "~2.1.1"
-      },
-      "dependencies": {
-        "xtend": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
-          "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
-          "dev": true,
-          "requires": {
-            "object-keys": "~0.4.0"
-          }
-        }
-      }
-    },
     "timers-browserify": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz",
@@ -14506,24 +14228,6 @@
         "repeat-string": "^1.6.1"
       }
     },
-    "touch": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz",
-      "integrity": "sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==",
-      "requires": {
-        "nopt": "~1.0.10"
-      },
-      "dependencies": {
-        "nopt": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
-          "requires": {
-            "abbrev": "1"
-          }
-        }
-      }
-    },
     "tough-cookie": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
@@ -14572,7 +14276,8 @@
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
+      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
+      "dev": true
     },
     "trim-trailing-lines": {
       "version": "1.1.1",
diff --git a/package.json b/package.json
index 8881901f619..70c4145c149 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "primer-colors": "1.0.1",
     "primer-markdown": "3.7.9",
     "primer-typography": "1.0.1",
-    "react": "16.4.2",
+    "react": "16.8.0",
     "react-dom": "16.4.2",
     "styled-components": "4.1.2",
     "styled-system": "3.1.3",

From e9eecde2172921fec9210510fd62ef7076fd3f72 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 11:31:40 -0800
Subject: [PATCH 05/16] remove beta, bump major version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8881901f619..4c7434af60b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "9.0.0-beta",
+  "version": "10.0.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

From 89747cad2abed3077d04ce9faaa9c3210456c815 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 16:25:42 -0800
Subject: [PATCH 06/16] add overlay functionality

---
 pages/components/docs/Details.md  |  3 +-
 pages/components/docs/Dropdown.md | 11 ++-----
 src/Details.js                    | 51 +++++++++++++++----------------
 src/Dropdown.js                   | 41 +++++++++----------------
 4 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/pages/components/docs/Details.md b/pages/components/docs/Details.md
index b9af96c6c84..09af378c976 100644
--- a/pages/components/docs/Details.md
+++ b/pages/components/docs/Details.md
@@ -42,7 +42,7 @@ If you use this form or the render prop (see below), **you must attach the `togg
 The Details component also accepts a `render` function prop.
 
 ```.jsx
-<Details render={({open, toggle}) => (
+<Details overlay render={({open, toggle}) => (
   <>
     <Button is="summary" onClick={toggle}>Open? {String(open)}</Button>
     <p>This is the content.</p>
@@ -60,5 +60,6 @@ Details components get `COMMON` system props. Read our [System Props](/component
 | :- | :- | :-: | :- |
 | open | Boolean | | Sets the open/closed state of the Details component |
 | render | Function | | Optional render function, to allow you to handle toggling and open/closed state from a container component.
+| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it
 
 export const meta = {displayName: 'Details'}
diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md
index 9f5f28d3546..eadb1991724 100644
--- a/pages/components/docs/Dropdown.md
+++ b/pages/components/docs/Dropdown.md
@@ -3,14 +3,11 @@
 
 The Dropdown component is a lightweight context menu for housing navigation and actions.
 
-Dropdown.Button is used to trigger opening and closing the dropdown.
-
 Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button.
 
 ## Default example
 ```.jsx
-<Dropdown scheme="primary" minWidth="5em">
-  <Dropdown.Button>Dropdown </Dropdown.Button>
+<Dropdown title="Dropdown">
   <Dropdown.Menu direction='sw'>
     <Dropdown.Item>Item 1</Dropdown.Item>
     <Dropdown.Item>Item 2</Dropdown.Item>
@@ -21,7 +18,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 
 ## System props
 
-Dropdown, Dropdown.Menu, Dropdown.Button, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
+Dropdown, Dropdown.Menu, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
 
 ## Component props
 
@@ -29,13 +26,11 @@ Dropdown, Dropdown.Menu, Dropdown.Button, and Dropdown.Item all get `COMMON` sys
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | direction | String | 'sw' | Sets the direction of the dropdown menu. |
+| title | String | | Sets the text inside of the button |
 
 #### Dropdown.Item
 No additional props.
 
-#### Dropdown.Button
-No additional props.
-
 #### Dropdown
 No additional props.
 
diff --git a/src/Details.js b/src/Details.js
index da723402d1a..4fde1676f8e 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -4,20 +4,7 @@ import styled from 'styled-components'
 import {COMMON} from './constants'
 import theme from './theme'
 
-const DetailsReset = styled('details')`
-  & > summary {
-    list-style: none;
-  }
-  & > summary::before {
-    display: none;
-  }
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
-`
-
 const overlayStyles = `
-background: red;
   & > summary::before {
     position: fixed;
     top: 0;
@@ -32,15 +19,28 @@ background: red;
   }
 `
 
-export const DetailsContext = React.createContext({
-  toggle: () => {},
-});
+const DetailsReset = styled('details')`
+  & > summary {
+    list-style: none;
+  }
+  & > summary::before {
+    display: none;
+  }
+  & > summary::-webkit-details-marker {
+    display: none;
+  }
+  ${props => props.overlay && props.open ? overlayStyles : ''}
+`
+
+function getRenderer(children) {
+  return typeof children === 'function' ? children : () => children
+}
 
 class DetailsBase extends React.Component {
   constructor(props) {
     super(props)
+    this.state = {open: Boolean(props.open)}
     this.toggle = this.toggle.bind(this)
-    this.state = {open: Boolean(props.open), toggle: this.toggle}
   }
 
   toggle(event) {
@@ -53,30 +53,27 @@ class DetailsBase extends React.Component {
   render() {
     const {children, render = getRenderer(children), overlay, ...rest} = this.props
     const {open} = this.state
+
     return (
-      <DetailsContext.Provider value={this.state}>
-        <DetailsReset {...rest} open={open} css="background: red">
-          {render({open, toggle: this.toggle})}
-        </DetailsReset>
-      </DetailsContext.Provider>
+      <DetailsReset {...rest} open={open} overlay={overlay}>
+        {render({open, toggle: this.toggle})}
+      </DetailsReset>
     )
   }
 }
 
-function getRenderer(children) {
-  return typeof children === 'function' ? children : () => children
-}
-
 const Details = styled(DetailsBase)(COMMON)
 
 Details.defaultProps = {
-  theme
+  theme,
+  overlay: false
 }
 
 Details.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
   open: PropTypes.bool,
+  overlay: PropTypes.bool,
   render: PropTypes.func,
   theme: PropTypes.object,
   ...COMMON.propTypes
diff --git a/src/Dropdown.js b/src/Dropdown.js
index fbc02468721..293facd92c6 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -6,9 +6,22 @@ import Details from './Details'
 import {COMMON, get} from './constants'
 import getDirectionStyles from './DropdownStyles'
 import theme from './theme'
-import {DetailsContext} from './Details';
 
-const DropdownBase = (props) => <Details overlay {...props}/>
+const DropdownBase = ({title, children, ...rest}) => {
+  return (
+    <Details overlay {...rest}>
+      {({open, toggle}) => (
+        <>
+          <Button is="summary" aria-haspopup="true" onClick={toggle} {...rest}>
+            {title}
+            <DropdownCaret />
+          </Button>
+          {children}
+        </>
+      )}
+    </Details>
+  )
+}
 const Dropdown = styled(DropdownBase)`
   position: relative;
   display: inline-block;
@@ -25,19 +38,6 @@ const DropdownCaret = styled.div`
   width: 0;
 `
 
-const DropdownButton = ({children, ...rest}) => {
-  return (
-    <DetailsContext.Consumer>
-      {({toggle}) => (
-        <Button is='summary' aria-haspopup='true' onClick={toggle} {...rest}>
-          {children}
-          <DropdownCaret/>
-        </Button>
-      )}
-    </DetailsContext.Consumer>
-  )
-}
-
 const DropdownMenu = styled.ul`
   background-clip: padding-box;
   background-color: ${get('colors.white')};
@@ -106,7 +106,6 @@ const DropdownItem = styled.li`
   ${COMMON}
 `
 
-Dropdown.Button = styled(DropdownButton)(COMMON)
 Dropdown.Menu = DropdownMenu
 Dropdown.Item = DropdownItem
 
@@ -126,14 +125,4 @@ Dropdown.propTypes = {
   ...COMMON.propTypes
 }
 
-Dropdown.Button.defaultProps = {theme}
-Dropdown.Button.propTypes = {
-  ...COMMON.propTypes
-}
-
-Dropdown.Item.defaultProps = {theme}
-Dropdown.Item.propTypes = {
-  ...COMMON.propTypes
-}
-
 export default Dropdown

From d340c6ce9c64c778d3f9af8ed9402973626fb4b3 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 17:00:57 -0800
Subject: [PATCH 07/16] use hooks

---
 src/Details.js | 39 ++++++++++-----------------------------
 1 file changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/Details.js b/src/Details.js
index b429f1e9a04..ce9223294a0 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON} from './constants'
@@ -34,34 +34,15 @@ const DetailsReset = styled('details')`
   ${props => props.overlay && props.open ? overlayStyles : ''}
 `
 
-function getRenderer(children) {
-  return typeof children === 'function' ? children : () => children
-}
-
-class DetailsBase extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {open: Boolean(props.open)}
-    this.toggle = this.toggle.bind(this)
-  }
-
-  toggle(event) {
-    if (event) {
-      event.preventDefault()
-    }
-    this.setState({open: !this.state.open})
-  }
-
-  render() {
-    const {children, render = getRenderer(children), overlay, ...rest} = this.props
-    const {open} = this.state
-
-    return (
-      <DetailsReset {...rest} open={open} overlay={overlay}>
-        {render({open, toggle: this.toggle})}
-      </DetailsReset>
-    )
-  }
+function DetailsBase({children, overlay, ...rest}){
+  const [open, setOpen] = useState(false)
+  const toggle = () => setOpen(!open);
+  const render = children === 'function' ? children : () => children
+  return (
+    <DetailsReset {...rest} open={open} overlay={overlay}>
+      {render({open, toggle})}
+    </DetailsReset>
+  )
 }
 
 const Details = styled(DetailsBase)(COMMON)

From 9c86955f7e2940659e1a82e2432801b6dae86ff9 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 17:49:12 -0800
Subject: [PATCH 08/16] use hooooooks

---
 src/Details.js | 37 ++++++++++++-------------------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/Details.js b/src/Details.js
index b429f1e9a04..1f955c8be80 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -1,10 +1,10 @@
-import React from 'react'
+import React, {useState} from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON} from './constants'
 import theme from './theme'
 
-const openStyles = `
+const overlayStyles = `
   & > summary::before {
     position: fixed;
     top: 0;
@@ -21,7 +21,6 @@ const openStyles = `
 `
 
 const DetailsReset = styled('details')`
-  ${props => props.open ? openStyles : `background: 'red';`}
   & > summary {
     list-style: none;
   }
@@ -38,30 +37,18 @@ function getRenderer(children) {
   return typeof children === 'function' ? children : () => children
 }
 
-class DetailsBase extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {open: Boolean(props.open)}
-    this.toggle = this.toggle.bind(this)
+function DetailsBase({children, overlay, render = getRenderer(children), ...rest}){
+  const  [open, setOpen] = useState(Boolean(rest.open))
+  function toggle(event) {
+    if (event) event.preventDefault()
+    setOpen(!open)
   }
 
-  toggle(event) {
-    if (event) {
-      event.preventDefault()
-    }
-    this.setState({open: !this.state.open})
-  }
-
-  render() {
-    const {children, render = getRenderer(children), overlay, ...rest} = this.props
-    const {open} = this.state
-
-    return (
-      <DetailsReset {...rest} open={open} overlay={overlay}>
-        {render({open, toggle: this.toggle})}
-      </DetailsReset>
-    )
-  }
+  return (
+    <DetailsReset {...rest} open={open} overlay={overlay}>
+      {render({open, toggle})}
+    </DetailsReset>
+  )
 }
 
 const Details = styled(DetailsBase)(COMMON)

From e8762c2869b470937c413351dd10c1979710b7b7 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 17:54:14 -0800
Subject: [PATCH 09/16] lint

---
 src/Button.js       | 10 +++++-----
 src/ButtonStyles.js | 14 ++++++++------
 src/Details.js      |  4 ++--
 src/Dropdown.js     |  2 +-
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/Button.js b/src/Button.js
index a093133c1b0..b0b75a2226d 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON, get} from './constants'
 import theme from './theme'
-import getButtonStyles from  './ButtonStyles'
+import getButtonStyles from './ButtonStyles'
 import {width} from 'styled-system'
 
 function fontSize({size = '14px', ...props}) {
@@ -18,10 +18,10 @@ const ButtonBase = ({is: Tag, onClick, disabled, theme, ...rest}) => {
 }
 
 const Button = styled(ButtonBase)`
-    ${props => props.theme ? getButtonStyles(props.theme) : ''};
-    ${fontSize};
-    ${COMMON};
-    ${width};
+  ${props => (props.theme ? getButtonStyles(props.theme) : '')};
+  ${fontSize};
+  ${COMMON};
+  ${width};
 `
 
 Button.defaultProps = {
diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js
index b19ffbe739e..c266a303534 100644
--- a/src/ButtonStyles.js
+++ b/src/ButtonStyles.js
@@ -1,14 +1,15 @@
 import {get} from './constants'
 
-const getButtonStyles = (theme) => {
-  return (
-    `
+const getButtonStyles = theme => {
+  return `
       position: relative;
       display: inline-block;
       padding: 6px 12px;
       color: ${get('colors.gray.9')(theme)};
       background-color: ${get('colors.gray.1')(theme)};
-      background-image: linear-gradient(-180deg, ${get('colors.gray.0')(theme)} 0%, ${get('colors.button.bg2')(theme)} 90%);
+      background-image: linear-gradient(-180deg, ${get('colors.gray.0')(theme)} 0%, ${get('colors.button.bg2')(
+    theme
+  )} 90%);
       font-size: ${get('fontSizes.1')(theme)}px;
       font-weight: ${get('fontWeights.bold')(theme)};
       line-height: 20px;
@@ -25,7 +26,9 @@ const getButtonStyles = (theme) => {
 
       &:hover {
         background-color: ${get('colors.button.hoverBg')(theme)};
-        background-image: linear-gradient(-180deg, ${get('colors.button.bg2')(theme)} 0%, ${get('colors.button.hoverBg')(theme)} 90%);
+        background-image: linear-gradient(-180deg, ${get('colors.button.bg2')(theme)} 0%, ${get(
+    'colors.button.hoverBg'
+  )(theme)} 90%);
         background-position: -0.5em center;
         border-color: ${get('colors.blackfade35')(theme)};
         text-decoration: none;
@@ -59,7 +62,6 @@ const getButtonStyles = (theme) => {
         box-shadow: ${get('colors.button.focusShadow')(theme)} 0px 0px 0px 0.2em;
       }
     `
-  )
 }
 
 export default getButtonStyles
diff --git a/src/Details.js b/src/Details.js
index 67fc867ed4b..8541ea8b6b8 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -30,13 +30,13 @@ const DetailsReset = styled('details')`
   & > summary::-webkit-details-marker {
     display: none;
   }
-  ${props => props.overlay && props.open ? overlayStyles : ''}
+  ${props => (props.overlay && props.open ? overlayStyles : '')};
 `
 function getRenderer(children) {
   return typeof children === 'function' ? children : () => children
 }
 
-function DetailsBase({children, overlay, render = getRenderer(children), ...rest}){
+function DetailsBase({children, overlay, render = getRenderer(children), ...rest}) {
   const [open, setOpen] = useState(Boolean(rest.open))
 
   function toggle(event) {
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 293facd92c6..4752f8bb2f3 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -10,7 +10,7 @@ import theme from './theme'
 const DropdownBase = ({title, children, ...rest}) => {
   return (
     <Details overlay {...rest}>
-      {({open, toggle}) => (
+      {({toggle}) => (
         <>
           <Button is="summary" aria-haspopup="true" onClick={toggle} {...rest}>
             {title}

From 043b8a8a5212d58d692c85f5f4eb29fa107c8e2a Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Wed, 6 Feb 2019 17:57:38 -0800
Subject: [PATCH 10/16] update tests

---
 src/Dropdown.js                              |   5 +
 src/__tests__/Dropdown.js                    |  15 --
 src/__tests__/__snapshots__/Dropdown.js.snap | 172 -------------------
 3 files changed, 5 insertions(+), 187 deletions(-)

diff --git a/src/Dropdown.js b/src/Dropdown.js
index 4752f8bb2f3..b6c4583040a 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -119,6 +119,11 @@ Dropdown.Menu.defaultProps = {
   theme
 }
 
+Dropdown.Item.defaultProps = {theme}
+Dropdown.Item.propTypes = {
+  ...COMMON.propTypes
+}
+
 Dropdown.defaultProps = {theme}
 Dropdown.propTypes = {
   children: PropTypes.node,
diff --git a/src/__tests__/Dropdown.js b/src/__tests__/Dropdown.js
index 223ed41fd4c..fba9f876fbf 100644
--- a/src/__tests__/Dropdown.js
+++ b/src/__tests__/Dropdown.js
@@ -63,18 +63,3 @@ describe('Dropdown.Menu', () => {
     expect(Dropdown.Menu).toSetDefaultTheme()
   })
 })
-
-describe('Dropdown.Button', () => {
-  it('matches the snapshots', () => {
-    expect(render(<Dropdown.Button>hi</Dropdown.Button>)).toMatchSnapshot()
-    expect(render(<Dropdown.Button>hello!</Dropdown.Button>)).toMatchSnapshot()
-  })
-
-  it('implements system props', () => {
-    expect(Dropdown.Button).toImplementSystemProps(COMMON)
-  })
-
-  it('has default theme', () => {
-    expect(Dropdown.Button).toSetDefaultTheme()
-  })
-})
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index f3a1164eb9b..6fa5c27a5de 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -53,178 +53,6 @@ exports[`Dropdown matches the snapshots 2`] = `
 </details>
 `;
 
-exports[`Dropdown.Button matches the snapshots 1`] = `
-.c0 {
-  position: relative;
-  display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 0.25em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  font-size: 14px;
-}
-
-.c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
-}
-
-.c0:selected {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
-}
-
-.c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #f6f8fa;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20) box-shadow:none;
-}
-
-.c0:focus {
-  outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
-}
-
-.c1 {
-  border: 4px solid transparent;
-  border-top-color: currentcolor;
-  content: '';
-  display: inline-block;
-  height: 0;
-  vertical-align: middle;
-  width: 0;
-}
-
-<summary
-  aria-haspopup="true"
-  className="c0"
->
-  hi
-  <div
-    className="c1"
-  />
-</summary>
-`;
-
-exports[`Dropdown.Button matches the snapshots 2`] = `
-.c0 {
-  position: relative;
-  display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 0.25em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  font-size: 14px;
-}
-
-.c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
-}
-
-.c0:selected {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
-}
-
-.c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #f6f8fa;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20) box-shadow:none;
-}
-
-.c0:focus {
-  outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
-}
-
-.c1 {
-  border: 4px solid transparent;
-  border-top-color: currentcolor;
-  content: '';
-  display: inline-block;
-  height: 0;
-  vertical-align: middle;
-  width: 0;
-}
-
-<summary
-  aria-haspopup="true"
-  className="c0"
->
-  hello!
-  <div
-    className="c1"
-  />
-</summary>
-`;
-
 exports[`Dropdown.Item matches the snapshots 1`] = `
 .c0 {
   display: block;

From 3bd240af707abef8e8355340b6ecf107cadb193f Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 7 Feb 2019 11:17:07 -0800
Subject: [PATCH 11/16] fix caret

---
 src/DropdownStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DropdownStyles.js b/src/DropdownStyles.js
index bc22fce969c..78fd6435a08 100644
--- a/src/DropdownStyles.js
+++ b/src/DropdownStyles.js
@@ -62,7 +62,7 @@ const getDirectionStyles = (theme, direction) => {
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${get('colors.blackfade15')(theme)}
+        border-top: 8px solid ${get('colors.blackfade15')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }

From 13802de9b887f0df8f1fdfd8759d7745e1f3452b Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 7 Feb 2019 11:22:55 -0800
Subject: [PATCH 12/16] upgrade react-test-renderer

---
 package-lock.json                            |  27 ++-
 package.json                                 |   2 +-
 src/__tests__/__snapshots__/Dropdown.js.snap | 168 ++++++++++++++++++-
 3 files changed, 181 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe1ad66883c..157b66a7c53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11852,15 +11852,23 @@
       }
     },
     "react-test-renderer": {
-      "version": "16.5.2",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.5.2.tgz",
-      "integrity": "sha512-AGbJYbCVx1J6jdUgI4s0hNp+9LxlgzKvXl0ROA3DHTrtjAr00Po1RhDZ/eAq2VC/ww8AHgpDXULh5V2rhEqqJg==",
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.1.tgz",
+      "integrity": "sha512-Bd21TN3+YVl6GZwav6O0T6m5UwGfOj+2+xZH5VH93ToD6M5uclN/c+R1DGX49ueG413KZPUx7Kw3sOYz2aJgfg==",
       "dev": true,
       "requires": {
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "react-is": "^16.5.2",
-        "schedule": "^0.5.0"
+        "react-is": "^16.8.1",
+        "scheduler": "^0.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz",
+          "integrity": "sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==",
+          "dev": true
+        }
       }
     },
     "read-pkg": {
@@ -12812,15 +12820,6 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
-    "schedule": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
-      "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1"
-      }
-    },
     "scheduler": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
diff --git a/package.json b/package.json
index fe380ea45ab..5bad8d97f89 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "primer-utilities": "4.12.0",
     "raw-loader": "0.5.1",
     "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^16.3.2",
+    "react-test-renderer": "16.8.1",
     "rollup": "0.62.0",
     "rollup-plugin-babel": "4.0.0-beta.8",
     "rollup-plugin-commonjs": "9.1.3",
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index 6fa5c27a5de..fc440d3d5c0 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -1,6 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown matches the snapshots 1`] = `
+.c2 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 12px;
+  color: #24292e;
+  background-color: #f6f8fa;
+  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-repeat: repeat-x;
+  background-position: -1px -1px;
+  background-size: 110% 110%;
+  border: 1px solid rgba(27,31,35,0.2);
+  border-radius: 0.25em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-size: 14px;
+}
+
+.c2:hover {
+  background-color: rgb(230,235,241);
+  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
+  background-position: -0.5em center;
+  border-color: rgba(27,31,35,0.35);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-repeat: repeat-x;
+}
+
+.c2:active {
+  background-color: rgb(233,236,239);
+  background-image: none;
+  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
+  border-color: rgba(27,31,35,0.2);
+}
+
+.c2:selected {
+  background-color: rgb(233,236,239);
+  background-image: none;
+  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
+  border-color: rgba(27,31,35,0.2);
+}
+
+.c2:disabled {
+  color: rgba(36,41,46,0.4);
+  background-color: #f6f8fa;
+  background-image: none;
+  border-color: rgba(27,31,35,0.20) box-shadow:none;
+}
+
+.c2:focus {
+  outline: none;
+  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+}
+
 .c1 > summary {
   list-style: none;
 }
@@ -18,15 +82,98 @@ exports[`Dropdown matches the snapshots 1`] = `
   display: inline-block;
 }
 
+.c3 {
+  border: 4px solid transparent;
+  border-top-color: currentcolor;
+  content: '';
+  display: inline-block;
+  height: 0;
+  vertical-align: middle;
+  width: 0;
+}
+
 <details
   className="c0 c1"
   open={false}
 >
+  <summary
+    aria-haspopup="true"
+    className="c0 c2"
+    onClick={[Function]}
+  >
+    <div
+      className="c3"
+    />
+  </summary>
   hi
 </details>
 `;
 
 exports[`Dropdown matches the snapshots 2`] = `
+.c2 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 12px;
+  color: #24292e;
+  background-color: #f6f8fa;
+  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-repeat: repeat-x;
+  background-position: -1px -1px;
+  background-size: 110% 110%;
+  border: 1px solid rgba(27,31,35,0.2);
+  border-radius: 0.25em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-size: 14px;
+}
+
+.c2:hover {
+  background-color: rgb(230,235,241);
+  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
+  background-position: -0.5em center;
+  border-color: rgba(27,31,35,0.35);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-repeat: repeat-x;
+}
+
+.c2:active {
+  background-color: rgb(233,236,239);
+  background-image: none;
+  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
+  border-color: rgba(27,31,35,0.2);
+}
+
+.c2:selected {
+  background-color: rgb(233,236,239);
+  background-image: none;
+  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
+  border-color: rgba(27,31,35,0.2);
+}
+
+.c2:disabled {
+  color: rgba(36,41,46,0.4);
+  background-color: #f6f8fa;
+  background-image: none;
+  border-color: rgba(27,31,35,0.20) box-shadow:none;
+}
+
+.c2:focus {
+  outline: none;
+  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+}
+
 .c1 > summary {
   list-style: none;
 }
@@ -44,11 +191,30 @@ exports[`Dropdown matches the snapshots 2`] = `
   display: inline-block;
 }
 
+.c3 {
+  border: 4px solid transparent;
+  border-top-color: currentcolor;
+  content: '';
+  display: inline-block;
+  height: 0;
+  vertical-align: middle;
+  width: 0;
+}
+
 <details
   className="c0 c1"
   open={false}
-  title="hi"
 >
+  <summary
+    aria-haspopup="true"
+    className="c0 c2"
+    onClick={[Function]}
+  >
+    hi
+    <div
+      className="c3"
+    />
+  </summary>
   hello!
 </details>
 `;

From d65e611640395f10658db623b7efff49630191cc Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 7 Feb 2019 15:50:26 -0800
Subject: [PATCH 13/16] add publish action

---
 .github/main.workflow | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.github/main.workflow b/.github/main.workflow
index 049b3d6c838..565c11a93cc 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -4,6 +4,7 @@ workflow "Primer Components Workflow" {
     "npm lint",
     "npm test",
     "deploy",
+    "publish"
   ]
 }
 
@@ -28,3 +29,11 @@ action "deploy" {
   uses = "primer/deploy@master"
   secrets = ["GITHUB_TOKEN", "NOW_TOKEN"]
 }
+
+action "publish" {
+  uses = "primer/publish@master"
+  secrets = [
+    "GITHUB_TOKEN",
+    "NPM_AUTH_TOKEN",
+  ]
+}

From d98747f43d1fe29871c9d5410f85b37636b1ca26 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 7 Feb 2019 16:03:50 -0800
Subject: [PATCH 14/16] add npm secret

---
 .github/main.workflow | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/main.workflow b/.github/main.workflow
index 565c11a93cc..22a0db93568 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -4,7 +4,7 @@ workflow "Primer Components Workflow" {
     "npm lint",
     "npm test",
     "deploy",
-    "publish"
+    "publish",
   ]
 }
 

From fd6b547a72c1b8fea065905451cb27eeef14f219 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 7 Feb 2019 16:08:31 -0800
Subject: [PATCH 15/16] rerun actions

---
 .github/main.workflow | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/main.workflow b/.github/main.workflow
index 565c11a93cc..55e8ca118e1 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -36,4 +36,4 @@ action "publish" {
     "GITHUB_TOKEN",
     "NPM_AUTH_TOKEN",
   ]
-}
+} 

From f03b0df37f5ed85c3fc5c954dd8ef44b66e5eff2 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Thu, 7 Feb 2019 16:21:01 -0800
Subject: [PATCH 16/16] deploy: try pinning primer/deploy@v2.0.0

---
 .github/main.workflow | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/main.workflow b/.github/main.workflow
index 5b443a0d3a6..804e8712534 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -26,7 +26,7 @@ action "npm test" {
 }
 
 action "deploy" {
-  uses = "primer/deploy@master"
+  uses = "primer/deploy@v2.0.0"
   secrets = ["GITHUB_TOKEN", "NOW_TOKEN"]
 }