@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

package/bpk-component-calendar/src/custom-proptypes-legacy.js

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SELECTION_TYPES = exports.CALENDAR_SELECTION_TYPE = exports.BpkCalendarGridPropTypes = exports.BpkCalendarDatePropTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dateUtils = require("./date-utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,12 +25,11 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
-import { isBefore, isSameDay } from './date-utils';
-
-const DateType = () => (props) => {
-  const { endDate, startDate } = props;
+const DateType = () => props => {
+  const {
+    endDate,
+    startDate
+  } = props;
 
   // No range selected
   if (!startDate && !endDate) {
@@ -39,111 +47,94 @@ const DateType = () => (props) => {
   }
 
   // Start date cannot be after end date
-  if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
-    return new Error(
-      `Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`,
-    );
+  if ((0, _dateUtils.isBefore)(endDate, startDate) && !(0, _dateUtils.isSameDay)(endDate, startDate)) {
+    return new Error(`Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`);
   }
-
   return null;
 };
-
 const CALENDAR_SELECTION_TYPE = {
   single: 'single',
-  range: 'range',
+  range: 'range'
 };
-
-export const SELECTION_TYPES = {
+exports.CALENDAR_SELECTION_TYPE = CALENDAR_SELECTION_TYPE;
+const SELECTION_TYPES = {
   none: 'none',
   single: 'single',
   start: 'start',
   middle: 'middle',
   end: 'end',
-  sameDay: 'sameDay',
+  sameDay: 'sameDay'
 };
-
-const SelectionConfigurationSingle = PropTypes.shape({
-  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.single]),
-  date: PropTypes.instanceOf(Date),
+exports.SELECTION_TYPES = SELECTION_TYPES;
+const SelectionConfigurationSingle = _propTypes.default.shape({
+  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.single]),
+  date: _propTypes.default.instanceOf(Date)
 });
-
-const SelectionConfigurationRange = PropTypes.shape({
-  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.range]),
+const SelectionConfigurationRange = _propTypes.default.shape({
+  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.range]),
   startDate: DateType(),
-  endDate: DateType(),
+  endDate: DateType()
 });
-
-const SelectionConfiguration = PropTypes.oneOfType([
-  SelectionConfigurationSingle,
-  SelectionConfigurationRange,
-]);
-
-const WeekDay = PropTypes.shape({
-  name: PropTypes.string,
-  nameAbbr: PropTypes.string,
-  index: PropTypes.number,
-  isWeekend: PropTypes.bool,
+const SelectionConfiguration = _propTypes.default.oneOfType([SelectionConfigurationSingle, SelectionConfigurationRange]);
+const WeekDay = _propTypes.default.shape({
+  name: _propTypes.default.string,
+  nameAbbr: _propTypes.default.string,
+  index: _propTypes.default.number,
+  isWeekend: _propTypes.default.bool
 });
-
-const WeekDayKey = PropTypes.string;
-const DaysOfWeek = PropTypes.arrayOf(WeekDay);
-const DateModifiers = PropTypes.objectOf(PropTypes.func);
-const ReactComponent = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
-
+const WeekDayKey = _propTypes.default.string;
+const DaysOfWeek = _propTypes.default.arrayOf(WeekDay);
+const DateModifiers = _propTypes.default.objectOf(_propTypes.default.func);
+const ReactComponent = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]);
 const BpkCalendarGridPropTypes = {
   // Required
-  DateComponent: PropTypes.elementType.isRequired,
-  formatDateFull: PropTypes.func.isRequired,
-  month: PropTypes.instanceOf(Date).isRequired,
-  weekStartsOn: PropTypes.number.isRequired,
+  DateComponent: _propTypes.default.elementType.isRequired,
+  formatDateFull: _propTypes.default.func.isRequired,
+  month: _propTypes.default.instanceOf(Date).isRequired,
+  weekStartsOn: _propTypes.default.number.isRequired,
   // Optional
-  className: PropTypes.string,
-  cellClassName: PropTypes.string,
+  className: _propTypes.default.string,
+  cellClassName: _propTypes.default.string,
   dateModifiers: DateModifiers,
-  focusedDate: PropTypes.instanceOf(Date),
-  isKeyboardFocusable: PropTypes.bool,
-  markOutsideDays: PropTypes.bool,
-  markToday: PropTypes.bool,
-  maxDate: PropTypes.instanceOf(Date),
-  minDate: PropTypes.instanceOf(Date),
-  onDateClick: PropTypes.func,
-  onDateKeyDown: PropTypes.func,
-  preventKeyboardFocus: PropTypes.bool,
+  focusedDate: _propTypes.default.instanceOf(Date),
+  isKeyboardFocusable: _propTypes.default.bool,
+  markOutsideDays: _propTypes.default.bool,
+  markToday: _propTypes.default.bool,
+  maxDate: _propTypes.default.instanceOf(Date),
+  minDate: _propTypes.default.instanceOf(Date),
+  onDateClick: _propTypes.default.func,
+  onDateKeyDown: _propTypes.default.func,
+  preventKeyboardFocus: _propTypes.default.bool,
   selectionConfiguration: SelectionConfiguration,
-  ignoreOutsideDate: PropTypes.bool,
-  dateProps: PropTypes.object,
+  ignoreOutsideDate: _propTypes.default.bool,
+  dateProps: _propTypes.default.object
 };
-
+exports.BpkCalendarGridPropTypes = BpkCalendarGridPropTypes;
 const BpkCalendarDatePropTypes = {
   // Required
-  date: PropTypes.instanceOf(Date).isRequired,
+  date: _propTypes.default.instanceOf(Date).isRequired,
   // Optional
-  className: PropTypes.string,
-  isBlocked: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isKeyboardFocusable: PropTypes.bool,
-  isOutside: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isToday: PropTypes.bool,
+  className: _propTypes.default.string,
+  isBlocked: _propTypes.default.bool,
+  isFocused: _propTypes.default.bool,
+  isKeyboardFocusable: _propTypes.default.bool,
+  isOutside: _propTypes.default.bool,
+  isSelected: _propTypes.default.bool,
+  isToday: _propTypes.default.bool,
   modifiers: DateModifiers,
-  onClick: PropTypes.func,
-  onDateKeyDown: PropTypes.func,
-  preventKeyboardFocus: PropTypes.bool,
-  selectionType: PropTypes.oneOf(Object.keys(SELECTION_TYPES)),
-  style: PropTypes.object,
-};
-
-export {
-  CALENDAR_SELECTION_TYPE,
-  BpkCalendarGridPropTypes,
-  BpkCalendarDatePropTypes,
+  onClick: _propTypes.default.func,
+  onDateKeyDown: _propTypes.default.func,
+  preventKeyboardFocus: _propTypes.default.bool,
+  selectionType: _propTypes.default.oneOf(Object.keys(SELECTION_TYPES)),
+  style: _propTypes.default.object
 };
-
-export default {
+exports.BpkCalendarDatePropTypes = BpkCalendarDatePropTypes;
+var _default = {
   SelectionConfiguration,
   DateModifiers,
   DaysOfWeek,
   ReactComponent,
   WeekDay,
-  WeekDayKey,
+  WeekDayKey
 };
+exports.default = _default;

package/{bpk-scrim-utils/index.ts → bpk-component-calendar/src/custom-proptypes.js}

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CALENDAR_SELECTION_TYPE = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,9 +22,8 @@
  * limitations under the License.
  */
 
-import withScrim from './src/withScrim';
-
-export { withScrim };
-export default {
-  withScrim,
+const CALENDAR_SELECTION_TYPE = {
+  single: 'single',
+  range: 'range'
 };
+exports.CALENDAR_SELECTION_TYPE = CALENDAR_SELECTION_TYPE;

package/bpk-component-calendar/src/date-utils.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "addDays", {
+  enumerable: true,
+  get: function () {
+    return _addDays.default;
+  }
+});
+Object.defineProperty(exports, "addMonths", {
+  enumerable: true,
+  get: function () {
+    return _addMonths.default;
+  }
+});
+exports.dateToBoundaries = void 0;
+exports.daysInMonth = daysInMonth;
+Object.defineProperty(exports, "differenceInCalendarMonths", {
+  enumerable: true,
+  get: function () {
+    return _differenceInCalendarMonths.default;
+  }
+});
+Object.defineProperty(exports, "endOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _endOfMonth.default;
+  }
+});
+Object.defineProperty(exports, "format", {
+  enumerable: true,
+  get: function () {
+    return _format.default;
+  }
+});
+exports.formatIsoMonth = exports.formatIsoDate = void 0;
+exports.getCalendarMonthWeeks = getCalendarMonthWeeks;
+Object.defineProperty(exports, "getDay", {
+  enumerable: true,
+  get: function () {
+    return _getDay.default;
+  }
+});
+exports.getFirstDayOfWeekend = getFirstDayOfWeekend;
+exports.getLastDayOfWeekend = getLastDayOfWeekend;
+exports.getMonthRange = getMonthRange;
+exports.getMonthsInRange = getMonthsInRange;
+Object.defineProperty(exports, "isAfter", {
+  enumerable: true,
+  get: function () {
+    return _isAfter.default;
+  }
+});
+Object.defineProperty(exports, "isBefore", {
+  enumerable: true,
+  get: function () {
+    return _isBefore.default;
+  }
+});
+Object.defineProperty(exports, "isSameDay", {
+  enumerable: true,
+  get: function () {
+    return _isSameDay.default;
+  }
+});
+Object.defineProperty(exports, "isSameMonth", {
+  enumerable: true,
+  get: function () {
+    return _isSameMonth.default;
+  }
+});
+Object.defineProperty(exports, "isSameWeek", {
+  enumerable: true,
+  get: function () {
+    return _isSameWeek.default;
+  }
+});
+Object.defineProperty(exports, "isSaturday", {
+  enumerable: true,
+  get: function () {
+    return _isSaturday.default;
+  }
+});
+Object.defineProperty(exports, "isSunday", {
+  enumerable: true,
+  get: function () {
+    return _isSunday.default;
+  }
+});
+Object.defineProperty(exports, "isToday", {
+  enumerable: true,
+  get: function () {
+    return _isToday.default;
+  }
+});
+Object.defineProperty(exports, "isWithinRange", {
+  enumerable: true,
+  get: function () {
+    return _isWithinInterval.default;
+  }
+});
+Object.defineProperty(exports, "lastDayOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _lastDayOfMonth.default;
+  }
+});
+exports.setMonthYear = exports.parseIsoDate = exports.orderDaysOfWeek = void 0;
+Object.defineProperty(exports, "startOfDay", {
+  enumerable: true,
+  get: function () {
+    return _startOfDay.default;
+  }
+});
+Object.defineProperty(exports, "startOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _startOfMonth.default;
+  }
+});
+var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth"));
+var _endOfMonth = _interopRequireDefault(require("date-fns/endOfMonth"));
+var _lastDayOfMonth = _interopRequireDefault(require("date-fns/lastDayOfMonth"));
+var _getDay = _interopRequireDefault(require("date-fns/getDay"));
+var _isWithinInterval = _interopRequireDefault(require("date-fns/isWithinInterval"));
+var _isToday = _interopRequireDefault(require("date-fns/isToday"));
+var _isSaturday = _interopRequireDefault(require("date-fns/isSaturday"));
+var _isSunday = _interopRequireDefault(require("date-fns/isSunday"));
+var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
+var _isSameWeek = _interopRequireDefault(require("date-fns/isSameWeek"));
+var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth"));
+var _isBefore = _interopRequireDefault(require("date-fns/isBefore"));
+var _isAfter = _interopRequireDefault(require("date-fns/isAfter"));
+var _differenceInCalendarMonths = _interopRequireDefault(require("date-fns/differenceInCalendarMonths"));
+var _addDays = _interopRequireDefault(require("date-fns/addDays"));
+var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
+var _setMonth = _interopRequireDefault(require("date-fns/setMonth"));
+var _setYear = _interopRequireDefault(require("date-fns/setYear"));
+var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
+var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
+var _format = _interopRequireDefault(require("date-fns/format"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const ONE_MINUTE_IN_MS = 60 * 1000;
+const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
+
+// TODO: Update to use date-fns functions.
+// see: https://github.com/date-fns/date-fns/issues/571 and https://bugs.webkit.org/show_bug.cgi?id=188001
+//
+// Safari has a problem with DST when the transition occurrs during midnight. To test set your timezone
+// to BRT (Brasilia) and type new Date(2018, 10, 4) on Safari's console.
+// It will return `Nov 03 2018 23:00:00` whereas Chrome and Firefox return `Nov 04 2018 01:00:00`.
+//
+// To go aroud this problem we're mostly avoiding date objects and using UTC when that's not
+// possible.
+
+function utc(year, month, date) {
+  return new Date(Date.UTC(year, month, date));
+}
+function daysInMonth(year, month) {
+  // Gets the last day of the month specified
+  return new Date(year, month + 1, 0).getDate();
+}
+function dateAtStartOfDay(year, month, day) {
+  const date = utc(year, month, day);
+  const tzOffset = date.getTimezoneOffset();
+
+  // Date is utc so we add/subtract the timezone hours.
+  // Using setTime is consistent on every browser so we have the same result everywhere.
+  date.setTime(date.getTime() + tzOffset * ONE_MINUTE_IN_MS);
+
+  // Bug in Safari that only occurs when the transition from/to DST is during midnight (e.g. Brazil and Chile).
+  // We want the exact day provided in the arguments so we adjust accordingly.
+  if (day !== date.getDate() && date.getHours() === 23) {
+    date.setTime(date.getTime() + ONE_HOUR_IN_MS);
+  }
+  return date;
+}
+function addDay(year, month, day) {
+  const date = utc(year, month, day);
+  date.setUTCDate(date.getUTCDate() + 1);
+  return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
+}
+function startOfWeek(year, month, day, weekStartsOn) {
+  const date = utc(year, month, day);
+  const weekDay = date.getUTCDay();
+  const diff = (weekDay < weekStartsOn ? 7 : 0) + weekDay - weekStartsOn;
+  date.setUTCDate(date.getUTCDate() - diff);
+  return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
+}
+function getCalendarMonthWeeks(date, weekStartsOn) {
+  let [year, month, day] = startOfWeek(date.getFullYear(), date.getMonth(), 1, weekStartsOn);
+  const weeksInMonth = [];
+  for (let i = 0; i < 6; i += 1) {
+    const currWeek = [];
+    for (let j = 0; j < 7; j += 1) {
+      currWeek.push(dateAtStartOfDay(year, month, day));
+      [year, month, day] = addDay(year, month, day);
+    }
+    weeksInMonth.push(currWeek);
+  }
+  return weeksInMonth;
+}
+function getLastDayOfWeekend(daysOfWeek) {
+  const weekend = daysOfWeek.map(day => day.isWeekend);
+  if (weekend[0] && weekend[6]) {
+    // weekend stretches over turn the of the week
+    return daysOfWeek[weekend.indexOf(false) - 1].index;
+  }
+  return daysOfWeek[weekend.lastIndexOf(true)].index;
+}
+function getFirstDayOfWeekend(daysOfWeek) {
+  const weekend = daysOfWeek.map(day => day.isWeekend);
+  if (weekend[0] && weekend[6]) {
+    // weekend stretches over turn the of the week
+    return daysOfWeek[weekend.lastIndexOf(false) + 1].index;
+  }
+  return daysOfWeek[weekend.indexOf(true)].index;
+}
+const orderDaysOfWeek = (daysOfWeek, weekStartsOn) => {
+  // Sorted in [sun, mon, ..., sat]
+  const sortedDaysOfWeek = daysOfWeek.slice().sort((a, b) => a.index - b.index);
+  // Ordered according to weekStartsOn, e.g. [mon, tue, ..., sun]
+  return [...sortedDaysOfWeek.slice(weekStartsOn), ...sortedDaysOfWeek.slice(0, weekStartsOn)];
+};
+
+/* Takes arbitrary dates and returns the beginning of the first and enf of the last month containing these dates  */
+exports.orderDaysOfWeek = orderDaysOfWeek;
+function getMonthRange(from, to) {
+  return {
+    min: (0, _startOfMonth.default)(from),
+    max: (0, _endOfMonth.default)(to)
+  };
+}
+function getMonthsInRange(from, to) {
+  const {
+    max,
+    min
+  } = getMonthRange(from, to);
+  let currentMonth = (0, _startOfMonth.default)(from);
+  const monthsInRange = [];
+  while ((0, _isWithinInterval.default)(currentMonth, {
+    start: min,
+    end: max
+  })) {
+    monthsInRange.push(currentMonth);
+    currentMonth = (0, _addMonths.default)(currentMonth, 1);
+  }
+  return monthsInRange;
+}
+
+/*
+Adjusts a date, if necessary, to fit within a range.
+If date passed in is null, it'll return the minimum date.
+*/
+const dateToBoundaries = (date, minDate, maxDate) => {
+  if (!date) {
+    return minDate;
+  }
+  if ((0, _isWithinInterval.default)(date, {
+    start: minDate,
+    end: maxDate
+  })) {
+    return date;
+  }
+  if ((0, _isBefore.default)(date, minDate)) {
+    return minDate;
+  }
+  return maxDate;
+};
+exports.dateToBoundaries = dateToBoundaries;
+const setMonthYear = (date, newMonth, newYear) => {
+  const dateToUse = date || new Date(newYear, newMonth, 1);
+  return (0, _setYear.default)((0, _setMonth.default)(dateToUse, newMonth), newYear);
+};
+exports.setMonthYear = setMonthYear;
+const parseIsoDate = _parseISO.default;
+exports.parseIsoDate = parseIsoDate;
+const formatIsoDate = date => (0, _format.default)(date, 'yyyy-MM-dd');
+exports.formatIsoDate = formatIsoDate;
+const formatIsoMonth = date => (0, _format.default)(date, 'yyyy-MM');
+exports.formatIsoMonth = formatIsoMonth;

package/{bpk-component-banner-alert/src/themeAttributes-test.ts → bpk-component-calendar/src/themeAttributes.js}

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,16 +21,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { themeAttributes } from '../index';
-
-describe('rating component themeAttributes', () => {
-  it('exports the expected attributes', () => {
-    expect(themeAttributes).toEqual([
-      'bannerAlertPrimaryColor',
-      'bannerAlertSuccessColor',
-      'bannerAlertWarnColor',
-      'bannerAlertErrorColor',
-    ]);
-  });
-});
+var _default = ['calendarDateTextColor', 'calendarDateTextHoverColor', 'calendarDateTextActiveColor', 'calendarDateTextFocusColor', 'calendarDateTextSelectedColor', 'calendarDateSelectedBackgroundColor', 'calendarDateFocusedBorderColor', 'calendarNudgerIconColor', 'calendarNudgerIconHoverColor', 'calendarNudgerIconActiveColor'];
+exports.default = _default;

package/bpk-component-calendar/src/{utils.ts → utils.js}

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTransitionEndSupported = exports.getTransformStyles = exports.getCalendarGridWidth = void 0;
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,47 +23,35 @@
  * limitations under the License.
  */
 
-import {
-  calendarDaySize,
-  calendarDaySpacing, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
-
-const splitToken = (value: string) => {
+const splitToken = value => {
   const match = value.match(CSS_UNIT_REGEX);
   if (!match) {
-    throw new Error(
-      `Invalid token value. Expecting a valid css unit, got ${value}`,
-    );
+    throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
   }
   const [_, val, unit] = match; // eslint-disable-line no-unused-vars
   return [parseFloat(val), unit];
 };
-
-export const getCalendarGridWidth = (multiplier = 1) => {
-  const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
-  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
-
+const getCalendarGridWidth = (multiplier = 1) => {
+  const [sizeValue, sizeUnit] = splitToken(_base.calendarDaySize);
+  const [spacingValue, spacingUnit] = splitToken(_base.calendarDaySpacing);
   if (sizeUnit !== spacingUnit) {
-    throw new Error(
-      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
-    );
+    throw new Error(`'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`);
   }
   // @ts-expect-error TS doesn't correctly read the size and spacing values type i.e. numbers as returned by parseFloat
   const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
-
-export const getTransformStyles = (transformValue: string) => {
+exports.getCalendarGridWidth = getCalendarGridWidth;
+const getTransformStyles = transformValue => {
   const transform = `translateX(${transformValue})`;
   return {
     transform,
     msTransform: transform,
     MozTransform: transform,
-    WebkitTransform: transform,
+    WebkitTransform: transform
   };
 };
-
-export const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+exports.getTransformStyles = getTransformStyles;
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+exports.isTransitionEndSupported = isTransitionEndSupported;