@redsift/design-system 5.0.2 → 5.1.0

package/dist/components/Icon/readme.md

@@ -24,9 +24,7 @@
 | fontFamily |         |                                          String ** Text Icons Only ** |
 | direction  |  right  | 'left', 'right', 'up', or 'down', String ** Directional Icons Only ** |
 
-<p style="color: red">Note: the below separation may not be accurate, and may change over time:</p>
-
-### Used across apps / websites:
+### Examples:
 
 ```js
 <div
@@ -55,158 +53,5 @@
     <Icon type="twitter" stroke="#02ac61" width={40} />
     <Icon type="youtube" />
   </div>
-  <div
-    style={{
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-evenly",
-      marginBottom: "2rem",
-    }}
-  >
-    <Icon type="shield" />
-    <Icon type="spinner" />
-    <Icon type="oninboxicon" />
-    <Icon type="ondmarcicon" />
-    <Icon type="ondomainicon" />
-    <Icon type="oninboxmanagericon" />
-    <Icon type="oninboxmanagericon" disabled />
-    <Icon type="ingrainicon" />
-  </div>
-  <div
-    style={{
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-evenly",
-      marginBottom: "2rem",
-    }}
-  >
-    <Icon type="ondmarclogo" />
-    <Icon type="oninboxlogo" />
-  </div>
-</div>
-```
-
-### Websites
-
-[redsift.com](https://redsift.com/)
-
-```js
-<div
-  style={{
-    backgroundColor: "lightgrey",
-    padding: "1rem",
-  }}
->
-  <div
-    style={{
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-evenly",
-      marginBottom: "2rem",
-    }}
-  >
-    <Icon type="bell" />
-    <Icon type="cloud" />
-    <Icon type="eye" />
-    <Icon type="hand" />
-    <Icon type="infinityicon" />
-    <Icon type="locationpin" />
-  </div>
-  <div
-    style={{
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-evenly",
-      marginBottom: "2rem",
-    }}
-  >
-    <Icon type="microsoftshield" />
-    <Icon type="news" />
-    <Icon type="nodes" />
-    <Icon type="padlock" />
-    <Icon type="question" />
-    <Icon type="recruiting" />
-  </div>
-  <div
-    style={{
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-evenly",
-      marginBottom: "2rem",
-    }}
-  >
-    <Icon type="shieldsolid" />
-    <Icon type="team" />
-    <Icon type="verticaldots" fill="#02ac61" />
-    <Icon type="warningtriangle" />
-  </div>
-</div>
-```
-
-[ondmarc.com](https://ondmarc.com/)
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: "lightgrey",
-    padding: "1rem",
-  }}
-></div>
-```
-
-### Apps:
-
-[app.ondmarc.com](http://app.ondmarc.com/)
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: "lightgrey",
-    padding: "1rem",
-  }}
->
-  <Icon type="arrow" />
-  <Icon type="infinityloop" />
-  <Icon type="warning" />
-</div>
-```
-
-[oninbox.redsift.cloud](https://oninbox.redsift.cloud/) and [oninbox-manager.redsift.cloud](oninbox-manager.redsift.cloud/)
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: "lightgrey",
-    padding: "1rem",
-  }}
->
-  <Icon type="barcharthorizontal" />
-  <Icon type="globe" />
-  <Icon type="traffic" />
 </div>
 ```

package/dist/components/Input/Input.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -15,13 +15,15 @@ var _OutlineInput = require("./OutlineInput/OutlineInput");
 
 var _RegularInput = require("./RegularInput/RegularInput");
 
+var _excluded = ["color", "label", "errorText", "placeholder", "outlined"];
+
 var Input = function Input(_ref) {
   var color = _ref.color,
       label = _ref.label,
       errorText = _ref.errorText,
       placeholder = _ref.placeholder,
       outlined = _ref.outlined,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, ["color", "label", "errorText", "placeholder", "outlined"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return outlined ? /*#__PURE__*/_react["default"].createElement(_OutlineInput.OutlineInput, Object.assign({
     placeholder: placeholder,
     label: label,

package/dist/components/Input/OutlineInput/OutlineInput.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -15,17 +15,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: block;\n  padding-top: 6px;\n\n  & > input {\n    box-sizing: border-box;\n    margin: 0;\n    border: 2px solid #ebedf4;\n    border-top-color: transparent;\n    border-radius: 4px;\n    padding: 16px 12px;\n    width: 100%;\n    height: inherit;\n    color: #4a4a4a;\n    background-color: transparent;\n    box-shadow: none; /* Firefox */\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    caret-color: #4a4a4a;\n    transition: border 0.2s, box-shadow 0.2s;\n  }\n\n  /* Span */\n  & > input + span {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    border-color: #ebedf4;\n    width: 100%;\n    max-height: 100%;\n    color: #4a4a4a;\n    font-size: 75%;\n    line-height: 15px;\n    cursor: text;\n    transition: color 0.2s, font-size 0.2s, line-height 0.2s;\n  }\n\n  /* Corners */\n  & > input + span::before,\n  & > input + span::after {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    margin-top: 6px;\n    border-top: solid 1px #ebedf4;\n    min-width: 10px;\n    height: 8px;\n    pointer-events: none;\n    box-shadow: inset 0 1px transparent;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n\n  & > input + span::before {\n    margin-right: 4px;\n    border-left: solid 1px transparent;\n    border-radius: 4px 0;\n  }\n\n  & > input + span::after {\n    flex-grow: 1;\n    margin-left: 4px;\n    border-right: solid 1px transparent;\n    border-radius: 0 4px;\n  }\n\n  /* Hover */\n  &:hover > input {\n    border-color: ", ";\n    border-top-color: transparent;\n  }\n\n  &:hover > input + span {\n    color: ", ";\n  }\n\n  &:hover > input + span::before,\n  &:hover > input + span::after {\n    border-top-color: ", ";\n  }\n\n  &:hover > input:not(:focus):placeholder-shown {\n    border-color: ", ";\n  }\n\n  /* Placeholder-shown */\n  & > input:not(:focus):placeholder-shown {\n    border-top-color: #ebedf4;\n  }\n\n  & > input:not(:focus):placeholder-shown + span {\n    font-size: inherit;\n    line-height: 68px;\n  }\n\n  &\n    > input:not(:focus):placeholder-shown\n    + span::before\n    &\n    > input:not(:focus):placeholder-shown\n    + span::after {\n    border-top-color: transparent;\n  }\n\n  /* Focus */\n  & > input:focus {\n    border-color: ", ";\n    border-top-color: transparent;\n    box-shadow: inset 1px 0\n        ", ",\n      inset -1px 0 ", ",\n      inset 0 -1px ", ";\n    outline: none;\n  }\n\n  & > input:focus + span {\n    color: ", ";\n  }\n\n  & > input:focus + span::before,\n  & > input:focus + span::after {\n    border-top-color: ", " !important;\n    box-shadow: inset 0 1px ", ";\n  }\n\n  /* Disabled */\n  & > input:disabled,\n  & > input:disabled + span {\n    border-color: rgba(#ebedf4, 0.38) !important;\n    border-top-color: transparent !important;\n    color: rgba(74, 74, 74, 0.38);\n    pointer-events: none;\n  }\n\n  & > input:disabled + span::before,\n  & > input:disabled + span::after {\n    border-top-color: rgba(#ebedf4, 0.38) !important;\n  }\n\n  & > input:disabled:placeholder-shown,\n  & > input:disabled:placeholder-shown + span {\n    border-top-color: rgba(#ebedf4, 0.38) !important;\n  }\n\n  & > input:disabled:placeholder-shown + span::before,\n  & > input:disabled:placeholder-shown + span::after {\n    border-top-color: transparent !important;\n  }\n\n  @media not all and (min-resolution: 0.001dpcm) {\n    @supports (-webkit-appearance: none) {\n      & > input,\n      & > input + span,\n      & > input + span::before,\n      & > input + span::after {\n        transition-duration: 0.1s;\n      }\n    }\n  }\n\n  // Error\n  & > p {\n    position: absolute;\n    bottom: -30px;\n    padding-left: 16px;\n    font-size: 12px;\n    color: #e06354;\n  }\n"]);
+var _excluded = ["placeholder", "label", "errorText", "color"];
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _templateObject;
 
-  return data;
-}
-
-var OutlineLabel = _styledComponents["default"].label(_templateObject(), function (_ref) {
+var OutlineLabel = _styledComponents["default"].label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: block;\n  padding-top: 6px;\n\n  & > input {\n    box-sizing: border-box;\n    margin: 0;\n    border: 2px solid #ebedf4;\n    border-top-color: transparent;\n    border-radius: 4px;\n    padding: 16px 12px;\n    width: 100%;\n    height: inherit;\n    color: #4a4a4a;\n    background-color: transparent;\n    box-shadow: none; /* Firefox */\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    caret-color: #4a4a4a;\n    transition: border 0.2s, box-shadow 0.2s;\n  }\n\n  /* Span */\n  & > input + span {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    border-color: #ebedf4;\n    width: 100%;\n    max-height: 100%;\n    color: #4a4a4a;\n    font-size: 75%;\n    line-height: 15px;\n    cursor: text;\n    transition: color 0.2s, font-size 0.2s, line-height 0.2s;\n  }\n\n  /* Corners */\n  & > input + span::before,\n  & > input + span::after {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    margin-top: 6px;\n    border-top: solid 1px #ebedf4;\n    min-width: 10px;\n    height: 8px;\n    pointer-events: none;\n    box-shadow: inset 0 1px transparent;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n\n  & > input + span::before {\n    margin-right: 4px;\n    border-left: solid 1px transparent;\n    border-radius: 4px 0;\n  }\n\n  & > input + span::after {\n    flex-grow: 1;\n    margin-left: 4px;\n    border-right: solid 1px transparent;\n    border-radius: 0 4px;\n  }\n\n  /* Hover */\n  &:hover > input {\n    border-color: ", ";\n    border-top-color: transparent;\n  }\n\n  &:hover > input + span {\n    color: ", ";\n  }\n\n  &:hover > input + span::before,\n  &:hover > input + span::after {\n    border-top-color: ", ";\n  }\n\n  &:hover > input:not(:focus):placeholder-shown {\n    border-color: ", ";\n  }\n\n  /* Placeholder-shown */\n  & > input:not(:focus):placeholder-shown {\n    border-top-color: #ebedf4;\n  }\n\n  & > input:not(:focus):placeholder-shown + span {\n    font-size: inherit;\n    line-height: 68px;\n  }\n\n  &\n    > input:not(:focus):placeholder-shown\n    + span::before\n    &\n    > input:not(:focus):placeholder-shown\n    + span::after {\n    border-top-color: transparent;\n  }\n\n  /* Focus */\n  & > input:focus {\n    border-color: ", ";\n    border-top-color: transparent;\n    box-shadow: inset 1px 0\n        ", ",\n      inset -1px 0 ", ",\n      inset 0 -1px ", ";\n    outline: none;\n  }\n\n  & > input:focus + span {\n    color: ", ";\n  }\n\n  & > input:focus + span::before,\n  & > input:focus + span::after {\n    border-top-color: ", " !important;\n    box-shadow: inset 0 1px ", ";\n  }\n\n  /* Disabled */\n  & > input:disabled,\n  & > input:disabled + span {\n    border-color: rgba(#ebedf4, 0.38) !important;\n    border-top-color: transparent !important;\n    color: rgba(74, 74, 74, 0.38);\n    pointer-events: none;\n  }\n\n  & > input:disabled + span::before,\n  & > input:disabled + span::after {\n    border-top-color: rgba(#ebedf4, 0.38) !important;\n  }\n\n  & > input:disabled:placeholder-shown,\n  & > input:disabled:placeholder-shown + span {\n    border-top-color: rgba(#ebedf4, 0.38) !important;\n  }\n\n  & > input:disabled:placeholder-shown + span::before,\n  & > input:disabled:placeholder-shown + span::after {\n    border-top-color: transparent !important;\n  }\n\n  @media not all and (min-resolution: 0.001dpcm) {\n    @supports (-webkit-appearance: none) {\n      & > input,\n      & > input + span,\n      & > input + span::before,\n      & > input + span::after {\n        transition-duration: 0.1s;\n      }\n    }\n  }\n\n  // Error\n  & > p {\n    position: absolute;\n    bottom: -30px;\n    padding-left: 16px;\n    font-size: 12px;\n    color: #e06354;\n  }\n"])), function (_ref) {
   var color = _ref.color,
       error = _ref.error;
   return "rgba(".concat(error ? "#E06354" : color, ", 0.87)");
@@ -77,7 +71,7 @@ var OutlineInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref12, r
       errorText = _ref12.errorText,
       _ref12$color = _ref12.color,
       color = _ref12$color === void 0 ? "#333333" : _ref12$color,
-      rest = (0, _objectWithoutProperties2["default"])(_ref12, ["placeholder", "label", "errorText", "color"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref12, _excluded);
   return /*#__PURE__*/_react["default"].createElement(OutlineLabel, {
     className: rest.className,
     color: color,

package/dist/components/Input/RegularInput/RegularInput.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -17,9 +17,7 @@ var _Button = _interopRequireDefault(require("../../Button/Button"));
 
 var Styles = _interopRequireWildcard(require("./RegularInput.styles"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["color", "label", "hideUnderline", "helperText", "errorText", "placeholder", "leftIcon", "rightIcon", "showClear"];
 
 var ClearSVG = function ClearSVG(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
@@ -61,7 +59,7 @@ var RegularInput = function RegularInput(_ref2) {
       leftIcon = _ref2.leftIcon,
       rightIcon = _ref2.rightIcon,
       showClear = _ref2.showClear,
-      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["color", "label", "hideUnderline", "helperText", "errorText", "placeholder", "leftIcon", "rightIcon", "showClear"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Styles.Wrapper, {
     className: rest.className,
     htmlFor: rest.name

package/dist/components/Input/RegularInput/RegularInput.styles.js

@@ -1,93 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HelperText = exports.InputField = exports.RightIconWrapper = exports.LeftIconWrapper = exports.Span = exports.Wrapper = void 0;
+exports.Wrapper = exports.Span = exports.RightIconWrapper = exports.LeftIconWrapper = exports.InputField = exports.HelperText = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding-right: 16px;\n  padding-left: 16px;\n  font-family: Raleway, sans-serif;\n  color: ", ";\n  font-size: 0.75rem;\n  letter-spacing: 0.0333333333em;\n  margin: 0;\n  height: 1rem;\n  margin-bottom: 5px;\n"]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: transparent;\n  font-size: 1rem;\n  font-family: Raleway, sans-serif;\n  line-height: 1.75rem;\n  color: rgba(0, 0, 0, 0.87);\n  padding: ", ";\n  margin-top: 0px;\n  margin-bottom: 5px;\n  display: block;\n  border: none;\n  text-indent: ", ";\n  border-bottom: ", ";\n  ::placeholder {\n    opacity: 0;\n  }\n  :focus {\n    outline: none;\n    border-bottom: ", ";\n  }\n  :disabled ~ ", " {\n    color: rgba(0, 0, 0, 0.38);\n  }\n  :disabled,\n  :disabled ~ ", " {\n    color: rgba(0, 0, 0, 0.38);\n  }\n  :focus ~ ", ", :disabled ~ ", ", :not(:placeholder-shown) ~ ", " {\n    top: 7px;\n    font-size: 0.75rem;\n  }\n  :focus ~ ", " {\n    color: ", ";\n  }\n  :focus:placeholder-shown {\n    ::placeholder {\n      opacity: 1;\n    }\n  }\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  top: 15px;\n  left: unset;\n  right: 10px;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 15px;\n  left: 15px;\n\n  img {\n    vertical-align: middle;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: rgba(0, 0, 0, 0.87);\n  font-weight: normal;\n  font-family: Raleway, sans-serif;\n  position: absolute;\n  pointer-events: none;\n  left: ", ";\n  transition: 0.2s ease all;\n  top: 17px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  margin-bottom: 0px;\n  display: flex;\n  flex-direction: column-reverse;\n  width: 100%;\n  padding-top: 20px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var Wrapper = _styledComponents["default"].label(_templateObject());
+var Wrapper = _styledComponents["default"].label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  margin-bottom: 0px;\n  display: flex;\n  flex-direction: column-reverse;\n  width: 100%;\n  padding-top: 20px;\n"])));
 
 exports.Wrapper = Wrapper;
 
-var Span = _styledComponents["default"].span(_templateObject2(), function (props) {
+var Span = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: rgba(0, 0, 0, 0.87);\n  font-weight: normal;\n  font-family: Raleway, sans-serif;\n  position: absolute;\n  pointer-events: none;\n  left: ", ";\n  transition: 0.2s ease all;\n  top: 17px;\n"])), function (props) {
   return props.leftIcon ? "45px" : "5px";
 });
 
 exports.Span = Span;
 
-var LeftIconWrapper = _styledComponents["default"].div(_templateObject3());
+var LeftIconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 15px;\n  left: 15px;\n\n  img {\n    vertical-align: middle;\n  }\n"])));
 
 exports.LeftIconWrapper = LeftIconWrapper;
-var RightIconWrapper = (0, _styledComponents["default"])(LeftIconWrapper)(_templateObject4());
+var RightIconWrapper = (0, _styledComponents["default"])(LeftIconWrapper)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  top: 15px;\n  left: unset;\n  right: 10px;\n"])));
 exports.RightIconWrapper = RightIconWrapper;
 
-var InputField = _styledComponents["default"].input(_templateObject5(), function (props) {
+var InputField = _styledComponents["default"].input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: transparent;\n  font-size: 1rem;\n  font-family: Raleway, sans-serif;\n  line-height: 1.75rem;\n  color: rgba(0, 0, 0, 0.87);\n  padding: ", ";\n  margin-top: 0px;\n  margin-bottom: 5px;\n  display: block;\n  border: none;\n  text-indent: ", ";\n  border-bottom: ", ";\n  ::placeholder {\n    opacity: 0;\n  }\n  :focus {\n    outline: none;\n    border-bottom: ", ";\n  }\n  :disabled ~ ", " {\n    color: rgba(0, 0, 0, 0.38);\n  }\n  :disabled,\n  :disabled ~ ", " {\n    color: rgba(0, 0, 0, 0.38);\n  }\n  :focus ~ ", ", :disabled ~ ", ", :not(:placeholder-shown) ~ ", " {\n    top: 7px;\n    font-size: 0.75rem;\n  }\n  :focus ~ ", " {\n    color: ", ";\n  }\n  :focus:placeholder-shown {\n    ::placeholder {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.rightIcon ? "0px 40px 5px 10px" : "0px 10px 5px 10px";
 }, function (props) {
   return props.leftIcon ? "40px" : "0px";
@@ -101,7 +43,7 @@ var InputField = _styledComponents["default"].input(_templateObject5(), function
 
 exports.InputField = InputField;
 
-var HelperText = _styledComponents["default"].p(_templateObject6(), function (props) {
+var HelperText = _styledComponents["default"].p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-right: 16px;\n  padding-left: 16px;\n  font-family: Raleway, sans-serif;\n  color: ", ";\n  font-size: 0.75rem;\n  letter-spacing: 0.0333333333em;\n  margin: 0;\n  height: 1rem;\n  margin-bottom: 5px;\n"])), function (props) {
   return props.error ? "#e06354" : "rgba(0, 0, 0, 0.6)";
 });
 

package/dist/components/Pagination/Pagination.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -21,79 +21,9 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 
 var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _excluded = ["icon", "disabled"];
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100px;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100px;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin: auto;\n  line-height: 2;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  justify-content: ", ";\n  height: 50px;\n  align-items: center;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  vertical-align: middle;\n  opacity: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var ChevronLeftSVG = function ChevronLeftSVG(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
@@ -124,16 +54,16 @@ ChevronRightSVG.defaultProps = {
   width: "24",
   height: "24"
 };
-var pagnationIconStyles = (0, _styledComponents.css)(_templateObject(), function (props) {
+var pagnationIconStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  vertical-align: middle;\n  opacity: ", ";\n"])), function (props) {
   return props.disabled ? 0.3 : 1;
 });
-var PageLeftIcon = (0, _styledComponents["default"])(ChevronLeftSVG)(_templateObject2(), pagnationIconStyles);
-var PageRightIcon = (0, _styledComponents["default"])(ChevronRightSVG)(_templateObject3(), pagnationIconStyles);
+var PageLeftIcon = (0, _styledComponents["default"])(ChevronLeftSVG)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), pagnationIconStyles);
+var PageRightIcon = (0, _styledComponents["default"])(ChevronRightSVG)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), pagnationIconStyles);
 
 var ActionIcon = function ActionIcon(_ref) {
   var Icon = _ref.icon,
       disabled = _ref.disabled,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, ["icon", "disabled"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], Object.assign({
     disabled: disabled,
     flatIcon: true
@@ -142,15 +72,15 @@ var ActionIcon = function ActionIcon(_ref) {
   }));
 };
 
-var Container = _styledComponents["default"].div(_templateObject4(), function (props) {
+var Container = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  justify-content: ", ";\n  height: 50px;\n  align-items: center;\n"])), function (props) {
   return props.hideNavigation ? "flex-end" : "center";
 });
 
-var Navigation = _styledComponents["default"].div(_templateObject5());
+var Navigation = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin: auto;\n  line-height: 2;\n"])));
 
-var RowSelectContainer = _styledComponents["default"].div(_templateObject6());
+var RowSelectContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100px;\n"])));
 
-var EmptyDiv = _styledComponents["default"].div(_templateObject7());
+var EmptyDiv = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100px;\n"])));
 
 var Pagination = function Pagination(_ref2) {
   var totalEntries = _ref2.totalEntries,

package/dist/components/Radio/Radio.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,77 +19,27 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _excluded = ["color", "inputProps", "labelProps", "checked", "disabled", "onChange", "label", "checkProps", "borderColor", "name", "defaultChecked"];
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 30px;\n  margin-bottom: 1px;\n"]);
+var ripple = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);\n  }\n  50% { \n    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);\n  }\n  100% {\n    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);\n  }\n"])));
 
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-block;\n  height: 20px;\n  padding: 0 (20px + 10px);\n  margin-bottom: 0;\n  cursor: pointer;\n  vertical-align: bottom;\n  :before,\n  :after {\n    box-sizing: border-box;\n    position: absolute;\n    content: \"\";\n    border-radius: 50%;\n    transition: all 0.3s ease;\n    transition-property: transform, border-color;\n  }\n  /* The box */\n  :before {\n    width: 22px;\n    height: 22px;\n    border: 2px solid ", ";\n  }\n  /* The check indicator */\n  :after {\n    content: \"\";\n    top: 6px;\n    left: 6px;\n    width: 10px;\n    height: 10px;\n    transform: scale(0);\n    background: ", ";\n  }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  :checked + span:before {\n    border-color: ", ";\n    animation: ", " 0.2s linear forwards;\n  }\n  :checked + span:after {\n    transform: scale(1);\n  }\n  /* Create the background for disabled status */\n  :disabled + span:before {\n    cursor: initial;\n    border-color: #ccc;\n  }\n  :checked:disabled + span:after {\n    cursor: initial;\n    background-color: #ccc;\n    border-color: #ccc;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);\n  }\n  50% { \n    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);\n  }\n  100% {\n    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var ripple = (0, _styledComponents.keyframes)(_templateObject());
-
-var Wrapper = _styledComponents["default"].label(_templateObject2(), function (props) {
+var Wrapper = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n"])), function (props) {
   return props.disabled ? "default" : "pointer";
 });
 
-var Input = _styledComponents["default"].input(_templateObject3(), function (props) {
+var Input = _styledComponents["default"].input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  :checked + span:before {\n    border-color: ", ";\n    animation: ", " 0.2s linear forwards;\n  }\n  :checked + span:after {\n    transform: scale(1);\n  }\n  /* Create the background for disabled status */\n  :disabled + span:before {\n    cursor: initial;\n    border-color: #ccc;\n  }\n  :checked:disabled + span:after {\n    cursor: initial;\n    background-color: #ccc;\n    border-color: #ccc;\n  }\n"])), function (props) {
   return props.checkedColor || "#000";
 }, ripple);
 
-var CheckIndicator = _styledComponents["default"].span(_templateObject4(), function (props) {
+var CheckIndicator = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-block;\n  height: 20px;\n  padding: 0 (20px + 10px);\n  margin-bottom: 0;\n  cursor: pointer;\n  vertical-align: bottom;\n  :before,\n  :after {\n    box-sizing: border-box;\n    position: absolute;\n    content: \"\";\n    border-radius: 50%;\n    transition: all 0.3s ease;\n    transition-property: transform, border-color;\n  }\n  /* The box */\n  :before {\n    width: 22px;\n    height: 22px;\n    border: 2px solid ", ";\n  }\n  /* The check indicator */\n  :after {\n    content: \"\";\n    top: 6px;\n    left: 6px;\n    width: 10px;\n    height: 10px;\n    transform: scale(0);\n    background: ", ";\n  }\n"])), function (props) {
   return props.borderColor || "rgba(0, 0, 0, 0.54)";
 }, function (props) {
   return props.checkedColor || "#000";
 });
 
-var Text = (0, _styledComponents["default"])(_Typography["default"])(_templateObject5());
+var Text = (0, _styledComponents["default"])(_Typography["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 30px;\n  margin-bottom: 1px;\n"])));
 
 var Radio = function Radio(_ref) {
   var color = _ref.color,
@@ -103,7 +53,7 @@ var Radio = function Radio(_ref) {
       borderColor = _ref.borderColor,
       name = _ref.name,
       defaultChecked = _ref.defaultChecked,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, ["color", "inputProps", "labelProps", "checked", "disabled", "onChange", "label", "checkProps", "borderColor", "name", "defaultChecked"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Wrapper, Object.assign({}, rest, {
     disabled: disabled
   }), /*#__PURE__*/_react["default"].createElement(Input, Object.assign({