bright-components 9.32.0 → 10.1.0

package/dist/components/TimePicker/Time/index.js

@@ -31,147 +31,119 @@ var _breakpoints = _interopRequireDefault(require("../../../constants/breakpoint
 
 var _TimeOverlay = _interopRequireDefault(require("./TimeOverlay"));
 
-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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", " !important;\n\tmargin-bottom: 0px !important;\n\t", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", " !important;\n\tborder: ", " solid ", ";\n\tborder-radius: ", ";\n\tmargin-top: -", ";\n\tpadding: ", ";\n\tbackground-color: ", ";\n\tbox-shadow: ", ";\n\t", ";\n\tz-index: ", ";\n\n\t@media (min-width: ", ") {\n\t\tposition: absolute;\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\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; }
-
 _pluralize.default.addIrregularRule('hr', 'hrs');
 
 _pluralize.default.addIrregularRule('min', 'mins');
 
-var borderColorMixin = (0, _styledComponents.css)(_templateObject(), function (props) {
-  return props.overlayOpen && "border-color: " + _colors.default.primary + " !important";
-});
-
-var OverlayContainer = _styledComponents.default.div(_templateObject2(), function (props) {
-  return props.width;
-}, _vars.default.borderWidth, _colors.default.grey, _vars.default.borderRadius, _vars.default.borderWidth, _spacing.default.s2, _colors.default.white, _vars.default.boxShadow, borderColorMixin, _zIndex.default.OVERLAY, _breakpoints.default.tablet);
-
+const borderColorMixin = (0, _styledComponents.css)`
+	${props => props.overlayOpen && `border-color: ${_colors.default.primary} !important`};
+`;
+const OverlayContainer = _styledComponents.default.div`
+	width: ${props => props.width} !important;
+	border: ${_vars.default.borderWidth} solid ${_colors.default.grey};
+	border-radius: ${_vars.default.borderRadius};
+	margin-top: -${_vars.default.borderWidth};
+	padding: ${_spacing.default.s2};
+	background-color: ${_colors.default.white};
+	box-shadow: ${_vars.default.boxShadow};
+	${borderColorMixin};
+	z-index: ${_zIndex.default.OVERLAY};
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		position: absolute;
+	}
+`;
 OverlayContainer.displayName = 'OverlayContainer';
-var TimePickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject3(), function (props) {
-  return props.width;
-}, borderColorMixin);
+const TimePickerInput = (0, _styledComponents.default)(_Input.default)`
+	width: ${props => props.width} !important;
+	margin-bottom: 0px !important;
+	${borderColorMixin};
+`;
 TimePickerInput.displayName = 'TimePickerInput';
 
-var TimePicker =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(TimePicker, _React$Component);
-
-  function TimePicker() {
-    var _this;
-
-    _this = _React$Component.call(this) || this;
-    _this.state = {
+class TimePicker extends _react.default.Component {
+  constructor() {
+    super();
+    this.state = {
       overlayOpen: false
     };
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = TimePicker.prototype;
-
-  _proto.apply = function apply(time) {
+  apply(time) {
     this.toggleOverlay();
     this.props.onTimeSet(time);
-  };
+  }
 
-  _proto.openOverlayIfNotOpen = function openOverlayIfNotOpen() {
-    var overlayOpen = this.state.overlayOpen;
+  openOverlayIfNotOpen() {
+    const {
+      overlayOpen
+    } = this.state;
 
     if (!overlayOpen) {
       this.setState({
         overlayOpen: true
       });
     }
-  };
+  }
 
-  _proto.toggleOverlay = function toggleOverlay() {
-    var toggle = this.state.overlayOpen;
+  toggleOverlay() {
+    const toggle = this.state.overlayOpen;
     this.setState({
       overlayOpen: !toggle
     });
-  };
+  }
 
-  _proto.handleClickOutside = function handleClickOutside() {
+  handleClickOutside() {
     this.setState({
       overlayOpen: false
     });
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        stepMinutes = _this$props.stepMinutes,
-        minMinutes = _this$props.minMinutes,
-        maxMinutes = _this$props.maxMinutes,
-        stepHours = _this$props.stepHours,
-        minHours = _this$props.minHours,
-        maxHours = _this$props.maxHours,
-        isDurationPicker = _this$props.isDurationPicker,
-        isDurationMinsOnly = _this$props.isDurationMinsOnly,
-        tickOverEnabled = _this$props.tickOverEnabled,
-        overlayWidth = _this$props.overlayWidth,
-        inputWidth = _this$props.inputWidth,
-        GA = _this$props.GA,
-        hour = _this$props.hour,
-        minute = _this$props.minute,
-        name = _this$props.name,
-        minTime = _this$props.minTime,
-        maxTime = _this$props.maxTime,
-        id = _this$props.id;
-    var overlayOpen = this.state.overlayOpen;
-    var inputValue;
+  }
+
+  render() {
+    const {
+      stepMinutes,
+      minMinutes,
+      maxMinutes,
+      stepHours,
+      minHours,
+      maxHours,
+      isDurationPicker,
+      isDurationMinsOnly,
+      tickOverEnabled,
+      overlayWidth,
+      inputWidth,
+      GA,
+      hour,
+      minute,
+      name,
+      minTime,
+      maxTime,
+      id
+    } = this.props;
+    const {
+      overlayOpen
+    } = this.state;
+    let inputValue;
 
     if (isDurationPicker && isDurationMinsOnly) {
-      inputValue = minute + " " + (0, _pluralize.default)('min', minute);
+      inputValue = `${minute} ${(0, _pluralize.default)('min', minute)}`;
     } else if (isDurationPicker) {
-      inputValue = hour + " " + (0, _pluralize.default)('hr', hour) + " " + minute + " " + (0, _pluralize.default)('min', minute);
+      inputValue = `${hour} ${(0, _pluralize.default)('hr', hour)} ${minute} ${(0, _pluralize.default)('min', minute)}`;
     } else {
-      var minutesPadding = maxMinutes.toString().length;
-      var hoursPadding = maxHours.toString().length;
-      inputValue = (0, _pad.default)(hour, hoursPadding) + ":" + (0, _pad.default)(minute, minutesPadding);
+      const minutesPadding = maxMinutes.toString().length;
+      const hoursPadding = maxHours.toString().length;
+      inputValue = `${(0, _pad.default)(hour, hoursPadding)}:${(0, _pad.default)(minute, minutesPadding)}`;
     }
 
     return _react.default.createElement("div", {
-      "data-e2e": "time-picker-" + id
+      "data-e2e": `time-picker-${id}`
     }, _react.default.createElement(TimePickerInput, {
       width: inputWidth,
       value: inputValue,
@@ -200,10 +172,9 @@ function (_React$Component) {
       minTime: minTime,
       maxTime: maxTime
     })));
-  };
+  }
 
-  return TimePicker;
-}(_react.default.Component);
+}
 
 TimePicker.displayName = 'TimePicker';
 TimePicker.propTypes = {

package/dist/components/TimePicker/utils/PickerGA/index.js

@@ -7,14 +7,16 @@ var _reactGa = _interopRequireDefault(require("react-ga"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var PickerGA = function PickerGA(_ref) {
-  var action = _ref.action,
-      category = _ref.category,
-      label = _ref.label;
+const PickerGA = _ref => {
+  let {
+    action,
+    category,
+    label
+  } = _ref;
   return category && _reactGa.default.event({
-    category: category,
-    action: action,
-    label: label
+    category,
+    action,
+    label
   });
 };
 

package/dist/components/TimePicker/utils/constants/loopStatus.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-var LOOP_STATUS = {
+const LOOP_STATUS = {
   OVER: 'over',
   UNDER: 'under',
   ASIS: 'as-is'

package/dist/components/TimePicker/utils/limitAround/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var limitAround = function limitAround(desiredInt, min, max) {
+const limitAround = (desiredInt, min, max) => {
   if (desiredInt > max) {
     return max;
   }

package/dist/components/TimePicker/utils/loopAround/index.js

@@ -7,12 +7,12 @@ var _loopStatus = _interopRequireDefault(require("../constants/loopStatus"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getRoundedLimit = function getRoundedLimit(limit, step) {
-  var newValue = limit % step === 0 ? limit : Math.floor((limit + step) / step) * step;
+const getRoundedLimit = (limit, step) => {
+  const newValue = limit % step === 0 ? limit : Math.floor((limit + step) / step) * step;
   return newValue;
 };
 
-var loopAround = function loopAround(desiredInt, min, max, step) {
+const loopAround = (desiredInt, min, max, step) => {
   if (desiredInt > max) {
     return {
       value: getRoundedLimit(min, step),

package/dist/components/TimePicker/utils/loopAroundMinutes/index.js

@@ -7,10 +7,10 @@ var _loopStatus = _interopRequireDefault(require("../constants/loopStatus"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var MAX_MINS = 60;
-var MIN_MINS = 0;
+const MAX_MINS = 60;
+const MIN_MINS = 0;
 
-var loopAroundMinutes = function loopAroundMinutes(desiredInt) {
+const loopAroundMinutes = desiredInt => {
   if (desiredInt >= MAX_MINS) {
     return {
       value: desiredInt - MAX_MINS,

package/dist/components/TimePicker/utils/roundToMultiple/index.js

@@ -3,9 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var roundToMultiple = function roundToMultiple(value, multiple) {
-  return Math.round(value / multiple) * multiple;
-};
+const roundToMultiple = (value, multiple) => Math.round(value / multiple) * multiple;
 
 var _default = roundToMultiple;
 exports.default = _default;

package/dist/components/Tooltip/index.js

@@ -23,102 +23,97 @@ 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\tborder-bottom: ", "px dotted\n\t\t", ";\n\tcolor: ", ";\n\t&:hover {\n\t\tcursor: help;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t&:hover + ", " {\n\t\tpointer-events: all;\n\t\topacity: 0.9;\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmax-width: 100%;\n\tposition: absolute;\n\tmargin-top: ", ";\n\topacity: ", ";\n\tpointer-events: none;\n\ttransition: opacity ease 0.25s;\n\tz-index: 9999;\n\tbackground-color: ", ";\n\tcolor: #fff;\n\tpadding: ", ";\n\tborder-radius: ", ";\n\tz-index: 1;\n\tfont-size: 14px;\n\tmargin-right: ", ";\n\n\t&:after {\n\t\tcontent: '';\n\t\twidth: fit-content;\n\t\twhite-space: nowrap;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: -", ";\n\t\tleft: ", ";\n\t\tborder-left: ", " solid transparent;\n\t\tborder-right: ", " solid transparent;\n\t\tborder-bottom: ", " solid ", ";\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 Container = _styledComponents.default.div(_templateObject(), _spacing.default.s2, function (props) {
-  return props.visibleOnClick ? 0.9 : 0;
-}, _colors.default.greyDark, _spacing.default.s1, _vars.default.borderRadius, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _colors.default.greyDark);
+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 Container = _styledComponents.default.div`
+	max-width: 100%;
+	position: absolute;
+	margin-top: ${_spacing.default.s2};
+	opacity: ${props => props.visibleOnClick ? 0.9 : 0};
+	pointer-events: none;
+	transition: opacity ease 0.25s;
+	z-index: 9999;
+	background-color: ${_colors.default.greyDark};
+	color: #fff;
+	padding: ${_spacing.default.s1};
+	border-radius: ${_vars.default.borderRadius};
+	z-index: 1;
+	font-size: 14px;
+	margin-right: ${_spacing.default.s1};
+
+	&:after {
+		content: '';
+		width: fit-content;
+		white-space: nowrap;
+		height: 0;
+		position: absolute;
+		top: -${_spacing.default.s1};
+		left: ${_spacing.default.s1};
+		border-left: ${_spacing.default.s1} solid transparent;
+		border-right: ${_spacing.default.s1} solid transparent;
+		border-bottom: ${_spacing.default.s1} solid ${_colors.default.greyDark};
+	}
+`;
 Container.displayName = 'Container';
-
-var Label = _styledComponents.default.span(_templateObject2(), Container);
-
+const Label = _styledComponents.default.span`
+	&:hover + ${Container} {
+		pointer-events: all;
+		opacity: 0.9;
+	}
+`;
 Label.displayName = 'Label';
-
-var InnerToolTip = _styledComponents.default.div(_templateObject3(), function (props) {
-  return props.underline ? '2' : '0';
-}, _colors.default.primary, _colors.default.primary);
-
+const InnerToolTip = _styledComponents.default.div`
+	display: inline-block;
+	border-bottom: ${props => props.underline ? '2' : '0'}px dotted
+		${_colors.default.primary};
+	color: ${_colors.default.primary};
+	&:hover {
+		cursor: help;
+	}
+`;
 InnerToolTip.displayName = 'InnerToolTip';
 
-var UnwrappedTooltip =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(UnwrappedTooltip, _React$Component);
-
-  function UnwrappedTooltip(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
+class UnwrappedTooltip extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       visibleOnClick: false
     };
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = UnwrappedTooltip.prototype;
-
-  _proto.handleClickOutside = function handleClickOutside() {
+  handleClickOutside() {
     this.setState({
       visibleOnClick: false
     });
-  };
+  }
 
-  _proto.toggleTooltip = function toggleTooltip() {
-    this.setState(function (_ref) {
-      var visibleOnClick = _ref.visibleOnClick;
+  toggleTooltip() {
+    this.setState(_ref => {
+      let {
+        visibleOnClick
+      } = _ref;
       return {
         visibleOnClick: !visibleOnClick
       };
     });
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        label = _this$props.label,
-        children = _this$props.children,
-        gaAction = _this$props.gaAction,
-        icon = _this$props.icon,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["label", "children", "gaAction", "icon"]);
+  }
 
-    var visibleOnClick = this.state.visibleOnClick;
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      children,
+      gaAction,
+      icon
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, ["label", "children", "gaAction", "icon"]);
+
+    const {
+      visibleOnClick
+    } = this.state;
     return _react.default.createElement(InnerToolTip, _extends({
       underline: !!label
     }, rest), _react.default.createElement(Label, _extends({
@@ -128,10 +123,9 @@ function (_React$Component) {
     }, this.props), label || icon), _react.default.createElement(Container, {
       visibleOnClick: visibleOnClick
     }, children));
-  };
+  }
 
-  return UnwrappedTooltip;
-}(_react.default.Component);
+}
 
 exports.UnwrappedTooltip = UnwrappedTooltip;
 UnwrappedTooltip.displayName = 'Tooltip';

package/dist/components/Typeahead/MobileHeader/index.js

@@ -19,40 +19,45 @@ 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 _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\tposition: relative;\n\tpadding: ", " ", " 0;\n\n\t.close {\n\t\tposition: absolute;\n\t\tright: 16px;\n\t\ttop: 21px;\n\t}\n\n\t@media screen and (min-width: ", ") {\n\t\tdisplay: none;\n\n\t\t.close {\n\t\t\tdisplay: none;\n\t\t}\n\t}\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; }
-
-var Container = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.open ? 'block' : 'none';
-}, _spacing.default.s2, _spacing.default.s2, _breakpoints.default.tablet);
+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 Container = _styledComponents.default.div`
+	display: ${props => props.open ? 'block' : 'none'};
+	position: relative;
+	padding: ${_spacing.default.s2} ${_spacing.default.s2} 0;
+
+	.close {
+		position: absolute;
+		right: 16px;
+		top: 21px;
+	}
+
+	@media screen and (min-width: ${_breakpoints.default.tablet}) {
+		display: none;
+
+		.close {
+			display: none;
+		}
+	}
+`;
 Container.displayName = 'Container';
 
-var MobileHeader = function MobileHeader(_ref) {
-  var setVisible = _ref.setVisible,
-      open = _ref.open,
-      label = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, ["setVisible", "open", "label"]);
+const MobileHeader = _ref => {
+  let {
+    setVisible,
+    open,
+    label
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["setVisible", "open", "label"]);
 
   return _react.default.createElement(Container, _extends({
     open: open
   }, props), label, _react.default.createElement(_Cross.default, {
     size: 14,
     className: "close",
-    onClick: function onClick() {
-      return setVisible(false);
-    },
+    onClick: () => setVisible(false),
     "data-testid": "cross-icon"
   }));
 };

package/dist/components/Typeahead/Option/OptionImage/index.js

@@ -13,44 +13,21 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", "\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\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 ImageContainer = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.density === 'expanded' && "padding: " + _spacing.default.s1 + " " + _spacing.default.s2 + " " + _spacing.default.s1 + " 0;";
-});
-
+const ImageContainer = _styledComponents.default.div`
+	${props => props.density === 'expanded' && `padding: ${_spacing.default.s1} ${_spacing.default.s2} ${_spacing.default.s1} 0;`}
+`;
 ImageContainer.displayName = 'ImageContainer';
-
-var IconContainer = _styledComponents.default.div(_templateObject2(), function (props) {
-  return props.density !== 'expanded' && "margin: 0 " + _spacing.default.s1 + " 0 -4px;";
-});
-
+const IconContainer = _styledComponents.default.div`
+	${props => props.density !== 'expanded' && `margin: 0 ${_spacing.default.s1} 0 -4px;`}
+`;
 IconContainer.displayName = 'IconContainer';
 
-var OptionImage = function OptionImage(_ref) {
-  var Icon = _ref.Icon,
-      image = _ref.image,
-      density = _ref.density;
+const OptionImage = _ref => {
+  let {
+    Icon,
+    image,
+    density
+  } = _ref;
 
   if (image) {
     return _react.default.createElement(ImageContainer, {