react-interface - npm Package Compare versions

Comparing version 0.9.4-alpha.34 to 0.9.4-alpha.35

es/components/Button/Button.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n'], ['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n']),
+var _templateObject = _taggedTemplateLiteralLoose(['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n'], ['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']),
@@ -15,2 +15,10 @@ _templateObject3 = _taggedTemplateLiteralLoose(['\n      background: none;\n      color: ', ';\n      border: none;\n    '], ['\n      background: none;\n      color: ', ';\n      border: none;\n    ']),
 var Button = styled.button(_templateObject, function (props) {
+  return !props.palette && css(_templateObject2, function (props) {
+    return props.theme.colors.primary[4];
+  }, function (props) {
+    return props.theme.colors.primary[0];
+  }, function (props) {
+    return props.theme.colors.primary[4];
+  });
+}, function (props) {
   return props.theme['button.border.color'];
@@ -30,10 +38,2 @@ }, function (props) {
 }, function (props) {
-  return !props.palette && css(_templateObject2, function (props) {
-    return props.theme.colors.primary[4];
-  }, function (props) {
-    return props.theme.colors.primary[0];
-  }, function (props) {
-    return props.theme.colors.primary[4];
-  });
-}, function (props) {
   return props.palette && css(_templateObject2, function (props) {
@@ -40,0 +40,0 @@ return props.theme.colors[props.palette][3];

es/components/Checkbox/Checkbox.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    color: ', ';\n    color: ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    color: ', ';\n    color: ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    ', '\n\n    color: ', ';\n\n    ', '\n  }\n\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    ', '\n\n    color: ', ';\n\n    ', '\n  }\n\n  ', '\n  ', '\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteralLoose(['\n        color: ', ';\n      '], ['\n        color: ', ';\n      ']),
+    _templateObject3 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n']),
+    _templateObject4 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']);
 
@@ -24,8 +25,14 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 var Wrapper = styled.div(_templateObject, function (props) {
+  return !props.palette && css(_templateObject2, function (props) {
+    return props.theme.colors.primary[3];
+  });
+}, function (props) {
   return props.theme['checkbox.label.color'];
 }, function (props) {
-  return props.theme.colors[props.palette][3];
+  return props.palette && css(_templateObject2, function (props) {
+    return props.theme.colors[props.palette][3];
+  });
 }, fontSize, space, size);
 
-var Box = styled.div(_templateObject2, function (props) {
+var Box = styled.div(_templateObject3, function (props) {
   return props.theme.fontSizes[props.theme.sizes[props.size]];
@@ -41,3 +48,11 @@ }, function (props) {
 }, function (props) {
-  return props.palette && css(_templateObject3, function (props) {
+  return !props.palette && css(_templateObject4, function (props) {
+    return props.theme.colors.primary[0];
+  }, function (props) {
+    return props.theme.colors.primary[3];
+  }, function (props) {
+    return props.theme.colors.primary[1];
+  });
+}, function (props) {
+  return props.palette && css(_templateObject4, function (props) {
     return props.theme.colors[props.palette][0];
@@ -128,6 +143,5 @@ }, function (props) {
 Checkbox.defaultProps = {
-  size: 'md',
-  palette: 'primary'
+  size: 'md'
 };
 
 export default Checkbox;

es/components/Icon/Icon.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  // display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  // display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  // display: inline-flex;\n  display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  // display: inline-flex;\n  display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
 
@@ -5,0 +5,0 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

es/components/Menu/Menu.js

@@ -16,6 +16,5 @@ var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n  background: ', ';\n  padding: 0 !important;\n  ', ' ', ';\n'], ['\n  color: ', ';\n  background: ', ';\n  padding: 0 !important;\n  ', ' ', ';\n']);
   borderRadius: 4,
-  p: 1,
-  m: 0
+  p: 2
 
   /** @component */
 };export default Menu;

es/components/Menu/MenuHeader.js

@@ -13,5 +13,5 @@ var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n  font-weight: bold;\n  ', ' ', ';\n'], ['\n  color: ', ';\n  font-weight: bold;\n  ', ' ', ';\n']);
 MenuHeader.defaultProps = {
-  p: 1
+  p: 3
 
   /** @component */
 };export default MenuHeader;

es/components/MultiSelect/MultiSelect.js

@@ -109,4 +109,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
         getValue = _props.getValue,
-        optionStyles = _props.optionStyles;
+        optionStyles = _props.optionStyles,
+        menuItemProps = _props.menuItemProps,
+        checkboxProps = _props.checkboxProps;
 
+
     return React.createElement(
@@ -120,3 +123,3 @@ OptionWrapper,
           MenuItem,
-          {
+          _extends({
             key: value,
@@ -127,4 +130,4 @@ onClick: function onClick(e) {
             style: optionStyles
-          },
-          React.createElement(Checkbox, {
+          }, menuItemProps),
+          React.createElement(Checkbox, _extends({
             className: 'checkbox',
@@ -142,6 +145,4 @@ name: label,
               _this2.handleOptionClick(e, o);
-            },
-            borderRadius: 3,
-            mr: 1
-          })
+            }
+          }, checkboxProps))
         );
@@ -216,13 +217,15 @@ })
   MultiSelect.prototype.render = function render() {
+    var popoverProps = this.props.popoverProps;
+
+
     return React.createElement(
-      Popover,
-      {
+      Popper,
+      _extends({
         trigger: this.renderTrigger(),
         animation: 'slide',
-        position: 'bottom center',
+        position: 'bottom',
         on: 'click',
         arrow: false,
-        fullWidth: true,
-        contentStyle: { marginTop: -1, maxHeight: 350, overflow: 'scroll' }
-      },
+        fullWidth: true
+      }, popoverProps),
       this.renderOptions()
@@ -238,2 +241,9 @@ );
   appendOnLabelClick: true,
+  popoverProps: {
+    boxShadow: 'none'
+  },
+  checkboxProps: {
+    mr: 1
+  },
+  menuItemProps: {},
   optionStyles: {
@@ -240,0 +250,0 @@ padding: 10

es/components/MultiSelect/Wrapper.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n']);
 
@@ -6,3 +6,3 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 import styled from 'styled-components';
-import { space, width, borderRadius, color, borders } from 'styled-system';
+import { space, width, borderRadius, color, borders, borderColor } from 'styled-system';
 
@@ -13,3 +13,3 @@ export default styled.div(_templateObject, function (props) {
   return props.theme['multiselect.border.color'];
-}, space, width, borderRadius, color, borders, function (props) {
+}, space, width, borderRadius, color, borders, borderColor, function (props) {
   return props.theme['multiselect.focus.border.color'];
@@ -16,0 +16,0 @@ }, function (props) {

es/components/Popper/Popper.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n'], ['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n    display: ', ';\n    max-height: ', ';\n    overflow-y: scroll;\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n'], ['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n    display: ', ';\n    max-height: ', ';\n    overflow-y: scroll;\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n']);
 
@@ -19,2 +19,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import styled from 'styled-components';
+import { borders, color, borderColor, boxShadow, space } from 'styled-system';
 import { findDOMNode } from 'react-dom';
@@ -30,3 +31,7 @@ import resizeDetector from 'element-resize-detector';
   return props.width;
-});
+}, function (props) {
+  return props.isOpen ? 'block' : 'none';
+}, function (props) {
+  return props.maxHeight;
+}, color, borders, borderColor, boxShadow, space);
 
@@ -36,3 +41,7 @@ var animations = {
     default: { opacity: 0 },
-    hide: { opacity: 0, transform: 'scale(.8) translateY(-30%)', pointerEvents: 'none' },
+    hide: {
+      opacity: 0,
+      transform: 'scale(.8) translateY(-30%)',
+      pointerEvents: 'none'
+    },
     show: { opacity: 1, transform: 'none', pointerEvents: 'auto' }
@@ -56,6 +65,3 @@ },
 
-  return React.createElement('div', _extends({
-    ref: innerRef,
-    style: { cursor: 'pointer' }
-  }, props));
+  return React.createElement('div', _extends({ ref: innerRef, style: { cursor: 'pointer' } }, props));
 };
@@ -93,3 +99,3 @@
     _this._setOutsideTap = function () {
-      var elements = [_this.target, _this.popper];
+      var elements = [_this.target];
 
@@ -128,3 +134,3 @@ if (_this.popper) {
 
-    _this._handleResize = debounce(_this._handleResize, 250, false);
+    _this._handleResize = debounce(_this._handleResize, 50, false);
 
@@ -161,3 +167,3 @@ _this.state = {
       // return this.target.getBoundingClientRect().width
-      return this.state.width;
+      return this.state.width - 2;
     }
@@ -191,3 +197,4 @@
       width: this._getPopperWidth(),
-      zIndex: 99
+      zIndex: 99,
+      display: this.state.isOpen ? 'block' : 'none'
     });
@@ -217,18 +224,6 @@
       React.createElement(
-        Show,
-        {
-          show: this.state.isOpen,
-          easing: easing,
-          duration: duration,
-          style: animations[animation].default,
-          styleHide: animations[animation].hide,
-          styleShow: animations[animation].show,
-          transitionOnMount: true
-        },
-        React.createElement(
-          'div',
-          { style: popperStyle },
-          typeof children === "function" ? children(this._handleOutsideTap, this.state.isOpen) : children,
-          arrow && React.createElement(Arrow, { className: 'popper__arrow' })
-        )
+        'div',
+        { style: popperStyle },
+        typeof children === 'function' ? children(this._handleOutsideTap, this.state.isOpen) : children,
+        arrow && React.createElement(Arrow, { className: 'popper__arrow' })
       )
@@ -243,8 +238,10 @@ );
         trigger = _props2.trigger,
-        portal = _props2.portal;
+        portal = _props2.portal,
+        rest = _objectWithoutProperties(_props2, ['trigger', 'portal']);
 
+    console.log(rest);
 
     return React.createElement(
       PopoverWrapper,
-      null,
+      _extends({}, rest, { isOpen: this.state.isOpen }),
       React.createElement(
@@ -277,5 +274,22 @@ Manager,
 
+// <Show
+//   show={this.state.isOpen}
+//   easing={easing}
+//   duration={duration}
+//   style={animations[animation].default}
+//   styleHide={animations[animation].hide}
+//   styleShow={animations[animation].show}
+//   transitionOnMount
+// >
+//   <div style={popperStyle}>
+//     {typeof children === 'function'
+//       ? children(this._handleOutsideTap, this.state.isOpen)
+//       : children}
+//     {arrow && <Arrow className="popper__arrow" />}
+//   </div>
+// </Show>
+
 Popper.propTypes = process.env.NODE_ENV !== "production" ? {
   arrow: PropTypes.bool,
-  animation: PropTypes.oneOf(["fade", "scale", "slide"]),
+  animation: PropTypes.oneOf(['fade', 'scale', 'slide']),
   duration: PropTypes.number,
@@ -289,5 +303,5 @@ offset: PropTypes.number,
   trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
-  on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
+  on: PropTypes.oneOfType([PropTypes.oneOf(['hover', 'click', 'focus']), PropTypes.arrayOf(PropTypes.oneOf(['hover', 'click', 'focus']))]),
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
-  position: PropTypes.oneOf(["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end", "auto", "auto-start", "auto-end"])
+  position: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end'])
 } : {};
@@ -300,3 +314,3 @@
   defaultOpen: false,
-  on: ["click"],
+  on: ['click'],
   portal: false,
@@ -307,7 +321,10 @@ arrow: true,
   duration: 250,
-  position: "bottom-start",
+  position: 'bottom-start',
   fullWidth: false,
-  contentStyle: {}
+  contentStyle: {},
+  boxShadow: 1,
+  border: 1,
+  borderColor: 'gray.4'
 };
 
 export default Popper;

es/components/Select/Select.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n'], ['\n  color: ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n  ', ';\n'], ['\n  color: ', ';\n  ', ';\n']);
 
@@ -17,3 +17,4 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 import styled from 'styled-components';
-import Popover from '../Popover';
+import { color } from 'styled-system';
+import Popper from '../Popper';
 import { Menu, MenuItem } from '../Menu';
@@ -25,3 +26,3 @@ import Icon from '../Icon';
   return props.theme['select.placeholder.color'];
-});
+}, color);
 
@@ -38,5 +39,7 @@ var Select = function (_React$Component) {
   Select.prototype.renderPlaceholder = function renderPlaceholder() {
+    var placeholderColor = this.props.placeholderColor;
+
     return React.createElement(
       Placeholder,
-      null,
+      { color: placeholderColor },
       this.props.placeholder
@@ -63,2 +66,5 @@ );
 
+    var menuItemProps = this.props.menuItemProps;
+
+
     return function (close) {
@@ -71,5 +77,4 @@ return React.createElement(
             MenuItem,
-            {
+            _extends({
               key: o.value,
-              borderRadius: 0,
               onClick: function onClick() {
@@ -79,3 +84,3 @@ _this2.props.onChange(o.value);
               }
-            },
+            }, menuItemProps),
             o.label
@@ -91,3 +96,4 @@ );
         value = _props2.value,
-        rest = _objectWithoutProperties(_props2, ['value']);
+        placeholderColor = _props2.placeholderColor,
+        rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor']);
 
@@ -115,20 +121,16 @@ return (
   Select.prototype.render = function render() {
-    var maxHeight = this.props.maxHeight;
+    var _props3 = this.props,
+        maxHeight = _props3.maxHeight,
+        popoverProps = _props3.popoverProps;
 
     return React.createElement(
-      Popover,
-      {
+      Popper,
+      _extends({
         trigger: this.renderChildren(),
-        position: 'bottom center',
+        position: 'bottom',
         on: 'click',
         arrow: false,
         fullWidth: true,
-        portal: true,
-        shadow: false,
-        contentStyle: {
-          marginTop: -2,
-          maxHeight: maxHeight,
-          overflowY: 'scroll'
-        }
-      },
+        portal: false
+      }, popoverProps),
       this.renderOptions()
@@ -142,5 +144,15 @@ );
 Select.defaultProps = {
-  maxHeight: 150
+  borders: 1,
+  popoverProps: {
+    borders: 1,
+    borderColor: 'gray.4',
+    boxShadow: 'none',
+    maxHeight: '150px',
+    mt: '-1px'
+  },
+  menuItemProps: {
+    borderRadius: 0
+  }
 };
 
 export default Select;

es/components/Select/Wrapper.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n']);
 
@@ -6,3 +6,3 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 import styled from 'styled-components';
-import { space, width, borderRadius, borders, color } from 'styled-system';
+import { space, width, borderRadius, borders, borderColor, color } from 'styled-system';
 
@@ -13,3 +13,3 @@ var Wrapper = styled.div(_templateObject, function (props) {
   return props.theme['select.border.color'];
-}, space, width, borderRadius, borders, color, function (props) {
+}, space, width, borderRadius, borders, borderColor, color, function (props) {
   return props.theme['select.icon.color'];
@@ -16,0 +16,0 @@ }, function (props) {

lib/components/Button/Button.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n'], ['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n']),
+var _templateObject = _taggedTemplateLiteralLoose(['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n'], ['\n  font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  border-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  background: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    opacity: .25;\n    background: ', ';\n    color: ', ';\n  }\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']),
@@ -32,2 +32,10 @@ _templateObject3 = _taggedTemplateLiteralLoose(['\n      background: none;\n      color: ', ';\n      border: none;\n    '], ['\n      background: none;\n      color: ', ';\n      border: none;\n    ']),
 var Button = _styledComponents2.default.button(_templateObject, function (props) {
+  return !props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
+    return props.theme.colors.primary[4];
+  }, function (props) {
+    return props.theme.colors.primary[0];
+  }, function (props) {
+    return props.theme.colors.primary[4];
+  });
+}, function (props) {
   return props.theme['button.border.color'];
@@ -47,10 +55,2 @@ }, function (props) {
 }, function (props) {
-  return !props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
-    return props.theme.colors.primary[4];
-  }, function (props) {
-    return props.theme.colors.primary[0];
-  }, function (props) {
-    return props.theme.colors.primary[4];
-  });
-}, function (props) {
   return props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
@@ -57,0 +57,0 @@ return props.theme.colors[props.palette][3];

lib/components/Checkbox/Checkbox.js

@@ -7,5 +7,6 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    color: ', ';\n    color: ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    color: ', ';\n    color: ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    ', '\n\n    color: ', ';\n\n    ', '\n  }\n\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  > .checkbox-label {\n    ', '\n\n    color: ', ';\n\n    ', '\n  }\n\n  ', '\n  ', '\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteralLoose(['\n        color: ', ';\n      '], ['\n        color: ', ';\n      ']),
+    _templateObject3 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  height: ', ';\n  width: ', ';\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n']),
+    _templateObject4 = _taggedTemplateLiteralLoose(['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    '], ['\n      background: ', ';\n      color: ', ';\n      border-color: ', ';\n    ']);
 
@@ -43,8 +44,14 @@ var _react = require('react');
 var Wrapper = _styledComponents2.default.div(_templateObject, function (props) {
+  return !props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
+    return props.theme.colors.primary[3];
+  });
+}, function (props) {
   return props.theme['checkbox.label.color'];
 }, function (props) {
-  return props.theme.colors[props.palette][3];
+  return props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
+    return props.theme.colors[props.palette][3];
+  });
 }, _styledSystem.fontSize, _styledSystem.space, _styledSystem.size);
 
-var Box = _styledComponents2.default.div(_templateObject2, function (props) {
+var Box = _styledComponents2.default.div(_templateObject3, function (props) {
   return props.theme.fontSizes[props.theme.sizes[props.size]];
@@ -60,3 +67,11 @@ }, function (props) {
 }, function (props) {
-  return props.palette && (0, _styledComponents.css)(_templateObject3, function (props) {
+  return !props.palette && (0, _styledComponents.css)(_templateObject4, function (props) {
+    return props.theme.colors.primary[0];
+  }, function (props) {
+    return props.theme.colors.primary[3];
+  }, function (props) {
+    return props.theme.colors.primary[1];
+  });
+}, function (props) {
+  return props.palette && (0, _styledComponents.css)(_templateObject4, function (props) {
     return props.theme.colors[props.palette][0];
@@ -147,4 +162,3 @@ }, function (props) {
 Checkbox.defaultProps = {
-  size: 'md',
-  palette: 'primary'
+  size: 'md'
 };
@@ -151,0 +165,0 @@

lib/components/Icon/Icon.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  display: inline-flex;\n  // display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  display: inline-flex;\n  // display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  // display: inline-flex;\n  display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  // display: inline-flex;\n  display: inline-block;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
 
@@ -10,0 +10,0 @@ var _react = require('react');

lib/components/Menu/Menu.js

@@ -25,4 +25,3 @@ 'use strict';
   borderRadius: 4,
-  p: 1,
-  m: 0
+  p: 2
 
@@ -29,0 +28,0 @@ /** @component */

lib/components/Menu/MenuHeader.js

@@ -22,3 +22,3 @@ 'use strict';
 MenuHeader.defaultProps = {
-  p: 1
+  p: 3
 
@@ -25,0 +25,0 @@ /** @component */

lib/components/MultiSelect/MultiSelect.js

@@ -140,4 +140,7 @@ 'use strict';
         getValue = _props.getValue,
-        optionStyles = _props.optionStyles;
+        optionStyles = _props.optionStyles,
+        menuItemProps = _props.menuItemProps,
+        checkboxProps = _props.checkboxProps;
 
+
     return _react2.default.createElement(
@@ -151,3 +154,3 @@ _OptionWrapper2.default,
           _Menu.MenuItem,
-          {
+          _extends({
             key: value,
@@ -158,4 +161,4 @@ onClick: function onClick(e) {
             style: optionStyles
-          },
-          _react2.default.createElement(_Checkbox2.default, {
+          }, menuItemProps),
+          _react2.default.createElement(_Checkbox2.default, _extends({
             className: 'checkbox',
@@ -173,6 +176,4 @@ name: label,
               _this2.handleOptionClick(e, o);
-            },
-            borderRadius: 3,
-            mr: 1
-          })
+            }
+          }, checkboxProps))
         );
@@ -247,13 +248,15 @@ })
   MultiSelect.prototype.render = function render() {
+    var popoverProps = this.props.popoverProps;
+
+
     return _react2.default.createElement(
-      _Popover2.default,
-      {
+      _Popper2.default,
+      _extends({
         trigger: this.renderTrigger(),
         animation: 'slide',
-        position: 'bottom center',
+        position: 'bottom',
         on: 'click',
         arrow: false,
-        fullWidth: true,
-        contentStyle: { marginTop: -1, maxHeight: 350, overflow: 'scroll' }
-      },
+        fullWidth: true
+      }, popoverProps),
       this.renderOptions()
@@ -269,2 +272,9 @@ );
   appendOnLabelClick: true,
+  popoverProps: {
+    boxShadow: 'none'
+  },
+  checkboxProps: {
+    mr: 1
+  },
+  menuItemProps: {},
   optionStyles: {
@@ -271,0 +281,0 @@ padding: 10

lib/components/MultiSelect/Wrapper.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 10px;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  svg {\n    color: ', ';\n  }\n']);
 
@@ -22,3 +22,3 @@ var _styledComponents = require('styled-components');
   return props.theme['multiselect.border.color'];
-}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.color, _styledSystem.borders, function (props) {
+}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.color, _styledSystem.borders, _styledSystem.borderColor, function (props) {
   return props.theme['multiselect.focus.border.color'];
@@ -25,0 +25,0 @@ }, function (props) {

lib/components/Popper/Popper.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n'], ['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n    display: ', ';\n    max-height: ', ';\n    overflow-y: scroll;\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n'], ['\n  .popper {\n    // width: ', ';\n    z-index: 99;\n    display: ', ';\n    max-height: ', ';\n    overflow-y: scroll;\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  }\n\n  .popper .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  .popper[data-placement^="top"].has-arrow {\n    margin-bottom: 5px;\n  }\n\n  .popper[data-placement^="top"] .popper__arrow {\n    border-width: 5px 5px 0 5px;\n    border-color: #FFF transparent transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    bottom: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="bottom"].has-arrow {\n    margin-top: 5px;\n  }\n\n  .popper[data-placement^="bottom"] .popper__arrow {\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent #FFF transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    top: -5px;\n    // left: calc(50% - 5px);\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .popper[data-placement^="right"].has-arrow {\n    margin-left: 5px;\n  }\n\n  .popper[data-placement^="right"] .popper__arrow {\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #FFF transparent transparent;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    left: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-placement^="left"].has-arrow {\n    margin-right: 5px;\n  }\n\n  .popper[data-placement^="left"] .popper__arrow {\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent #FFF;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;\n    right: -5px;\n    top: calc(50% - 5px);\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .popper[data-x-out-of-boundaries] {\n      display: none;\n  }\n']);
 
@@ -26,2 +26,4 @@ var _react = require('react');
 
+var _styledSystem = require('styled-system');
+
 var _reactDom = require('react-dom');
@@ -63,3 +65,7 @@
   return props.width;
-});
+}, function (props) {
+  return props.isOpen ? 'block' : 'none';
+}, function (props) {
+  return props.maxHeight;
+}, _styledSystem.color, _styledSystem.borders, _styledSystem.borderColor, _styledSystem.boxShadow, _styledSystem.space);
 
@@ -69,3 +75,7 @@ var animations = {
     default: { opacity: 0 },
-    hide: { opacity: 0, transform: 'scale(.8) translateY(-30%)', pointerEvents: 'none' },
+    hide: {
+      opacity: 0,
+      transform: 'scale(.8) translateY(-30%)',
+      pointerEvents: 'none'
+    },
     show: { opacity: 1, transform: 'none', pointerEvents: 'auto' }
@@ -89,6 +99,3 @@ },
 
-  return _react2.default.createElement('div', _extends({
-    ref: innerRef,
-    style: { cursor: 'pointer' }
-  }, props));
+  return _react2.default.createElement('div', _extends({ ref: innerRef, style: { cursor: 'pointer' } }, props));
 };
@@ -126,3 +133,3 @@
     _this._setOutsideTap = function () {
-      var elements = [_this.target, _this.popper];
+      var elements = [_this.target];
 
@@ -161,3 +168,3 @@ if (_this.popper) {
 
-    _this._handleResize = (0, _browser.debounce)(_this._handleResize, 250, false);
+    _this._handleResize = (0, _browser.debounce)(_this._handleResize, 50, false);
 
@@ -194,3 +201,3 @@ _this.state = {
       // return this.target.getBoundingClientRect().width
-      return this.state.width;
+      return this.state.width - 2;
     }
@@ -224,3 +231,4 @@
       width: this._getPopperWidth(),
-      zIndex: 99
+      zIndex: 99,
+      display: this.state.isOpen ? 'block' : 'none'
     });
@@ -250,18 +258,6 @@
       _react2.default.createElement(
-        _reactShow2.default,
-        {
-          show: this.state.isOpen,
-          easing: easing,
-          duration: duration,
-          style: animations[animation].default,
-          styleHide: animations[animation].hide,
-          styleShow: animations[animation].show,
-          transitionOnMount: true
-        },
-        _react2.default.createElement(
-          'div',
-          { style: popperStyle },
-          typeof children === "function" ? children(this._handleOutsideTap, this.state.isOpen) : children,
-          arrow && _react2.default.createElement(_reactPopper.Arrow, { className: 'popper__arrow' })
-        )
+        'div',
+        { style: popperStyle },
+        typeof children === 'function' ? children(this._handleOutsideTap, this.state.isOpen) : children,
+        arrow && _react2.default.createElement(_reactPopper.Arrow, { className: 'popper__arrow' })
       )
@@ -276,8 +272,10 @@ );
         trigger = _props2.trigger,
-        portal = _props2.portal;
+        portal = _props2.portal,
+        rest = _objectWithoutProperties(_props2, ['trigger', 'portal']);
 
+    console.log(rest);
 
     return _react2.default.createElement(
       PopoverWrapper,
-      null,
+      _extends({}, rest, { isOpen: this.state.isOpen }),
       _react2.default.createElement(
@@ -310,5 +308,22 @@ _reactPopper.Manager,
 
+// <Show
+//   show={this.state.isOpen}
+//   easing={easing}
+//   duration={duration}
+//   style={animations[animation].default}
+//   styleHide={animations[animation].hide}
+//   styleShow={animations[animation].show}
+//   transitionOnMount
+// >
+//   <div style={popperStyle}>
+//     {typeof children === 'function'
+//       ? children(this._handleOutsideTap, this.state.isOpen)
+//       : children}
+//     {arrow && <Arrow className="popper__arrow" />}
+//   </div>
+// </Show>
+
 Popper.propTypes = process.env.NODE_ENV !== "production" ? {
   arrow: _propTypes2.default.bool,
-  animation: _propTypes2.default.oneOf(["fade", "scale", "slide"]),
+  animation: _propTypes2.default.oneOf(['fade', 'scale', 'slide']),
   duration: _propTypes2.default.number,
@@ -322,5 +337,5 @@ offset: _propTypes2.default.number,
   trigger: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.element]).isRequired,
-  on: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(["hover", "click", "focus"]), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(["hover", "click", "focus"]))]),
+  on: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['hover', 'click', 'focus']), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['hover', 'click', 'focus']))]),
   children: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.element, _propTypes2.default.string]).isRequired,
-  position: _propTypes2.default.oneOf(["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end", "auto", "auto-start", "auto-end"])
+  position: _propTypes2.default.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end'])
 } : {};
@@ -333,3 +348,3 @@
   defaultOpen: false,
-  on: ["click"],
+  on: ['click'],
   portal: false,
@@ -340,5 +355,8 @@ arrow: true,
   duration: 250,
-  position: "bottom-start",
+  position: 'bottom-start',
   fullWidth: false,
-  contentStyle: {}
+  contentStyle: {},
+  boxShadow: 1,
+  border: 1,
+  borderColor: 'gray.4'
 };
@@ -345,0 +363,0 @@

lib/components/Select/Select.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n'], ['\n  color: ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  color: ', ';\n  ', ';\n'], ['\n  color: ', ';\n  ', ';\n']);
 
@@ -18,6 +18,8 @@ var _react = require('react');
 
-var _Popover = require('../Popover');
+var _styledSystem = require('styled-system');
 
-var _Popover2 = _interopRequireDefault(_Popover);
+var _Popper = require('../Popper');
 
+var _Popper2 = _interopRequireDefault(_Popper);
+
 var _Menu = require('../Menu');
@@ -47,3 +49,3 @@
   return props.theme['select.placeholder.color'];
-});
+}, _styledSystem.color);
 
@@ -60,5 +62,7 @@ var Select = function (_React$Component) {
   Select.prototype.renderPlaceholder = function renderPlaceholder() {
+    var placeholderColor = this.props.placeholderColor;
+
     return _react2.default.createElement(
       Placeholder,
-      null,
+      { color: placeholderColor },
       this.props.placeholder
@@ -85,2 +89,5 @@ );
 
+    var menuItemProps = this.props.menuItemProps;
+
+
     return function (close) {
@@ -93,5 +100,4 @@ return _react2.default.createElement(
             _Menu.MenuItem,
-            {
+            _extends({
               key: o.value,
-              borderRadius: 0,
               onClick: function onClick() {
@@ -101,3 +107,3 @@ _this2.props.onChange(o.value);
               }
-            },
+            }, menuItemProps),
             o.label
@@ -113,3 +119,4 @@ );
         value = _props2.value,
-        rest = _objectWithoutProperties(_props2, ['value']);
+        placeholderColor = _props2.placeholderColor,
+        rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor']);
 
@@ -137,20 +144,16 @@ return (
   Select.prototype.render = function render() {
-    var maxHeight = this.props.maxHeight;
+    var _props3 = this.props,
+        maxHeight = _props3.maxHeight,
+        popoverProps = _props3.popoverProps;
 
     return _react2.default.createElement(
-      _Popover2.default,
-      {
+      _Popper2.default,
+      _extends({
         trigger: this.renderChildren(),
-        position: 'bottom center',
+        position: 'bottom',
         on: 'click',
         arrow: false,
         fullWidth: true,
-        portal: true,
-        shadow: false,
-        contentStyle: {
-          marginTop: -2,
-          maxHeight: maxHeight,
-          overflowY: 'scroll'
-        }
-      },
+        portal: false
+      }, popoverProps),
       this.renderOptions()
@@ -164,3 +167,13 @@ );
 Select.defaultProps = {
-  maxHeight: 150
+  borders: 1,
+  popoverProps: {
+    borders: 1,
+    borderColor: 'gray.4',
+    boxShadow: 'none',
+    maxHeight: '150px',
+    mt: '-1px'
+  },
+  menuItemProps: {
+    borderRadius: 0
+  }
 };
@@ -167,0 +180,0 @@

lib/components/Select/Wrapper.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n']);
 
@@ -22,3 +22,3 @@ var _styledComponents = require('styled-components');
   return props.theme['select.border.color'];
-}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.color, function (props) {
+}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.borderColor, _styledSystem.color, function (props) {
   return props.theme['select.icon.color'];
@@ -25,0 +25,0 @@ }, function (props) {

package.json

 {
   "name": "react-interface",
-  "version": "0.9.4-alpha.34",
+  "version": "0.9.4-alpha.35",
   "description": "react-interface React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

259608

increased by1.68%

Lines of code

5365

increased by1.71%

No dependency changes