@quintype/arrow 3.15.1-fallback-support.1 → 3.15.1-perf.1

package/rows/FourStorySlider/index.js

@@ -0,0 +1,4743 @@
+import React, { useContext, createContext, useState, useRef, useEffect } from 'react';
+import { connect, useSelector, useDispatch } from 'react-redux';
+import { Link, ResponsiveImage, ResponsiveHeroImage, LinkBase, collectionToStories } from '@quintype/components';
+import PropTypes, { PropTypes as PropTypes$1, number, string, func, array, bool } from 'prop-types';
+import Timeago from 'react-timeago';
+import { utcToZonedTime, format } from 'date-fns-tz';
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+var isArray_1 = isArray;
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = _freeGlobal || freeSelf || Function('return this')();
+
+var _root = root;
+
+/** Built-in value references. */
+var Symbol$1 = _root.Symbol;
+
+var _Symbol = Symbol$1;
+
+/** Used for built-in method references. */
+var objectProto$4 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$4.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag(value) {
+  var isOwn = hasOwnProperty$3.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag;
+
+/** Used for built-in method references. */
+var objectProto$3 = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto$3.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? _getRawTag(value)
+    : _objectToString(value);
+}
+
+var _baseGetTag = baseGetTag;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol;
+
+/** Used to match property names within property paths. */
+var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
+    reIsPlainProp = /^\w*$/;
+
+/**
+ * Checks if `value` is a property name and not a property path.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @param {Object} [object] The object to query keys on.
+ * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
+ */
+function isKey(value, object) {
+  if (isArray_1(value)) {
+    return false;
+  }
+  var type = typeof value;
+  if (type == 'number' || type == 'symbol' || type == 'boolean' ||
+      value == null || isSymbol_1(value)) {
+    return true;
+  }
+  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
+    (object != null && value in Object(object));
+}
+
+var _isKey = isKey;
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject;
+
+/** `Object#toString` result references. */
+var asyncTag = '[object AsyncFunction]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    proxyTag = '[object Proxy]';
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  if (!isObject_1(value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = _baseGetTag(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+var isFunction_1 = isFunction;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData = _root['__core-js_shared__'];
+
+var _coreJsData = coreJsData;
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = (function() {
+  var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
+  return uid ? ('Symbol(src)_1.' + uid) : '';
+}());
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked(func) {
+  return !!maskSrcKey && (maskSrcKey in func);
+}
+
+var _isMasked = isMasked;
+
+/** Used for built-in method references. */
+var funcProto$1 = Function.prototype;
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString$1 = funcProto$1.toString;
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to convert.
+ * @returns {string} Returns the source code.
+ */
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString$1.call(func);
+    } catch (e) {}
+    try {
+      return (func + '');
+    } catch (e) {}
+  }
+  return '';
+}
+
+var _toSource = toSource;
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+    objectProto$2 = Object.prototype;
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' +
+  funcToString.call(hasOwnProperty$2).replace(reRegExpChar, '\\$&')
+  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
+);
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative(value) {
+  if (!isObject_1(value) || _isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(_toSource(value));
+}
+
+var _baseIsNative = baseIsNative;
+
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function getValue(object, key) {
+  return object == null ? undefined : object[key];
+}
+
+var _getValue = getValue;
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative(object, key) {
+  var value = _getValue(object, key);
+  return _baseIsNative(value) ? value : undefined;
+}
+
+var _getNative = getNative;
+
+/* Built-in method references that are verified to be native. */
+var nativeCreate = _getNative(Object, 'create');
+
+var _nativeCreate = nativeCreate;
+
+/**
+ * Removes all key-value entries from the hash.
+ *
+ * @private
+ * @name clear
+ * @memberOf Hash
+ */
+function hashClear() {
+  this.__data__ = _nativeCreate ? _nativeCreate(null) : {};
+  this.size = 0;
+}
+
+var _hashClear = hashClear;
+
+/**
+ * Removes `key` and its value from the hash.
+ *
+ * @private
+ * @name delete
+ * @memberOf Hash
+ * @param {Object} hash The hash to modify.
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function hashDelete(key) {
+  var result = this.has(key) && delete this.__data__[key];
+  this.size -= result ? 1 : 0;
+  return result;
+}
+
+var _hashDelete = hashDelete;
+
+/** Used to stand-in for `undefined` hash values. */
+var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+
+/**
+ * Gets the hash value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf Hash
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function hashGet(key) {
+  var data = this.__data__;
+  if (_nativeCreate) {
+    var result = data[key];
+    return result === HASH_UNDEFINED$1 ? undefined : result;
+  }
+  return hasOwnProperty$1.call(data, key) ? data[key] : undefined;
+}
+
+var _hashGet = hashGet;
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Checks if a hash value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf Hash
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function hashHas(key) {
+  var data = this.__data__;
+  return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
+}
+
+var _hashHas = hashHas;
+
+/** Used to stand-in for `undefined` hash values. */
+var HASH_UNDEFINED = '__lodash_hash_undefined__';
+
+/**
+ * Sets the hash `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf Hash
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the hash instance.
+ */
+function hashSet(key, value) {
+  var data = this.__data__;
+  this.size += this.has(key) ? 0 : 1;
+  data[key] = (_nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
+  return this;
+}
+
+var _hashSet = hashSet;
+
+/**
+ * Creates a hash object.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function Hash(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+// Add methods to `Hash`.
+Hash.prototype.clear = _hashClear;
+Hash.prototype['delete'] = _hashDelete;
+Hash.prototype.get = _hashGet;
+Hash.prototype.has = _hashHas;
+Hash.prototype.set = _hashSet;
+
+var _Hash = Hash;
+
+/**
+ * Removes all key-value entries from the list cache.
+ *
+ * @private
+ * @name clear
+ * @memberOf ListCache
+ */
+function listCacheClear() {
+  this.__data__ = [];
+  this.size = 0;
+}
+
+var _listCacheClear = listCacheClear;
+
+/**
+ * Performs a
+ * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+ * comparison between two values to determine if they are equivalent.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.eq(object, object);
+ * // => true
+ *
+ * _.eq(object, other);
+ * // => false
+ *
+ * _.eq('a', 'a');
+ * // => true
+ *
+ * _.eq('a', Object('a'));
+ * // => false
+ *
+ * _.eq(NaN, NaN);
+ * // => true
+ */
+function eq(value, other) {
+  return value === other || (value !== value && other !== other);
+}
+
+var eq_1 = eq;
+
+/**
+ * Gets the index at which the `key` is found in `array` of key-value pairs.
+ *
+ * @private
+ * @param {Array} array The array to inspect.
+ * @param {*} key The key to search for.
+ * @returns {number} Returns the index of the matched value, else `-1`.
+ */
+function assocIndexOf(array, key) {
+  var length = array.length;
+  while (length--) {
+    if (eq_1(array[length][0], key)) {
+      return length;
+    }
+  }
+  return -1;
+}
+
+var _assocIndexOf = assocIndexOf;
+
+/** Used for built-in method references. */
+var arrayProto = Array.prototype;
+
+/** Built-in value references. */
+var splice = arrayProto.splice;
+
+/**
+ * Removes `key` and its value from the list cache.
+ *
+ * @private
+ * @name delete
+ * @memberOf ListCache
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function listCacheDelete(key) {
+  var data = this.__data__,
+      index = _assocIndexOf(data, key);
+
+  if (index < 0) {
+    return false;
+  }
+  var lastIndex = data.length - 1;
+  if (index == lastIndex) {
+    data.pop();
+  } else {
+    splice.call(data, index, 1);
+  }
+  --this.size;
+  return true;
+}
+
+var _listCacheDelete = listCacheDelete;
+
+/**
+ * Gets the list cache value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf ListCache
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function listCacheGet(key) {
+  var data = this.__data__,
+      index = _assocIndexOf(data, key);
+
+  return index < 0 ? undefined : data[index][1];
+}
+
+var _listCacheGet = listCacheGet;
+
+/**
+ * Checks if a list cache value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf ListCache
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function listCacheHas(key) {
+  return _assocIndexOf(this.__data__, key) > -1;
+}
+
+var _listCacheHas = listCacheHas;
+
+/**
+ * Sets the list cache `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf ListCache
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the list cache instance.
+ */
+function listCacheSet(key, value) {
+  var data = this.__data__,
+      index = _assocIndexOf(data, key);
+
+  if (index < 0) {
+    ++this.size;
+    data.push([key, value]);
+  } else {
+    data[index][1] = value;
+  }
+  return this;
+}
+
+var _listCacheSet = listCacheSet;
+
+/**
+ * Creates an list cache object.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function ListCache(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+// Add methods to `ListCache`.
+ListCache.prototype.clear = _listCacheClear;
+ListCache.prototype['delete'] = _listCacheDelete;
+ListCache.prototype.get = _listCacheGet;
+ListCache.prototype.has = _listCacheHas;
+ListCache.prototype.set = _listCacheSet;
+
+var _ListCache = ListCache;
+
+/* Built-in method references that are verified to be native. */
+var Map = _getNative(_root, 'Map');
+
+var _Map = Map;
+
+/**
+ * Removes all key-value entries from the map.
+ *
+ * @private
+ * @name clear
+ * @memberOf MapCache
+ */
+function mapCacheClear() {
+  this.size = 0;
+  this.__data__ = {
+    'hash': new _Hash,
+    'map': new (_Map || _ListCache),
+    'string': new _Hash
+  };
+}
+
+var _mapCacheClear = mapCacheClear;
+
+/**
+ * Checks if `value` is suitable for use as unique object key.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
+ */
+function isKeyable(value) {
+  var type = typeof value;
+  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
+    ? (value !== '__proto__')
+    : (value === null);
+}
+
+var _isKeyable = isKeyable;
+
+/**
+ * Gets the data for `map`.
+ *
+ * @private
+ * @param {Object} map The map to query.
+ * @param {string} key The reference key.
+ * @returns {*} Returns the map data.
+ */
+function getMapData(map, key) {
+  var data = map.__data__;
+  return _isKeyable(key)
+    ? data[typeof key == 'string' ? 'string' : 'hash']
+    : data.map;
+}
+
+var _getMapData = getMapData;
+
+/**
+ * Removes `key` and its value from the map.
+ *
+ * @private
+ * @name delete
+ * @memberOf MapCache
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function mapCacheDelete(key) {
+  var result = _getMapData(this, key)['delete'](key);
+  this.size -= result ? 1 : 0;
+  return result;
+}
+
+var _mapCacheDelete = mapCacheDelete;
+
+/**
+ * Gets the map value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf MapCache
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function mapCacheGet(key) {
+  return _getMapData(this, key).get(key);
+}
+
+var _mapCacheGet = mapCacheGet;
+
+/**
+ * Checks if a map value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf MapCache
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function mapCacheHas(key) {
+  return _getMapData(this, key).has(key);
+}
+
+var _mapCacheHas = mapCacheHas;
+
+/**
+ * Sets the map `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf MapCache
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the map cache instance.
+ */
+function mapCacheSet(key, value) {
+  var data = _getMapData(this, key),
+      size = data.size;
+
+  data.set(key, value);
+  this.size += data.size == size ? 0 : 1;
+  return this;
+}
+
+var _mapCacheSet = mapCacheSet;
+
+/**
+ * Creates a map cache object to store key-value pairs.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function MapCache(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+// Add methods to `MapCache`.
+MapCache.prototype.clear = _mapCacheClear;
+MapCache.prototype['delete'] = _mapCacheDelete;
+MapCache.prototype.get = _mapCacheGet;
+MapCache.prototype.has = _mapCacheHas;
+MapCache.prototype.set = _mapCacheSet;
+
+var _MapCache = MapCache;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a function that memoizes the result of `func`. If `resolver` is
+ * provided, it determines the cache key for storing the result based on the
+ * arguments provided to the memoized function. By default, the first argument
+ * provided to the memoized function is used as the map cache key. The `func`
+ * is invoked with the `this` binding of the memoized function.
+ *
+ * **Note:** The cache is exposed as the `cache` property on the memoized
+ * function. Its creation may be customized by replacing the `_.memoize.Cache`
+ * constructor with one whose instances implement the
+ * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
+ * method interface of `clear`, `delete`, `get`, `has`, and `set`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to have its output memoized.
+ * @param {Function} [resolver] The function to resolve the cache key.
+ * @returns {Function} Returns the new memoized function.
+ * @example
+ *
+ * var object = { 'a': 1, 'b': 2 };
+ * var other = { 'c': 3, 'd': 4 };
+ *
+ * var values = _.memoize(_.values);
+ * values(object);
+ * // => [1, 2]
+ *
+ * values(other);
+ * // => [3, 4]
+ *
+ * object.a = 2;
+ * values(object);
+ * // => [1, 2]
+ *
+ * // Modify the result cache.
+ * values.cache.set(object, ['a', 'b']);
+ * values(object);
+ * // => ['a', 'b']
+ *
+ * // Replace `_.memoize.Cache`.
+ * _.memoize.Cache = WeakMap;
+ */
+function memoize(func, resolver) {
+  if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  var memoized = function() {
+    var args = arguments,
+        key = resolver ? resolver.apply(this, args) : args[0],
+        cache = memoized.cache;
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    var result = func.apply(this, args);
+    memoized.cache = cache.set(key, result) || cache;
+    return result;
+  };
+  memoized.cache = new (memoize.Cache || _MapCache);
+  return memoized;
+}
+
+// Expose `MapCache`.
+memoize.Cache = _MapCache;
+
+var memoize_1 = memoize;
+
+/** Used as the maximum memoize cache size. */
+var MAX_MEMOIZE_SIZE = 500;
+
+/**
+ * A specialized version of `_.memoize` which clears the memoized function's
+ * cache when it exceeds `MAX_MEMOIZE_SIZE`.
+ *
+ * @private
+ * @param {Function} func The function to have its output memoized.
+ * @returns {Function} Returns the new memoized function.
+ */
+function memoizeCapped(func) {
+  var result = memoize_1(func, function(key) {
+    if (cache.size === MAX_MEMOIZE_SIZE) {
+      cache.clear();
+    }
+    return key;
+  });
+
+  var cache = result.cache;
+  return result;
+}
+
+var _memoizeCapped = memoizeCapped;
+
+/** Used to match property names within property paths. */
+var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
+
+/** Used to match backslashes in property paths. */
+var reEscapeChar = /\\(\\)?/g;
+
+/**
+ * Converts `string` to a property path array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the property path array.
+ */
+var stringToPath = _memoizeCapped(function(string) {
+  var result = [];
+  if (string.charCodeAt(0) === 46 /* . */) {
+    result.push('');
+  }
+  string.replace(rePropName, function(match, number, quote, subString) {
+    result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match));
+  });
+  return result;
+});
+
+var _stringToPath = stringToPath;
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+function arrayMap(array, iteratee) {
+  var index = -1,
+      length = array == null ? 0 : array.length,
+      result = Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+
+var _arrayMap = arrayMap;
+
+/** Used as references for various `Number` constants. */
+var INFINITY$1 = 1 / 0;
+
+/** Used to convert symbols to primitives and strings. */
+var symbolProto = _Symbol ? _Symbol.prototype : undefined,
+    symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+/**
+ * The base implementation of `_.toString` which doesn't convert nullish
+ * values to empty strings.
+ *
+ * @private
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ */
+function baseToString(value) {
+  // Exit early for strings to avoid a performance hit in some environments.
+  if (typeof value == 'string') {
+    return value;
+  }
+  if (isArray_1(value)) {
+    // Recursively convert values (susceptible to call stack limits).
+    return _arrayMap(value, baseToString) + '';
+  }
+  if (isSymbol_1(value)) {
+    return symbolToString ? symbolToString.call(value) : '';
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY$1) ? '-0' : result;
+}
+
+var _baseToString = baseToString;
+
+/**
+ * Converts `value` to a string. An empty string is returned for `null`
+ * and `undefined` values. The sign of `-0` is preserved.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ * @example
+ *
+ * _.toString(null);
+ * // => ''
+ *
+ * _.toString(-0);
+ * // => '-0'
+ *
+ * _.toString([1, 2, 3]);
+ * // => '1,2,3'
+ */
+function toString(value) {
+  return value == null ? '' : _baseToString(value);
+}
+
+var toString_1 = toString;
+
+/**
+ * Casts `value` to a path array if it's not one.
+ *
+ * @private
+ * @param {*} value The value to inspect.
+ * @param {Object} [object] The object to query keys on.
+ * @returns {Array} Returns the cast property path array.
+ */
+function castPath(value, object) {
+  if (isArray_1(value)) {
+    return value;
+  }
+  return _isKey(value, object) ? [value] : _stringToPath(toString_1(value));
+}
+
+var _castPath = castPath;
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0;
+
+/**
+ * Converts `value` to a string key if it's not a string or symbol.
+ *
+ * @private
+ * @param {*} value The value to inspect.
+ * @returns {string|symbol} Returns the key.
+ */
+function toKey(value) {
+  if (typeof value == 'string' || isSymbol_1(value)) {
+    return value;
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+var _toKey = toKey;
+
+/**
+ * The base implementation of `_.get` without support for default values.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path of the property to get.
+ * @returns {*} Returns the resolved value.
+ */
+function baseGet(object, path) {
+  path = _castPath(path, object);
+
+  var index = 0,
+      length = path.length;
+
+  while (object != null && index < length) {
+    object = object[_toKey(path[index++])];
+  }
+  return (index && index == length) ? object : undefined;
+}
+
+var _baseGet = baseGet;
+
+/**
+ * Gets the value at `path` of `object`. If the resolved value is
+ * `undefined`, the `defaultValue` is returned in its place.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.7.0
+ * @category Object
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path of the property to get.
+ * @param {*} [defaultValue] The value returned for `undefined` resolved values.
+ * @returns {*} Returns the resolved value.
+ * @example
+ *
+ * var object = { 'a': [{ 'b': { 'c': 3 } }] };
+ *
+ * _.get(object, 'a[0].b.c');
+ * // => 3
+ *
+ * _.get(object, ['a', '0', 'b', 'c']);
+ * // => 3
+ *
+ * _.get(object, 'a.b.c', 'default');
+ * // => 'default'
+ */
+function get(object, path, defaultValue) {
+  var result = object == null ? undefined : _baseGet(object, path);
+  return result === undefined ? defaultValue : result;
+}
+
+var get_1 = get;
+
+var optionsDefaults_1 = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var optionsDefaults = {
+  attributeNames: {
+    styleName: 'className'
+  },
+  generateScopedName: '[path]___[name]__[local]___[hash:base64:5]',
+  handleMissingStyleName: 'throw'
+};
+var _default = optionsDefaults;
+exports["default"] = _default;
+
+
+});
+
+var getClassName = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _optionsDefaults = _interopRequireDefault(optionsDefaults_1);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var isNamespacedStyleName = function isNamespacedStyleName(styleName) {
+  return styleName.indexOf('.') !== -1;
+};
+
+var handleError = function handleError(message, handleMissingStyleName) {
+  if (handleMissingStyleName === 'throw') {
+    throw new Error(message);
+  } else if (handleMissingStyleName === 'warn') {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+
+  return null;
+};
+
+var getClassNameForNamespacedStyleName = function getClassNameForNamespacedStyleName(styleName, styleModuleImportMap, handleMissingStyleNameOption) {
+  // Note:
+  // Do not use the desctructing syntax with Babel.
+  // Desctructing adds _slicedToArray helper.
+  var styleNameParts = styleName.split('.');
+  var importName = styleNameParts[0];
+  var moduleName = styleNameParts[1];
+  var handleMissingStyleName = handleMissingStyleNameOption || _optionsDefaults["default"].handleMissingStyleName;
+
+  if (!moduleName) {
+    return handleError('Invalid style name: ' + styleName, handleMissingStyleName);
+  }
+
+  if (!styleModuleImportMap[importName]) {
+    return handleError('CSS module import does not exist: ' + importName, handleMissingStyleName);
+  }
+
+  if (!styleModuleImportMap[importName][moduleName]) {
+    return handleError('CSS module does not exist: ' + moduleName, handleMissingStyleName);
+  }
+
+  return styleModuleImportMap[importName][moduleName];
+};
+
+var getClassNameFromMultipleImports = function getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleNameOption) {
+  var handleMissingStyleName = handleMissingStyleNameOption || _optionsDefaults["default"].handleMissingStyleName;
+  var importKeysWithMatches = Object.keys(styleModuleImportMap).map(function (importKey) {
+    return styleModuleImportMap[importKey][styleName] && importKey;
+  }).filter(function (importKey) {
+    return importKey;
+  });
+
+  if (importKeysWithMatches.length > 1) {
+    throw new Error('Cannot resolve styleName "' + styleName + '" because it is present in multiple imports:' + '\n\n\t' + importKeysWithMatches.join('\n\t') + '\n\nYou can resolve this by using a named import, e.g:' + '\n\n\timport foo from "' + importKeysWithMatches[0] + '";' + '\n\t<div styleName="foo.' + styleName + '" />' + '\n\n');
+  }
+
+  if (importKeysWithMatches.length === 0) {
+    return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName);
+  }
+
+  return styleModuleImportMap[importKeysWithMatches[0]][styleName];
+};
+
+var _default = function _default(styleNameValue, styleModuleImportMap, options) {
+  var styleModuleImportMapKeys = Object.keys(styleModuleImportMap);
+
+  var _ref = options || {},
+      _ref$handleMissingSty = _ref.handleMissingStyleName,
+      handleMissingStyleName = _ref$handleMissingSty === void 0 ? _optionsDefaults["default"].handleMissingStyleName : _ref$handleMissingSty,
+      _ref$autoResolveMulti = _ref.autoResolveMultipleImports,
+      autoResolveMultipleImports = _ref$autoResolveMulti === void 0 ? _optionsDefaults["default"].autoResolveMultipleImports : _ref$autoResolveMulti;
+
+  if (!styleNameValue) {
+    return '';
+  }
+
+  return styleNameValue.split(' ').filter(function (styleName) {
+    return styleName;
+  }).map(function (styleName) {
+    if (isNamespacedStyleName(styleName)) {
+      return getClassNameForNamespacedStyleName(styleName, styleModuleImportMap, handleMissingStyleName);
+    }
+
+    if (styleModuleImportMapKeys.length === 0) {
+      throw new Error('Cannot use styleName attribute for style name \'' + styleName + '\' without importing at least one stylesheet.');
+    }
+
+    if (styleModuleImportMapKeys.length > 1) {
+      if (!autoResolveMultipleImports) {
+        throw new Error('Cannot use anonymous style name \'' + styleName + '\' with more than one stylesheet import without setting \'autoResolveMultipleImports\' to true.');
+      }
+
+      return getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleName);
+    }
+
+    var styleModuleMap = styleModuleImportMap[styleModuleImportMapKeys[0]];
+
+    if (!styleModuleMap[styleName]) {
+      return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName);
+    }
+
+    return styleModuleMap[styleName];
+  }).filter(function (className) {
+    // Remove any styles which could not be found (if handleMissingStyleName === 'ignore')
+    return className;
+  }).join(' ');
+};
+
+exports["default"] = _default;
+
+
+});
+
+var _getClassName = /*@__PURE__*/getDefaultExportFromCjs(getClassName);
+
+var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
+
+var StateProvider = function StateProvider(RowComponent) {
+  return function (props) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/prop-types
+      React.createElement(StateContext.Provider, {
+        value: props.config
+      }, /*#__PURE__*/React.createElement(RowComponent, props))
+    );
+  };
+};
+var useStateValue = function useStateValue() {
+  return useContext(StateContext);
+};
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+createCommonjsModule(function (module) {
+var runtime = (function (exports) {
+
+  var Op = Object.prototype;
+  var hasOwn = Op.hasOwnProperty;
+  var undefined$1; // More compressible than void 0.
+  var $Symbol = typeof Symbol === "function" ? Symbol : {};
+  var iteratorSymbol = $Symbol.iterator || "@@iterator";
+  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
+  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+
+  function define(obj, key, value) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+    return obj[key];
+  }
+  try {
+    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
+    define({}, "");
+  } catch (err) {
+    define = function(obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
+    var generator = Object.create(protoGenerator.prototype);
+    var context = new Context(tryLocsList || []);
+
+    // The ._invoke method unifies the implementations of the .next,
+    // .throw, and .return methods.
+    generator._invoke = makeInvokeMethod(innerFn, self, context);
+
+    return generator;
+  }
+  exports.wrap = wrap;
+
+  // Try/catch helper to minimize deoptimizations. Returns a completion
+  // record like context.tryEntries[i].completion. This interface could
+  // have been (and was previously) designed to take a closure to be
+  // invoked without arguments, but in all the cases we care about we
+  // already have an existing method we want to call, so there's no need
+  // to create a new function object. We can even get away with assuming
+  // the method takes exactly one argument, since that happens to be true
+  // in every case, so we don't have to touch the arguments object. The
+  // only additional allocation required is the completion record, which
+  // has a stable shape and so hopefully should be cheap to allocate.
+  function tryCatch(fn, obj, arg) {
+    try {
+      return { type: "normal", arg: fn.call(obj, arg) };
+    } catch (err) {
+      return { type: "throw", arg: err };
+    }
+  }
+
+  var GenStateSuspendedStart = "suspendedStart";
+  var GenStateSuspendedYield = "suspendedYield";
+  var GenStateExecuting = "executing";
+  var GenStateCompleted = "completed";
+
+  // Returning this object from the innerFn has the same effect as
+  // breaking out of the dispatch switch statement.
+  var ContinueSentinel = {};
+
+  // Dummy constructor functions that we use as the .constructor and
+  // .constructor.prototype properties for functions that return Generator
+  // objects. For full spec compliance, you may wish to configure your
+  // minifier not to mangle the names of these two functions.
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+
+  // This is a polyfill for %IteratorPrototype% for environments that
+  // don't natively support it.
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+
+  var getProto = Object.getPrototypeOf;
+  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  if (NativeIteratorPrototype &&
+      NativeIteratorPrototype !== Op &&
+      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
+    // This environment has a native %IteratorPrototype%; use it instead
+    // of the polyfill.
+    IteratorPrototype = NativeIteratorPrototype;
+  }
+
+  var Gp = GeneratorFunctionPrototype.prototype =
+    Generator.prototype = Object.create(IteratorPrototype);
+  GeneratorFunction.prototype = GeneratorFunctionPrototype;
+  define(Gp, "constructor", GeneratorFunctionPrototype);
+  define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
+  GeneratorFunction.displayName = define(
+    GeneratorFunctionPrototype,
+    toStringTagSymbol,
+    "GeneratorFunction"
+  );
+
+  // Helper for defining the .next, .throw, and .return methods of the
+  // Iterator interface in terms of a single ._invoke method.
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function(method) {
+      define(prototype, method, function(arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  exports.isGeneratorFunction = function(genFun) {
+    var ctor = typeof genFun === "function" && genFun.constructor;
+    return ctor
+      ? ctor === GeneratorFunction ||
+        // For the native GeneratorFunction constructor, the best we can
+        // do is to check its .name property.
+        (ctor.displayName || ctor.name) === "GeneratorFunction"
+      : false;
+  };
+
+  exports.mark = function(genFun) {
+    if (Object.setPrototypeOf) {
+      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
+    } else {
+      genFun.__proto__ = GeneratorFunctionPrototype;
+      define(genFun, toStringTagSymbol, "GeneratorFunction");
+    }
+    genFun.prototype = Object.create(Gp);
+    return genFun;
+  };
+
+  // Within the body of any async function, `await x` is transformed to
+  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
+  // `hasOwn.call(value, "__await")` to determine if the yielded value is
+  // meant to be awaited.
+  exports.awrap = function(arg) {
+    return { __await: arg };
+  };
+
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if (record.type === "throw") {
+        reject(record.arg);
+      } else {
+        var result = record.arg;
+        var value = result.value;
+        if (value &&
+            typeof value === "object" &&
+            hasOwn.call(value, "__await")) {
+          return PromiseImpl.resolve(value.__await).then(function(value) {
+            invoke("next", value, resolve, reject);
+          }, function(err) {
+            invoke("throw", err, resolve, reject);
+          });
+        }
+
+        return PromiseImpl.resolve(value).then(function(unwrapped) {
+          // When a yielded Promise is resolved, its final value becomes
+          // the .value of the Promise<{value,done}> result for the
+          // current iteration.
+          result.value = unwrapped;
+          resolve(result);
+        }, function(error) {
+          // If a rejected Promise was yielded, throw the rejection back
+          // into the async generator function so it can be handled there.
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+    }
+
+    var previousPromise;
+
+    function enqueue(method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function(resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+
+      return previousPromise =
+        // If enqueue has been called before, then we want to wait until
+        // all previous Promises have been resolved before calling invoke,
+        // so that results are always delivered in the correct order. If
+        // enqueue has not been called before, then it is important to
+        // call invoke immediately, without waiting on a callback to fire,
+        // so that the async generator function has the opportunity to do
+        // any necessary setup in a predictable way. This predictability
+        // is why the Promise constructor synchronously invokes its
+        // executor callback, and why async functions synchronously
+        // execute code before the first await. Since we implement simple
+        // async functions in terms of async generators, it is especially
+        // important to get this right, even though it requires care.
+        previousPromise ? previousPromise.then(
+          callInvokeWithMethodAndArg,
+          // Avoid propagating failures to Promises returned by later
+          // invocations of the iterator.
+          callInvokeWithMethodAndArg
+        ) : callInvokeWithMethodAndArg();
+    }
+
+    // Define the unified helper method that is used to implement .next,
+    // .throw, and .return (see defineIteratorMethods).
+    this._invoke = enqueue;
+  }
+
+  defineIteratorMethods(AsyncIterator.prototype);
+  define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  });
+  exports.AsyncIterator = AsyncIterator;
+
+  // Note that simple async functions are implemented on top of
+  // AsyncIterator objects; they just return a Promise for the value of
+  // the final result produced by the iterator.
+  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    if (PromiseImpl === void 0) PromiseImpl = Promise;
+
+    var iter = new AsyncIterator(
+      wrap(innerFn, outerFn, self, tryLocsList),
+      PromiseImpl
+    );
+
+    return exports.isGeneratorFunction(outerFn)
+      ? iter // If outerFn is a generator, return the full iterator.
+      : iter.next().then(function(result) {
+          return result.done ? result.value : iter.next();
+        });
+  };
+
+  function makeInvokeMethod(innerFn, self, context) {
+    var state = GenStateSuspendedStart;
+
+    return function invoke(method, arg) {
+      if (state === GenStateExecuting) {
+        throw new Error("Generator is already running");
+      }
+
+      if (state === GenStateCompleted) {
+        if (method === "throw") {
+          throw arg;
+        }
+
+        // Be forgiving, per 25.3.3.3.3 of the spec:
+        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+        return doneResult();
+      }
+
+      context.method = method;
+      context.arg = arg;
+
+      while (true) {
+        var delegate = context.delegate;
+        if (delegate) {
+          var delegateResult = maybeInvokeDelegate(delegate, context);
+          if (delegateResult) {
+            if (delegateResult === ContinueSentinel) continue;
+            return delegateResult;
+          }
+        }
+
+        if (context.method === "next") {
+          // Setting context._sent for legacy support of Babel's
+          // function.sent implementation.
+          context.sent = context._sent = context.arg;
+
+        } else if (context.method === "throw") {
+          if (state === GenStateSuspendedStart) {
+            state = GenStateCompleted;
+            throw context.arg;
+          }
+
+          context.dispatchException(context.arg);
+
+        } else if (context.method === "return") {
+          context.abrupt("return", context.arg);
+        }
+
+        state = GenStateExecuting;
+
+        var record = tryCatch(innerFn, self, context);
+        if (record.type === "normal") {
+          // If an exception is thrown from innerFn, we leave state ===
+          // GenStateExecuting and loop back for another invocation.
+          state = context.done
+            ? GenStateCompleted
+            : GenStateSuspendedYield;
+
+          if (record.arg === ContinueSentinel) {
+            continue;
+          }
+
+          return {
+            value: record.arg,
+            done: context.done
+          };
+
+        } else if (record.type === "throw") {
+          state = GenStateCompleted;
+          // Dispatch the exception by looping back around to the
+          // context.dispatchException(context.arg) call above.
+          context.method = "throw";
+          context.arg = record.arg;
+        }
+      }
+    };
+  }
+
+  // Call delegate.iterator[context.method](context.arg) and handle the
+  // result, either by returning a { value, done } result from the
+  // delegate iterator, or by modifying context.method and context.arg,
+  // setting context.delegate to null, and returning the ContinueSentinel.
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+    if (method === undefined$1) {
+      // A .throw or .return when the delegate iterator has no .throw
+      // method always terminates the yield* loop.
+      context.delegate = null;
+
+      if (context.method === "throw") {
+        // Note: ["return"] must be used for ES3 parsing compatibility.
+        if (delegate.iterator["return"]) {
+          // If the delegate iterator has a return method, give it a
+          // chance to clean up.
+          context.method = "return";
+          context.arg = undefined$1;
+          maybeInvokeDelegate(delegate, context);
+
+          if (context.method === "throw") {
+            // If maybeInvokeDelegate(context) changed context.method from
+            // "return" to "throw", let that override the TypeError below.
+            return ContinueSentinel;
+          }
+        }
+
+        context.method = "throw";
+        context.arg = new TypeError(
+          "The iterator does not provide a 'throw' method");
+      }
+
+      return ContinueSentinel;
+    }
+
+    var record = tryCatch(method, delegate.iterator, context.arg);
+
+    if (record.type === "throw") {
+      context.method = "throw";
+      context.arg = record.arg;
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    var info = record.arg;
+
+    if (! info) {
+      context.method = "throw";
+      context.arg = new TypeError("iterator result is not an object");
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    if (info.done) {
+      // Assign the result of the finished delegate to the temporary
+      // variable specified by delegate.resultName (see delegateYield).
+      context[delegate.resultName] = info.value;
+
+      // Resume execution at the desired location (see delegateYield).
+      context.next = delegate.nextLoc;
+
+      // If context.method was "throw" but the delegate handled the
+      // exception, let the outer generator proceed normally. If
+      // context.method was "next", forget context.arg since it has been
+      // "consumed" by the delegate iterator. If context.method was
+      // "return", allow the original .return call to continue in the
+      // outer generator.
+      if (context.method !== "return") {
+        context.method = "next";
+        context.arg = undefined$1;
+      }
+
+    } else {
+      // Re-yield the result returned by the delegate method.
+      return info;
+    }
+
+    // The delegate iterator is finished, so forget it and continue with
+    // the outer generator.
+    context.delegate = null;
+    return ContinueSentinel;
+  }
+
+  // Define Generator.prototype.{next,throw,return} in terms of the
+  // unified ._invoke helper method.
+  defineIteratorMethods(Gp);
+
+  define(Gp, toStringTagSymbol, "Generator");
+
+  // A Generator should always return itself as the iterator object when the
+  // @@iterator function is called on it. Some browsers' implementations of the
+  // iterator prototype chain incorrectly implement this, causing the Generator
+  // object to not be returned from this call. This ensures that doesn't happen.
+  // See https://github.com/facebook/regenerator/issues/274 for more details.
+  define(Gp, iteratorSymbol, function() {
+    return this;
+  });
+
+  define(Gp, "toString", function() {
+    return "[object Generator]";
+  });
+
+  function pushTryEntry(locs) {
+    var entry = { tryLoc: locs[0] };
+
+    if (1 in locs) {
+      entry.catchLoc = locs[1];
+    }
+
+    if (2 in locs) {
+      entry.finallyLoc = locs[2];
+      entry.afterLoc = locs[3];
+    }
+
+    this.tryEntries.push(entry);
+  }
+
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal";
+    delete record.arg;
+    entry.completion = record;
+  }
+
+  function Context(tryLocsList) {
+    // The root entry object (effectively a try statement without a catch
+    // or a finally block) gives us a place to store values thrown from
+    // locations where there is no enclosing try statement.
+    this.tryEntries = [{ tryLoc: "root" }];
+    tryLocsList.forEach(pushTryEntry, this);
+    this.reset(true);
+  }
+
+  exports.keys = function(object) {
+    var keys = [];
+    for (var key in object) {
+      keys.push(key);
+    }
+    keys.reverse();
+
+    // Rather than returning an object with a next method, we keep
+    // things simple and return the next function itself.
+    return function next() {
+      while (keys.length) {
+        var key = keys.pop();
+        if (key in object) {
+          next.value = key;
+          next.done = false;
+          return next;
+        }
+      }
+
+      // To avoid creating an additional object, we just hang the .value
+      // and .done properties off the next function object itself. This
+      // also ensures that the minifier will not anonymize the function.
+      next.done = true;
+      return next;
+    };
+  };
+
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) {
+        return iteratorMethod.call(iterable);
+      }
+
+      if (typeof iterable.next === "function") {
+        return iterable;
+      }
+
+      if (!isNaN(iterable.length)) {
+        var i = -1, next = function next() {
+          while (++i < iterable.length) {
+            if (hasOwn.call(iterable, i)) {
+              next.value = iterable[i];
+              next.done = false;
+              return next;
+            }
+          }
+
+          next.value = undefined$1;
+          next.done = true;
+
+          return next;
+        };
+
+        return next.next = next;
+      }
+    }
+
+    // Return an iterator with no values.
+    return { next: doneResult };
+  }
+  exports.values = values;
+
+  function doneResult() {
+    return { value: undefined$1, done: true };
+  }
+
+  Context.prototype = {
+    constructor: Context,
+
+    reset: function(skipTempReset) {
+      this.prev = 0;
+      this.next = 0;
+      // Resetting context._sent for legacy support of Babel's
+      // function.sent implementation.
+      this.sent = this._sent = undefined$1;
+      this.done = false;
+      this.delegate = null;
+
+      this.method = "next";
+      this.arg = undefined$1;
+
+      this.tryEntries.forEach(resetTryEntry);
+
+      if (!skipTempReset) {
+        for (var name in this) {
+          // Not sure about the optimal order of these conditions:
+          if (name.charAt(0) === "t" &&
+              hasOwn.call(this, name) &&
+              !isNaN(+name.slice(1))) {
+            this[name] = undefined$1;
+          }
+        }
+      }
+    },
+
+    stop: function() {
+      this.done = true;
+
+      var rootEntry = this.tryEntries[0];
+      var rootRecord = rootEntry.completion;
+      if (rootRecord.type === "throw") {
+        throw rootRecord.arg;
+      }
+
+      return this.rval;
+    },
+
+    dispatchException: function(exception) {
+      if (this.done) {
+        throw exception;
+      }
+
+      var context = this;
+      function handle(loc, caught) {
+        record.type = "throw";
+        record.arg = exception;
+        context.next = loc;
+
+        if (caught) {
+          // If the dispatched exception was caught by a catch block,
+          // then let that catch block handle the exception normally.
+          context.method = "next";
+          context.arg = undefined$1;
+        }
+
+        return !! caught;
+      }
+
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        var record = entry.completion;
+
+        if (entry.tryLoc === "root") {
+          // Exception thrown outside of any try block that could handle
+          // it, so set the completion value of the entire function to
+          // throw the exception.
+          return handle("end");
+        }
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc");
+          var hasFinally = hasOwn.call(entry, "finallyLoc");
+
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            } else if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            }
+
+          } else if (hasFinally) {
+            if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else {
+            throw new Error("try statement without catch or finally");
+          }
+        }
+      }
+    },
+
+    abrupt: function(type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev &&
+            hasOwn.call(entry, "finallyLoc") &&
+            this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+
+      if (finallyEntry &&
+          (type === "break" ||
+           type === "continue") &&
+          finallyEntry.tryLoc <= arg &&
+          arg <= finallyEntry.finallyLoc) {
+        // Ignore the finally entry if control is not jumping to a
+        // location outside the try/catch block.
+        finallyEntry = null;
+      }
+
+      var record = finallyEntry ? finallyEntry.completion : {};
+      record.type = type;
+      record.arg = arg;
+
+      if (finallyEntry) {
+        this.method = "next";
+        this.next = finallyEntry.finallyLoc;
+        return ContinueSentinel;
+      }
+
+      return this.complete(record);
+    },
+
+    complete: function(record, afterLoc) {
+      if (record.type === "throw") {
+        throw record.arg;
+      }
+
+      if (record.type === "break" ||
+          record.type === "continue") {
+        this.next = record.arg;
+      } else if (record.type === "return") {
+        this.rval = this.arg = record.arg;
+        this.method = "return";
+        this.next = "end";
+      } else if (record.type === "normal" && afterLoc) {
+        this.next = afterLoc;
+      }
+
+      return ContinueSentinel;
+    },
+
+    finish: function(finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) {
+          this.complete(entry.completion, entry.afterLoc);
+          resetTryEntry(entry);
+          return ContinueSentinel;
+        }
+      }
+    },
+
+    "catch": function(tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if (record.type === "throw") {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+
+      // The context.catch method must only be called with a location
+      // argument that corresponds to a known catch block.
+      throw new Error("illegal catch attempt");
+    },
+
+    delegateYield: function(iterable, resultName, nextLoc) {
+      this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      };
+
+      if (this.method === "next") {
+        // Deliberately forget the last sent value so that we don't
+        // accidentally pass it on to the delegate.
+        this.arg = undefined$1;
+      }
+
+      return ContinueSentinel;
+    }
+  };
+
+  // Regardless of whether this script is executing as a CommonJS module
+  // or not, return the runtime object so that we can declare the variable
+  // regeneratorRuntime in the outer scope, which allows this module to be
+  // injected easily by `bin/regenerator --include-runtime script.js`.
+  return exports;
+
+}(
+  // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+  module.exports 
+));
+
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  // This module should not be running in strict mode, so the above
+  // assignment should always work unless something is misconfigured. Just
+  // in case runtime.js accidentally runs in strict mode, in modern engines
+  // we can explicitly access globalThis. In older engines we can escape
+  // strict mode using a global Function call. This could conceivably fail
+  // if a Content Security Policy forbids using Function, but in that case
+  // the proper solution is to fix the accidental strict mode problem. If
+  // you've misconfigured your bundler to force strict mode and applied a
+  // CSP to forbid Function, and you're not willing to fix either of those
+  // problems, please detail your unique predicament in a GitHub issue.
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+});
+
+/**
+ * A specialized version of `_.reduce` for arrays without support for
+ * iteratee shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @param {*} [accumulator] The initial value.
+ * @param {boolean} [initAccum] Specify using the first element of `array` as
+ *  the initial value.
+ * @returns {*} Returns the accumulated value.
+ */
+function arrayReduce(array, iteratee, accumulator, initAccum) {
+  var index = -1,
+      length = array == null ? 0 : array.length;
+
+  if (initAccum && length) {
+    accumulator = array[++index];
+  }
+  while (++index < length) {
+    accumulator = iteratee(accumulator, array[index], index, array);
+  }
+  return accumulator;
+}
+
+var _arrayReduce = arrayReduce;
+
+/**
+ * The base implementation of `_.propertyOf` without support for deep paths.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Function} Returns the new accessor function.
+ */
+function basePropertyOf(object) {
+  return function(key) {
+    return object == null ? undefined : object[key];
+  };
+}
+
+var _basePropertyOf = basePropertyOf;
+
+/** Used to map Latin Unicode letters to basic Latin letters. */
+var deburredLetters = {
+  // Latin-1 Supplement block.
+  '\xc0': 'A',  '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A',
+  '\xe0': 'a',  '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a',
+  '\xc7': 'C',  '\xe7': 'c',
+  '\xd0': 'D',  '\xf0': 'd',
+  '\xc8': 'E',  '\xc9': 'E', '\xca': 'E', '\xcb': 'E',
+  '\xe8': 'e',  '\xe9': 'e', '\xea': 'e', '\xeb': 'e',
+  '\xcc': 'I',  '\xcd': 'I', '\xce': 'I', '\xcf': 'I',
+  '\xec': 'i',  '\xed': 'i', '\xee': 'i', '\xef': 'i',
+  '\xd1': 'N',  '\xf1': 'n',
+  '\xd2': 'O',  '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O',
+  '\xf2': 'o',  '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o',
+  '\xd9': 'U',  '\xda': 'U', '\xdb': 'U', '\xdc': 'U',
+  '\xf9': 'u',  '\xfa': 'u', '\xfb': 'u', '\xfc': 'u',
+  '\xdd': 'Y',  '\xfd': 'y', '\xff': 'y',
+  '\xc6': 'Ae', '\xe6': 'ae',
+  '\xde': 'Th', '\xfe': 'th',
+  '\xdf': 'ss',
+  // Latin Extended-A block.
+  '\u0100': 'A',  '\u0102': 'A', '\u0104': 'A',
+  '\u0101': 'a',  '\u0103': 'a', '\u0105': 'a',
+  '\u0106': 'C',  '\u0108': 'C', '\u010a': 'C', '\u010c': 'C',
+  '\u0107': 'c',  '\u0109': 'c', '\u010b': 'c', '\u010d': 'c',
+  '\u010e': 'D',  '\u0110': 'D', '\u010f': 'd', '\u0111': 'd',
+  '\u0112': 'E',  '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E',
+  '\u0113': 'e',  '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e',
+  '\u011c': 'G',  '\u011e': 'G', '\u0120': 'G', '\u0122': 'G',
+  '\u011d': 'g',  '\u011f': 'g', '\u0121': 'g', '\u0123': 'g',
+  '\u0124': 'H',  '\u0126': 'H', '\u0125': 'h', '\u0127': 'h',
+  '\u0128': 'I',  '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I',
+  '\u0129': 'i',  '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i',
+  '\u0134': 'J',  '\u0135': 'j',
+  '\u0136': 'K',  '\u0137': 'k', '\u0138': 'k',
+  '\u0139': 'L',  '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L',
+  '\u013a': 'l',  '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l',
+  '\u0143': 'N',  '\u0145': 'N', '\u0147': 'N', '\u014a': 'N',
+  '\u0144': 'n',  '\u0146': 'n', '\u0148': 'n', '\u014b': 'n',
+  '\u014c': 'O',  '\u014e': 'O', '\u0150': 'O',
+  '\u014d': 'o',  '\u014f': 'o', '\u0151': 'o',
+  '\u0154': 'R',  '\u0156': 'R', '\u0158': 'R',
+  '\u0155': 'r',  '\u0157': 'r', '\u0159': 'r',
+  '\u015a': 'S',  '\u015c': 'S', '\u015e': 'S', '\u0160': 'S',
+  '\u015b': 's',  '\u015d': 's', '\u015f': 's', '\u0161': 's',
+  '\u0162': 'T',  '\u0164': 'T', '\u0166': 'T',
+  '\u0163': 't',  '\u0165': 't', '\u0167': 't',
+  '\u0168': 'U',  '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U',
+  '\u0169': 'u',  '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u',
+  '\u0174': 'W',  '\u0175': 'w',
+  '\u0176': 'Y',  '\u0177': 'y', '\u0178': 'Y',
+  '\u0179': 'Z',  '\u017b': 'Z', '\u017d': 'Z',
+  '\u017a': 'z',  '\u017c': 'z', '\u017e': 'z',
+  '\u0132': 'IJ', '\u0133': 'ij',
+  '\u0152': 'Oe', '\u0153': 'oe',
+  '\u0149': "'n", '\u017f': 's'
+};
+
+/**
+ * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A
+ * letters to basic Latin letters.
+ *
+ * @private
+ * @param {string} letter The matched letter to deburr.
+ * @returns {string} Returns the deburred letter.
+ */
+var deburrLetter = _basePropertyOf(deburredLetters);
+
+var _deburrLetter = deburrLetter;
+
+/** Used to match Latin Unicode letters (excluding mathematical operators). */
+var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
+
+/** Used to compose unicode character classes. */
+var rsComboMarksRange$1 = '\\u0300-\\u036f',
+    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
+    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1;
+
+/** Used to compose unicode capture groups. */
+var rsCombo$1 = '[' + rsComboRange$1 + ']';
+
+/**
+ * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and
+ * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).
+ */
+var reComboMark = RegExp(rsCombo$1, 'g');
+
+/**
+ * Deburrs `string` by converting
+ * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)
+ * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)
+ * letters to basic Latin letters and removing
+ * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category String
+ * @param {string} [string=''] The string to deburr.
+ * @returns {string} Returns the deburred string.
+ * @example
+ *
+ * _.deburr('déjà vu');
+ * // => 'deja vu'
+ */
+function deburr(string) {
+  string = toString_1(string);
+  return string && string.replace(reLatin, _deburrLetter).replace(reComboMark, '');
+}
+
+var deburr_1 = deburr;
+
+/** Used to match words composed of alphanumeric characters. */
+var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+
+/**
+ * Splits an ASCII `string` into an array of its words.
+ *
+ * @private
+ * @param {string} The string to inspect.
+ * @returns {Array} Returns the words of `string`.
+ */
+function asciiWords(string) {
+  return string.match(reAsciiWord) || [];
+}
+
+var _asciiWords = asciiWords;
+
+/** Used to detect strings that need a more robust regexp to match words. */
+var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;
+
+/**
+ * Checks if `string` contains a word composed of Unicode symbols.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {boolean} Returns `true` if a word is found, else `false`.
+ */
+function hasUnicodeWord(string) {
+  return reHasUnicodeWord.test(string);
+}
+
+var _hasUnicodeWord = hasUnicodeWord;
+
+/** Used to compose unicode character classes. */
+var rsAstralRange = '\\ud800-\\udfff',
+    rsComboMarksRange = '\\u0300-\\u036f',
+    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
+    rsDingbatRange = '\\u2700-\\u27bf',
+    rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff',
+    rsMathOpRange = '\\xac\\xb1\\xd7\\xf7',
+    rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf',
+    rsPunctuationRange = '\\u2000-\\u206f',
+    rsSpaceRange = ' \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000',
+    rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde',
+    rsVarRange = '\\ufe0e\\ufe0f',
+    rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
+
+/** Used to compose unicode capture groups. */
+var rsApos$1 = "['\u2019]",
+    rsBreak = '[' + rsBreakRange + ']',
+    rsCombo = '[' + rsComboRange + ']',
+    rsDigits = '\\d+',
+    rsDingbat = '[' + rsDingbatRange + ']',
+    rsLower = '[' + rsLowerRange + ']',
+    rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',
+    rsFitz = '\\ud83c[\\udffb-\\udfff]',
+    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+    rsNonAstral = '[^' + rsAstralRange + ']',
+    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+    rsUpper = '[' + rsUpperRange + ']',
+    rsZWJ = '\\u200d';
+
+/** Used to compose unicode regexes. */
+var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',
+    rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',
+    rsOptContrLower = '(?:' + rsApos$1 + '(?:d|ll|m|re|s|t|ve))?',
+    rsOptContrUpper = '(?:' + rsApos$1 + '(?:D|LL|M|RE|S|T|VE))?',
+    reOptMod = rsModifier + '?',
+    rsOptVar = '[' + rsVarRange + ']?',
+    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+    rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])',
+    rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])',
+    rsSeq = rsOptVar + reOptMod + rsOptJoin,
+    rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq;
+
+/** Used to match complex or compound words. */
+var reUnicodeWord = RegExp([
+  rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',
+  rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',
+  rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,
+  rsUpper + '+' + rsOptContrUpper,
+  rsOrdUpper,
+  rsOrdLower,
+  rsDigits,
+  rsEmoji
+].join('|'), 'g');
+
+/**
+ * Splits a Unicode `string` into an array of its words.
+ *
+ * @private
+ * @param {string} The string to inspect.
+ * @returns {Array} Returns the words of `string`.
+ */
+function unicodeWords(string) {
+  return string.match(reUnicodeWord) || [];
+}
+
+var _unicodeWords = unicodeWords;
+
+/**
+ * Splits `string` into an array of its words.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category String
+ * @param {string} [string=''] The string to inspect.
+ * @param {RegExp|string} [pattern] The pattern to match words.
+ * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
+ * @returns {Array} Returns the words of `string`.
+ * @example
+ *
+ * _.words('fred, barney, & pebbles');
+ * // => ['fred', 'barney', 'pebbles']
+ *
+ * _.words('fred, barney, & pebbles', /[^, ]+/g);
+ * // => ['fred', 'barney', '&', 'pebbles']
+ */
+function words(string, pattern, guard) {
+  string = toString_1(string);
+  pattern = guard ? undefined : pattern;
+
+  if (pattern === undefined) {
+    return _hasUnicodeWord(string) ? _unicodeWords(string) : _asciiWords(string);
+  }
+  return string.match(pattern) || [];
+}
+
+var words_1 = words;
+
+/** Used to compose unicode capture groups. */
+var rsApos = "['\u2019]";
+
+/** Used to match apostrophes. */
+var reApos = RegExp(rsApos, 'g');
+
+/**
+ * Creates a function like `_.camelCase`.
+ *
+ * @private
+ * @param {Function} callback The function to combine each word.
+ * @returns {Function} Returns the new compounder function.
+ */
+function createCompounder(callback) {
+  return function(string) {
+    return _arrayReduce(words_1(deburr_1(string).replace(reApos, '')), callback, '');
+  };
+}
+
+var _createCompounder = createCompounder;
+
+/**
+ * Converts `string`, as space separated words, to upper case.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category String
+ * @param {string} [string=''] The string to convert.
+ * @returns {string} Returns the upper cased string.
+ * @example
+ *
+ * _.upperCase('--foo-bar');
+ * // => 'FOO BAR'
+ *
+ * _.upperCase('fooBar');
+ * // => 'FOO BAR'
+ *
+ * _.upperCase('__foo_bar__');
+ * // => 'FOO BAR'
+ */
+var upperCase = _createCompounder(function(result, word, index) {
+  return result + (index ? ' ' : '') + word.toUpperCase();
+});
+
+var upperCase_1 = upperCase;
+
+/**
+ * Converts `string`, as space separated words, to lower case.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category String
+ * @param {string} [string=''] The string to convert.
+ * @returns {string} Returns the lower cased string.
+ * @example
+ *
+ * _.lowerCase('--Foo-Bar--');
+ * // => 'foo bar'
+ *
+ * _.lowerCase('fooBar');
+ * // => 'foo bar'
+ *
+ * _.lowerCase('__FOO_BAR__');
+ * // => 'foo bar'
+ */
+var lowerCase = _createCompounder(function(result, word, index) {
+  return result + (index ? ' ' : '') + word.toLowerCase();
+});
+
+var lowerCase_1 = lowerCase;
+
+function truncate() {
+  var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var ellipsis = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var putEllipsis = ellipsis ? " ..." : "";
+  return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
+}
+var timestampToFormat = function timestampToFormat(value, unit, suffix, timestamp) {
+  var config = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _config$showTime = config.showTime,
+      showTime = _config$showTime === void 0 ? false : _config$showTime,
+      _config$isTimeFirst = config.isTimeFirst,
+      isTimeFirst = _config$isTimeFirst === void 0 ? false : _config$isTimeFirst,
+      _config$isUpperCase = config.isUpperCase,
+      isUpperCase = _config$isUpperCase === void 0 ? false : _config$isUpperCase,
+      _config$disableMeridi = config.disableMeridiem,
+      disableMeridiem = _config$disableMeridi === void 0 ? false : _config$disableMeridi,
+      _config$timeFormat = config.timeFormat,
+      timeFormat = _config$timeFormat === void 0 ? "12hours" : _config$timeFormat;
+  var monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  var dateTime = new Date(timestamp);
+  var date = dateTime.getDate().toString().padStart(2, 0);
+  var month = monthList[dateTime.getMonth()];
+  var localizedMonth = month;
+
+  if (isUpperCase) {
+    localizedMonth = upperCase_1(month);
+  }
+
+  var year = dateTime.getFullYear();
+  var localizedMeridiem = config.localizedMeridiem,
+      localizedMonths = config.localizedMonths,
+      _config$direction = config.direction,
+      direction = _config$direction === void 0 ? "ltr" : _config$direction;
+  var time = formatAMPM(timestamp, timeFormat);
+  var timeWithLocalizedMeridiem = time;
+  var timetoShow;
+
+  if (localizedMonths) {
+    localizedMonth = get_1(localizedMonths, [lowerCase_1(month)]) || month;
+  }
+
+  if (localizedMeridiem) {
+    var isAm = time.includes("am");
+    var _localizedMeridiem$am = localizedMeridiem.am,
+        am = _localizedMeridiem$am === void 0 ? "am" : _localizedMeridiem$am,
+        _localizedMeridiem$pm = localizedMeridiem.pm,
+        pm = _localizedMeridiem$pm === void 0 ? "pm" : _localizedMeridiem$pm;
+    timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
+  }
+
+  if (direction === "rtl") {
+    timetoShow = showTime ? "".concat(timeWithLocalizedMeridiem) : "";
+    return "".concat(date, " ").concat(localizedMonth, ", ").concat(year, " ").concat(timetoShow, " ");
+  } else {
+    if (disableMeridiem) {
+      return "".concat(localizedMonth, " ").concat(date, ", ").concat(year);
+    } else if (isTimeFirst) {
+      return "".concat(timeWithLocalizedMeridiem, ", ").concat(date, " ").concat(localizedMonth, " ").concat(year);
+    } else {
+      timetoShow = showTime ? ", ".concat(timeWithLocalizedMeridiem) : "";
+      return "".concat(date, " ").concat(localizedMonth, ", ").concat(year).concat(timetoShow);
+    }
+  }
+};
+function formatter(value, unit, suffix, date, config) {
+  var showDateForUnits = ["day", "week", "month", "year"]; // suffix here refers to ago
+  // unit here refers to seconds, minute, minutes,...
+
+  var localizedSuffix = get_1(config, ["localizedPublishTime", suffix]) || suffix;
+  var localizedUnitOfTime;
+
+  if (unit === "hour" && value > 23 || showDateForUnits.indexOf(unit) !== -1) {
+    return timestampToFormat(value, unit, suffix, date, config);
+  } else if (value > 1) {
+    localizedUnitOfTime = get_1(config, ["localizedPublishTime", "".concat(unit, "s")]) || "".concat(unit, "s");
+    return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix);
+  }
+
+  localizedUnitOfTime = get_1(config, ["localizedPublishTime", unit]) || unit;
+  return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix, " ");
+}
+
+function formatAMPM(timestamp) {
+  var timeFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "12hours";
+  var dateTime = new Date(timestamp);
+  var hours = dateTime.getHours();
+  var minutes = dateTime.getMinutes();
+  var ampm = hours >= 12 ? "pm" : "am";
+  hours = hours % 12;
+  hours = hours || 12;
+  minutes = minutes < 10 ? "0" + minutes : minutes;
+  var strTime = hours + ":" + minutes + " " + ampm;
+
+  if (timeFormat === "24hours") {
+    return dateTime.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+
+  return strTime;
+}
+
+var hexToRGB = function hexToRGB(hex) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  return {
+    r: r,
+    g: g,
+    b: b
+  };
+};
+var getLuminanceOfColor = function getLuminanceOfColor(hex) {
+  var _hexToRGB = hexToRGB(hex),
+      r = _hexToRGB.r,
+      g = _hexToRGB.g,
+      b = _hexToRGB.b;
+
+  return r * 0.299 + g * 0.587 + b * 0.114;
+};
+var rgbToHex = function rgbToHex() {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
+  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
+};
+var clientWidths = {
+  mobile: 767,
+  tablet: 1024
+};
+var clientWidth = function clientWidth(device) {
+  var foundDeviceWidth = get_1(clientWidths, device);
+
+  if (foundDeviceWidth) {
+    return get_1(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
+  }
+
+  return false;
+};
+var getTextColor = function getTextColor() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
+  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
+  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
+  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
+  return textColor;
+};
+function getNumberOfStoriesToShow(numberOfStoriesToShow) {
+  return numberOfStoriesToShow ? parseInt(numberOfStoriesToShow) : 1;
+}
+var getSlug = function getSlug(collection) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _config$magazineSlug = config.magazineSlug,
+      magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug,
+      _config$isArchivePage = config.isArchivePage,
+      isArchivePage = _config$isArchivePage === void 0 ? false : _config$isArchivePage;
+
+  if (isArchivePage) {
+    return "/magazine/archive/".concat(magazineSlug);
+  }
+
+  if (magazineSlug) {
+    return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
+  }
+
+  var isSection = collection.template === "section";
+
+  if (isSection) {
+    var sectionId = get_1(collection, ["metadata", "section", "0", "id"], "");
+    var sections = config.sections;
+    var section = sections && sections.find(function (section) {
+      return section.id === sectionId;
+    });
+    return section ? section["section-url"] : "/";
+  }
+
+  return "/collection/".concat(collection.slug);
+};
+function isExternalStory() {
+  var story = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _story$storyTemplate = story["story-template"],
+      storyTemplate = _story$storyTemplate === void 0 ? "" : _story$storyTemplate,
+      _story$metadata = story.metadata,
+      metadata = _story$metadata === void 0 ? {} : _story$metadata;
+  return storyTemplate === "news-elsewhere" ? get_1(metadata, ["reference-url"], "") : "";
+} // Adds target='_blank' attribute to anchor tags if not present
+var isEmpty = function isEmpty(value) {
+  return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
+  _typeof(value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
+};
+PropTypes.shape({
+  "sketches-host": PropTypes.string,
+  "cdn-name": PropTypes.string,
+  "cdn-image": PropTypes.string
+});
+PropTypes.shape({
+  headline: PropTypes.string,
+  "last-published-at": PropTypes.number,
+  subheadline: PropTypes.string
+});
+var getStoryUrl = function getStoryUrl(story) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return get_1(story, ["story-template"]) === "news-elsewhere" ? get_1(story, ["metadata", "reference-url"], "") : story.url || defaultValue;
+};
+var navigateTo = function navigateTo(dispatch) {
+  var url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  global.app.navigateToPage(dispatch, url);
+};
+var generateNavigateSlug = function generateNavigateSlug() {
+  var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var customUrlPath = arguments.length > 2 ? arguments[2] : undefined;
+
+  if (customUrlPath) {
+    return customUrlPath;
+  }
+
+  var _config$magazineSlug2 = config.magazineSlug,
+      magazineSlug = _config$magazineSlug2 === void 0 ? "" : _config$magazineSlug2,
+      _config$isArchivePage2 = config.isArchivePage,
+      isArchivePage = _config$isArchivePage2 === void 0 ? false : _config$isArchivePage2;
+
+  if (isArchivePage) {
+    return "/magazine/archive/".concat(magazineSlug);
+  }
+
+  if (magazineSlug) {
+    return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
+  }
+
+  if (collection) {
+    return getSlug(collection, config);
+  }
+
+  return "/";
+};
+var getTimeStamp = function getTimeStamp(date, _formatter) {
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var template = arguments.length > 3 ? arguments[3] : undefined;
+  var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+
+  if (timezone && template === "story") {
+    var zonedTime = timezone && utcToZonedTime(date, timezone);
+    var formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
+      timeZone: timezone
+    });
+    var timeStamp = timestampToFormat("", "", "", date, config);
+    return /*#__PURE__*/React.createElement("time", {
+      dateTime: formatZonedTime
+    }, timeStamp);
+  }
+
+  return /*#__PURE__*/React.createElement(Timeago, {
+    date: date,
+    formatter: function formatter(value, unit, suffix, date) {
+      return _formatter(value, unit, suffix, date, config);
+    }
+  });
+};
+
+var _styleModuleImportMap$f = {
+  "./collection-name.m.css": {
+    "collection": "collection-name-m_collection__JD6sx",
+    "collection-borderLeft": "collection-name-m_collection-borderLeft__3Dznk",
+    "border-left": "collection-name-m_border-left__3_pYw",
+    "collection-borderBottomFull": "collection-name-m_collection-borderBottomFull__Dkq3K",
+    "collection-borderBottom": "collection-name-m_collection-borderBottom__2rdQM",
+    "collection-crossLine": "collection-name-m_collection-crossLine__1sIpN",
+    "border-bottom": "collection-name-m_border-bottom__1MnlV",
+    "dark": "collection-name-m_dark__nMe5H",
+    "light": "collection-name-m_light__1vFDN"
+  }
+};
+var CollectionNameBase = function CollectionNameBase(_ref) {
+  var _ref$collectionNameBo = _ref.collectionNameBorderColor,
+      collectionNameBorderColor = _ref$collectionNameBo === void 0 ? "" : _ref$collectionNameBo,
+      collection = _ref.collection,
+      config = _ref.config,
+      collectionNameTemplate = _ref.collectionNameTemplate,
+      headerLevel = _ref.headerLevel,
+      _ref$customCollection = _ref.customCollectionName,
+      customCollectionName = _ref$customCollection === void 0 ? "" : _ref$customCollection,
+      _ref$navigate = _ref.navigate,
+      navigate = _ref$navigate === void 0 ? true : _ref$navigate;
+  var collectionTitle = useStateValue() || {};
+  var showRowTitle = get_1(collectionTitle, ["showRowTitle"], true);
+  var supportedTemplates = ["borderLeft", "borderBottom", "crossLine", "borderBottomFull"];
+  var templateStyle = supportedTemplates.includes(collectionNameTemplate) ? " collection-".concat(collectionNameTemplate) : "";
+  var slug = navigate && collection && getSlug(collection, config) || "";
+  var collectionName = customCollectionName || collection.name || "";
+  var textColor = getTextColor(collectionTitle.theme);
+  var HeaderTag = "h" + headerLevel;
+  var CollectionNameBorderColor = rgbToHex(collectionNameBorderColor);
+  var borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull") ? "4px solid ".concat(CollectionNameBorderColor) : "";
+
+  var borderBottomStyle = function borderBottomStyle() {
+    return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React.createElement("div", {
+      className: "collection-name-m_border-bottom__1MnlV",
+      style: {
+        borderBottom: "4px solid ".concat(CollectionNameBorderColor)
+      }
+    }) : "";
+  };
+
+  var isMobile = clientWidth("mobile");
+
+  var getBorderHeight = function getBorderHeight() {
+    if (isMobile) {
+      switch (headerLevel) {
+        case "1":
+          return "32px";
+
+        case "2":
+          return "24px";
+
+        case "3":
+          return "20px";
+
+        case "4":
+          return "18px";
+
+        case "5":
+          return "16px";
+
+        case "6":
+          return "16px";
+
+        default:
+          return "20px";
+      }
+    }
+
+    switch (headerLevel) {
+      case "1":
+        return "40px";
+
+      case "2":
+        return "32px";
+
+      case "3":
+        return "24px";
+
+      case "4":
+        return "20px";
+
+      case "5":
+        return "18px";
+
+      case "6":
+        return "16px";
+
+      default:
+        return "24px";
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderBottom: borderBottomFullStyle
+    },
+    "data-test-id": "collection-name",
+    className: ("arr--collection-name arrow-component ".concat(templateStyle) ? "arr--collection-name arrow-component ".concat(templateStyle) + " " : "") + _getClassName("collection ".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$f)
+  }, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "arr-collection-name-border-left collection-name-m_border-left__3_pYw",
+    style: {
+      color: CollectionNameBorderColor,
+      fontSize: getBorderHeight()
+    }
+  }), slug && !slug.includes(undefined) ? /*#__PURE__*/React.createElement(Link, {
+    href: slug,
+    "aria-label": "collection-name"
+  }, /*#__PURE__*/React.createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React.createElement(HeaderTag, null, collectionName), borderBottomStyle()));
+};
+CollectionNameBase.propTypes = {
+  /** Collection name border color */
+  collectionNameBorderColor: PropTypes$1.string,
+
+  /** The Collection Object from the API response */
+  collection: PropTypes$1.object,
+
+  /** The publisher config from the API response */
+  config: PropTypes$1.object,
+
+  /** The style template for the component  */
+  collectionNameTemplate: PropTypes$1.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes$1.string,
+  customCollectionName: PropTypes$1.string,
+  navigate: PropTypes$1.bool
+};
+CollectionNameBase.defaultProps = {
+  collectionNameTemplate: "",
+  headerLevel: "3"
+};
+
+function mapStateToProps$1(state) {
+  return {
+    config: get_1(state, ["qt", "config"], {})
+  };
+}
+
+var CollectionName = connect(mapStateToProps$1)(CollectionNameBase);
+
+var CrownIcon = function CrownIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(0 2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21.043 19.553c0-.743-.601-1.344-1.344-1.344h-15.4a1.343 1.343 0 100 2.688h15.4c.743 0 1.344-.603 1.344-1.344zM1.598 8.673c.022 0 .042 0 .064-.003l2.131 7.713h16.411l2.132-7.713c.022 0 .041.003.063.003a1.599 1.599 0 10-1.52-1.108L17.025 9.82 12.882 2.95a1.599 1.599 0 10-1.765 0L6.976 9.82 3.121 7.565a1.599 1.599 0 10-1.523 1.107z"
+  }))))));
+};
+CrownIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var KeyIcon = function KeyIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "nonzero",
+    d: "M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z",
+    transform: "translate(0 5)"
+  })))));
+};
+KeyIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var LockIcon = function LockIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(3)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.692 9h-.747V6c0-3.31-2.681-6-5.978-6C5.67 0 2.989 2.69 2.989 6v3h-.747A2.249 2.249 0 000 11.25v10.5A2.249 2.249 0 002.242 24h13.45a2.249 2.249 0 002.242-2.25v-10.5A2.249 2.249 0 0015.692 9zM4.982 6c0-2.206 1.787-4 3.985-4s3.985 1.794 3.985 4v3h-7.97V6z"
+  }))))));
+};
+LockIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var StarIcon = function StarIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      _ref$positionTop = _ref.positionTop,
+      positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"
+  }))));
+};
+StarIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      color = _ref.color,
+      iconType = _ref.iconType,
+      positionTop = _ref.positionTop;
+
+  switch (iconType) {
+    case "crown":
+      return /*#__PURE__*/React.createElement(CrownIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    case "lock":
+      return /*#__PURE__*/React.createElement(LockIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    case "key":
+      return /*#__PURE__*/React.createElement(KeyIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(StarIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+  }
+};
+PremiumStoryIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  iconType: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+function LiveIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "live-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "25",
+    height: "24",
+    viewBox: "0 0 25 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#ff5858",
+    d: "M12 18a6 6 0 110-12 6 6 0 010 12zm0 2.5a8.5 8.5 0 110-17 8.5 8.5 0 010 17zm0-1a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
+  }));
+}
+
+var _styleModuleImportMap$e = {
+  "./headline.m.css": {
+    "wrapper": "headline-m_wrapper__3nUmh",
+    "headline": "headline-m_headline__3_NhV",
+    "dark": "headline-m_dark__en3hW",
+    "light": "headline-m_light__3lKJB"
+  }
+};
+var Headline = function Headline(_ref) {
+  var story = _ref.story,
+      headerLevel = _ref.headerLevel,
+      _ref$premiumStoryIcon = _ref.premiumStoryIconConfig,
+      premiumStoryIconConfig = _ref$premiumStoryIcon === void 0 ? {} : _ref$premiumStoryIcon,
+      isLink = _ref.isLink;
+  var configData = useStateValue() || {};
+  var _premiumStoryIconConf = premiumStoryIconConfig.iconColor,
+      iconColor = _premiumStoryIconConf === void 0 ? "#F7B500" : _premiumStoryIconConf,
+      _premiumStoryIconConf2 = premiumStoryIconConfig.iconStyle,
+      iconStyle = _premiumStoryIconConf2 === void 0 ? "star" : _premiumStoryIconConf2,
+      _premiumStoryIconConf3 = premiumStoryIconConfig.enablePremiumStoryIcon,
+      enablePremiumStoryIcon = _premiumStoryIconConf3 === void 0 ? false : _premiumStoryIconConf3,
+      _premiumStoryIconConf4 = premiumStoryIconConfig.showLiveIcon,
+      showLiveIcon = _premiumStoryIconConf4 === void 0 ? false : _premiumStoryIconConf4;
+  var alternateHeadline = get_1(story, ["alternative", "home", "default", "headline"]);
+  var premiumStory = enablePremiumStoryIcon && get_1(story, ["access"]) === "subscription";
+  var headline = alternateHeadline || story.headline;
+  var HeaderTag = "h" + headerLevel;
+
+  var positionHeadline = function positionHeadline() {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+
+      case 2:
+        return "2px";
+
+      case 3:
+        return "4px";
+
+      case 4:
+        return "5px";
+
+      default:
+        return "6px";
+    }
+  };
+
+  var textColor = getTextColor(configData.theme);
+  var wrapperClass = premiumStory ? "wrapper" : "";
+  var iconSize = "24px";
+  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "headline",
+    className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$e)
+  }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor,
+    iconType: iconStyle,
+    positionTop: positionHeadline()
+  }), isLink ? /*#__PURE__*/React.createElement(Link, {
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "headline"
+  }, /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$e)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$e)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
+};
+Headline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  premiumStoryIconConfig: PropTypes.shape({
+    iconColor: PropTypes.string,
+    iconType: PropTypes.string,
+    enablePremiumStoryIcon: PropTypes.bool
+  }),
+  isLink: PropTypes.bool
+};
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true
+};
+
+var _styleModuleImportMap$d = {
+  "./subheadline.m.css": {
+    "subheadline": "subheadline-m_subheadline__3fd7z",
+    "dark": "subheadline-m_dark__28u00",
+    "light": "subheadline-m_light__2YUOe"
+  }
+};
+var Subheadline = function Subheadline(_ref) {
+  var story = _ref.story,
+      _ref$truncateChars = _ref.truncateChars,
+      truncateChars = _ref$truncateChars === void 0 ? 200 : _ref$truncateChars,
+      lineClamp = _ref.lineClamp,
+      _ref$clazzName = _ref.clazzName,
+      clazzName = _ref$clazzName === void 0 ? "" : _ref$clazzName,
+      forceShowAtom = _ref.forceShowAtom,
+      showFullContent = _ref.showFullContent;
+  var config = useStateValue() || {};
+  var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
+  if (!subheadline) return null;
+  var textColor = getTextColor(config.theme);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      WebkitLineClamp: lineClamp
+    },
+    "data-test-id": "subheadline",
+    className: ("p-alt arr--sub-headline arrow-component ".concat(clazzName) ? "p-alt arr--sub-headline arrow-component ".concat(clazzName) + " " : "") + _getClassName("subheadline ".concat(textColor), _styleModuleImportMap$d)
+  }, showFullContent || typeof lineClamp === "number" ? story.subheadline : truncate(story.subheadline, truncateChars, true));
+};
+Subheadline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  //  Restricts the number of lines for subheadline.
+  lineClamp: PropTypes.number,
+
+  /** Number of characters to truncate the subheadline */
+  truncateChars: PropTypes.number,
+  clazzName: PropTypes.string,
+  forceShowAtom: PropTypes.bool,
+  showFullContent: PropTypes.bool
+};
+Subheadline.defaultProps = {
+  forceShowAtom: false,
+  showFullContent: false
+};
+
+var _styleModuleImportMap$c = {
+  "./timestamp.m.css": {
+    "time": "timestamp-m_time__2v46i",
+    "time-wrapper": "timestamp-m_time-wrapper__3O2lM",
+    "bottom-fix": "timestamp-m_bottom-fix__1Zh8r",
+    "dark": "timestamp-m_dark__2lk9E",
+    "light": "timestamp-m_light__2QlrI"
+  }
+};
+var TimeStamp = function TimeStamp(_ref) {
+  var story = _ref.story,
+      isBottom = _ref.isBottom,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var configState = useStateValue() || {};
+  var isTime = get_1(config, ["showTime"], get_1(configState, ["showTime"], true));
+  var time = story["last-published-at"] || story["first-published-at"];
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var textColor = getTextColor(configState.theme);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isTime && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "publish-time",
+    className: "time arr--publish-time " + _getClassName("time  ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$c)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timestamp-m_time-wrapper__3O2lM"
+  }, getTimeStamp(time, formatter, config))));
+};
+TimeStamp.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object,
+  isBottom: PropTypes.bool,
+  config: PropTypes.object
+};
+
+var _styleModuleImportMap$b = {
+  "./author.m.css": {
+    "author": "author-m_author__WRuLm",
+    "author-image": "author-m_author-image__3q2oc",
+    "author-name": "author-m_author-name__3WP-O",
+    "bottom-fix": "author-m_bottom-fix__223TT",
+    "prefix": "author-m_prefix__YSInK",
+    "rtl-image": "author-m_rtl-image__2nglD",
+    "ltr-image": "author-m_ltr-image__3bc0L",
+    "dark": "author-m_dark__2TTlp",
+    "light": "author-m_light__3y8_x"
+  }
+};
+
+var AuthorBase = function AuthorBase(_ref) {
+  var story = _ref.story,
+      hideAuthorImage = _ref.hideAuthorImage,
+      isBottom = _ref.isBottom,
+      _ref$prefix = _ref.prefix,
+      prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var configData = useStateValue() || {};
+  var isAuthor = get_1(configData, ["showAuthor"], true);
+
+  var _get = get_1(story, ["authors", "0"], ""),
+      avatarUrl = _get["avatar-url"],
+      avatarS3Key = _get["avatar-s3-key"],
+      authorName = _get.name,
+      slug = _get.slug;
+
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var textColor = getTextColor(configData.theme);
+  var mountAt = get_1(config, ["mountAt"], "");
+
+  var authorImage = function authorImage(dir) {
+    if (!avatarUrl && !avatarS3Key) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "author-image",
+      className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$b)
+    }, /*#__PURE__*/React.createElement("figure", null, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+      slug: avatarS3Key,
+      "aspect-ratio": [1, 1],
+      defaultWidth: 400,
+      imgParams: {
+        auto: ["format", "compress"]
+      },
+      alt: authorName
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: avatarUrl
+    })));
+  };
+
+  var isPrefix = function isPrefix(dir) {
+    if (prefix) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$b)
+      }, prefix);
+    }
+
+    return !hideAuthorImage && authorImage(dir);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement(Link, {
+    href: "".concat(mountAt, "/author/") + slug,
+    "aria-label": "author-name",
+    className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$b)
+  }, isPrefix("ltr"), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-name",
+    className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$b)
+  }, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
+};
+
+function mapStateToProps(state) {
+  return {
+    config: get_1(state, ["qt", "config"], {})
+  };
+}
+
+var Author = connect(mapStateToProps)(AuthorBase);
+AuthorBase.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Hide Author Avatar Image */
+  hideAuthorImage: PropTypes.bool,
+  // fix Author bottom of the storyCard
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object
+};
+AuthorBase.defaultProps = {
+  hideAuthorImage: false,
+  isBottom: false,
+  prefix: ""
+};
+
+var _styleModuleImportMap$a = {
+  "./dot.m.css": {
+    "dark": "dot-m_dark__1Njxl",
+    "light": "dot-m_light__27IA3"
+  }
+};
+var Dot = function Dot(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "3px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "3px" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap$a)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 3 3"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "87",
+    cy: "9",
+    r: "1",
+    fill: "inherit",
+    fillRule: "nonzero",
+    transform: "translate(-86 -8)"
+  })));
+};
+Dot.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+var _styleModuleImportMap$9 = {
+  "./divider.m.css": {
+    "dark": "divider-m_dark__26FRi",
+    "light": "divider-m_light__w-7sy"
+  }
+};
+var Divider = function Divider(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "1" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "10" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap$9)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "inherit",
+    d: "M0 0h1v10H0z"
+  })));
+};
+Divider.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+var _styleModuleImportMap$8 = {
+  "./read-time.m.css": {
+    "read-time-wrapper": "read-time-m_read-time-wrapper__3GyC_",
+    "dot-indicator": "read-time-m_dot-indicator__3Sqh2",
+    "dark": "read-time-m_dark__3yRaK",
+    "light": "read-time-m_light__1GAZu"
+  }
+};
+var ReadTime = function ReadTime(_ref) {
+  var story = _ref.story,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _ref$isLightTheme = _ref.isLightTheme,
+      isLightTheme = _ref$isLightTheme === void 0 ? false : _ref$isLightTheme;
+  var config = useStateValue() || {};
+  var showReadTime = get_1(config, ["showReadTime"]) || get_1(opts, ["showReadTime"], true);
+  var readTime = get_1(story, ["read-time"], 0);
+  var textColor = isLightTheme ? "light" : getTextColor(config.theme);
+  if (!showReadTime || !readTime) return null;
+  var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "read-time",
+    className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$8)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
+  }, /*#__PURE__*/React.createElement(Dot, {
+    color: textColor
+  })), /*#__PURE__*/React.createElement("span", null, readTime, " ", timeToRead)));
+};
+ReadTime.propTypes = {
+  story: PropTypes.shape({
+    "read-time": PropTypes.number
+  }),
+  opts: PropTypes.shape({
+    showReadTime: PropTypes.bool
+  }),
+  isLightTheme: PropTypes.bool
+};
+
+var _styleModuleImportMap$7 = {
+  "./author-with-timestamp.m.css": {
+    "author-time-wrapper": "author-with-timestamp-m_author-time-wrapper__G7_eI",
+    "author-image": "author-with-timestamp-m_author-image__24xrD",
+    "dot": "author-with-timestamp-m_dot__1LHXD",
+    "bottom-fix": "author-with-timestamp-m_bottom-fix__1rWGv",
+    "dash": "author-with-timestamp-m_dash__2L5XC"
+  }
+};
+var AuthorWithTime = function AuthorWithTime(_ref) {
+  var story = _ref.story,
+      separator = _ref.separator,
+      isBottom = _ref.isBottom,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      isLightTheme = _ref.isLightTheme;
+  var configState = useStateValue() || {};
+  var isAuthor = get_1(config, ["showAuthor"], get_1(configState, ["showAuthor"], true));
+  var isTime = get_1(config, ["showTime"], get_1(configState, ["showTime"], true));
+  var isReadTime = get_1(configState, ["showReadTime"], true);
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var seperatorStyle = separator === "dot" ? "dot" : "dash";
+  var textColor = isLightTheme ? "light" : getTextColor(configState.theme);
+
+  var getSeparator = function getSeparator() {
+    if (separator === "divider") {
+      return /*#__PURE__*/React.createElement(Divider, {
+        color: textColor
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(Dot, {
+      color: textColor
+    });
+  };
+
+  var getTimeStamp = function getTimeStamp() {
+    if (!isTime) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement("span", {
+      className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$7)
+    }, getSeparator()), /*#__PURE__*/React.createElement(TimeStamp, {
+      story: story,
+      config: config
+    }), isReadTime && /*#__PURE__*/React.createElement(ReadTime, {
+      story: story,
+      opts: config,
+      isLightTheme: isLightTheme
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$7)
+  }, isAuthor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    isBottom: true,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix
+  }), getTimeStamp()) : getTimeStamp());
+};
+AuthorWithTime.propTypes = {
+  story: PropTypes.object,
+
+  /** Style of separator between the Author & Timestamp */
+  separator: PropTypes.oneOf(["dot", "divider"]),
+
+  /** hide the author image */
+  hideAuthorImage: PropTypes.bool,
+  // fix author and time at the end
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isLightTheme: PropTypes.bool
+};
+AuthorWithTime.defaultProps = {
+  separator: "dot",
+  isBottom: false,
+  hideAuthorImage: true,
+  prefix: "",
+  isLightTheme: false
+};
+
+var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 40 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 30 : _ref$height,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 102 76",
+    version: "1.1"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "demo-home-copy",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    transform: "translate(-377.000000, -314.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group-13",
+    transform: "translate(377.000000, 314.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z",
+    id: "Combined-Shape",
+    fill: iconColor,
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("rect", {
+    id: "Rectangle-19",
+    stroke: iconColor,
+    strokeWidth: "3",
+    x: "1.5",
+    y: "1.5",
+    width: "99",
+    height: "73",
+    rx: "3"
+  }))));
+};
+ImageFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};
+
+var imageFallback = function imageFallback() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
+  }, /*#__PURE__*/React.createElement("figure", {
+    className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
+  }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
+};
+
+var FallbackImage = function FallbackImage(_ref) {
+  var slug = _ref.slug;
+
+  if (slug) {
+    return /*#__PURE__*/React.createElement(Link, {
+      href: slug,
+      "aria-label": "image-fallback"
+    }, imageFallback());
+  } else {
+    return imageFallback();
+  }
+};
+FallbackImage.propTypes = {
+  slug: PropTypes.string
+};
+
+var HyperLinkIcon = function HyperLinkIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "36",
+    height: "28"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "36",
+    height: "28",
+    fill: "#3D6FCF",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#FFF",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+    d: "M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
+  })));
+};
+
+var HyperLink = function HyperLink(_ref) {
+  var _ref$hyperLink = _ref.hyperLink,
+      hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
+  if (!hyperLink) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: hyperLink,
+    "aria-label": "hyperlink-button",
+    className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(HyperLinkIcon, null));
+};
+HyperLink.propTypes = {
+  hyperLink: PropTypes.string
+};
+
+var _styleModuleImportMap$6 = {
+  "./hero-image.m.css": {
+    "hero-image": "hero-image-m_hero-image__3lraV",
+    "right-padding": "hero-image-m_right-padding__1LkCe",
+    "left-padding": "hero-image-m_left-padding__pYRAj",
+    "right-padding-mob": "hero-image-m_right-padding-mob__3-uOU",
+    "placeholder": "hero-image-m_placeholder__1omCm",
+    "hero-image-mob": "hero-image-m_hero-image-mob__13JJp",
+    "with-padding": "hero-image-m_with-padding__324G_",
+    "image": "hero-image-m_image__1mz0U"
+  }
+};
+var HeroImage = function HeroImage(_ref) {
+  var story = _ref.story,
+      FullBleed = _ref.FullBleed,
+      aspectRatio = _ref.aspectRatio,
+      defaultWidth = _ref.defaultWidth,
+      widths = _ref.widths,
+      isHorizontal = _ref.isHorizontal,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast,
+      defaultFallback = _ref.defaultFallback,
+      isStoryPageImage = _ref.isStoryPageImage,
+      config = _ref.config;
+
+  var _ref2 = useStateValue() || {},
+      _ref2$fallbackImageUr = _ref2.fallbackImageUrl,
+      fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
+
+  var _config$StoryTemplate = config.StoryTemplateIcon,
+      StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
+    return null;
+  } : _config$StoryTemplate;
+  var showImagePlaceholder = useSelector(function (state) {
+    return get_1(state, ["qt", "config", "showPlaceholder"]);
+  });
+  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+  var fullBleed = FullBleed ? "" : "with-padding";
+  var heroImageClass = "hero-image";
+  if (isHorizontal) heroImageClass = "right-padding";else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
+  var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
+
+  var getPadding = function getPadding(aspectRatio) {
+    var _aspectRatio = _slicedToArray(aspectRatio, 2),
+        height = _aspectRatio[0],
+        width = _aspectRatio[1];
+
+    if (height > 0 && width > 0) {
+      var padding = width / height * 100;
+      return padding;
+    }
+
+    return 0;
+  };
+
+  var _aspectRatio2 = _slicedToArray(aspectRatio, 2),
+      mobileAspectRatio = _aspectRatio2[0],
+      _aspectRatio2$ = _aspectRatio2[1],
+      desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
+
+  var isMobile = clientWidth("mobile");
+  var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
+  var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
+  var slug = get_1(story, ["hero-image-s3-key"]) || get_1(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+  var hyperLink = get_1(story, ["hero-image-hyperlink"], "");
+
+  var fallbackImage = function fallbackImage() {
+    if (!slug) {
+      if (fallbackImageUrl && !isStoryPageImage) {
+        return /*#__PURE__*/React.createElement("figure", {
+          style: {
+            paddingTop: imagePadding + "%"
+          },
+          className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$6)
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "qt-image",
+          "data-src": "".concat(fallbackImageUrl),
+          alt: "image-fallback"
+        }));
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
+        "data-test-id": "arr--fallback-hero-image",
+        style: {
+          paddingTop: imagePadding + "%"
+        },
+        className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$6)
+      }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+        storyTemplate: story["story-template"]
+      }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
+      style: {
+        paddingTop: imagePadding + "%"
+      },
+      className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$6)
+    }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+      storyTemplate: story["story-template"]
+    }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
+      story: story,
+      aspectRatio: imageAspectRatio,
+      defaultWidth: defaultWidth,
+      widths: widths,
+      imgParams: {
+        auto: ["format", "compress"],
+        fit: "max"
+      }
+    })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: hyperLink
+    }));
+  };
+
+  return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "arr--hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$6)
+  }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
+    "data-test-id": "arr--hero-image",
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "fallback-hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$6)
+  }, fallbackImage()));
+};
+HeroImage.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Removes the Hero Image padding for the image to bleed over the margin */
+  FullBleed: PropTypes.bool,
+
+  /** The default width for the image, in case the browser does not support srcset */
+  defaultWidth: PropTypes.number,
+
+  /** The list of available widths */
+  widths: PropTypes.array,
+  // fatch the correct hero image
+  aspectRatio: PropTypes.array,
+  //  Hints for the browser to choose the best size
+
+  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
+  isHorizontal: PropTypes.bool,
+
+  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
+  isHorizontalMobile: PropTypes.bool,
+  // this prop is responsive for rendering fallback image on story page
+  defaultFallback: PropTypes.bool,
+  isHorizontalWithImageLast: PropTypes.bool,
+  isStoryPageImage: PropTypes.bool,
+  config: PropTypes.object
+};
+HeroImage.defaultProps = {
+  FullBleed: true,
+  aspectRatio: [[1, 1], [16, 9]],
+  defaultWidth: 480,
+  widths: [250, 480, 640],
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  defaultFallback: true,
+  isStoryPageImage: false,
+  isHorizontalWithImageLast: false,
+  config: {}
+};
+
+var _styleModuleImportMap$5 = {
+  "./section.m.css": {
+    "section": "section-m_section__2N4S3",
+    "section-borderBottomSml": "section-m_section-borderBottomSml__2GNbo",
+    "border-bottom": "section-m_border-bottom__3cRoD",
+    "section-borderLeft": "section-m_section-borderLeft__3hKVj",
+    "border-left": "section-m_border-left__2oUyp",
+    "section-solid": "section-m_section-solid__1vB1Q",
+    "dark": "section-m_dark__1r3C4",
+    "light": "section-m_light__306hW"
+  }
+};
+var SectionTag = function SectionTag(_ref) {
+  var story = _ref.story,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
+      isLightTheme = _ref.isLightTheme;
+  var config = useStateValue() || {};
+  var isSection = get_1(config, ["showSection"], true);
+  var templateFromRowContext = get_1(config, ["sectionTagTemplate"]);
+  var section = get_1(story, ["sections", 0], "");
+  var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
+  var getUrl = section ? section["section-url"] : "/";
+  var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
+  var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
+  var sectionTagBorderColor = rgbToHex(borderColor);
+  var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
+
+  if (templateFromRowContext) {
+    templateStyle = supportedTemplates.includes(templateFromRowContext) ? "section section-".concat(templateFromRowContext) : "section";
+  }
+
+  if (!isSection) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: getUrl,
+    className: "arrow-component arr--section-name",
+    "aria-label": "section-name"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "sectionTag",
+    style: {
+      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
+    },
+    className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$5)
+  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "section-m_border-left__2oUyp",
+    style: {
+      color: sectionTagBorderColor
+    }
+  }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
+    className: "section-m_border-bottom__3cRoD",
+    style: {
+      backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
+    }
+  })));
+};
+SectionTag.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** The style template for section tag */
+  template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
+  borderColor: PropTypes.string,
+  solidBorderColor: PropTypes.string,
+  isLightTheme: PropTypes.bool
+};
+SectionTag.defaultProps = {
+  template: "",
+  isLightTheme: false
+};
+
+var _styleModuleImportMap$4 = {
+  "./storycard.m.css": {
+    "author-timestamp-wrapper": "storycard-m_author-timestamp-wrapper__20yjp",
+    "default-card": "storycard-m_default-card__1-POn",
+    "horizontal-card": "storycard-m_horizontal-card___7afz",
+    "backgroung-img": "storycard-m_backgroung-img__1FMJT",
+    "content-overlap": "storycard-m_content-overlap__1yNHR",
+    "border-full": "storycard-m_border-full__1nhy7",
+    "light": "storycard-m_light__3EhXN",
+    "dark": "storycard-m_dark__2wCTq",
+    "border-bottom": "storycard-m_border-bottom__2_E-I",
+    "border-boxShadow": "storycard-m_border-boxShadow__2-k3Z",
+    "center-align": "storycard-m_center-align__1Sn8-",
+    "content-bottom": "storycard-m_content-bottom__1QHeC",
+    "content-full": "storycard-m_content-full__2zJmU",
+    "content-boxShadow": "storycard-m_content-boxShadow__2IAWZ",
+    "hero-image": "storycard-m_hero-image__1H3MB",
+    "right-padding": "storycard-m_right-padding__12-lQ",
+    "horizontal-mob": "storycard-m_horizontal-mob__17JG2",
+    "content": "storycard-m_content__1Q9vq",
+    "border-default": "storycard-m_border-default__PEZ1x",
+    "card": "storycard-m_card__KJwRa",
+    "horizontal-image-last": "storycard-m_horizontal-image-last__3o6LY"
+  }
+};
+var StoryCard = function StoryCard(_ref) {
+  var story = _ref.story,
+      children = _ref.children,
+      isHorizontal = _ref.isHorizontal,
+      aspectRatio = _ref.aspectRatio,
+      border = _ref.border,
+      useImageAsBackground = _ref.useImageAsBackground,
+      bgImgContentOverlap = _ref.bgImgContentOverlap,
+      theme = _ref.theme,
+      borderColor = _ref.borderColor,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      centerAlign = _ref.centerAlign,
+      headerLevel = _ref.headerLevel,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      config = _ref.config,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
+  if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
+  var borderOptions = ["default", "full", "bottom", "boxShadow"];
+  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
+
+  var horizontalCardStyle = "default-card";
+  if (isHorizontal) horizontalCardStyle = "horizontal-card";else if (isHorizontalWithImageLast) horizontalCardStyle = "horizontal-image-last";
+  var bgImageClasses = useImageAsBackground ? "backgroung-img" : "";
+  var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
+  var textColor = getTextColor(theme);
+  var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
+  var defaultStorycard = /*#__PURE__*/React.createElement(DefaultStoryCard, {
+    story: story,
+    aspectRatio: aspectRatio,
+    border: border,
+    isHorizontalMobile: isHorizontalMobile,
+    isHorizontal: isHorizontal,
+    centerAlign: centerAlign,
+    headerLevel: headerLevel,
+    borderColor: borderColor,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix,
+    config: config,
+    isHorizontalWithImageLast: isHorizontalWithImageLast
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "story-card",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "arr--story-card " + _getClassName("card ".concat(horizontalCardStyle, " ").concat(borderTemplate, " ").concat(textColor, " ").concat(bgImageClasses, " ").concat(bgImgContentOverlapClass, " ").concat(horizontalMobileClasses), _styleModuleImportMap$4)
+  }, children || defaultStorycard);
+};
+
+var DefaultStoryCard = function DefaultStoryCard(_ref2) {
+  var story = _ref2.story;
+      _ref2.border;
+      var isHorizontal = _ref2.isHorizontal,
+      aspectRatio = _ref2.aspectRatio,
+      headerLevel = _ref2.headerLevel,
+      _ref2$isHorizontalMob = _ref2.isHorizontalMobile,
+      isHorizontalMobile = _ref2$isHorizontalMob === void 0 ? false : _ref2$isHorizontalMob,
+      _ref2$centerAlign = _ref2.centerAlign,
+      centerAlign = _ref2$centerAlign === void 0 ? false : _ref2$centerAlign,
+      borderColor = _ref2.borderColor,
+      hideAuthorImage = _ref2.hideAuthorImage,
+      prefix = _ref2.prefix,
+      isHorizontalWithImageLast = _ref2.isHorizontalWithImageLast,
+      config = _ref2.config;
+  var alignment = centerAlign ? "center-align" : "";
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isHorizontal ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontal: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : isHorizontalWithImageLast ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontalWithImageLast: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    config: config,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap$4)
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: SectionTagborderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story,
+    isBottom: true,
+    prefix: prefix,
+    hideAuthorImage: hideAuthorImage
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  })));
+};
+
+DefaultStoryCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.oneOfType([PropTypes.string]),
+  isBottom: PropTypes.bool,
+  isHorizontal: PropTypes.bool,
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+  isHorizontalMobile: PropTypes.bool,
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  hideAuthorImage: PropTypes.bool,
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  children: PropTypes.node,
+
+  /** Flip the Story Card to Horizonal mode */
+  isHorizontal: PropTypes.bool,
+
+  /** Add border to the Story Card  */
+  border: PropTypes.oneOfType([PropTypes.string]),
+  // story card with background image
+  useImageAsBackground: PropTypes.bool,
+  // story card  content overlap with image
+  bgImgContentOverlap: PropTypes.bool,
+
+  /** add aspect ratio for hero image  */
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+
+  /** add theme(dark /light/custom color) for storycard  */
+  theme: PropTypes.string,
+
+  /** flip the story card mobile design horizontal */
+  isHorizontalMobile: PropTypes.bool,
+  // make content center align in desktop and left align in mobile
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  // handle author image through storycard
+  hideAuthorImage: PropTypes.bool,
+  // handle author prefix through storycard
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.defaultProps = {
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  border: "default",
+  theme: "",
+  centerAlign: false,
+  borderColor: "",
+  isHorizontalWithImageLast: false
+};
+
+var _styleModuleImportMap$3 = {
+  "./storycardContent.m.css": {
+    "wrapper": "storycardContent-m_wrapper__TEmfA",
+    "horizontal-content-wrapper": "storycardContent-m_horizontal-content-wrapper__NgpuC",
+    "border-full": "storycardContent-m_border-full__2km37"
+  }
+};
+var StorycardContent = function StorycardContent(_ref) {
+  var story = _ref.story,
+      children = _ref.children,
+      theme = _ref.theme,
+      border = _ref.border,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      headerLevel = _ref.headerLevel,
+      borderColor = _ref.borderColor,
+      config = _ref.config;
+  var textColor = getTextColor(theme);
+  var borderOptions = ["full"];
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : "";
+  var horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "story-card-content",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "arr--content-wrapper " + _getClassName("wrapper ".concat(borderTemplate, " ").concat(horizontalCard), _styleModuleImportMap$3)
+  }, children || /*#__PURE__*/React.createElement(DefaultStoryCardContent, {
+    story: story,
+    headerLevel: headerLevel,
+    isHorizontalMobile: isHorizontalMobile,
+    borderColor: SectionTagborderColor,
+    config: config
+  }));
+};
+
+var DefaultStoryCardContent = function DefaultStoryCardContent(_ref2) {
+  var story = _ref2.story,
+      headerLevel = _ref2.headerLevel,
+      borderColor = _ref2.borderColor,
+      _ref2$config = _ref2.config,
+      config = _ref2$config === void 0 ? {} : _ref2$config;
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: SectionTagborderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story
+  }));
+};
+
+DefaultStoryCardContent.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.string,
+  theme: PropTypes.string,
+  isHorizontalMobile: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object
+};
+StorycardContent.propTypes = {
+  story: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  theme: PropTypes.string,
+  border: PropTypes.string,
+  isHorizontalMobile: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object
+};
+
+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;
+}
+
+var _styleModuleImportMap$2 = {
+  "./load-more.m.css": {
+    "button": "load-more-m_button__1mmf1",
+    "default": "load-more-m_default__2_k4V",
+    "dark": "load-more-m_dark__3dfzb",
+    "light": "load-more-m_light__ePZQI"
+  }
+};
+
+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 = 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; }
+var LoadmoreButton = function LoadmoreButton(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      collection = _ref.collection,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "SubsequentLoadCount" : _ref$template,
+      onClick = _ref.onClick,
+      navigate = _ref.navigate,
+      qtConfig = _ref.qtConfig;
+  var _config$showButton = config.showButton,
+      showButton = _config$showButton === void 0 ? true : _config$showButton,
+      _config$buttonText = config.buttonText,
+      buttonText = _config$buttonText === void 0 ? "Read More" : _config$buttonText,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$customUrlPath = config.customUrlPath,
+      customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath;
+  if (!showButton) return null;
+  var textColor = getTextColor(theme);
+  var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), config));
+  return template === "SubsequentLoadCount" ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    "data-test-id": "load-more",
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$2)
+  }, buttonText) : /*#__PURE__*/React.createElement(LinkBase, {
+    href: slug,
+    navigateTo: navigate,
+    "data-test-id": "load-more",
+    "aria-label": "load-more"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$2)
+  }, buttonText));
+};
+LoadmoreButton.propTypes = {
+  collection: PropTypes.object,
+  template: PropTypes.string,
+  config: PropTypes.object,
+  onClick: PropTypes.func,
+  navigate: PropTypes.func,
+  qtConfig: PropTypes.object
+};
+
+var LeftArrow = function LeftArrow(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 10 16"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 20H-7V-4h24z",
+    opacity: ".384"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: color,
+    d: "M9 16L1 8l8-8"
+  })));
+};
+LeftArrow.propTypes = {
+  color: PropTypes.string
+};
+
+var RightArrow = function RightArrow(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 10 16"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M-7-4h24v24H-7z",
+    opacity: ".384"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: color,
+    d: "M1 0l8 8-8 8"
+  })));
+};
+RightArrow.propTypes = {
+  color: PropTypes.string
+};
+
+var _styleModuleImportMap$1 = {
+  "./slider-arrow.m.css": {
+    "arrow": "slider-arrow-m_arrow__1eBUU",
+    "left-arrow-dark": "slider-arrow-m_left-arrow-dark__3mTJS",
+    "right-arrow-dark": "slider-arrow-m_right-arrow-dark__3hWZe",
+    "left-arrow-light": "slider-arrow-m_left-arrow-light__2ipUK",
+    "right-arrow-light": "slider-arrow-m_right-arrow-light__3omMU",
+    "left-arrow-ltr": "slider-arrow-m_left-arrow-ltr__1ngNF",
+    "right-arrow-ltr": "slider-arrow-m_right-arrow-ltr__2svWX",
+    "left-arrow-rtl": "slider-arrow-m_left-arrow-rtl__2ynyn",
+    "right-arrow-rtl": "slider-arrow-m_right-arrow-rtl__1GjPz"
+  }
+};
+var SliderArrow = function SliderArrow(_ref) {
+  var selectedIndex = _ref.selectedIndex,
+      previousClick = _ref.previousClick,
+      nextClick = _ref.nextClick,
+      noOfItems = _ref.noOfItems,
+      perView = _ref.perView,
+      languageDirection = _ref.languageDirection;
+
+  if (noOfItems < 1) {
+    return null;
+  }
+
+  var config = useStateValue() || {};
+  var textColor = getTextColor(config.theme);
+
+  var rightArrowView = function rightArrowView() {
+    if (selectedIndex >= noOfItems - perView) return false;
+    return true;
+  };
+
+  var getLeftArrowClassName = languageDirection === "rtl" ? "left-arrow-rtl" : "left-arrow-ltr";
+  var getRightArrowClassName = languageDirection === "rtl" ? "right-arrow-rtl" : "right-arrow-ltr";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectedIndex !== 0 ? /*#__PURE__*/React.createElement("button", {
+    onClick: previousClick,
+    className: ("left-arrow ".concat(getLeftArrowClassName) ? "left-arrow ".concat(getLeftArrowClassName) + " " : "") + _getClassName("arrow left-arrow-".concat(textColor, " ").concat(getLeftArrowClassName), _styleModuleImportMap$1)
+  }, /*#__PURE__*/React.createElement(LeftArrow, {
+    color: textColor === "dark" ? "#fff" : "#333"
+  })) : null, selectedIndex < noOfItems - 1 && rightArrowView() ? /*#__PURE__*/React.createElement("button", {
+    onClick: nextClick,
+    className: ("right-arrow ".concat(getRightArrowClassName) ? "right-arrow ".concat(getRightArrowClassName) + " " : "") + _getClassName("arrow right-arrow-".concat(textColor, " ").concat(getRightArrowClassName), _styleModuleImportMap$1)
+  }, /*#__PURE__*/React.createElement(RightArrow, {
+    color: textColor === "dark" ? "#fff" : "#333"
+  })) : null);
+};
+SliderArrow.propTypes = {
+  noOfItems: number,
+  perView: number,
+  slideIndicator: string,
+  previousClick: func,
+  nextClick: func,
+  selectedIndex: number,
+  languageDirection: string
+};
+
+var _styleModuleImportMap = {
+  "./slider-indicator.m.css": {
+    "indicators": "slider-indicator-m_indicators__3MNXc",
+    "indicator": "slider-indicator-m_indicator__gTv3x",
+    "indicator-button": "slider-indicator-m_indicator-button__1e82r",
+    "indicator-dots": "slider-indicator-m_indicator-dots__2TR3H",
+    "indicator-dots-dark": "slider-indicator-m_indicator-dots-dark__sGrev",
+    "indicator-dots-light": "slider-indicator-m_indicator-dots-light__2nPn-",
+    "indicator-dashes": "slider-indicator-m_indicator-dashes__DyNCE",
+    "indicator-dashes-dark": "slider-indicator-m_indicator-dashes-dark__VrqJI",
+    "indicator-dashes-light": "slider-indicator-m_indicator-dashes-light__34ESx"
+  }
+};
+var SliderIndicator = function SliderIndicator(_ref) {
+  var indicatorItems = _ref.indicatorItems,
+      indicatorClick = _ref.indicatorClick,
+      selectedIndex = _ref.selectedIndex,
+      indicatorType = _ref.indicatorType;
+
+  if (indicatorItems.length < 1) {
+    return null;
+  }
+
+  var config = useStateValue() || {};
+  var textColor = getTextColor(config.theme);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "slider-indicators slider-indicator-m_indicators__3MNXc"
+  }, indicatorItems.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "slider-".concat(index),
+      className: "indicator slider-indicator-m_indicator__gTv3x",
+      onClick: function onClick(e) {
+        return indicatorClick(e, index);
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      "aria-pressed": selectedIndex === index ? "true" : "false",
+      className: ("indicator-button indicator-".concat(indicatorType) ? "indicator-button indicator-".concat(indicatorType) + " " : "") + _getClassName("indicator-button indicator-".concat(indicatorType, " indicator-").concat(indicatorType, "-").concat(textColor), _styleModuleImportMap)
+    }));
+  }));
+};
+SliderIndicator.propTypes = {
+  indicatorItems: array,
+  perView: number,
+  indicatorType: string,
+  indicatorClick: func,
+  selectedIndex: number
+};
+
+var smoothScroll = function smoothScroll(node, topOrLeft, horizontal) {
+  var _node$scrollTo;
+
+  node.scrollTo((_node$scrollTo = {}, _defineProperty(_node$scrollTo, horizontal ? "left" : "top", topOrLeft), _defineProperty(_node$scrollTo, "behavior", "smooth"), _node$scrollTo));
+};
+
+var updateItemSelection = function updateItemSelection(index, languageDirection, scroller, noOfItems) {
+  var getScrollValue = Math.floor(scroller.current.scrollWidth * (index / noOfItems));
+  var scrollValue = languageDirection === "rtl" ? getScrollValue * -1 : getScrollValue;
+  smoothScroll(scroller.current, scrollValue, true);
+};
+
+var setIndicatorValue = function setIndicatorValue(func, ms) {
+  var timeout;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      timeout = null;
+      func();
+    }, ms);
+  };
+};
+
+var ScrollSnap = function ScrollSnap(_ref) {
+  var children = _ref.children,
+      isArrow = _ref.isArrow,
+      interval = _ref.interval,
+      isInfinite = _ref.isInfinite,
+      pauseOnHover = _ref.pauseOnHover,
+      perView = _ref.perView,
+      slideIndicator = _ref.slideIndicator;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedIndex = _useState2[0],
+      setSelectedIndex = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      autoScroll = _useState4[0],
+      setAutoScroll = _useState4[1];
+
+  var languageDirection = useSelector(function (state) {
+    return get_1(state, ["qt", "config", "language", "direction"], "ltr");
+  });
+  var noOfItems = children ? children.length : 0;
+  var scroller = useRef(null);
+  var numberOfIndicatorsToShow = children.length - (perView - 1);
+  var indicatorItems = children.slice(0, numberOfIndicatorsToShow);
+  useEffect(function () {
+    if (scroller.current) {
+      scroller.current.addEventListener("scroll", setIndicatorValue(function () {
+        var value = Math.round(scroller.current.scrollLeft / scroller.current.scrollWidth * noOfItems);
+        setSelectedIndex(Math.abs(value));
+      }, 150)); // For Default Selection if selectedIndex is not 0 then manually select it
+
+      if (selectedIndex !== 0) {
+        updateItemSelection(selectedIndex);
+      }
+    }
+
+    return function () {
+      scroller.current.removeEventListener("scroll", setIndicatorValue);
+    };
+  }, []); // Infinite scroll
+
+  useEffect(function () {
+    if (isInfinite && !autoScroll) {
+      var timer = setInterval(function () {
+        infiniteScroll();
+      }, interval);
+      return function () {
+        clearInterval(timer);
+      };
+    }
+  }, [isInfinite, autoScroll]);
+
+  var infiniteScroll = function infiniteScroll() {
+    setSelectedIndex(function (value) {
+      var newIndex = value === noOfItems - perView ? 0 : value + 1;
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+      return newIndex;
+    });
+  };
+
+  var pauseAutoPlay = function pauseAutoPlay() {
+    pauseOnHover && setAutoScroll(!autoScroll);
+  };
+
+  var indicatorClick = function indicatorClick(e, newIndex) {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  var nextClick = function nextClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (selectedIndex < noOfItems) {
+      var newIndex = selectedIndex + 1;
+      setSelectedIndex(newIndex);
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+    }
+  };
+
+  var previousClick = function previousClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var newIndex = selectedIndex - 1;
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "scroll-snap-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "scroll-snap-wrapper scroll-snap-m_wrapper__1Rz9v",
+    onMouseEnter: pauseAutoPlay,
+    onMouseLeave: pauseAutoPlay
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scroller,
+    className: "scroll-snap-carousel scroll-snap-m_carousel__2m3cg"
+  }, children), isArrow && /*#__PURE__*/React.createElement(SliderArrow, {
+    noOfItems: noOfItems,
+    perView: perView,
+    previousClick: previousClick,
+    nextClick: nextClick,
+    selectedIndex: selectedIndex,
+    languageDirection: languageDirection
+  })), children.length > perView && slideIndicator !== "none" && /*#__PURE__*/React.createElement(SliderIndicator, {
+    indicatorItems: indicatorItems,
+    indicatorClick: indicatorClick,
+    selectedIndex: selectedIndex,
+    indicatorType: slideIndicator
+  }));
+};
+ScrollSnap.defaultProps = {
+  isArrow: true,
+  isInfinite: false,
+  interval: 4000,
+  pauseOnHover: true,
+  perView: 1,
+  slideIndicator: "dots"
+};
+ScrollSnap.propTypes = {
+  children: array.isRequired,
+  isArrow: bool,
+  isInfinite: bool,
+  interval: number,
+  pauseOnHover: bool,
+  perView: number,
+  slideIndicator: string
+};
+
+var FourStorySliderBase = function FourStorySliderBase(_ref) {
+  var collection = _ref.collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$border = config.border,
+      border = _config$border === void 0 ? "" : _config$border,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$numberOfStori = config.numberOfStoriesToShow,
+      numberOfStoriesToShow = _config$numberOfStori === void 0 ? 0 : _config$numberOfStori,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$footerSlotCon = config.footerSlotConfig,
+      footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
+      _config$navigationArr = config.navigationArrows,
+      navigationArrows = _config$navigationArr === void 0 ? true : _config$navigationArr,
+      _config$slideIndicato = config.slideIndicator,
+      slideIndicator = _config$slideIndicato === void 0 ? "none" : _config$slideIndicato,
+      _config$isInfinite = config.isInfinite,
+      isInfinite = _config$isInfinite === void 0 ? false : _config$isInfinite;
+  var footerSlot = footerSlotConfig.footerSlot;
+  var items = collectionToStories(collection);
+
+  if (items.length < 1) {
+    return null;
+  }
+
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get_1(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug(collection, qtConfig);
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      perView = _useState2[0],
+      setPerView = _useState2[1];
+
+  var showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
+  var textColor = getTextColor(theme);
+  var footerSlotComp = footerSlot ? footerSlot() : null;
+  useEffect(function () {
+    var deviceWidth = get_1(global, ["innerWidth"], 480);
+    if (deviceWidth > 992) setPerView(4);else if (deviceWidth > 764) setPerView(3);else setPerView(1);
+  }, []);
+
+  var getItems = function getItems() {
+    return items.slice(0, showNumberOfStoriesToShow).map(function (story, index) {
+      return /*#__PURE__*/React.createElement(StoryCard, {
+        story: story,
+        theme: theme,
+        border: border,
+        key: index,
+        config: config
+      }, /*#__PURE__*/React.createElement(HeroImage, {
+        config: config,
+        story: story,
+        aspectRatio: [[16, 9]]
+      }), /*#__PURE__*/React.createElement(StorycardContent, {
+        story: story,
+        border: border,
+        borderColor: borderColor,
+        config: config
+      }));
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "four-story-slider",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "four-story-slider-m_four-story-slider-wrapper__1WZcd"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), items.length > 4 ? /*#__PURE__*/React.createElement(ScrollSnap, {
+    isArrow: navigationArrows,
+    perView: perView,
+    slideIndicator: slideIndicator,
+    isInfinite: isInfinite
+  }, getItems()) : /*#__PURE__*/React.createElement("div", {
+    className: "four-story-slider-m_story-grid__NcDMl"
+  }, getItems()), /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: collection,
+    template: footerButton,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  }), footerSlotComp));
+};
+FourStorySliderBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    // section tag border color
+    borderColor: PropTypes.string,
+    //   background color of the row
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    footerButton: PropTypes.string,
+    // configure ad slot widget and story
+    collectionNameTemplate: PropTypes.string,
+    autoplaySpeed: PropTypes.number,
+    // speed of the slider(ms)
+    numberOfStoriesToShow: PropTypes.number,
+    // no of slides in slider
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+FourStorySliderBase.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};
+var FourStorySlider = StateProvider(FourStorySliderBase);
+
+export { FourStorySlider, FourStorySliderBase };