@rentalutions/elements - npm Package Compare versions

Comparing version 1.6.2 to 1.6.3

lib/Avatar/index.js

@@ -1,49 +0,91 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 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 = _taggedTemplateLiteral(['\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  background-color: ', ';\n  height: ', ';\n  width: ', ';\n  overflow: hidden;\n  > ', ' {\n    margin: 0;\n    padding: 0;\n    color: ', ';\n    font-size: ', ';\n  }\n  img {\n    width: 100%;\n  }\n'], ['\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  background-color: ', ';\n  height: ', ';\n  width: ', ';\n  overflow: hidden;\n  > ', ' {\n    margin: 0;\n    padding: 0;\n    color: ', ';\n    font-size: ', ';\n  }\n  img {\n    width: 100%;\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-wrap: wrap;\n  background-color: ", ";\n  align-items: center;\n  border-radius: ", "px;\n  color: ", ";\n  .photo-area {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    padding: ", "px;\n    background: ", ";\n    border-radius: 50%;\n    font-size: 0.75rem;\n    font-family: \"Open Sans\", sans-serif;\n    font-weight: 600;\n    text-transform: uppercase;\n    height: ", ";\n    width: ", ";\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name {\n    margin: 0 ", "px;\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 7.5em;\n  }\n  .contact-info {\n    display: flex;\n    width: 100%;\n    padding: ", "px 0;\n    font-size: 0.75rem;\n    color: ", ";\n  }\n"], ["\n  display: ", ";\n  flex-wrap: wrap;\n  background-color: ", ";\n  align-items: center;\n  border-radius: ", "px;\n  color: ", ";\n  .photo-area {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    padding: ", "px;\n    background: ", ";\n    border-radius: 50%;\n    font-size: 0.75rem;\n    font-family: \"Open Sans\", sans-serif;\n    font-weight: 600;\n    text-transform: uppercase;\n    height: ", ";\n    width: ", ";\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name {\n    margin: 0 ", "px;\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 7.5em;\n  }\n  .contact-info {\n    display: flex;\n    width: 100%;\n    padding: ", "px 0;\n    font-size: 0.75rem;\n    color: ", ";\n  }\n"]);
 
-var _react = require('react');
+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 _react2 = _interopRequireDefault(_react);
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _styledComponents = require('styled-components');
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { sizing, colors } from "../variables";
+import { Text } from "../index";
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+var Wrapper = styled.div(_templateObject, function (_ref) {
+  var email = _ref.email,
+      phone = _ref.phone,
+      block = _ref.block;
+  return block || email ? "flex" : "inline-flex";
+}, function (_ref2) {
+  var email = _ref2.email;
+  return email ? "transparent" : colors.ui;
+}, sizing, colors.dark, sizing / 2, function (_ref3) {
+  var photo = _ref3.photo;
+  return photo ? "url(" + photo : colors.lightGray;
+}, function (_ref4) {
+  var email = _ref4.email,
+      name = _ref4.name;
+  return email || !name ? sizing * 2 + "px" : sizing / 2 + "px";
+}, function (_ref5) {
+  var email = _ref5.email,
+      name = _ref5.name;
+  return email || !name ? sizing * 2 + "px" : sizing / 2 + "px";
+}, sizing / 2, sizing / 2, function (_ref6) {
+  var indicator = _ref6.indicator;
+  return indicator && indicator;
+}, colors.light, sizing / 2, function (_ref7) {
+  var email = _ref7.email;
+  return email ? "1.5rem" : "0.75rem";
+}, function (_ref8) {
+  var email = _ref8.email;
+  return email ? "600" : "500";
+}, sizing / 2, colors.darkGray);
 
-var _classnames = require('classnames');
+var Avatar = function Avatar(_ref9) {
+  var className = _ref9.className,
+      block = _ref9.block,
+      email = _ref9.email,
+      indicator = _ref9.indicator,
+      initials = _ref9.initials,
+      name = _ref9.name,
+      phone = _ref9.phone,
+      photo = _ref9.photo,
+      rest = _objectWithoutProperties(_ref9, ["className", "block", "email", "indicator", "initials", "name", "phone", "photo"]);
 
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _variables = require('../variables');
-
-var _Text = require('../Text');
-
-var _Text2 = _interopRequireDefault(_Text);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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 AvatarLogic = function AvatarLogic(_ref) {
-  var className = _ref.className,
-      initials = _ref.initials,
-      image = _ref.image,
-      rest = _objectWithoutProperties(_ref, ['className', 'initials', 'image']);
-
-  var classes = (0, _classnames2.default)('avatar', className);
-  return _react2.default.createElement(
-    'div',
-    _extends({ className: classes }, rest),
-    image ? _react2.default.createElement('img', { src: image, alt: 'avatar image' }) : _react2.default.createElement(
-      _Text2.default,
-      null,
-      initials
+  return React.createElement(
+    Wrapper,
+    _extends({
+      block: block,
+      name: name,
+      email: email,
+      className: className,
+      indicator: indicator,
+      photo: photo
+    }, rest),
+    React.createElement(
+      "div",
+      { className: "photo-area" },
+      name ? null : initials,
+      indicator && React.createElement("span", { className: "indicator" })
+    ),
+    name && React.createElement(
+      "span",
+      { className: "name" },
+      name
+    ),
+    email && React.createElement(
+      "div",
+      { className: "contact-info" },
+      React.createElement(
+        "span",
+        { className: "email" },
+        email
+      ),
+      phone && React.createElement(
+        "span",
+        null,
+        " | ",
+        phone
+      )
     )
@@ -53,17 +95,12 @@ );
 
-var Avatar = (0, _styledComponents2.default)(AvatarLogic).attrs({
-  size: function size(props) {
-    return props.lg ? '5em' : props.sm ? '2em' : '3em';
-  }
-})(_templateObject, function (_ref2) {
-  var bgColor = _ref2.bgColor;
-  return bgColor ? bgColor : _variables.colors.grey.darkSecondary;
-}, function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
-}, _Text2.default, _variables.colors.grey.light, function (props) {
-  return props.sm ? '0.75em' : 'inherit';
-});
+Avatar.propTypes = {
+  block: PropTypes.bool,
+  email: PropTypes.string,
+  indicator: PropTypes.string,
+  initials: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  phone: PropTypes.string,
+  photo: PropTypes.string
+};
 
-exports.default = Avatar;
+export default Avatar;

lib/Button/index.js

@@ -1,69 +0,53 @@
-'use strict';
+var _templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: ", "px ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 2px;\n  color: ", ";\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 600;\n  min-width: ", "px;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition: 200ms ease-in-out;\n  &:hover {\n    box-shadow: ", ";\n    background-color: ", ";\n  }\n"], ["\n  display: inline-block;\n  padding: ", "px ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 2px;\n  color: ", ";\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 600;\n  min-width: ", "px;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition: 200ms ease-in-out;\n  &:hover {\n    box-shadow: ", ";\n    background-color: ", ";\n  }\n"]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+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 _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  background-color: ', ';\n  border: ', ';\n  border-radius: 2px;\n  color: ', ';\n  cursor: pointer;\n  font-family: \'Nunito\', sans-serif;\n  font-size: 1em;\n  font-weight: 600;\n  min-width: 90px;\n  outline: none;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  transition: all 200ms ', ';\n  &:hover {\n    background: ', ';\n    border: 2px solid ', ';\n    box-shadow: ', ';\n    color: ', ';\n  }\n'], ['\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  background-color: ', ';\n  border: ', ';\n  border-radius: 2px;\n  color: ', ';\n  cursor: pointer;\n  font-family: \'Nunito\', sans-serif;\n  font-size: 1em;\n  font-weight: 600;\n  min-width: 90px;\n  outline: none;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  transition: all 200ms ', ';\n  &:hover {\n    background: ', ';\n    border: 2px solid ', ';\n    box-shadow: ', ';\n    color: ', ';\n  }\n']);
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react = require('react');
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { sizing, colors } from "../variables";
 
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _reactRouterDom = require('react-router-dom');
-
-var _polished = require('polished');
-
-var _variables = require('../variables');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var returnColor = function returnColor(props) {
-  return props.primary ? _variables.colors.brand.primary : props.success ? _variables.colors.ui.positive : props.failure ? _variables.colors.ui.negative : props.warning ? _variables.colors.ui.warning : props.btnColor ? props.btnColor : _variables.colors.grey.darkSecondary;
+var getColor = function getColor(_ref) {
+  var primary = _ref.primary,
+      success = _ref.success,
+      alert = _ref.alert,
+      warning = _ref.warning,
+      color = _ref.color;
+  return primary ? colors.primary : success ? colors.success : alert ? colors.alert : warning ? colors.warning : color ? color : colors.darkGray;
 };
 
-var ButtonWrapper = _styledComponents2.default.button.attrs({
-  computedColor: function computedColor(props) {
-    return returnColor(props);
-  }
-})(_templateObject, function (_ref) {
-  var computedColor = _ref.computedColor,
-      primary = _ref.primary;
-  return primary ? computedColor : 'transparent';
-}, function (_ref2) {
+var StyledButton = styled.button(_templateObject, sizing / 2, sizing, function (_ref2) {
   var bare = _ref2.bare,
-      computedColor = _ref2.computedColor;
-  return bare ? 'none' : '2px solid ' + computedColor;
+      props = _objectWithoutProperties(_ref2, ["bare"]);
+
+  return bare ? "transparent" : getColor(props);
 }, function (_ref3) {
-  var computedColor = _ref3.computedColor,
-      primary = _ref3.primary;
-  return primary ? _variables.colors.grey.light : computedColor;
-}, (0, _polished.timingFunctions)('easeInQuad'), function (props) {
-  return props.primary ? (0, _polished.darken)(0.24, props.computedColor) : props.computedColor;
-}, function (props) {
-  return props.primary ? (0, _polished.darken)(0.24, props.computedColor) : props.computedColor;
+  var bare = _ref3.bare,
+      props = _objectWithoutProperties(_ref3, ["bare"]);
+
+  return bare ? "2px solid " + getColor(props) : "none";
 }, function (_ref4) {
-  var primary = _ref4.primary;
-  return primary ? '0 1px 3px rgba(0,0,0,0.12)' : 'inital';
-}, _variables.colors.grey.light);
+  var bare = _ref4.bare,
+      props = _objectWithoutProperties(_ref4, ["bare"]);
 
-var RntLink = ButtonWrapper.withComponent(_reactRouterDom.Link);
+  return bare ? getColor(props) : colors.light;
+}, sizing * 4, function (_ref5) {
+  var bare = _ref5.bare;
+  return bare ? "none" : "0 1px 3px rgba(0,0,0,0.12)";
+}, function (props) {
+  return getColor(props);
+});
 
+var StyledLink = StyledButton.withComponent(Link);
+
 var Button = function Button(props) {
-  if (props.to) return _react2.default.createElement(
-    RntLink,
+  if (props.to) return React.createElement(
+    StyledLink,
     props,
     props.children
-  );else return _react2.default.createElement(
-    ButtonWrapper,
+  );else return React.createElement(
+    StyledButton,
     props,
@@ -74,4 +58,4 @@ props.children
 
-Button.displayName = 'Button';
+Button.displayName = "Button";
 
-exports.default = Button;
+export default Button;

lib/Card/index.js

@@ -1,31 +0,5 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 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 = _taggedTemplateLiteral(['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px ', ';\n  > ', ' {\n    margin-top: 0;\n    color: ', ';\n  }\n'], ['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px ', ';\n  > ', ' {\n    margin-top: 0;\n    color: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  .card-title {\n    margin-top: 0;\n    color: ", ";\n  }\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  .card-title {\n    margin-top: 0;\n    color: ", ";\n  }\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"]);
 
-exports.default = Card;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _polished = require('polished');
-
-var _Text = require('../Text');
-
-var _Text2 = _interopRequireDefault(_Text);
-
-var _variables = require('../variables');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
@@ -35,9 +9,14 @@
 
-var CardWrapper = _styledComponents2.default.div(_templateObject, function (_ref) {
+import React from "react";
+import styled from "styled-components";
+import Text from "../Text";
+import { sizing, colors } from "../variables";
+
+var Wrapper = styled.div(_templateObject, sizing / 2, function (_ref) {
   var bgImage = _ref.bgImage,
       bgColor = _ref.bgColor;
-  return bgImage ? 'url(' + bgImage + ')' : bgColor ? bgColor : _variables.colors.grey.light;
-}, (0, _polished.tint)(0.12, _variables.colors.grey.dark), _Text2.default, _variables.colors.grey.darkSecondary);
+  return bgImage ? "url(" + bgImage + ")" : bgColor ? bgColor : colors.light;
+}, colors.darkGray, sizing * 30, sizing);
 
-function Card(_ref2) {
+export default function Card(_ref2) {
   var className = _ref2.className,
@@ -49,10 +28,14 @@ children = _ref2.children,
       bgColor = _ref2.bgColor,
-      rest = _objectWithoutProperties(_ref2, ['className', 'children', 'title', 'cardActions', 'bgImage', 'bgColor']);
+      rest = _objectWithoutProperties(_ref2, ["className", "children", "title", "cardActions", "bgImage", "bgColor"]);
 
-  return _react2.default.createElement(
-    CardWrapper,
-    _extends({ className: className, bgImage: bgImage, bgColor: bgColor }, rest),
-    title && _react2.default.createElement(
-      _Text2.default,
-      { title: true },
+  return React.createElement(
+    Wrapper,
+    _extends({
+      className: className,
+      bgImage: bgImage,
+      bgColor: bgColor
+    }, rest),
+    title && React.createElement(
+      Text,
+      { title: true, className: "card-title" },
       title
@@ -59,0 +42,0 @@ ),

lib/Container/index.js

@@ -1,33 +0,11 @@
-'use strict';
+var _templateObject = _taggedTemplateLiteral([""], [""]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _templateObject = _taggedTemplateLiteral(['\n  max-width: sizes.xLarge;\n  padding: ', ';\n'], ['\n  max-width: sizes.xLarge;\n  padding: ', ';\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _variables = require('../variables');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Container = _styledComponents2.default.div.attrs({
-  padding: function padding(props) {
-    return props.padded ? '1em' : 'initial';
-  }
-})(_templateObject, function (props) {
-  return props.padding;
-});
+import React from "react";
+import styled from "styled-components";
+import { sizes } from "../variables";
 
-Container.displayName = 'Container';
+var Container = styled.div(_templateObject);
 
-exports.default = Container;
+export default Container;

lib/Dropdown/index.js

@@ -1,25 +0,5 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  .dropdown__list {\n    position: absolute;\n    top: calc(100% + 1em); left: 0;\n    visibility: ', ';\n  }\n'], ['\n  position: relative;\n  .dropdown__list {\n    position: absolute;\n    top: calc(100% + 1em); left: 0;\n    visibility: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .dropdown__list {\n    position: absolute;\n    top: calc(100% + 1em);\n    left: 0;\n    visibility: ", ";\n  }\n"], ["\n  position: relative;\n  .dropdown__list {\n    position: absolute;\n    top: calc(100% + 1em);\n    left: 0;\n    visibility: ", ";\n  }\n"]);
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -33,9 +13,13 @@
 
-var DropdownWrapper = _styledComponents2.default.div(_templateObject, function (_ref) {
+import React, { PureComponent, Children, cloneElement } from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+var DropdownWrapper = styled.div(_templateObject, function (_ref) {
   var open = _ref.open;
-  return open ? 'initial' : 'hidden';
+  return open ? "initial" : "hidden";
 });
 
-var Dropdown = function (_Component) {
-  _inherits(Dropdown, _Component);
+var Dropdown = function (_PureComponent) {
+  _inherits(Dropdown, _PureComponent);
 
@@ -52,3 +36,3 @@ function Dropdown(props) {
   _createClass(Dropdown, [{
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -62,3 +46,3 @@ var _this2 = this;
 
-      return _react2.default.createElement(
+      return React.createElement(
         DropdownWrapper,
@@ -75,10 +59,13 @@ {
         title,
-        _react2.default.createElement(
-          'ul',
-          { className: 'dropdown__list' },
+        React.createElement(
+          "ul",
+          { className: "dropdown__list" },
           items.map(function (item) {
-            return _react2.default.createElement(
-              'li',
-              { key: 'dropdown__list-item-' + Math.random(), className: 'dropdown__list-item' },
-              (0, _react.cloneElement)(item, item.props)
+            return React.createElement(
+              "li",
+              {
+                key: "dropdown__list-item-" + Math.random(),
+                className: "dropdown__list-item"
+              },
+              cloneElement(item, item.props)
             );
@@ -92,4 +79,4 @@ })
   return Dropdown;
-}(_react.Component);
+}(PureComponent);
 
-exports.default = Dropdown;
+export default Dropdown;

lib/Field/index.js

@@ -1,7 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 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; };
@@ -13,22 +7,2 @@
 
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require("styled-components");
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _classnames = require("classnames");
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _variables = require("../variables");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,4 +16,10 @@
 
-var FieldWrapper = _styledComponents2.default.fieldset(_templateObject);
+import React, { Component } from "react";
+import styled from "styled-components";
+import classNames from "classnames";
+import propTypes from "prop-types";
+import { colors } from "../variables";
 
+var FieldWrapper = styled.fieldset(_templateObject);
+
 var Field = function (_Component) {
@@ -100,7 +80,7 @@ _inherits(Field, _Component);
 
-      return _react2.default.createElement(
+      return React.createElement(
         FieldWrapper,
         { hasValue: this.input ? !!this.input.value.length : false },
-        multiLine ? _react2.default.createElement("textarea", passedProps) : _react2.default.createElement("input", _extends({ type: "text" }, passedProps)),
-        _react2.default.createElement(
+        multiLine ? React.createElement("textarea", passedProps) : React.createElement("input", _extends({ type: "text" }, passedProps)),
+        React.createElement(
           "label",
@@ -118,11 +98,13 @@ {
   return Field;
-}(_react.Component);
+}(Component);
 
 Field.propTypes = {
-  id: _propTypes2.default.string,
-  type: _propTypes2.default.string.isRequired,
-  placeholder: _propTypes2.default.string,
-  label: _propTypes2.default.string
+  id: propTypes.string,
+  type: propTypes.string.isRequired,
+  placeholder: propTypes.string,
+  label: propTypes.string
 };
 Field.displayName = "Field";
-exports.default = Field;
+
+
+export default Field;

lib/Icon/index.js

@@ -1,35 +0,16 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _templateObject = _taggedTemplateLiteral(['\n  font-size: 1em;\n'], ['\n  font-size: 1em;\n']);
 
-var _react = require('react');
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+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 _styledComponents = require('styled-components');
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import iconPaths from './iconData.js';
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+import { colors } from '../variables';
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _iconData = require('./iconData.js');
-
-var _iconData2 = _interopRequireDefault(_iconData);
-
-var _variables = require('../variables');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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 getPaths = function getPaths(iconName) {
-  var icon = _iconData2.default.icons.find(function (icon) {
+  var icon = iconPaths.icons.find(function (icon) {
     return icon.tags.includes(iconName);
@@ -46,4 +27,4 @@ });
 
-  var classes = (0, _classnames2.default)(className);
-  return _react2.default.createElement(
+  var classes = classNames(className);
+  return React.createElement(
     'svg',
@@ -62,3 +43,3 @@ {
     getPaths(name).map(function (path, i) {
-      return _react2.default.createElement('path', {
+      return React.createElement('path', {
         strokeLinecap: 'round',
@@ -73,6 +54,6 @@ strokeLinejoin: 'round',
 
-var Icon = (0, _styledComponents2.default)(IconMarkup)(_templateObject);
+var Icon = styled(IconMarkup)(_templateObject);
 
 Icon.displayName = 'Icon';
 
-exports.default = Icon;
+export default Icon;

lib/Image/index.js

@@ -1,25 +0,12 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _templateObject = _taggedTemplateLiteral(['\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n'], ['\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n']);
 
-var _react = require('react');
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+import React from 'react';
+import styled from 'styled-components';
 
-var _styledComponents = require('styled-components');
+var Image = styled.image(_templateObject);
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Image = _styledComponents2.default.image(_templateObject);
-
 Image.displayName = 'Image';
 
-exports.default = Image;
+export default Image;

lib/index.js

@@ -1,68 +0,15 @@
-"use strict";
+var _templateObject = _taggedTemplateLiteral(["\n*,*:before,*:after {\n  box-sizing: border-box;\n}\n"], ["\n*,*:before,*:after {\n  box-sizing: border-box;\n}\n"]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Toggle = exports.Tooltip = exports.Text = exports.Loader = exports.Field = exports.Image = exports.Dropdown = exports.Container = exports.Card = exports.Button = exports.Avatar = undefined;
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _templateObject = _taggedTemplateLiteral(["\n  *,*:before,*:after {\n    box-sizing: border-box;\n  }\n"], ["\n  *,*:before,*:after {\n    box-sizing: border-box;\n  }\n"]);
+import { injectGlobal } from "styled-components";
+import Avatar from "./Avatar";
+import Button from "./Button";
+import Card from "./Card";
+import Container from "./Container";
+import FullPageModal from "./FullPageModal";
+import Text from "./Text";
 
-var _styledComponents = require("styled-components");
+injectGlobal(_templateObject);
 
-var _Avatar = require("./Avatar");
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-var _Button = require("./Button");
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Card = require("./Card");
-
-var _Card2 = _interopRequireDefault(_Card);
-
-var _Container = require("./Container");
-
-var _Container2 = _interopRequireDefault(_Container);
-
-var _Dropdown = require("./Dropdown");
-
-var _Dropdown2 = _interopRequireDefault(_Dropdown);
-
-var _Field = require("./Field");
-
-var _Field2 = _interopRequireDefault(_Field);
-
-var _Loader = require("./Loader");
-
-var _Loader2 = _interopRequireDefault(_Loader);
-
-var _Text = require("./Text");
-
-var _Text2 = _interopRequireDefault(_Text);
-
-var _Tooltip = require("./Tooltip");
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
-var _Toggle = require("./Toggle");
-
-var _Toggle2 = _interopRequireDefault(_Toggle);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-(0, _styledComponents.injectGlobal)(_templateObject);
-
-exports.Avatar = _Avatar2.default;
-exports.Button = _Button2.default;
-exports.Card = _Card2.default;
-exports.Container = _Container2.default;
-exports.Dropdown = _Dropdown2.default;
-exports.Image = Image;
-exports.Field = _Field2.default;
-exports.Loader = _Loader2.default;
-exports.Text = _Text2.default;
-exports.Tooltip = _Tooltip2.default;
-exports.Toggle = _Toggle2.default;
+export { Avatar, Button, Card, Container, FullPageModal, Text };

lib/Loader/index.js

@@ -1,25 +0,12 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _templateObject = _taggedTemplateLiteral(['\n  color: red;\n'], ['\n  color: red;\n']);
 
-var _react = require('react');
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+import React from 'react';
+import styled from 'styled-components';
 
-var _styledComponents = require('styled-components');
+var Loader = styled.svg(_templateObject);
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Loader = _styledComponents2.default.svg(_templateObject);
-
 Loader.displayName = 'Loader';
 
-exports.default = Loader;
+export default Loader;

lib/Text/index.js

@@ -1,35 +0,16 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 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 = _taggedTemplateLiteral(['\n  margin: 1rem 0;\n  padding: 0;\n  color: ', ';\n  font-family: \'Nunito\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n'], ['\n  margin: 1rem 0;\n  padding: 0;\n  color: ', ';\n  font-family: \'Nunito\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  margin: 1rem 0;\n  padding: 0;\n  color: ", ";\n  font-family: \"Nunito\";\n  font-size: 1rem;\n  &.small {\n    font-size: 0.75rem;\n  }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline {\n    font-size: 2rem;\n  }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"], ["\n  margin: 1rem 0;\n  padding: 0;\n  color: ", ";\n  font-family: \"Nunito\";\n  font-size: 1rem;\n  &.small {\n    font-size: 0.75rem;\n  }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline {\n    font-size: 2rem;\n  }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"]);
 
-var _react = require('react');
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+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 _styledComponents = require('styled-components');
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import classNames from "classnames";
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+import { colors } from "../variables";
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _variables = require('../variables');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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; }
-
 function TextLogic(_ref) {
@@ -45,25 +26,30 @@ var center = _ref.center,
       title = _ref.title,
-      rest = _objectWithoutProperties(_ref, ['center', 'children', 'className', 'color', 'headline', 'hero', 'right', 'small', 'title']);
+      rest = _objectWithoutProperties(_ref, ["center", "children", "className", "color", "headline", "hero", "right", "small", "title"]);
 
-  var classes = (0, _classnames2.default)({
-    center: center, right: right, hero: hero, headline: headline, title: title, small: small
+  var classes = classNames({
+    center: center,
+    right: right,
+    hero: hero,
+    headline: headline,
+    title: title,
+    small: small
   }, className);
-  return hero ? _react2.default.createElement(
-    'h1',
+  return hero ? React.createElement(
+    "h1",
     _extends({ className: classes }, rest),
     children
-  ) : headline ? _react2.default.createElement(
-    'h2',
+  ) : headline ? React.createElement(
+    "h2",
     _extends({ className: classes }, rest),
     children
-  ) : title ? _react2.default.createElement(
-    'h3',
+  ) : title ? React.createElement(
+    "h3",
     _extends({ className: classes }, rest),
     children
-  ) : small ? _react2.default.createElement(
-    'p',
+  ) : small ? React.createElement(
+    "p",
     _extends({ className: classes }, rest),
     children
-  ) : _react2.default.createElement(
-    'p',
+  ) : React.createElement(
+    "p",
     _extends({ className: classes }, rest),
@@ -74,12 +60,12 @@ children
 
-var Text = (0, _styledComponents2.default)(TextLogic)(_templateObject, _variables.colors.grey.dark);
+var Text = styled(TextLogic)(_templateObject, colors.dark);
 
 Text.propTypes = {
-  center: _propTypes2.default.bool,
-  color: _propTypes2.default.string,
-  headline: _propTypes2.default.bool,
-  hero: _propTypes2.default.bool,
-  right: _propTypes2.default.bool,
-  small: _propTypes2.default.bool,
-  title: _propTypes2.default.bool
+  center: PropTypes.bool,
+  color: PropTypes.string,
+  headline: PropTypes.bool,
+  hero: PropTypes.bool,
+  right: PropTypes.bool,
+  small: PropTypes.bool,
+  title: PropTypes.bool
 };
@@ -96,2 +82,2 @@
 
-exports.default = Text;
+export default Text;

lib/Toggle/index.js

@@ -1,22 +0,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: ", ";\n  input {\n    display: none;\n    &:checked + .slider {\n      background-color: #f9f9f9;\n      &:before {\n        background-color: #137bb5;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n        transform: translateX(var(--sizing-unit));\n      }\n    }\n  }\n  .slider {\n    position: relative;\n    height: var(--sizing-unit);\n    width: calc(var(--sizing-unit) * 2);\n    background-color: #aaa;\n    border-radius: calc(var(--sizing-unit)/2);\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);\n    transition: 200ms;\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      border-radius: 50%;\n      height: var(--sizing-unit);\n      width: var(--sizing-unit);\n      background-color: #e4e4e4;\n      transition: 200ms;\n    }\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  input {\n    display: none;\n    &:checked + .slider {\n      background-color: #f9f9f9;\n      &:before {\n        background-color: #137bb5;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n        transform: translateX(var(--sizing-unit));\n      }\n    }\n  }\n  .slider {\n    position: relative;\n    height: var(--sizing-unit);\n    width: calc(var(--sizing-unit) * 2);\n    background-color: #aaa;\n    border-radius: calc(var(--sizing-unit)/2);\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);\n    transition: 200ms;\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      border-radius: 50%;\n      height: var(--sizing-unit);\n      width: var(--sizing-unit);\n      background-color: #e4e4e4;\n      transition: 200ms;\n    }\n  }\n"]);
 
-var _react = require("react");
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+import React from "react";
+import styled from "styled-components";
 
-var _styledComponents = require("styled-components");
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledToggle = _styledComponents2.default.label(_templateObject, function (_ref) {
+var StyledToggle = styled.label(_templateObject, function (_ref) {
   var inline = _ref.inline;
@@ -27,6 +14,6 @@ return inline ? "inline-block" : "block";
 var Toggle = function Toggle(props) {
-  return _react2.default.createElement(
+  return React.createElement(
     StyledToggle,
     null,
-    _react2.default.createElement(
+    React.createElement(
       Text,
@@ -36,7 +23,7 @@ { small: props.inline },
     ),
-    _react2.default.createElement("input", { type: "checkbox" }),
-    _react2.default.createElement("div", { className: "slider" })
+    React.createElement("input", { type: "checkbox" }),
+    React.createElement("div", { className: "slider" })
   );
 };
 
-exports.default = Toggle;
+export default Toggle;

lib/Tooltip/index.js

@@ -1,25 +0,12 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _templateObject = _taggedTemplateLiteral(['\n  color: red;\n'], ['\n  color: red;\n']);
 
-var _react = require('react');
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _react2 = _interopRequireDefault(_react);
+import React from 'react';
+import styled from 'styled-components';
 
-var _styledComponents = require('styled-components');
+var Tooltip = styled.svg(_templateObject);
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Tooltip = _styledComponents2.default.svg(_templateObject);
-
 Tooltip.displayName = 'Tooltip';
 
-exports.default = Tooltip;
+export default Tooltip;

lib/variables.js

@@ -1,32 +0,15 @@
-'use strict';
+export var sizing = 24;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var sizes = exports.sizes = {
-  xSmall: '360px',
-  small: '540px',
-  medium: '960px',
-  large: '1280px',
-  xLarge: '1600px'
-};
-
-var colors = exports.colors = {
-  brand: {
-    primary: 'rgba(101, 126, 212, 1)',
-    accent: 'rgba(255, 51, 31, 1)'
-  },
-  grey: {
-    dark: 'rgba(1, 12, 12, 1)',
-    darkSecondary: 'rgba(13, 1, 6, 0.6)',
-    light: 'rgba(251, 251, 255, 1)',
-    lightSecondary: 'rgba(251, 251, 255, 0.8)',
-    disabled: 'rgba(13, 1, 6, 0.4)'
-  },
-  ui: {
-    feedback: '#1FB6FF',
-    positive: '#1ABC9C',
-    negative: '#FF2D55',
-    warning: '#F5D76E'
-  }
+export var colors = {
+  primary: "#137BB5",
+  accent: "#50E3C2",
+  dark: "#34495E",
+  light: "#F7F7F9",
+  ui: "#F2F2F2",
+  lightGray: "#CED4D9",
+  darkGray: "#9EA8B2",
+  success: "#3CBC8D",
+  alert: "#D84C48",
+  warning: "#F1B40F",
+  external: "#7860C0"
 };

package.json

 {
   "name": "@rentalutions/elements",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A suite of elements for the consistent and responsive UI",
   "main": "lib/index.js",
   "scripts": {
-    "test": "jest --coverage",
-    "build": "npm run clean && babel src -d lib",
+    "test": "jest",
+    "test:update": "jest -u",
+    "test:dev": "jest --watch",
+    "build": "npm run clean && babel src -d lib --ignore **/*.test.js",
     "dev": "babel -w src -d lib",
@@ -21,36 +23,31 @@ "clean": "rm -rf lib/*",
   "license": "ISC",
-  "dependencies": {
-    "classnames": "^2.2.5",
-    "polished": "^1.2.0",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-router-dom": "^4.1.1",
-    "styled-components": "^2.1.0"
-  },
   "devDependencies": {
-    "@storybook/react": "^3.2.5",
+    "@storybook/addon-actions": "^3.2.6",
+    "@storybook/addon-links": "^3.2.6",
+    "@storybook/react": "^3.2.8",
     "babel-cli": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-latest": "^6.24.1",
+    "babel-jest": "^21.0.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
+    "enzyme": "^2.9.1",
     "jest": "^20.0.4",
-    "react-dom": "^15.6.1"
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "styled-components": "^2.1.0"
   },
-  "babel": {
-    "presets": [
-      "latest",
-      "react",
-      "stage-1"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
+  "peerDependencies": {
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "styled-components": "^2.1.0"
   },
   "jest": {
     "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/lib/"
+      "/node_modules/"
     ]
   }
 }

No alert changes

Improved metrics

Dependency count

4

decreased by-33.33%

Worsened metrics

Total package byte prevSize

398469

decreased by-29.38%

Dev dependency count

16

increased by100%

Number of package files

21

decreased by-41.67%

Lines of code

4330

decreased by-58.49%

Dependency changes

• - Removedclassnames@^2.2.5

• - Removedpolished@^1.2.0

• - Removedprop-types@^15.5.10

• - Removedreact@^15.6.1

• - Removedreact-router-dom@^4.1.1

• - Removedstyled-components@^2.1.0

• - Removedclassnames@2.5.1(transitive)

• - Removedpolished@1.9.3(transitive)