bright-components 9.31.0 → 10.0.0

package/dist/components/Button/BaseButton/index.js

@@ -19,52 +19,33 @@ var _vars = _interopRequireDefault(require("../../../constants/vars"));
 
 var _Tick = _interopRequireDefault(require("../../Icons/Tick"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-family: galano-bold, galano, sans-serif;\n\tcursor: pointer;\n\tborder-radius: ", ";\n\tpadding: ", " ", ";\n\ttransition: all 0.3s;\n\tline-height: 1;\n\tdisplay: inline-block;\n\ttext-decoration: none;\n\tvertical-align: middle;\n\ttext-align: center;\n\n\t&:focus {\n\t\toutline: 0;\n\t}\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t}\n\n\t&:disabled {\n\t\topacity: 0.6;\n\t\tcursor: not-allowed;\n\t\tbackground-color: ", " !important;\n\t\tborder-color: ", " !important;\n\t\tcolor: ", " !important;\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin-right: ", ";\n"]);
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Wrapper = _styledComponents.default.span(_templateObject(), function (props) {
-  return props.showMargin ? '1rem' : '0';
-});
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+const Wrapper = _styledComponents.default.span`
+	margin-right: ${props => props.showMargin ? '1rem' : '0'};
+`;
 Wrapper.displayName = 'Wrapper';
-var Button = (0, _react.forwardRef)(function (_ref, ref) {
-  var loading = _ref.loading,
-      children = _ref.children,
-      secondary = _ref.secondary,
-      gaAction = _ref.gaAction,
-      tick = _ref.tick,
-      Component = _ref.as,
-      x = _ref.outline,
-      props = _objectWithoutPropertiesLoose(_ref, ["loading", "children", "secondary", "gaAction", "tick", "as", "outline"]);
+const Button = (0, _react.forwardRef)((_ref, ref) => {
+  let {
+    loading,
+    children,
+    secondary,
+    gaAction,
+    tick,
+    as: Component,
+    outline: x
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["loading", "children", "secondary", "gaAction", "tick", "as", "outline"]);
 
   return _react.default.createElement(Component, _extends({
     "data-track-action": gaAction
@@ -80,7 +61,34 @@ var Button = (0, _react.forwardRef)(function (_ref, ref) {
   })), children);
 });
 Button.displayName = 'Button';
-var BaseButton = (0, _styledComponents.default)(Button)(_templateObject2(), _vars.default.borderRadius, _spacing.default.s1, _spacing.default.s2, _colors.default.grey, _colors.default.grey, _colors.default.white);
+const BaseButton = (0, _styledComponents.default)(Button)`
+	font-family: galano-bold, galano, sans-serif;
+	cursor: pointer;
+	border-radius: ${_vars.default.borderRadius};
+	padding: ${_spacing.default.s1} ${_spacing.default.s2};
+	transition: all 0.3s;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	vertical-align: middle;
+	text-align: center;
+
+	&:focus {
+		outline: 0;
+	}
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	&:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		background-color: ${_colors.default.grey} !important;
+		border-color: ${_colors.default.grey} !important;
+		color: ${_colors.default.white} !important;
+	}
+`;
 BaseButton.displayName = 'BaseButton';
 Button.propTypes = {
   loading: _propTypes.bool,

package/dist/components/Button/BrandButton/index.js

@@ -13,19 +13,26 @@ var _BaseButton = _interopRequireDefault(require("../BaseButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tbackground-color: ", ";\n\tborder: ", " solid ", ";\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&:focus {\n\t\tcolor: ", ";\n\t\ttext-decoration: underline;\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var BrandButton = (0, _styledComponents.default)(_BaseButton.default)(_templateObject(), _colors.default.white, _colors.default.secondary, _vars.default.borderWidth, _colors.default.secondary, _colors.default.white, _colors.default.secondaryDark, _colors.default.secondaryDark, _colors.default.white, _colors.default.secondaryDark, _colors.default.secondaryDark, _vars.default.boxShadow);
+const BrandButton = (0, _styledComponents.default)(_BaseButton.default)`
+	color: ${_colors.default.white};
+	background-color: ${_colors.default.secondary};
+	border: ${_vars.default.borderWidth} solid ${_colors.default.secondary};
+	text-decoration: none;
+
+	&:hover {
+		color: ${_colors.default.white};
+		background: ${_colors.default.secondaryDark};
+		border-color: ${_colors.default.secondaryDark};
+	}
+
+	&:focus {
+		color: ${_colors.default.white};
+		text-decoration: underline;
+		background: ${_colors.default.secondaryDark};
+		border-color: ${_colors.default.secondaryDark};
+		box-shadow: ${_vars.default.boxShadow};
+	}
+`;
 BrandButton.displayName = 'BrandButton';
 /** @component */
 

package/dist/components/Button/Button/index.js

@@ -15,71 +15,66 @@ var _BaseButton = _interopRequireDefault(require("../BaseButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", "\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tborder: ", " solid ", ";\n\tbackground-color: transparent;\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\t\tbackground-color: transparent;\n\t}\n\n\t&:disabled {\n\t\tbackground-color: transparent !important;\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tbackground-color: ", ";\n\tborder: ", " solid ", ";\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&:focus {\n\t\tcolor: ", ";\n\t\ttext-decoration: underline;\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var solid = (0, _styledComponents.css)(_templateObject(), _colors.default.white, function (props) {
-  return _colors.default[props.color];
-}, _vars.default.borderWidth, function (props) {
-  return _colors.default[props.color];
-}, _colors.default.white, function (props) {
-  return _colors.default[props.color + "Dark"];
-}, function (props) {
-  return _colors.default[props.color + "Dark"];
-}, _colors.default.white, function (props) {
-  return _colors.default[props.color + "Dark"];
-}, function (props) {
-  return _colors.default[props.color + "Dark"];
-}, _vars.default.boxShadow);
-var outlineWhite = (0, _styledComponents.css)(_templateObject2(), _colors.default.white, _vars.default.borderWidth, _colors.default.white, _colors.default.outlineHover, _colors.default.outlineHover, _colors.default.grey);
-var outline = (0, _styledComponents.css)(_templateObject3(), function (props) {
-  return "\n\t\tcolor: " + _colors.default[props.color] + ";\n\t\tborder: " + _vars.default.borderWidth + " solid " + _colors.default[props.color] + ";\n\t\tbackground-color: " + _colors.default.white + ";\n\n\t\t&:hover {\n\t\t\tbackground: " + _colors.default[props.color + "Dark"] + ";\n\t\t\tborder-color: " + _colors.default[props.color + "Dark"] + ";\n\t\t\tcolor: " + _colors.default.white + ";\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: transparent !important;\n\t\t\tcolor: " + _colors.default.grey + " !important;\n\t\t}\n\t";
-});
-
-var getCSS = function getCSS(props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const solid = (0, _styledComponents.css)`
+	color: ${_colors.default.white};
+	background-color: ${props => _colors.default[props.color]};
+	border: ${_vars.default.borderWidth} solid ${props => _colors.default[props.color]};
+	text-decoration: none;
+
+	&:hover {
+		color: ${_colors.default.white};
+		background: ${props => _colors.default[`${props.color}Dark`]};
+		border-color: ${props => _colors.default[`${props.color}Dark`]};
+	}
+
+	&:focus {
+		color: ${_colors.default.white};
+		text-decoration: underline;
+		background: ${props => _colors.default[`${props.color}Dark`]};
+		border-color: ${props => _colors.default[`${props.color}Dark`]};
+		box-shadow: ${_vars.default.boxShadow};
+	}
+`;
+const outlineWhite = (0, _styledComponents.css)`
+	color: ${_colors.default.white};
+	border: ${_vars.default.borderWidth} solid ${_colors.default.white};
+	background-color: transparent;
+
+	&:hover {
+		color: ${_colors.default.outlineHover};
+		border-color: ${_colors.default.outlineHover};
+		background-color: transparent;
+	}
+
+	&:disabled {
+		background-color: transparent !important;
+		color: ${_colors.default.grey};
+	}
+`;
+const outline = (0, _styledComponents.css)`
+	${props => `
+		color: ${_colors.default[props.color]};
+		border: ${_vars.default.borderWidth} solid ${_colors.default[props.color]};
+		background-color: ${_colors.default.white};
+
+		&:hover {
+			background: ${_colors.default[`${props.color}Dark`]};
+			border-color: ${_colors.default[`${props.color}Dark`]};
+			color: ${_colors.default.white};
+		}
+
+		&:disabled {
+			background-color: transparent !important;
+			color: ${_colors.default.grey} !important;
+		}
+	`}
+`;
+
+const getCSS = props => {
   if (props.outline === true && props.color === 'white') {
     return outlineWhite;
   }
@@ -91,7 +86,9 @@ var getCSS = function getCSS(props) {
   return solid;
 };
 
-var Button = (0, _styledComponents.default)(_BaseButton.default)(_templateObject4(), getCSS);
+const Button = (0, _styledComponents.default)(_BaseButton.default)`
+	${getCSS};
+`;
 Button.displayName = 'Button';
 Button.defaultProps = {
   color: 'secondary',

package/dist/components/Button/OutlineButton/index.js

@@ -15,49 +15,47 @@ var _BaseButton = _interopRequireDefault(require("../BaseButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", "\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", "\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: white;\n\tborder: ", " solid white;\n\tbackground-color: transparent;\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\t\tbackground-color: transparent;\n\t}\n\n\t&:disabled {\n\t\tbackground-color: transparent !important;\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var white = (0, _styledComponents.css)(_templateObject(), _vars.default.borderWidth, _colors.default.outlineHover, _colors.default.outlineHover, _colors.default.grey);
-var color = (0, _styledComponents.css)(_templateObject2(), function (props) {
-  return "\n\t\tcolor: " + _colors.default[props.color] + ";\n\t\tborder: " + _vars.default.borderWidth + " solid " + _colors.default[props.color] + ";\n\t\tbackground-color: " + _colors.default.white + ";\n\n\t\t&:hover {\n\t\t\tbackground: " + _colors.default[props.color + "Dark"] + ";\n\t\t\tborder-color: " + _colors.default[props.color + "Dark"] + ";\n\t\t\tcolor: " + _colors.default.white + ";\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: transparent !important;\n\t\t\tcolor: " + _colors.default.grey + " !important;\n\t\t}\n\t";
-});
-var OutlineButton = (0, _styledComponents.default)(_BaseButton.default)(_templateObject3(), function (props) {
-  return props.color === 'white' ? white : color;
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const white = (0, _styledComponents.css)`
+	color: white;
+	border: ${_vars.default.borderWidth} solid white;
+	background-color: transparent;
+
+	&:hover {
+		color: ${_colors.default.outlineHover};
+		border-color: ${_colors.default.outlineHover};
+		background-color: transparent;
+	}
+
+	&:disabled {
+		background-color: transparent !important;
+		color: ${_colors.default.grey};
+	}
+`;
+const color = (0, _styledComponents.css)`
+	${props => `
+		color: ${_colors.default[props.color]};
+		border: ${_vars.default.borderWidth} solid ${_colors.default[props.color]};
+		background-color: ${_colors.default.white};
+
+		&:hover {
+			background: ${_colors.default[`${props.color}Dark`]};
+			border-color: ${_colors.default[`${props.color}Dark`]};
+			color: ${_colors.default.white};
+		}
+
+		&:disabled {
+			background-color: transparent !important;
+			color: ${_colors.default.grey} !important;
+		}
+	`}
+`;
+const OutlineButton = (0, _styledComponents.default)(_BaseButton.default)`
+	${props => props.color === 'white' ? white : color}
+`;
 OutlineButton.displayName = 'OutlineButton';
 OutlineButton.propTypes = {
   color: (0, _propTypes.oneOf)(['primary', 'secondary', 'white'])

package/dist/components/Button/WhiteOutlineButton/index.js

@@ -13,19 +13,22 @@ var _BaseButton = _interopRequireDefault(require("../BaseButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: white;\n\tborder: ", " solid white;\n\tbackground-color: transparent;\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\t\tbackground-color: transparent;\n\t}\n\n\t&:disabled {\n\t\tbackground-color: transparent !important;\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var WhiteOutlineButton = (0, _styledComponents.default)(_BaseButton.default)(_templateObject(), _vars.default.borderWidth, _colors.default.outlineHover, _colors.default.outlineHover, _colors.default.grey);
+const WhiteOutlineButton = (0, _styledComponents.default)(_BaseButton.default)`
+	color: white;
+	border: ${_vars.default.borderWidth} solid white;
+	background-color: transparent;
+
+	&:hover {
+		color: ${_colors.default.outlineHover};
+		border-color: ${_colors.default.outlineHover};
+		background-color: transparent;
+	}
+
+	&:disabled {
+		background-color: transparent !important;
+		color: ${_colors.default.grey};
+	}
+`;
 WhiteOutlineButton.displayName = 'WhiteOutlineButton';
 /** @component */
 

package/dist/components/ButtonGroup/index.js

@@ -15,22 +15,39 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: ", ";\n\tmargin-top: ", ";\n\n\t@media (min-width: ", ") {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t}\n\n\t", ",\n\tbutton {\n\t\twidth: 100%;\n\t\tmargin-bottom: ", ";\n\n\t\t@media (min-width: ", ") {\n\t\t\twidth: auto;\n\t\t\tmargin-right: ", ";\n\t\t\tmargin-bottom: ", ";\n\n\t\t\t&:hover {\n\t\t\t\tmargin-right: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", ":last-child,\n\tbutton:last-child {\n\t\t@media (min-width: ", ") {\n\t\t\tmargin-right: 0;\n\t\t}\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var ButtonGroup = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.reverseColumnOrder ? 'column-reverse' : 'column';
-}, _spacing.default.s2, _breakpoints.default.tablet, _Button.default, _spacing.default.s2, _breakpoints.default.tablet, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _Button.default, _breakpoints.default.tablet);
-
+const ButtonGroup = _styledComponents.default.div`
+	display: flex;
+	flex-direction: ${props => props.reverseColumnOrder ? 'column-reverse' : 'column'};
+	margin-top: ${_spacing.default.s2};
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	${_Button.default},
+	button {
+		width: 100%;
+		margin-bottom: ${_spacing.default.s2};
+
+		@media (min-width: ${_breakpoints.default.tablet}) {
+			width: auto;
+			margin-right: ${_spacing.default.s1};
+			margin-bottom: ${_spacing.default.s1};
+
+			&:hover {
+				margin-right: ${_spacing.default.s1};
+			}
+		}
+	}
+
+	${_Button.default}:last-child,
+	button:last-child {
+		@media (min-width: ${_breakpoints.default.tablet}) {
+			margin-right: 0;
+		}
+	}
+`;
 ButtonGroup.propTypes = {
   reverseColumnOrder: _propTypes.bool
 };