upgrade [email protected] (#549)

* upgrade ui-box and stop using `css` prop
* resolve react types
* update snapshots and prune some

Author: mshwery

README.md

@@ -67,7 +67,7 @@ Evergreen v4 supports theming partially. It is still complex to theme Evergreen.
 
 Evergreen offers easy Server Side Rendering (SSR) and automatic hydration.
 
-Evergreen bundles 2 CSS-in-JS solutions, from glamor and ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function that will do SSR for both at once.
+Evergreen provides a CSS-in-JS solution from `ui-box`. To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function that will do SSR for both at once.
 
 - How to use it with Next.js in the [ssr-next example app](examples/ssr-next).
 - [How to use it with GatsbyJS](https://github.com/segmentio/evergreen/issues/154)

package.json

@@ -48,7 +48,6 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "@blueprintjs/icons": "^3.2.0",
-    "@types/ui-box": "^1.4.0",
     "arrify": "^1.0.1",
     "classnames": "^2.2.6",
     "dom-helpers": "^3.2.1",
@@ -60,7 +59,7 @@
     "react-tiny-virtual-list": "^2.1.4",
     "react-transition-group": "^2.5.0",
     "tinycolor2": "^1.4.1",
-    "ui-box": "^1.4.0"
+    "ui-box": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0",

src/alert/src/Alert.tsx

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { BoxProps } from 'ui-box'
+import Box from 'ui-box'
 import { withTheme } from '../../theme'
 import { Pane } from '../../layers'
 import { Heading, Paragraph } from '../../typography'
 import { IconButton } from '../../buttons'
 import { Icon } from '../../icon'
 
-class Alert extends PureComponent<any & BoxProps> {
+class Alert extends PureComponent<any & React.ComponentProps<typeof Box>> {
   static propTypes = {
     /**
      * The content of the alert. When a string is passed it is wrapped in a `<Text size={400} />` component.

src/alert/src/InlineAlert.tsx

@@ -1,12 +1,14 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { BoxProps } from 'ui-box'
+import Box from 'ui-box'
 import { withTheme } from '../../theme'
 import { Pane } from '../../layers'
 import { Text } from '../../typography'
 import { Icon } from '../../icon'
 
-class InlineAlert extends PureComponent<any & BoxProps> {
+class InlineAlert extends PureComponent<
+  any & React.ComponentProps<typeof Box>
+> {
   static propTypes = {
     /**
      * The content of the alert.