bright-components 9.31.0 → 10.0.0

package/dist/components/DayPickerPanel/HeaderDayPickerPanel/index.js

@@ -37,175 +37,85 @@ var _dayPickerCSS = _interopRequireDefault(require("./dayPickerCSS"));
 
 var _Shortcuts = _interopRequireDefault(require("../Shortcuts"));
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n\tjustify-content: flex-end;\n"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmax-width: 312px;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: ", ";\n\t> * {\n\t\ttext-align: center;\n\t}\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-bottom: ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 0 ", ";\n\tpadding: ", " 0;\n\tborder-top: 1px solid ", ";\n\tdisplay: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin-left: 4px;\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 MONTHS = Array.from(Array(12).keys()).map(function (month) {
-  return (0, _dateFns.format)((0, _dateFns.startOfMonth)(new Date()).setMonth(month), 'MMMM');
-});
-var WEEKDAYS = Array.from(Array(7).keys()).map(function (weekday) {
-  return (0, _dateFns.format)((0, _dateFns.addDays)((0, _dateFns.startOfWeek)(new Date()), weekday), 'EEE');
-});
-
-var HeaderDayPicker = _styledComponents.default.div(_templateObject(), _dayPickerCSS.default);
-
+const MONTHS = Array.from(Array(12).keys()).map(month => (0, _dateFns.format)((0, _dateFns.startOfMonth)(new Date()).setMonth(month), 'MMMM'));
+const WEEKDAYS = Array.from(Array(7).keys()).map(weekday => (0, _dateFns.format)((0, _dateFns.addDays)((0, _dateFns.startOfWeek)(new Date()), weekday), 'EEE'));
+const HeaderDayPicker = _styledComponents.default.div`
+	${_dayPickerCSS.default};
+`;
 HeaderDayPicker.displayName = 'HeaderDayPicker';
-var ApplyButton = (0, _styledComponents.default)(_BrandButton.default)(_templateObject2());
+const ApplyButton = (0, _styledComponents.default)(_BrandButton.default)`
+	margin-left: 4px;
+`;
 ApplyButton.displayName = 'ApplyButton';
-var ClearButton = (0, _styledComponents.default)(_OutlineButton.default)(_templateObject3());
+const ClearButton = (0, _styledComponents.default)(_OutlineButton.default)``;
 ClearButton.displayName = 'ClearButton';
-
-var Footer = _styledComponents.default.div(_templateObject4(), _spacing.default.s3, _spacing.default.s2, _colors.default.grey, function (props) {
-  return props.show ? 'block' : 'none';
-});
-
+const Footer = _styledComponents.default.div`
+	margin: 0 ${_spacing.default.s3};
+	padding: ${_spacing.default.s2} 0;
+	border-top: 1px solid ${_colors.default.grey};
+	display: ${props => props.show ? 'block' : 'none'};
+`;
 Footer.displayName = 'Footer';
-var MonthDisplay = (0, _styledComponents.default)(_LinkButton.default)(_templateObject5());
+const MonthDisplay = (0, _styledComponents.default)(_LinkButton.default)`
+	display: inline-block;
+`;
 MonthDisplay.displayName = 'MonthDisplay';
-var YearDisplay = (0, _styledComponents.default)(_LinkButton.default)(_templateObject6());
+const YearDisplay = (0, _styledComponents.default)(_LinkButton.default)`
+	display: inline-block;
+`;
 YearDisplay.displayName = 'YearDisplay';
-
-var FooterItems = _styledComponents.default.div(_templateObject7(), _spacing.default.s1);
-
+const FooterItems = _styledComponents.default.div`
+	display: flex;
+	margin-bottom: ${_spacing.default.s1};
+`;
 FooterItems.displayName = 'FooterItems';
-var FooterShortcuts = (0, _styledComponents.default)(FooterItems)(_templateObject8(), _spacing.default.s2);
+const FooterShortcuts = (0, _styledComponents.default)(FooterItems)`
+	max-width: 312px;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: ${_spacing.default.s2};
+	> * {
+		text-align: center;
+	}
+`;
 FooterShortcuts.displayName = 'FooterShortcuts';
-var FooterActions = (0, _styledComponents.default)(FooterItems)(_templateObject9());
+const FooterActions = (0, _styledComponents.default)(FooterItems)`
+	justify-content: flex-end;
+`;
 FooterActions.displayName = 'FooterActions';
 
-var HeaderDayPickerPanel =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(HeaderDayPickerPanel, _React$Component);
-
-  function HeaderDayPickerPanel(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+class HeaderDayPickerPanel extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = HeaderDayPickerPanel.prototype;
-
-  _proto.setMonthYear = function setMonthYear(day) {
+  setMonthYear(day) {
     this.props.setMonth(day.getMonth());
     this.props.setYear(day.getFullYear());
-  };
+  }
 
-  _proto.setDateFromShortcut = function setDateFromShortcut(range) {
-    var _this$props = this.props,
-        yearRange = _this$props.yearRange,
-        onSelectedDay = _this$props.onSelectedDay;
-    var maxRange = (0, _dateFns.lastDayOfYear)((0, _dateFns.setYear)((0, _dateFns.startOfToday)(), yearRange.max));
-    var minRange = (0, _dateFns.startOfYear)((0, _dateFns.setYear)((0, _dateFns.startOfToday)(), yearRange.min));
-    var from = (0, _dateFns.max)([(0, _dateFns.min)([range.from, maxRange]), minRange]);
-    var to = (0, _dateFns.min)([(0, _dateFns.max)([range.to, minRange]), maxRange]);
+  setDateFromShortcut(range) {
+    const {
+      yearRange,
+      onSelectedDay
+    } = this.props;
+    const maxRange = (0, _dateFns.lastDayOfYear)((0, _dateFns.setYear)((0, _dateFns.startOfToday)(), yearRange.max));
+    const minRange = (0, _dateFns.startOfYear)((0, _dateFns.setYear)((0, _dateFns.startOfToday)(), yearRange.min));
+    let from = (0, _dateFns.max)([(0, _dateFns.min)([range.from, maxRange]), minRange]);
+    let to = (0, _dateFns.min)([(0, _dateFns.max)([range.to, minRange]), maxRange]);
 
     while (this.isDisabled(from) && (0, _dateFns.isBefore)(from, (0, _dateFns.max)([to, maxRange]))) {
       from = (0, _dateFns.addDays)(from, 1);
@@ -215,46 +125,40 @@ function (_React$Component) {
       to = (0, _dateFns.subDays)(to, 1);
     }
 
-    var newRange = {
-      from: from,
-      to: to
+    const newRange = {
+      from,
+      to
     };
     this.setMonthYear(newRange.to);
     if ((0, _dateFns.isAfter)(from, to)) return;
     onSelectedDay(newRange);
-  };
+  }
 
-  _proto.isDisabled = function isDisabled(day) {
-    var disabledDays = this.props.disabledDays;
+  isDisabled(day) {
+    const {
+      disabledDays
+    } = this.props;
     if (!disabledDays.length) return false;
-    var isDisabledDay = false;
-    isDisabledDay = disabledDays.filter(function (item) {
-      return item instanceof Date;
-    }).find(function (item) {
-      return (0, _dateFns.isSameDay)(item, day);
-    });
+    let isDisabledDay = false;
+    isDisabledDay = disabledDays.filter(item => item instanceof Date).find(item => (0, _dateFns.isSameDay)(item, day));
     if (isDisabledDay) return true;
-    var allowedDateRanges = disabledDays.filter(function (item) {
-      return Object.prototype.hasOwnProperty.call(item, 'before') || Object.prototype.hasOwnProperty.call(item, 'after');
-    });
+    const allowedDateRanges = disabledDays.filter(item => Object.prototype.hasOwnProperty.call(item, 'before') || Object.prototype.hasOwnProperty.call(item, 'after'));
 
-    for (var i = 0; i < allowedDateRanges.length; i++) {
-      var range = allowedDateRanges[i];
+    for (let i = 0; i < allowedDateRanges.length; i++) {
+      const range = allowedDateRanges[i];
       isDisabledDay = !!range.before && (0, _dateFns.isBefore)((0, _dateFns.startOfDay)(day), (0, _dateFns.startOfDay)(range.before));
       if (isDisabledDay) break;
       isDisabledDay = !!range.after && (0, _dateFns.isAfter)((0, _dateFns.startOfDay)(day), (0, _dateFns.startOfDay)(range.after));
       if (isDisabledDay) break;
     }
 
-    var disabledDateRanges = disabledDays.filter(function (item) {
-      return Object.prototype.hasOwnProperty.call(item, 'from') && Object.prototype.hasOwnProperty.call(item, 'to');
-    });
+    const disabledDateRanges = disabledDays.filter(item => Object.prototype.hasOwnProperty.call(item, 'from') && Object.prototype.hasOwnProperty.call(item, 'to'));
 
-    for (var _i = 0; _i < disabledDateRanges.length; _i++) {
-      var _range = disabledDateRanges[_i];
+    for (let i = 0; i < disabledDateRanges.length; i++) {
+      const range = disabledDateRanges[i];
       isDisabledDay = (0, _dateFns.isWithinInterval)(day, {
-        start: _range.from,
-        end: _range.to
+        start: range.from,
+        end: range.to
       });
 
       if (isDisabledDay) {
@@ -263,20 +167,21 @@ function (_React$Component) {
     }
 
     return isDisabledDay;
-  };
+  }
 
-  _proto.handleDayClick = function handleDayClick(day) {
+  handleDayClick(day) {
     if (this.isDisabled(day)) {
       this.setMonthYear(day);
       return;
     }
 
-    var _this$props2 = this.props,
-        dateRange = _this$props2.dateRange,
-        onSelectedDay = _this$props2.onSelectedDay,
-        range = _this$props2.range,
-        startDateClicked = _this$props2.startDateClicked;
-    var newRange;
+    const {
+      dateRange,
+      onSelectedDay,
+      range,
+      startDateClicked
+    } = this.props;
+    let newRange;
 
     if (startDateClicked) {
       newRange = _reactDayPicker.DateUtils.addDayToRange(day, {
@@ -293,50 +198,49 @@ function (_React$Component) {
         to: undefined
       };
     } else if (newRange.to && (0, _dateFns.isAfter)(newRange.from, newRange.to)) {
-      var previousTo = newRange.to;
+      const previousTo = newRange.to;
       newRange.to = newRange.from;
       newRange.from = previousTo;
     }
 
     this.setMonthYear(day);
     onSelectedDay(newRange);
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props3 = this.props,
-        month = _this$props3.month,
-        year = _this$props3.year,
-        disabledDays = _this$props3.disabledDays,
-        yearRange = _this$props3.yearRange,
-        range = _this$props3.range,
-        dateRange = _this$props3.dateRange,
-        onApply = _this$props3.onApply,
-        onClear = _this$props3.onClear,
-        onMonthClick = _this$props3.onMonthClick,
-        onYearClick = _this$props3.onYearClick,
-        shortcuts = _this$props3.shortcuts,
-        GA = _this$props3.GA,
-        isDateSelect = _this$props3.isDateSelect,
-        onMonthChange = _this$props3.onMonthChange,
-        onYearChange = _this$props3.onYearChange;
-    var maxRange = (0, _dateFns.endOfYear)(new Date().setYear(yearRange.max));
-    var minRange = (0, _dateFns.startOfYear)(new Date().setYear(yearRange.min)); // generates a years array for year dropdown
-
-    var yearRangeArr = new Array(yearRange.max - yearRange.min + 1).fill(null).map(function (yr, i) {
-      return yearRange.min + yr + i;
-    });
-    var showNext = !(yearRange.max === year && month === 11);
-    var showPrevious = !(yearRange.min === year && month === 0);
-    var from = range.from,
-        to = range.to;
-    var selectedDates = dateRange ? [from, {
-      from: from,
-      to: to
+  }
+
+  render() {
+    const {
+      month,
+      year,
+      disabledDays,
+      yearRange,
+      range,
+      dateRange,
+      onApply,
+      onClear,
+      onMonthClick,
+      onYearClick,
+      shortcuts,
+      GA,
+      isDateSelect,
+      onMonthChange,
+      onYearChange
+    } = this.props;
+    const maxRange = (0, _dateFns.endOfYear)(new Date().setYear(yearRange.max));
+    const minRange = (0, _dateFns.startOfYear)(new Date().setYear(yearRange.min)); // generates a years array for year dropdown
+
+    const yearRangeArr = new Array(yearRange.max - yearRange.min + 1).fill(null).map((yr, i) => yearRange.min + yr + i);
+    const showNext = !(yearRange.max === year && month === 11);
+    const showPrevious = !(yearRange.min === year && month === 0);
+    const {
+      from,
+      to
+    } = range;
+    const selectedDates = dateRange ? [from, {
+      from,
+      to
     }] : from;
 
-    var modifiers = _objectSpread({
+    const modifiers = _objectSpread({
       startOfWeek: {
         daysOfWeek: [1]
       },
@@ -344,15 +248,15 @@ function (_React$Component) {
         daysOfWeek: [0]
       }
     }, dateRange ? {
-      from: from,
-      to: to,
+      from,
+      to,
       toNotSelected: to ? undefined : from
     } : {
-      from: from,
+      from,
       to: from
     });
 
-    var monthToDisplay = MONTHS[month];
+    const monthToDisplay = MONTHS[month];
     return _react.default.createElement(HeaderDayPicker, null, _react.default.createElement(_reactDayPicker.default, {
       fromMonth: minRange,
       toMonth: maxRange,
@@ -365,30 +269,28 @@ function (_React$Component) {
       modifiers: modifiers,
       onDayClick: this.handleDayClick,
       disabledDays: disabledDays,
-      navbarElement: function navbarElement(_ref) {
-        var onPreviousClick = _ref.onPreviousClick,
-            onNextClick = _ref.onNextClick,
-            nextMonth = _ref.nextMonth,
-            previousMonth = _ref.previousMonth;
+      navbarElement: _ref => {
+        let {
+          onPreviousClick,
+          onNextClick,
+          nextMonth,
+          previousMonth
+        } = _ref;
         return _react.default.createElement(_Header.default, {
-          onNext: function onNext() {
+          onNext: () => {
             onNextClick();
-
-            _this2.setMonthYear(nextMonth);
-
+            this.setMonthYear(nextMonth);
             (0, _reactGa.event)({
               category: GA.category,
-              action: GA.actionId + " - Next Month"
+              action: `${GA.actionId} - Next Month`
             });
           },
-          onPrevious: function onPrevious() {
+          onPrevious: () => {
             onPreviousClick();
-
-            _this2.setMonthYear(previousMonth);
-
+            this.setMonthYear(previousMonth);
             (0, _reactGa.event)({
               category: GA.category,
-              action: GA.actionId + " - Previous Month"
+              action: `${GA.actionId} - Previous Month`
             });
           },
           showNext: showNext,
@@ -428,12 +330,10 @@ function (_React$Component) {
           name: "years",
           value: String(year),
           "data-e2e": "select-year"
-        }, yearRangeArr.length && yearRangeArr.map(function (yr) {
-          return _react.default.createElement(_Option.default, {
-            value: String(yr),
-            key: String(yr)
-          }, String(yr));
-        }))) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(MonthDisplay, {
+        }, yearRangeArr.length && yearRangeArr.map(yr => _react.default.createElement(_Option.default, {
+          value: String(yr),
+          key: String(yr)
+        }, String(yr))))) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(MonthDisplay, {
           onClick: onMonthClick,
           "data-e2e": "select-month"
         }, monthToDisplay), "\xA0", _react.default.createElement(YearDisplay, {
@@ -441,15 +341,13 @@ function (_React$Component) {
           "data-e2e": "select-year"
         }, year)));
       },
-      renderDay: function renderDay(day) {
-        return _react.default.createElement("div", {
-          className: "DayPicker-Day-Date"
-        }, _react.default.createElement("div", {
-          className: "DayPicker-Day-Circle"
-        }, _react.default.createElement("div", {
-          className: "DayPicker-Day-Number"
-        }, day.getDate())));
-      }
+      renderDay: day => _react.default.createElement("div", {
+        className: "DayPicker-Day-Date"
+      }, _react.default.createElement("div", {
+        className: "DayPicker-Day-Circle"
+      }, _react.default.createElement("div", {
+        className: "DayPicker-Day-Number"
+      }, day.getDate())))
     }), _react.default.createElement(Footer, {
       show: dateRange && onApply || onClear || shortcuts
     }, _react.default.createElement(FooterShortcuts, null, shortcuts && _react.default.createElement(_Shortcuts.default, {
@@ -458,16 +356,15 @@ function (_React$Component) {
       shortcutClicked: this.setDateFromShortcut,
       GA: GA
     })), (dateRange || onClear) && _react.default.createElement(FooterActions, null, onClear && _react.default.createElement(ClearButton, {
-      gaAction: GA.actionId + " Day picker clear",
+      gaAction: `${GA.actionId} Day picker clear`,
       onClick: onClear
     }, "Clear"), dateRange && onApply && _react.default.createElement(ApplyButton, {
       disabled: !from,
       onClick: onApply
     }, "Apply"))));
-  };
+  }
 
-  return HeaderDayPickerPanel;
-}(_react.default.Component);
+}
 
 HeaderDayPickerPanel.displayName = 'HeaderDayPickerPanel';
 HeaderDayPickerPanel.propTypes = {

package/dist/components/DayPickerPanel/HeaderMonthPanel/index.js

@@ -23,58 +23,49 @@ var _Cancel = _interopRequireDefault(require("../Cancel"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 0 ", ";\n\tpadding: ", " 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Footer = _styledComponents.default.div(_templateObject(), _spacing.default.s3, _spacing.default.s2);
-
+const Footer = _styledComponents.default.div`
+	margin: 0 ${_spacing.default.s3};
+	padding: ${_spacing.default.s2} 0;
+`;
 Footer.displayName = 'Footer';
-var MONTHS = Array.from(Array(12).keys()).map(function (month) {
-  return (0, _dateFns.format)((0, _dateFns.startOfMonth)(new Date()).setMonth(month), 'MMM');
-});
-
-var HeaderMonthPanel = function HeaderMonthPanel(props) {
-  var year = props.year,
-      yearRange = props.yearRange,
-      month = props.month,
-      setMonth = props.setMonth,
-      setYear = props.setYear,
-      switchBackToCalendarView = props.switchBackToCalendarView,
-      onCancelClick = props.onCancelClick,
-      _props$GA = props.GA,
-      category = _props$GA.category,
-      actionId = _props$GA.actionId,
-      isViewingCurrentYear = props.isViewingCurrentYear,
-      isMonthOnly = props.isMonthOnly;
-  var showNext = year !== yearRange.max;
-  var showPrevious = year !== yearRange.min;
-  var defaultSelectedItem = MONTHS[month];
+const MONTHS = Array.from(Array(12).keys()).map(month => (0, _dateFns.format)((0, _dateFns.startOfMonth)(new Date()).setMonth(month), 'MMM'));
+
+const HeaderMonthPanel = props => {
+  const {
+    year,
+    yearRange,
+    month,
+    setMonth,
+    setYear,
+    switchBackToCalendarView,
+    onCancelClick,
+    GA: {
+      category,
+      actionId
+    },
+    isViewingCurrentYear,
+    isMonthOnly
+  } = props;
+  const showNext = year !== yearRange.max;
+  const showPrevious = year !== yearRange.min;
+  const defaultSelectedItem = MONTHS[month];
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Header.default, {
-    onNext: function onNext() {
+    onNext: () => {
       setYear(year + 1);
     },
-    onPrevious: function onPrevious() {
+    onPrevious: () => {
       setYear(year - 1);
     },
     showNext: showNext,
     showPrevious: showPrevious
   }, year.toString()), _react.default.createElement(_ItemSelector.default, {
-    onItemSelected: function onItemSelected(selectedMonth) {
-      var selectedIndex = MONTHS.indexOf(selectedMonth);
+    onItemSelected: selectedMonth => {
+      const selectedIndex = MONTHS.indexOf(selectedMonth);
       setMonth(selectedIndex);
       switchBackToCalendarView();
       (0, _reactGa.event)({
-        category: category,
-        action: actionId + " - Month " + (selectedIndex + 1)
+        category,
+        action: `${actionId} - Month ${selectedIndex + 1}`
       });
     },
     selectedItem: defaultSelectedItem,