@redsift/design-system 5.0.2 → 5.1.0

package/README.md

@@ -38,7 +38,7 @@ Where customisation is required, the first option would be to use the builtin pr
 
 ### Colors
 
-We recommend each app defines it's own colors and saves these as variables for passing to your components. So that you don't require to set the colors every time you use the component across the app, we suggest using a 'common' folder. For example, for using Button:
+We recommend each app defines its own colors and saves these as variables for passing to your components. So that you don't require to set the colors every time you use the component across the app, we suggest using a 'common' folder. For example, for using Button:
 
 > import { Button } from '@redsift/design-system';
 > const StyledButton = props => {
@@ -63,7 +63,7 @@ We recommend each app defines it's own colors and saves these as variables for p
 
 ## Build and Development
 
-- `npm run build` (builds the release files for publishing)
+- `npm run build` (builds the release files for development and/or publishing)
 - `npm run styleguide:build` (builds the styleguide documentation for the github page)
 - `npm run styleguide` (runs the styleguide locally for dev purposes at `localhost:6060`)
 

package/dist/components/Alert/Alert.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
@@ -23,55 +23,9 @@ var _WarningTriangle = _interopRequireDefault(require("../../icons/WarningTriang
 
 var _Cross = _interopRequireDefault(require("../../icons/Cross"));
 
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0.5em 0.75em 0.75em 0.5em;\n  border-radius: 0 0 3.5em 0;\n  background-color: ", ";\n"]);
+var _excluded = ["children", "type", "fluid", "title", "onClose"];
 
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: #333;\n  font-weight: medium;\n  > p {\n    margin-bottom: 0;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: Raleway;\n  margin-bottom: 0.5em;\n  font-weight: 600;\n  font-size: 1.12em;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 1.5em 3em;\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  justify-content: space-between;\n  ", "\n  align-items: ", ";\n  > button {\n    align-self: ", ";\n  }\n  line-height: 1.3em;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var kindToColor = {
   success: "#e0ffe2",
@@ -84,7 +38,7 @@ var kindToCornerColor = {
   danger: "#E06354"
 };
 
-var AlertContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var AlertContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 1.5em 3em;\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  justify-content: space-between;\n  ", "\n  align-items: ", ";\n  > button {\n    align-self: ", ";\n  }\n  line-height: 1.3em;\n"])), function (props) {
   return kindToColor[props.type];
 }, function (props) {
   return props.fluid ? "width: 100%;" : "";
@@ -94,13 +48,13 @@ var AlertContainer = _styledComponents["default"].div(_templateObject(), functio
   return props.simple ? "center" : "flex-start";
 });
 
-var Title = (0, _styledComponents["default"])(_Typography["default"])(_templateObject2());
-var Content = (0, _styledComponents["default"])(_Typography["default"])(_templateObject3());
-var CloseButton = (0, _styledComponents["default"])(_Button["default"])(_templateObject4(), function (props) {
+var Title = (0, _styledComponents["default"])(_Typography["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: Raleway;\n  margin-bottom: 0.5em;\n  font-weight: 600;\n  font-size: 1.12em;\n"])));
+var Content = (0, _styledComponents["default"])(_Typography["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: #333;\n  font-weight: medium;\n  > p {\n    margin-bottom: 0;\n  }\n"])));
+var CloseButton = (0, _styledComponents["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
   return props.simple ? "margin: 0 -2em 0 2em;" : "\n    position: absolute;\n    top: .75em;\n    right: .5em;\n  ";
 });
 
-var WarningContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+var WarningContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0.5em 0.75em 0.75em 0.5em;\n  border-radius: 0 0 3.5em 0;\n  background-color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -111,7 +65,7 @@ var Alert = function Alert(_ref) {
       fluid = _ref.fluid,
       title = _ref.title,
       onClose = _ref.onClose,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, ["children", "type", "fluid", "title", "onClose"]);
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(AlertContainer, Object.assign({
     type: type,
     simple: !title,

package/dist/components/Button/Button.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,117 +17,37 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-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 = ["isLoading", "children", "color", "hoverColor", "flat", "flatIcon", "raised", "outlined", "loaderStyles", "danger", "white", "onClick", "type"];
 
-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, _templateObject6, _templateObject7, _templateObject8;
 
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n  &:disabled {\n    box-shadow: none;\n  }\n"]);
+var spin = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  to {\n    transform: rotate(360deg);\n  }\n  "])));
 
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: #fff;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &:disabled:hover {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    border-color: rgba(0, 0, 0, 0.12);\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  align-self: center;\n  padding: 0px;\n  margin: 0px 5px;\n  height: unset;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  font-size: 0.875rem;\n  background-color: transparent;\n  font-family: Raleway, sans-serif;\n  user-select: none;\n  border-radius: 4px;\n  padding: 0px 16px;\n  height: 40px;\n  vertical-align: middle;\n  font-weight: 500;\n  transition: background-color 0.2s ease;\n  text-decoration: none;\n  text-align: center;\n  outline: 0;\n  border-width: 0;\n  cursor: pointer;\n  &:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    cursor: default;\n  }\n  &:disabled:hover {\n    background-color: transparent;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: calc(50% - 10px);\n  left: calc(50% - 10px);\n  border: 3px solid rgba(255, 255, 255, 0.1);\n  border-top-color: ", ";\n  border-radius: 50%;\n  width: 1.1em;\n  height: 1.1em;\n  animation: ", " 1s linear infinite;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  to {\n    transform: rotate(360deg);\n  }\n  "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var spin = (0, _styledComponents.keyframes)(_templateObject());
-
-var Loader = _styledComponents["default"].div(_templateObject2(), function (props) {
+var Loader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: calc(50% - 10px);\n  left: calc(50% - 10px);\n  border: 3px solid rgba(255, 255, 255, 0.1);\n  border-top-color: ", ";\n  border-radius: 50%;\n  width: 1.1em;\n  height: 1.1em;\n  animation: ", " 1s linear infinite;\n"])), function (props) {
   return props.color || "#fff";
 }, spin);
 
-var BaseButton = _styledComponents["default"].button(_templateObject3());
+var BaseButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  font-size: 0.875rem;\n  background-color: transparent;\n  font-family: Raleway, sans-serif;\n  user-select: none;\n  border-radius: 4px;\n  padding: 0px 16px;\n  height: 40px;\n  vertical-align: middle;\n  font-weight: 500;\n  transition: background-color 0.2s ease;\n  text-decoration: none;\n  text-align: center;\n  outline: 0;\n  border-width: 0;\n  cursor: pointer;\n  &:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    cursor: default;\n  }\n  &:disabled:hover {\n    background-color: transparent;\n  }\n"])));
 
-var FlatButton = (0, _styledComponents["default"])(BaseButton)(_templateObject4(), function (props) {
+var FlatButton = (0, _styledComponents["default"])(BaseButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.color || "";
 }, function (props) {
   return props.hoverColor || "";
 });
-var IconButton = (0, _styledComponents["default"])(BaseButton)(_templateObject5());
-var OutlinedButton = (0, _styledComponents["default"])(BaseButton)(_templateObject6(), function (props) {
+var IconButton = (0, _styledComponents["default"])(BaseButton)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  align-self: center;\n  padding: 0px;\n  margin: 0px 5px;\n  height: unset;\n"])));
+var OutlinedButton = (0, _styledComponents["default"])(BaseButton)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    border-color: rgba(0, 0, 0, 0.12);\n  }\n"])), function (props) {
   return props.color || "";
 }, function (props) {
   return props.color || "";
 }, function (props) {
   return props.hoverColor || "";
 });
-var DefaultButton = (0, _styledComponents["default"])(BaseButton)(_templateObject7(), function (props) {
+var DefaultButton = (0, _styledComponents["default"])(BaseButton)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: #fff;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &:disabled:hover {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n"])), function (props) {
   return props.color || "";
 }, function (props) {
   return props.hoverColor || props.color || "";
 });
-var RaisedButton = (0, _styledComponents["default"])(DefaultButton)(_templateObject8());
+var RaisedButton = (0, _styledComponents["default"])(DefaultButton)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n  &:disabled {\n    box-shadow: none;\n  }\n"])));
 
 var Button = function Button(props) {
   var isLoading = props.isLoading,
@@ -144,7 +64,7 @@ var Button = function Button(props) {
       onClick = props.onClick,
       _props$type = props.type,
       type = _props$type === void 0 ? "button" : _props$type,
-      rest = (0, _objectWithoutProperties2["default"])(props, ["isLoading", "children", "color", "hoverColor", "flat", "flatIcon", "raised", "outlined", "loaderStyles", "danger", "white", "onClick", "type"]);
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var Component = flat ? FlatButton : outlined ? OutlinedButton : flatIcon ? IconButton : raised ? RaisedButton : DefaultButton;
   var buttonColor = "color" in props ? color : danger ? "#e06354" : white ? "#fff" : "";
   var buttonHoverColor = "hoverColor" in props ? hoverColor : danger ? !flat && !outlined ? "#c23324" : "rgba(224, 99, 84, 0.1)" : white ? !flat && !outlined ? "#f2f2f2" : "rgba(255, 255, 255, 0.2)" : "";

package/dist/components/Card/Card.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,29 +15,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  padding: ", ";\n  border-radius: 10px;\n  margin-bottom: 20px;\n  background-color: #fff;\n  box-sizing: border-box;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),\n    0 1px 3px 0 rgba(0, 0, 0, 0.12);\n"]);
+var _excluded = ["children", "className", "component", "noPadding"];
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _templateObject;
 
-  return data;
-}
-
-var StyledCard = _styledComponents["default"].section(_templateObject(), function (props) {
+var StyledCard = _styledComponents["default"].section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: #fff;\n  border-radius: 10px;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),\n    0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  box-sizing: border-box;\n  margin-bottom: 20px;\n  padding: ", ";\n  width: 100%;\n"])), function (props) {
   return props.noPadding ? "" : "1.875rem";
 });
 
-var Card = function Card(props) {
-  var children = props.children,
-      component = props.component,
-      noPadding = props.noPadding,
-      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "component", "noPadding"]);
-  return /*#__PURE__*/_react["default"].createElement(StyledCard, Object.assign({
+var Card = function Card(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      component = _ref.component,
+      noPadding = _ref.noPadding,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(StyledCard, Object.assign({}, otherProps, {
     noPadding: noPadding,
-    as: component
-  }, rest), children);
+    as: component,
+    className: className
+  }), children);
 };
 
 var _default = Card;

package/dist/components/Card/readme.md

@@ -14,7 +14,41 @@
 Common case
 
 ```js
-<div style={{ padding: '10px', backgroundColor: "rgba(0,0,0,.05)" }}>
+<div style={{ padding: "10px", backgroundColor: "rgba(0,0,0,.05)" }}>
   <Card>Default Card</Card>
 </div>
 ```
+
+### Subcomponents
+
+To facilitate the composition of Cards, the following components are defined:
+
+- CardHeader
+
+|   Prop    | Default |         Options |
+| :-------: | :-----: | --------------: |
+| children  |         |   Card contents |
+| className |         | Container class |
+|   title   |         |      Card title |
+
+#### NOTE
+
+This component is for the most common situation:
+
+- Title with h2
+- Optional elements in the top right of the card
+
+Using CardHeader
+
+```js
+import CardHeader from "../CardHeader/CardHeader";
+
+<div style={{ padding: "10px", backgroundColor: "rgba(0,0,0,.05)" }}>
+  <Card>
+    <CardHeader title="Card Header">
+      <div>Some icons here</div>
+    </CardHeader>
+    <div>Some content</div>
+  </Card>
+</div>;
+```

package/dist/components/CardHeader/CardHeader.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
+
+var _styles = require("../../styles/styles.constants");
+
+var _excluded = ["children", "className", "title"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var StyledContainer = _styledComponents["default"].section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n"])), _styles.SPACING[1]);
+
+var StyledTitle = (0, _styledComponents["default"])(_Typography["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n  padding: 0;\n"])));
+
+var StyledContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: flex-end;\n  display: flex;\n  gap: 10px;\n"])));
+
+var CardHeader = function CardHeader(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      title = _ref.title,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(StyledContainer, Object.assign({
+    className: className
+  }, otherProps), title && /*#__PURE__*/_react["default"].createElement(StyledTitle, {
+    as: "h2",
+    size: "h2"
+  }, title), /*#__PURE__*/_react["default"].createElement(StyledContent, null, children));
+};
+
+var _default = CardHeader;
+exports["default"] = _default;

package/dist/components/Checkbox/Checkbox.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
@@ -17,57 +17,21 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n"]);
+var _excluded = ["color", "inputProps", "labelProps", "checked", "defaultChecked", "disabled", "onChange", "label", "checkProps", "borderColor", "hideLabel", "dashed"];
 
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  /* Create the box */\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #fff;\n  content: \"\";\n  display: inline-block;\n  box-sizing: border-box;\n  border: solid 2px;\n  border-color: ", ";\n  border-radius: 2px;\n  width: 18px;\n  height: 18px;\n  vertical-align: top;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  /* Create the checkmark */\n  :after {\n    content: \"\";\n    position: absolute;\n    display: none;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: 10px;\n    border: solid white;\n    border-width: ", ";\n    -webkit-transform: ", ";\n    -ms-transform: ", ";\n    transform: ", ";\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;\n  /* Create the background for checked status */\n  :checked + span {\n    background-color: ", ";\n    border-color: ", ";\n  }\n  /* Show the checkmark when checked */\n  :checked + span:after {\n    display: block;\n  }\n  /* Create the background for disabled status */\n  :disabled + span {\n    cursor: initial;\n    border-color: #ccc;\n  }\n  :checked:disabled + span {\n    cursor: initial;\n    background-color: #ccc;\n    border-color: #ccc;\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var Wrapper = _styledComponents["default"].label(_templateObject(), function (props) {
+var Wrapper = _styledComponents["default"].label(_templateObject || (_templateObject = (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(_templateObject2(), function (props) {
+var Input = _styledComponents["default"].input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;\n  /* Create the background for checked status */\n  :checked + span {\n    background-color: ", ";\n    border-color: ", ";\n  }\n  /* Show the checkmark when checked */\n  :checked + span:after {\n    display: block;\n  }\n  /* Create the background for disabled status */\n  :disabled + span {\n    cursor: initial;\n    border-color: #ccc;\n  }\n  :checked:disabled + span {\n    cursor: initial;\n    background-color: #ccc;\n    border-color: #ccc;\n  }\n"])), function (props) {
   return props.checkedColor || "#000";
 }, function (props) {
   return props.checkedColor || "#000";
 });
 
-var CheckIndicator = _styledComponents["default"].span(_templateObject3(), function (props) {
+var CheckIndicator = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  /* Create the box */\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #fff;\n  content: \"\";\n  display: inline-block;\n  box-sizing: border-box;\n  border: solid 2px;\n  border-color: ", ";\n  border-radius: 2px;\n  width: 18px;\n  height: 18px;\n  vertical-align: top;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  /* Create the checkmark */\n  :after {\n    content: \"\";\n    position: absolute;\n    display: none;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: 10px;\n    border: solid white;\n    border-width: ", ";\n    -webkit-transform: ", ";\n    -ms-transform: ", ";\n    transform: ", ";\n  }\n"])), function (props) {
   return props.borderColor || "rgba(0, 0, 0 , .54)";
 }, function (props) {
   return props.dashed ? "6px" : "0px";
@@ -85,7 +49,7 @@ var CheckIndicator = _styledComponents["default"].span(_templateObject3(), funct
   return props.dashed ? "" : "rotate(45deg)";
 });
 
-var Text = (0, _styledComponents["default"])(_Typography["default"])(_templateObject4(), function (props) {
+var Text = (0, _styledComponents["default"])(_Typography["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n"])), function (props) {
   return props.hideLabel ? "0px" : "10px";
 });
 
@@ -102,7 +66,7 @@ var Checkbox = function Checkbox(props) {
       borderColor = props.borderColor,
       hideLabel = props.hideLabel,
       dashed = props.dashed,
-      rest = (0, _objectWithoutProperties2["default"])(props, ["color", "inputProps", "labelProps", "checked", "defaultChecked", "disabled", "onChange", "label", "checkProps", "borderColor", "hideLabel", "dashed"]);
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Wrapper, Object.assign({}, rest, {
     disabled: disabled
   }), /*#__PURE__*/_react["default"].createElement(Input, Object.assign({