Started migrating to Emotion 10

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["@inst-app/react", {"removePropTypes": false}]
+    ["@stellar-apps/react", {"removePropTypes": false}]
   ],
   "plugins": [
     ["emotion", {"sourceMap": false, "hoist": true}],
@@ -10,7 +10,7 @@
     "cjs": {
       "presets": [
         [
-          "@inst-app/esx",
+          "@stellar-apps/es",
           {
             "env": {
               "targets": {"chrome": "41", "ie": "10"}
@@ -23,7 +23,7 @@
     "es": {
       "presets": [
         [
-          "@inst-app/esx",
+          "@stellar-apps/es",
           {
             "env": {
               "modules": false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "curls",
-  "version": "1.1.6",
+  "version": "2.0.0-dev",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
   "jsnext:main": "dist/es/index.js",
@@ -13,29 +13,28 @@
     "**.css.js"
   ],
   "devDependencies": {
-    "@inst-app/babel-preset-esx": "^1.0.15",
-    "@inst-app/babel-preset-react": "^1.0.4",
-    "babel-plugin-emotion": "^9.2.8",
+    "@stellar-apps/babel-preset-es": "^1.0.0",
+    "@stellar-apps/babel-preset-react": "^1.0.0",
+    "babel-plugin-emotion": "^10.0.6",
     "babel-plugin-polished": "^1.1.0",
+    "polished": "^2.3.3",
     "prettier": "^1.10.2"
   },
   "dependencies": {
-    "@babel/runtime-corejs2": "^7.2.0",
+    "@babel/runtime-corejs2": "^7.3.1",
+    "@emotion/core": "^10.0.6",
     "@render-props/image-props": "^0.1.12",
     "@render-props/rect": "^0.1.18",
     "@render-props/throttle": "^0.1.12",
     "@render-props/toggle": "^0.1.26",
     "@render-props/utils": "^0.2.8",
     "@render-props/viewport": "^0.2.13",
     "cdll-memoize": "^0.1.2",
-    "emotion": "^9.2.8",
-    "emotion-utils": "^9.1.0",
     "empty": "^0.10.1",
     "is-mergeable-object": "^1.1.0",
     "json2mq": "^0.2.0",
     "memoize-two-args": "^1.0.6",
     "object-without-props": "^0.1.1",
-    "polished": "^2.0.3",
     "react-portalize": "^1.0.3"
   },
   "scripts": {
@@ -44,7 +43,9 @@
     "build:cjs": "rm -rf dist/cjs && cross-env NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist/cjs && npm run prettier:cjs",
     "watch": "cross-env NODE_ENV=development BABEL_ENV=es babel ./src -w --out-dir dist/es",
     "prettier:es": "prettier --single-quote --no-semi --no-bracket-spacing --trailing-comma es5 --write --tab-width 2 \"dist/es/**/*.js\"",
-    "prettier:cjs": "prettier --single-quote --no-semi --no-bracket-spacing --trailing-comma es5 --write --tab-width 2 \"dist/cjs/**/*.js\""
+    "prettier:cjs": "prettier --single-quote --no-semi --no-bracket-spacing --trailing-comma es5 --write --tab-width 2 \"dist/cjs/**/*.js\"",
+    "publish:dev": "yarn publish --tag dev",
+    "publish:next": "yarn publish --tag next"
   },
   "peerDependencies": {
     "prop-types": ">= 15.6.0",

server/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
+var _interopRequireDefault = require('@babel/runtime-corejs2/helpers/interopRequireDefault')
 exports.__esModule = true
 var _reactPortalizeServer = _interopRequireDefault(require('react-portalize/server'))
 exports.renderPortalsToString = _reactPortalizeServer.renderPortalsToString

src/Avatar/Avatar.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import ImageProps from '@render-props/image-props'
 import {BasicBox} from '../Box'
 import {pos, d, ov} from '../Box/CSS'
@@ -20,7 +20,7 @@ import getImage from './getImage'
 */
 
 
-const nodeType = 'span'
+const as = 'span'
 const defaultCSS = css`
   ${d.inlineBlock};
   text-align: center;
@@ -58,7 +58,7 @@ export default React.forwardRef(
       children: function (boxProps) {
         // adds child prop for 'Box' and rendering the avatar node
         boxProps.children = function (nodeProps) {
-          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          nodeProps.as = nodeProps.as || as
           let innerRef
 
           if (nodeProps.imageRef) {

src/Avatar/CSS.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {getAvatarSize} from './utils'
 
 

src/Avatar/utils/getAvatarSize.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {toSize} from '../../utils'
 
 

src/Box/Box.js

@@ -41,7 +41,7 @@ export default React.forwardRef(
       innerRef,
       ...props,
       children: function (boxProps) {
-        boxProps.nodeType = boxProps.nodeType || 'div'
+        boxProps.as = boxProps.as || 'div'
         boxProps.children = props.children
         return renderNodeFast(boxProps)
       }

src/Box/CSS.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {directionalScale, isDirectional, colorize, toSize} from '../utils'
 
 

src/Box/defaultTheme.js

@@ -1,4 +1,3 @@
-// import {defaultColors} from '../theming'
 import {materialShadow} from './utils'
 
 

src/Box/utils/materialShadow.js

@@ -2,23 +2,20 @@ import {css} from 'emotion'
 
 
 export default function (dp, theme) {
-  dp = parseInt(dp)
-
-  if (dp === 0) {
-    return
+  if (dp === void 0 || dp === false || dp === null || dp == 0) {
+    return 'none'
   }
 
+  dp = parseInt(dp)
   const ambientY = dp
   let ambientAlpha = (dp + 10) / 100
-  ambientAlpha = ambientAlpha > 0.24 ? 0.24 : ambientAlpha
+  ambientAlpha = Math.min(0.12, ambientAlpha)
   const ambientBlur = dp === 1 ? 3 : dp * 1.618
-  let shadow = `1px ${ambientY}px ${ambientBlur}px rgba(0, 0, 0, ${ambientAlpha})`
+  let shadow = `0 ${ambientY}px ${ambientBlur}px rgba(0, 0, 0, ${ambientAlpha})`
   const directY = dp / 3
   const directBlur = dp === 1 ? 3 : dp * 1.618
-  const directAlpha = (24 - (dp / 20)) / 100
-  shadow = `${shadow}, 0 ${directY}px ${directBlur}px rgba(0, 0, 0, ${ambientAlpha})`
 
   return css`
-    box-shadow: ${shadow};
+    box-shadow: ${shadow}, 0 ${directY}px ${directBlur}px rgba(0, 0, 0, ${ambientAlpha});
   `
 }

src/Button/Button.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {FlexBox} from '../Box'
 import {flex, row, align, justify} from '../Flex/CSS'
 import createComponent, {renderNode} from '../createComponent'
@@ -9,7 +9,7 @@ import * as defaultTheme from './defaultTheme'
 import './global.css'
 
 
-const nodeType = 'button'
+const as = 'button'
 const defaultCSS = css`
   ${flex};
   ${row.row};
@@ -37,7 +37,7 @@ export default React.forwardRef(
         boxProps.className = className
         boxProps.children = function (nodeProps) {
           nodeProps.children = props.children
-          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          nodeProps.as = nodeProps.as || as
 
           return renderNode(nodeProps, [defaultCSS, sfcClassName])
         }

src/Button/CSS.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 
 
 export function xxs (v, t) {

src/Button/defaultTheme.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {withHoverQuery} from '../utils'
 // export colors from '../theming/defaultColors'
 

src/Card/CSS.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {br as boxBr} from '../Box/CSS'
 import {directionalRe} from '../utils/directionalScale'
 

src/Card/Card.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {GridBox} from '../Box'
 import {pos, w} from '../Box/CSS'
 import {flex, column} from '../Flex/CSS'
@@ -51,7 +51,7 @@ const defaultCSS = css`
 `
 
 
-const nodeType = 'div'
+const as = 'div'
 const SFC = createComponent({
   name: 'Card',
   propTypes,
@@ -69,7 +69,7 @@ export default React.forwardRef(
       children: function (boxProps) {
         boxProps.children = function (nodeProps) {
           nodeProps.children = props.children
-          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          nodeProps.as = nodeProps.as || as
           return renderNode(nodeProps, defaultCSS)
         }
 

src/CheckBox/CheckBox.js

@@ -1,19 +1,18 @@
-import React from 'react'
-import {cx, css} from 'emotion'
+// @jsx jsx
+import {jsx, css} from '@emotion/core'
 import Toggle from '@render-props/toggle'
 import {d} from '../Box/CSS'
 import {flex, align, justify} from '../Flex/CSS'
 import {FlexBox} from '../Box'
 import * as defaultTheme from './defaultTheme'
 import createComponent, {renderNode} from '../createComponent'
-import defaultCheckMark from './defaultCheckMark'
 
 
 /**
 <CheckBox checked name='amIChecked' value='foobar'>
 {
   ({CheckBoxInput, toggle, on, off, isChecked, ...props}) => (
-    <Type nodeType='label' bold darkGrey m='l2'>
+    <Type as='label' bold darkGrey m='l2'>
       <CheckBoxInput p={3}>
         {function ({isChecked}) {
           return isChecked && <CheckMark color='black'/>
@@ -29,7 +28,7 @@ import defaultCheckMark from './defaultCheckMark'
 }
 </Checkbox>
 */
-const nodeType = 'span'
+const as = 'span'
 const defaultCSS = css`
   ${flex};
   ${align.center};
@@ -74,13 +73,13 @@ export default React.forwardRef(
                       checked={toggleContext.value}
                       readOnly
                       disabled
-                      className={d.none}
+                      css={d.none}
                     />
                     delete nodeProps.type
                     nodeProps.children = checkBoxInputProps.children({
                       isChecked: toggleContext.value
                     })
-                    nodeProps.nodeType = nodeProps.nodeType || nodeType
+                    nodeProps.as = nodeProps.as || as
 
                     return (
                       <>

src/Col/Col.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import {GridBox} from '../Box'
 import {pos} from '../Box/CSS'
 import {grow} from '../Flex/CSS'
@@ -11,11 +11,9 @@ const defaultCSS = css`
   ${grow(true)};
   ${pos.relative};
 `
-const nodeType = 'div'
+const as = 'div'
 const SFC = createComponent({name: 'Col', themePath: 'col'})
 
-
-
 export default React.forwardRef(
   function Col (props, innerRef) {
     return SFC({
@@ -24,7 +22,7 @@ export default React.forwardRef(
       children: function (boxProps) {
         boxProps.children = function (nodeProps) {
           nodeProps.children = props.children
-          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          nodeProps.as = nodeProps.as || as
           return renderNode(nodeProps, defaultCSS)
         }
 

src/Divider/Divider.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 import createComponent, {renderNode} from '../createComponent'
 import {BasicBox} from '../Box'
 import {w, h, d, pos} from '../Box/CSS'
 import * as defaultTheme from './defaultTheme'
 import emptyObj from 'empty/object'
 
 
-const nodeType = 'div'
+const as = 'div'
 const defaultCSS = css`
   ${w('100%')};
   ${h(1)};
@@ -30,7 +30,7 @@ export default React.forwardRef(
       children: function (boxProps) {
         boxProps.children = function (nodeProps) {
           nodeProps.children = props.children
-          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          nodeProps.as = nodeProps.as || as
           return renderNode(nodeProps, defaultCSS)
         }
 

src/Drawer/CSS.js

@@ -1,4 +1,4 @@
-import {css} from 'emotion'
+import {css} from '@emotion/core'
 
 
 const fromY = css`