react-interface - npm Package Compare versions

Comparing version 0.9.5-alpha.0.6 to 0.9.5-alpha.0.7

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  appearance: none;\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  appearance: none;\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  ', '\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  ', '\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    ']),
@@ -14,3 +14,11 @@ _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, color, space, width, borders, borderRadius, borderColor, fontWeight, fontSize, hover, boxShadow, function (props) {
+var Button = styled.button(_templateObject, function (props) {
+  return !props.palette && css(_templateObject2, function (props) {
+    return props.theme.colors.buttonBackground;
+  }, function (props) {
+    return props.theme.colors.button;
+  }, function (props) {
+    return props.theme.colors.buttonBorder;
+  });
+}, function (props) {
   return props.palette && css(_templateObject2, function (props) {
@@ -41,6 +49,6 @@ return props.theme.colors[props.palette][3];
   });
+}, color, space, width, borders, borderRadius, borderColor, fontWeight, fontSize, hover, boxShadow, function (props) {
+  return props.theme.colors.buttonDisabledBackground;
 }, function (props) {
-  return props.theme['button.disabled.background'];
-}, function (props) {
-  return props.theme['button.disabled.color'];
+  return props.theme.colors.buttonDisabled;
 });
@@ -79,5 +87,2 @@
   transparent: false,
-  color: 'button',
-  bg: 'buttonBackground',
-  borderColor: 'buttonBorder',
   border: '1px solid'
@@ -84,0 +89,0 @@

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    ', '\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']),
+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  ', '\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  ', '\n  ', '\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n        color: ', ';\n      '], ['\n        color: ', ';\n      ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\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  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\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  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n\n  ', '\n  ', '\n  ', '\n  ', '\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    ']);
@@ -21,3 +21,3 @@
 import styled, { css } from 'styled-components';
-import { space, size, borderColor, borderRadius, color, fontSize } from 'styled-system';
+import { space, size, borderColor, borderRadius, color, textColor, fontSize, hover } from 'styled-system';
 import Icon from '../Icon';
@@ -35,3 +35,3 @@
   });
-}, fontSize, space, size);
+}, textColor, fontSize, space, size);
 
@@ -64,7 +64,7 @@ var Box = styled.div(_templateObject3, function (props) {
   });
-}, borderRadius, borderColor, color, space, function (props) {
+}, function (props) {
   return props.theme['checkbox.hover.border.color'];
 }, function (props) {
   return props.theme['checkbox.hover.background'];
-});
+}, borderRadius, borderColor, color, space, hover);
 
@@ -71,0 +71,0 @@ var Checkbox = function (_PureComponent) {

es/components/MultiSelect/MultiSelect.js

@@ -199,14 +199,10 @@ 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; };
     return React.createElement(
-      'div',
-      null,
-      React.createElement(
-        Wrapper,
-        _extends({ className: 'ri-multiselect' }, this.props, { tabIndex: '0' }),
-        this.renderPlaceholder(),
-        React.createElement(Icon, {
-          type: 'chevron-down',
-          size: 20,
-          style: { marginLeft: 'auto', position: 'absolute', right: 10 }
-        })
-      )
+      Wrapper,
+      _extends({ className: 'ri-multiselect' }, this.props, { tabIndex: '0' }),
+      this.renderPlaceholder(),
+      React.createElement(Icon, {
+        type: 'chevron-down',
+        size: 20,
+        style: { marginLeft: 'auto' }
+      })
     );
@@ -213,0 +209,0 @@ };

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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  ', '\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, borderColor, hover } from 'styled-system';
+import { space, width, borderRadius, color, borders, borderColor, hover, focus } from 'styled-system';
 
@@ -13,5 +13,5 @@ var Wrapper = styled.div(_templateObject, function (props) {
   return props.theme.colors.multiSelectBorder;
-}, space, width, borderRadius, color, borders, borderColor, hover, function (props) {
+}, space, width, borderRadius, color, borders, borderColor, function (props) {
   return props.theme.colors.multiSelectFocusBorder;
-}, function (props) {
+}, focus, hover, function (props) {
   return props.theme.colors.multiSelectIcon;
@@ -18,0 +18,0 @@ });

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  appearance: none;\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  appearance: none;\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  ', '\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  ', '\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    ']),
@@ -31,3 +31,11 @@ _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, _styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystem.borders, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.fontWeight, _styledSystem.fontSize, _styledSystem.hover, _styledSystem.boxShadow, function (props) {
+var Button = _styledComponents2.default.button(_templateObject, function (props) {
+  return !props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
+    return props.theme.colors.buttonBackground;
+  }, function (props) {
+    return props.theme.colors.button;
+  }, function (props) {
+    return props.theme.colors.buttonBorder;
+  });
+}, function (props) {
   return props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
@@ -58,6 +66,6 @@ return props.theme.colors[props.palette][3];
   });
+}, _styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystem.borders, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.fontWeight, _styledSystem.fontSize, _styledSystem.hover, _styledSystem.boxShadow, function (props) {
+  return props.theme.colors.buttonDisabledBackground;
 }, function (props) {
-  return props.theme['button.disabled.background'];
-}, function (props) {
-  return props.theme['button.disabled.color'];
+  return props.theme.colors.buttonDisabled;
 });
@@ -96,5 +104,2 @@
   transparent: false,
-  color: 'button',
-  bg: 'buttonBackground',
-  borderColor: 'buttonBorder',
   border: '1px solid'
@@ -101,0 +106,0 @@

lib/components/Checkbox/Checkbox.js

@@ -7,5 +7,5 @@ '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    ', '\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']),
+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  ', '\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  ', '\n  ', '\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n        color: ', ';\n      '], ['\n        color: ', ';\n      ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\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  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\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  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n'], ['\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: ', ';\n  width: ', ';\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  &:hover {\n    border-color: ', ';\n    background: ', ';\n  }\n\n\n  ', '\n  ', '\n  ', '\n  ', '\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    ']);
@@ -53,3 +53,3 @@
   });
-}, _styledSystem.fontSize, _styledSystem.space, _styledSystem.size);
+}, _styledSystem.textColor, _styledSystem.fontSize, _styledSystem.space, _styledSystem.size);
 
@@ -82,7 +82,7 @@ var Box = _styledComponents2.default.div(_templateObject3, function (props) {
   });
-}, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.color, _styledSystem.space, function (props) {
+}, function (props) {
   return props.theme['checkbox.hover.border.color'];
 }, function (props) {
   return props.theme['checkbox.hover.background'];
-});
+}, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.color, _styledSystem.space, _styledSystem.hover);
 
@@ -89,0 +89,0 @@ var Checkbox = function (_PureComponent) {

lib/components/MultiSelect/MultiSelect.js

@@ -230,14 +230,10 @@ 'use strict';
     return _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        _Wrapper2.default,
-        _extends({ className: 'ri-multiselect' }, this.props, { tabIndex: '0' }),
-        this.renderPlaceholder(),
-        _react2.default.createElement(_Icon2.default, {
-          type: 'chevron-down',
-          size: 20,
-          style: { marginLeft: 'auto', position: 'absolute', right: 10 }
-        })
-      )
+      _Wrapper2.default,
+      _extends({ className: 'ri-multiselect' }, this.props, { tabIndex: '0' }),
+      this.renderPlaceholder(),
+      _react2.default.createElement(_Icon2.default, {
+        type: 'chevron-down',
+        size: 20,
+        style: { marginLeft: 'auto' }
+      })
     );
@@ -244,0 +240,0 @@ };

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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\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: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n'], ['\n  background: ', ';\n  border: 1px solid ', ';\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  height: 100%;\n  padding: 10px;\n  position: relative;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:focus {\n    border: 1px solid ', ';\n    outline: none;\n  }\n\n  ', '\n  ', '\n\n  svg {\n    color: ', ';\n  }\n']);
 
@@ -22,5 +22,5 @@ var _styledComponents = require('styled-components');
   return props.theme.colors.multiSelectBorder;
-}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.color, _styledSystem.borders, _styledSystem.borderColor, _styledSystem.hover, function (props) {
+}, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.color, _styledSystem.borders, _styledSystem.borderColor, function (props) {
   return props.theme.colors.multiSelectFocusBorder;
-}, function (props) {
+}, _styledSystem.focus, _styledSystem.hover, function (props) {
   return props.theme.colors.multiSelectIcon;
@@ -27,0 +27,0 @@ });

package.json

 {
   "name": "react-interface",
-  "version": "0.9.5-alpha.0.6",
+  "version": "0.9.5-alpha.0.7",
   "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

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

Improved metrics

Total package byte prevSize

285224

increased by0.14%

Lines of code

5865

increased by0.02%

No dependency changes