bright-components 9.31.0 → 10.0.0

package/dist/components/PageLoader/index.js

@@ -15,110 +15,94 @@ var _spacing = _interopRequireDefault(require("../../constants/spacing"));
 
 var _vars = _interopRequireDefault(require("../../constants/vars"));
 
-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 _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n\t\tstroke-dasharray: ", ";\n\t"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
+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; }
 
 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 _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\tstroke: ", ";\n\tstroke-dashoffset: 0;\n\tanimation: ", " 1.5s ease-in-out infinite, color 6s ease-in-out infinite;\n\tstroke-linecap: round;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\tanimation: ", " 2s linear infinite;\n\theight: 100%;\n\ttransform-origin: center center;\n\twidth: 100%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: ", ";\n\twidth: 100px;\n\theight: 100px;\n\tbackground: ", ";\n\tborder-radius: 50%;\n\tbox-shadow: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n{\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    stroke: ", ";\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n    stroke: ", ";\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n    stroke: ", ";\n  }\n}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n  100% {\n    transform: rotate(360deg);\n  }\n}"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\theight: 100vh;\n\twidth: 100%;\n\tz-index: 9998;\n\tbackground: rgba(0, 0, 0, 0.3);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Background = _styledComponents.default.div(_templateObject());
-
+const Background = _styledComponents.default.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	height: 100vh;
+	width: 100%;
+	z-index: 9998;
+	background: rgba(0, 0, 0, 0.3);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
 Background.displayName = 'Background';
-var Rotate = (0, _styledComponents.keyframes)(_templateObject2());
-var Dash = (0, _styledComponents.keyframes)(_templateObject3(), _colors.default.primary, _colors.default.secondary, _colors.default.primary);
-
-var Loader = _styledComponents.default.div(_templateObject4(), _spacing.default.s1, _colors.default.white, _vars.default.boxShadow);
-
+const Rotate = (0, _styledComponents.keyframes)`
+  100% {
+    transform: rotate(360deg);
+  }
+}`;
+const Dash = (0, _styledComponents.keyframes)`
+{
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke: ${_colors.default.primary};
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+    stroke: ${_colors.default.secondary};
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+    stroke: ${_colors.default.primary};
+  }
+}
+`;
+const Loader = _styledComponents.default.div`
+	padding: ${_spacing.default.s1};
+	width: 100px;
+	height: 100px;
+	background: ${_colors.default.white};
+	border-radius: 50%;
+	box-shadow: ${_vars.default.boxShadow};
+`;
 Loader.displayName = 'Loader';
-
-var Circular = _styledComponents.default.svg(_templateObject5(), Rotate);
-
+const Circular = _styledComponents.default.svg`
+	animation: ${Rotate} 2s linear infinite;
+	height: 100%;
+	transform-origin: center center;
+	width: 100%;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+`;
 Circular.displayName = 'Circular';
-
-var Circle = _styledComponents.default.circle(_templateObject6(), _colors.default.primary, Dash);
-
+const Circle = _styledComponents.default.circle`
+	stroke: ${_colors.default.primary};
+	stroke-dashoffset: 0;
+	animation: ${Dash} 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+	stroke-linecap: round;
+`;
 Circle.displayName = 'Circle';
 
-var PageLoader = function PageLoader(_ref) {
-  var isLoading = _ref.isLoading,
-      rest = _objectWithoutPropertiesLoose(_ref, ["isLoading"]);
+const PageLoader = _ref => {
+  let {
+    isLoading
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["isLoading"]);
 
-  var isIE11 = window.navigator.userAgent.indexOf('Trident/7') > -1;
-  var PolyfilledCircle = (0, _styledComponents.default)(Circle)(_templateObject7(), isIE11 ? '100' : '1, 200');
+  const isIE11 = window.navigator.userAgent.indexOf('Trident/7') > -1;
+  const PolyfilledCircle = (0, _styledComponents.default)(Circle)`
+		stroke-dasharray: ${isIE11 ? '100' : '1, 200'};
+	`;
   PolyfilledCircle.displayName = 'PolyfilledCircle';
 
   if (!isLoading) {

package/dist/components/Pill/index.js

@@ -17,47 +17,34 @@ var _vars = _interopRequireDefault(require("../../constants/vars"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-weight: normal;\n\tfont-family: ", ";\n\tdisplay: flex;\n\tcolor: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 6px ", ";\n\tdisplay: inline-flex;\n\tbackground-color: ", ";\n\tborder-radius: 14px;\n\tpadding: 2px 12px;\n\tfont-size: 14px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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; }
 
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+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; }
 
 // specific spacing values in here but it's such a tiny component that accurate layout needed
-var PillWrapper = _styledComponents.default.div(_templateObject(), _spacing.default.s1, function (props) {
-  return props.backgroundColor;
-});
-
+const PillWrapper = _styledComponents.default.div`
+	margin: 6px ${_spacing.default.s1};
+	display: inline-flex;
+	background-color: ${props => props.backgroundColor};
+	border-radius: 14px;
+	padding: 2px 12px;
+	font-size: 14px;
+`;
 PillWrapper.displayName = 'Pill';
-
-var Label = _styledComponents.default.span(_templateObject2(), _vars.default.fontStackNormal, function (props) {
-  return props.color;
-});
-
+const Label = _styledComponents.default.span`
+	font-weight: normal;
+	font-family: ${_vars.default.fontStackNormal};
+	display: flex;
+	color: ${props => props.color};
+`;
 Label.displayName = 'Label';
 
-var Pill = function Pill(_ref) {
-  var children = _ref.children,
-      color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "color"]);
+const Pill = _ref => {
+  let {
+    children,
+    color
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["children", "color"]);
 
   return _react.default.createElement(PillWrapper, rest, _react.default.createElement(Label, {
     color: color

package/dist/components/ProgressBar/index.js

@@ -17,70 +17,51 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\ttransition: width 0.2s linear;\n\theight: 100%;\n\tbackground: ", ";\n\twidth: ", "%;\n\tborder-radius: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\twidth: 100%;\n\theight: ", "px;\n\tbackground: ", ";\n\tborder-radius: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\ttext-align: center;\n\tline-height: ", "px;\n\tcolor: #fff;\n\tfont-size: 14px;\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 Percent = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.height;
-});
+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 Percent = _styledComponents.default.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	text-align: center;
+	line-height: ${props => props.height}px;
+	color: #fff;
+	font-size: 14px;
+`;
 Percent.displayName = 'Percent';
-
-var Bar = _styledComponents.default.div(_templateObject2(), function (props) {
-  return props.height;
-}, function (props) {
-  return props.color;
-}, _vars.default.borderRadius);
-
+const Bar = _styledComponents.default.div`
+	position: relative;
+	width: 100%;
+	height: ${props => props.height}px;
+	background: ${props => props.color};
+	border-radius: ${_vars.default.borderRadius};
+`;
 Bar.displayName = 'Bar';
-
-var BarInner = _styledComponents.default.div(_templateObject3(), function (props) {
-  return props.color;
-}, function (props) {
-  return props.progress;
-}, _vars.default.borderRadius);
-
+const BarInner = _styledComponents.default.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	transition: width 0.2s linear;
+	height: 100%;
+	background: ${props => props.color};
+	width: ${props => props.progress}%;
+	border-radius: ${_vars.default.borderRadius};
+`;
 BarInner.displayName = 'BarInner';
 
-var ProgressBar = function ProgressBar(_ref) {
-  var percentage = _ref.percentage,
-      barColor = _ref.barColor,
-      backgroundColor = _ref.backgroundColor,
-      showPercentage = _ref.showPercentage,
-      className = _ref.className,
-      height = _ref.height,
-      rest = _objectWithoutPropertiesLoose(_ref, ["percentage", "barColor", "backgroundColor", "showPercentage", "className", "height"]);
+const ProgressBar = _ref => {
+  let {
+    percentage,
+    barColor,
+    backgroundColor,
+    showPercentage,
+    className,
+    height
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["percentage", "barColor", "backgroundColor", "showPercentage", "className", "height"]);
 
   return _react.default.createElement(Bar, _extends({
     className: className,

package/dist/components/ProgressSteps/index.js

@@ -17,66 +17,117 @@ var _breakpoints = _interopRequireDefault(require("../../constants/breakpoints")
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tflex: 1 1 auto;\n\tbackground: #fff;\n\tcolor: #999;\n\t", ";\n\n\tspan {\n\t\ttext-align: center;\n\t\tmargin-left: ", ";\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding-left: ", ";\n\t\tpadding-right: ", ";\n\t\tmin-height: ", ";\n\t}\n\n\t&:first-child span {\n\t\tmargin-left: 0;\n\t}\n\n\t&:before,\n\t&:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tborder-top: 5rem solid transparent;\n\t\tborder-bottom: 5rem solid transparent;\n\t\tborder-left: ", " solid ", ";\n\t\tmargin-top: -5rem;\n\t\tleft: 100%;\n\t}\n\n\t&:before {\n\t\tmargin-left: 1px;\n\t\tz-index: 1;\n\t}\n\n\t&:after {\n\t\tborder-left-color: white;\n\t\tz-index: 2;\n\t}\n\n\t", ";\n\n\t", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: none;\n\ttext-align: center;\n\tborder-radius: 4px;\n\tbackground: #fff;\n\tlist-style: none;\n\toverflow: hidden;\n\tpadding: 0;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\tborder: 2px solid ", ";\n\tflex-direction: row;\n\n\t@media (max-width: ", ") {\n\t\tfont-size: 12px;\n\t}\n\n\t@media (min-width: ", ") {\n\t\tdisplay: flex;\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+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; }
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var ARROW_SIZE = '1.5rem';
-
-var Steps = _styledComponents.default.ul(_templateObject(), _colors.default.primary, _breakpoints.default.tablet, function (props) {
-  return props.visibleFrom;
-});
+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 ARROW_SIZE = '1.5rem';
+const Steps = _styledComponents.default.ul`
+	display: none;
+	text-align: center;
+	border-radius: 4px;
+	background: #fff;
+	list-style: none;
+	overflow: hidden;
+	padding: 0;
+	justify-content: space-between;
+	overflow: hidden;
+	border: 2px solid ${_colors.default.primary};
+	flex-direction: row;
+
+	@media (max-width: ${_breakpoints.default.tablet}) {
+		font-size: 12px;
+	}
+
+	@media (min-width: ${props => props.visibleFrom}) {
+		display: flex;
+	}
+`;
 Steps.displayName = 'Steps';
-
-var Step = _styledComponents.default.li(_templateObject2(), function (props) {
-  return props.onClick && 'cursor: pointer';
-}, ARROW_SIZE, _spacing.default.s1, _spacing.default.s1, _spacing.default.s5, ARROW_SIZE, _colors.default.primary, function (props) {
-  return props.isComplete && "\n\t\tcolor: inherit;\n\t\tbackground-color: " + _colors.default.primaryLight + ";\n\n\t\t&:after {\n\t\t\tborder-left-color: " + _colors.default.primaryLight + ";\n\t\t}";
-}, function (props) {
-  return props.isCurrent && "color: #fff;\n\t\tbackground-color: " + _colors.default.primary + ";\n\n\t\t&:after {\n\t\t\tborder-left-color: " + _colors.default.primary + ";\n\t\t}";
-});
-
+const Step = _styledComponents.default.li`
+	position: relative;
+	flex: 1 1 auto;
+	background: #fff;
+	color: #999;
+	${props => props.onClick && 'cursor: pointer'};
+
+	span {
+		text-align: center;
+		margin-left: ${ARROW_SIZE};
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-left: ${_spacing.default.s1};
+		padding-right: ${_spacing.default.s1};
+		min-height: ${_spacing.default.s5};
+	}
+
+	&:first-child span {
+		margin-left: 0;
+	}
+
+	&:before,
+	&:after {
+		content: ' ';
+		display: block;
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 50%;
+		border-top: 5rem solid transparent;
+		border-bottom: 5rem solid transparent;
+		border-left: ${ARROW_SIZE} solid ${_colors.default.primary};
+		margin-top: -5rem;
+		left: 100%;
+	}
+
+	&:before {
+		margin-left: 1px;
+		z-index: 1;
+	}
+
+	&:after {
+		border-left-color: white;
+		z-index: 2;
+	}
+
+	${props => props.isComplete && `
+		color: inherit;
+		background-color: ${_colors.default.primaryLight};
+
+		&:after {
+			border-left-color: ${_colors.default.primaryLight};
+		}`};
+
+	${props => props.isCurrent && `color: #fff;
+		background-color: ${_colors.default.primary};
+
+		&:after {
+			border-left-color: ${_colors.default.primary};
+		}`};
+`;
 Step.displayName = 'Step';
 
-var ProgressSteps = function ProgressSteps(_ref) {
-  var steps = _ref.steps,
-      currentIndex = _ref.currentIndex,
-      onStepClick = _ref.onStepClick,
-      props = _objectWithoutPropertiesLoose(_ref, ["steps", "currentIndex", "onStepClick"]);
-
-  return _react.default.createElement(Steps, props, steps.map(function (_ref2, i) {
-    var id = _ref2.id;
-    var isCurrent = i === currentIndex;
+const ProgressSteps = _ref => {
+  let {
+    steps,
+    currentIndex,
+    onStepClick
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["steps", "currentIndex", "onStepClick"]);
+
+  return _react.default.createElement(Steps, props, steps.map((_ref2, i) => {
+    let {
+      id
+    } = _ref2;
+    const isCurrent = i === currentIndex;
     return _react.default.createElement(Step, {
       "data-testid": id,
       key: id,
       isComplete: i <= currentIndex,
       isCurrent: isCurrent,
       "aria-current": isCurrent ? 'step' : undefined,
-      onClick: onStepClick ? function () {
-        return onStepClick(i);
-      } : undefined
+      onClick: onStepClick ? () => onStepClick(i) : undefined
     }, _react.default.createElement("span", null, id));
   }));
 };

package/dist/components/ProvincePicker/index.js

@@ -19,10 +19,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _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; }
+
 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; }
 
-var renderOption = function renderOption(province) {
-  var name = province.name;
+const renderOption = province => {
+  const {
+    name
+  } = province;
   return _react.default.createElement("option", {
     key: name,
     value: name
@@ -31,39 +35,33 @@ var renderOption = function renderOption(province) {
 
 renderOption.displayName = 'renderOption';
 
-var findProvinces = function findProvinces(country) {
-  var countryInfo = _Countries.default.find(function (c) {
-    return c.name === country;
-  });
+const findProvinces = country => {
+  const countryInfo = _Countries.default.find(c => c.name === country);
 
   if (!countryInfo) return [];
-  return _Provinces.default.filter(function (province) {
-    return province.cca3 === countryInfo.cca3;
-  });
+  return _Provinces.default.filter(province => province.cca3 === countryInfo.cca3);
 };
 
-var sanitizeValue = function sanitizeValue(countryProvinces, value) {
+const sanitizeValue = (countryProvinces, value) => {
   if (value === '') return '';
-  var isValueValid = countryProvinces.some(function (province) {
-    return province.name === value;
-  });
+  const isValueValid = countryProvinces.some(province => province.name === value);
   return isValueValid ? value : '';
 };
 
-var ProvincePicker = function ProvincePicker(_ref) {
-  var country = _ref.country,
-      placeholder = _ref.placeholder,
-      textPlaceholder = _ref.textPlaceholder,
-      value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, ["country", "placeholder", "textPlaceholder", "value"]);
+const ProvincePicker = _ref => {
+  let {
+    country,
+    placeholder,
+    textPlaceholder,
+    value
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["country", "placeholder", "textPlaceholder", "value"]);
 
-  var countryProvinces = findProvinces(country);
+  const countryProvinces = findProvinces(country);
   return countryProvinces.length > 0 ? _react.default.createElement(_Select.default, _extends({
     placeholder: placeholder,
     value: sanitizeValue(countryProvinces, value)
-  }, props), countryProvinces.sort(function (a, b) {
-    return a.name.localeCompare(b.name);
-  }).map(renderOption)) : _react.default.createElement(_Input.default, _extends({
+  }, props), countryProvinces.sort((a, b) => a.name.localeCompare(b.name)).map(renderOption)) : _react.default.createElement(_Input.default, _extends({
     type: "text",
     placeholder: textPlaceholder || placeholder,
     value: value