bright-components 9.31.0 → 10.0.0

package/dist/components/Radio/index.js

@@ -19,72 +19,67 @@ 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 _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tvertical-align: middle;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: none;\n\n\t&:checked + ", ":after {\n\t\ttransform: scale(1);\n\t\tvisibility: visible;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tborder: none;\n\tborder: ", " solid ", ";\n\tmargin: ", ";\n\theight: 22px;\n\twidth: 22px;\n\tborder-radius: 50%;\n\ttransition: all 0.2s ease-in;\n\tpadding: 0px;\n\tvertical-align: middle;\n\n\t&:after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ", ";\n\t\tvisibility: hidden;\n\t\ttransform: scale(0);\n\t\ttransition: transform 0.2s ease-in-out;\n\t\theight: 12px;\n\t\twidth: 12px;\n\t\tposition: absolute;\n\t\ttop: 3px;\n\t\tleft: 3px;\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\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.div(_templateObject());
+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.div`
+	display: inline-block;
+	vertical-align: middle;
+`;
 Wrapper.displayName = 'Wrapper';
-
-var Box = _styledComponents.default.label(_templateObject2(), _vars.default.borderWidth, _colors.default.borderColor, _spacing.default.s1, _colors.default.secondary);
-
+const Box = _styledComponents.default.label`
+	position: relative;
+	cursor: pointer;
+	display: inline-block;
+	border: none;
+	border: ${_vars.default.borderWidth} solid ${_colors.default.borderColor};
+	margin: ${_spacing.default.s1};
+	height: 22px;
+	width: 22px;
+	border-radius: 50%;
+	transition: all 0.2s ease-in;
+	padding: 0px;
+	vertical-align: middle;
+
+	&:after {
+		content: '';
+		display: block;
+		border-radius: 50%;
+		background-color: ${_colors.default.secondary};
+		visibility: hidden;
+		transform: scale(0);
+		transition: transform 0.2s ease-in-out;
+		height: 12px;
+		width: 12px;
+		position: absolute;
+		top: 3px;
+		left: 3px;
+	}
+`;
 Box.displayName = 'Box';
-
-var Input = _styledComponents.default.input(_templateObject3(), Box);
-
+const Input = _styledComponents.default.input`
+	display: none;
+
+	&:checked + ${Box}:after {
+		transform: scale(1);
+		visibility: visible;
+	}
+`;
 Input.displayName = 'Input';
-
-var Label = _styledComponents.default.label(_templateObject4());
-
+const Label = _styledComponents.default.label`
+	vertical-align: middle;
+`;
 Label.displayName = 'Label';
 
-var Radio = function Radio(_ref) {
-  var name = _ref.name,
-      id = _ref.id,
-      className = _ref.className,
-      label = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, ["name", "id", "className", "label"]);
+const Radio = _ref => {
+  let {
+    name,
+    id,
+    className,
+    label
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["name", "id", "className", "label"]);
 
   return _react.default.createElement(Wrapper, {
     className: className

package/dist/components/RadioBlock/index.js

@@ -19,90 +19,70 @@ 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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcursor: ", ";\n\topacity: 0 !important;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\twidth: 100%;\n\theight: 100%;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    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 _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\ttext-align: left;\n\tborder: 1px solid\n\t\t", ";\n\tbackground: ", ";\n\t", ";\n\tborder-radius: ", ";\n\theight: 100%;\n\topacity: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Option = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.selected ? _colors.default.primaryLight : _colors.default.borderColor;
-}, function (props) {
-  return props.selected ? _colors.default.primaryLighter : '#fff';
-}, function (props) {
-  return props.selected && "box-shadow: 1px 4px 8px -4px #888888";
-}, _vars.default.borderRadius, function (props) {
-  return props.disabled ? '0.3' : 1;
-});
+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 Option = _styledComponents.default.div`
+	position: relative;
+	text-align: left;
+	border: 1px solid
+		${props => props.selected ? _colors.default.primaryLight : _colors.default.borderColor};
+	background: ${props => props.selected ? _colors.default.primaryLighter : '#fff'};
+	${props => props.selected && `box-shadow: 1px 4px 8px -4px #888888`};
+	border-radius: ${_vars.default.borderRadius};
+	height: 100%;
+	opacity: ${props => props.disabled ? '0.3' : 1};
+`;
 Option.displayName = 'Option';
-
-var Radio = _styledComponents.default.input(_templateObject2(), function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-});
-
+const Radio = _styledComponents.default.input`
+	cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+	opacity: 0 !important;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+`;
 Radio.displayName = 'Radio';
 
-var RadioBlock =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(RadioBlock, _React$Component);
-
-  function RadioBlock() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-
-  var _proto = RadioBlock.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var _this$props = this.props,
-        _this$props$GA = _this$props.GA,
-        category = _this$props$GA.category,
-        action = _this$props$GA.action,
-        checked = _this$props.checked;
+class RadioBlock extends _react.default.Component {
+  componentDidMount() {
+    const {
+      GA: {
+        category,
+        action
+      },
+      checked
+    } = this.props;
 
     if (category && action && checked) {
-      var defaultAction = "Defaulted to " + action;
+      const defaultAction = `Defaulted to ${action}`;
       (0, _reactGa.event)({
-        category: category,
+        category,
         action: defaultAction
       });
     }
-  };
-
-  _proto.render = function render() {
-    var _this$props2 = this.props,
-        checked = _this$props2.checked,
-        disabled = _this$props2.disabled,
-        _onChange = _this$props2.onChange,
-        name = _this$props2.name,
-        value = _this$props2.value,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        _this$props2$GA = _this$props2.GA,
-        category = _this$props2$GA.category,
-        action = _this$props2$GA.action,
-        props = _objectWithoutPropertiesLoose(_this$props2, ["checked", "disabled", "onChange", "name", "value", "children", "className", "GA"]);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      checked,
+      disabled,
+      onChange,
+      name,
+      value,
+      children,
+      className,
+      GA: {
+        category,
+        action
+      }
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["checked", "disabled", "onChange", "name", "value", "children", "className", "GA"]);
 
     return _react.default.createElement(Option, {
       "data-testid": "option",
@@ -115,22 +95,21 @@ function (_React$Component) {
       value: value,
       checked: checked,
       disabled: disabled,
-      onChange: function onChange(evt) {
+      onChange: evt => {
         if (category && action && !checked) {
-          var defaultAction = "Switched to " + action;
+          const defaultAction = `Switched to ${action}`;
           (0, _reactGa.event)({
-            category: category,
+            category,
             action: defaultAction
           });
         }
 
-        _onChange(evt);
+        onChange(evt);
       }
     }, props)));
-  };
+  }
 
-  return RadioBlock;
-}(_react.default.Component);
+}
 
 RadioBlock.propTypes = {
   checked: _propTypes.bool.isRequired,

package/dist/components/ResponsiveTabs/index.js

@@ -29,160 +29,143 @@ var _spacing = _interopRequireDefault(require("../../constants/spacing"));
 
 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 _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 _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 _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: ", ";\n\tborder-width: 0 1px 1px 1px;\n\tborder-color: ", ";\n\tborder-style: solid;\n\n\t@media screen and (min-width: ", ") {\n\t\tpadding: 0;\n\t\tborder: none;\n\t}\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 0 auto;\n\twidth: 90%;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: 0 ", ";\n\tbackground-color: ", ";\n\t@media screen and (min-width: ", ") {\n\t\tdisplay: none;\n\t}\n\n\tselect {\n\t\twidth: 100% !important;\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t@media screen and (min-width: ", ") {\n\t\tli {\n\t\t\tpadding: 0.5rem 2rem;\n\t\t}\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    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 _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t@media screen and (min-width: ", ") {\n\t\tli {\n\t\t\tflex: 1 1 auto;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: none;\n\t@media screen and (min-width: ", ") {\n\t\tdisplay: flex;\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\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; }
+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 BaseTabList = (0, _styledComponents.default)(_TabList.default)(_templateObject(), _breakpoints.default.tablet);
+const BaseTabList = (0, _styledComponents.default)(_TabList.default)`
+	display: none;
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		display: flex;
+
+		li {
+			display: flex;
+			align-items: center;
+		}
+	}
+`;
 BaseTabList.displayName = 'BaseTabList';
-var AutoWidthTabList = (0, _styledComponents.default)(BaseTabList)(_templateObject2(), _breakpoints.default.tablet);
+const AutoWidthTabList = (0, _styledComponents.default)(BaseTabList)`
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		li {
+			flex: 1 1 auto;
+			justify-content: center;
+		}
+	}
+`;
 AutoWidthTabList.displayName = 'AutoWidthTabList';
-var StyledTabList = (0, _styledComponents.default)(BaseTabList)(_templateObject3(), _breakpoints.default.tablet);
+const StyledTabList = (0, _styledComponents.default)(BaseTabList)`
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		li {
+			padding: 0.5rem 2rem;
+		}
+	}
+`;
 StyledTabList.displayName = 'StyledTabList';
-
-var MobileTabList = _styledComponents.default.div(_templateObject4(), _spacing.default.s3, _colors.default.primary, _breakpoints.default.tablet);
-
+const MobileTabList = _styledComponents.default.div`
+	padding: 0 ${_spacing.default.s3};
+	background-color: ${_colors.default.primary};
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		display: none;
+	}
+
+	select {
+		width: 100% !important;
+	}
+`;
 MobileTabList.displayName = 'MobileTabList';
-var TabSelect = (0, _styledComponents.default)(_Select.default)(_templateObject5());
+const TabSelect = (0, _styledComponents.default)(_Select.default)`
+	margin: 0 auto;
+	width: 90%;
+`;
 TabSelect.displayName = 'TabSelect';
-
-var ContentWrappper = _styledComponents.default.div(_templateObject6(), _spacing.default.s2, _colors.default.greyLight, _breakpoints.default.tablet);
-
+const ContentWrappper = _styledComponents.default.div`
+	padding: ${_spacing.default.s2};
+	border-width: 0 1px 1px 1px;
+	border-color: ${_colors.default.greyLight};
+	border-style: solid;
+
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		padding: 0;
+		border: none;
+	}
+`;
 ContentWrappper.displayName = 'ContentWrappper';
 
-var ResponsiveTabs = function ResponsiveTabs(_ref) {
-  var tabsProp = _ref.tabs,
-      defaultIndex = _ref.defaultIndex,
-      children = _ref.children,
-      autoTabWidth = _ref.autoTabWidth,
-      onSelected = _ref.onSelected,
-      rest = _objectWithoutPropertiesLoose(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
-
-  var _useState = (0, _react.useState)(defaultIndex || 0),
-      index = _useState[0],
-      setIndex = _useState[1];
-
-  var onSelectChange = function onSelectChange(event, tabs) {
-    var names = tabs.map(function (tab) {
-      return tab.name;
-    });
-    var newIndex = names.indexOf(event.target.value);
+const ResponsiveTabs = _ref => {
+  let {
+    tabs: tabsProp,
+    defaultIndex,
+    children,
+    autoTabWidth,
+    onSelected
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
+
+  const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
+
+  const onSelectChange = (event, tabs) => {
+    const names = tabs.map(tab => tab.name);
+    const newIndex = names.indexOf(event.target.value);
     setIndex(newIndex);
   };
 
-  var _onSelect = function onSelect(newIndex) {
+  const onSelect = newIndex => {
     setIndex(newIndex);
   };
 
-  var tabs = tabsProp || _react.default.Children.map(children, function (child) {
+  const tabs = tabsProp || _react.default.Children.map(children, child => {
     return child && child.props && child.props.name ? {
       name: child.props.name,
       counter: child.props.counter
     } : null;
   });
 
-  var DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
+  const DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
   return _react.default.createElement(_Tabs.default, _extends({
     selectedIndex: index
   }, rest, {
-    onSelect: function onSelect(i) {
-      _onSelect(i);
-
+    onSelect: i => {
+      onSelect(i);
       if (onSelected) onSelected(i);
     }
   }), _react.default.createElement(MobileTabList, null, _react.default.createElement(TabSelect, {
     name: "selectPanel",
-    onChange: function onChange(event) {
+    onChange: event => {
       onSelectChange(event, tabs);
 
       if (onSelected) {
-        var names = tabs.map(function (_ref2) {
-          var name = _ref2.name;
+        const names = tabs.map(_ref2 => {
+          let {
+            name
+          } = _ref2;
           return name;
         });
-        var i = names.indexOf(event.target.value);
+        const i = names.indexOf(event.target.value);
         onSelected(i);
       }
     },
     value: tabs[index].name
-  }, tabs.map(function (_ref3) {
-    var name = _ref3.name,
-        _ref3$counter = _ref3.counter,
-        counter = _ref3$counter === void 0 ? null : _ref3$counter;
+  }, tabs.map(_ref3 => {
+    let {
+      name,
+      counter = null
+    } = _ref3;
     return _react.default.createElement(_Option.default, {
       key: name,
       value: name
-    }, "" + name + (counter !== null ? " (" + counter + ")" : ''));
-  }))), _react.default.createElement(DesktopTabList, null, tabs.map(function (_ref4) {
-    var name = _ref4.name,
-        _ref4$counter = _ref4.counter,
-        counter = _ref4$counter === void 0 ? null : _ref4$counter;
+    }, `${name}${counter !== null ? ` (${counter})` : ''}`);
+  }))), _react.default.createElement(DesktopTabList, null, tabs.map(_ref4 => {
+    let {
+      name,
+      counter = null
+    } = _ref4;
     return _react.default.createElement(_Tab.default, {
       key: name
     }, name, ' ', counter !== null ? _react.default.createElement(_Pill.default, null, counter) : null);