@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

package/story-elements/ImageSlideshow/index.js

@@ -1,773 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components = require('@quintype/components');
-var lodash = require('lodash');
-var PropTypes = require('prop-types');
-var React = require('react');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('react-timeago');
-require('date-fns-tz');
-var _extends = require('@babel/runtime/helpers/extends');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var reactRedux = require('react-redux');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-
-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 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;
-};
-PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var Loading = function Loading(_ref) {
-  _ref.width;
-      _ref.height;
-      _ref.iconColor;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "loading-m_loading-indicator__2Dlst"
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    width: "40",
-    height: "40",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 100 100",
-    preserveAspectRatio: "xMidYMid"
-  }, /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "84",
-    cy: "50",
-    r: "0",
-    fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "r",
-    values: "10;0;0;0;0",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  }), /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "cx",
-    values: "84;84;84;84;84",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  })), /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "84",
-    cy: "50",
-    r: ".709",
-    fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "r",
-    values: "0;10;10;10;0",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "-1s"
-  }), /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "cx",
-    values: "16;16;50;84;84",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "-1s"
-  })), /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "81.59",
-    cy: "50",
-    r: "10",
-    fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "r",
-    values: "0;10;10;10;0",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "-0.5s"
-  }), /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "cx",
-    values: "16;16;50;84;84",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "-0.5s"
-  })), /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "47.59",
-    cy: "50",
-    r: "10",
-    fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "r",
-    values: "0;10;10;10;0",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  }), /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "cx",
-    values: "16;16;50;84;84",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  })), /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "16",
-    cy: "50",
-    r: "9.291",
-    fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "r",
-    values: "0;0;10;10;10",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  }), /*#__PURE__*/React__default["default"].createElement("animate", {
-    attributeName: "cx",
-    values: "16;16;16;50;84",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    calcMode: "spline",
-    dur: "2s",
-    repeatCount: "indefinite",
-    begin: "0s"
-  }))));
-};
-Loading.propTypes = {
-  width: PropTypes__default["default"].object,
-  height: PropTypes__default["default"].object,
-  iconColor: PropTypes__default["default"].object
-};
-
-var HyperLinkIcon = function HyperLinkIcon() {
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "36",
-    height: "28"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default["default"].createElement("rect", {
-    width: "36",
-    height: "28",
-    fill: "#3D6FCF",
-    rx: "4"
-  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(components.Link, {
-    href: hyperLink,
-    "aria-label": "hyperlink-button",
-    className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
-};
-HyperLink.propTypes = {
-  hyperLink: PropTypes__default["default"].string
-};
-
-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__default["default"](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 Lightbox = /*#__PURE__*/React.lazy(function () {
-  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-image-lightbox')); });
-});
-var FullScreenImages = function FullScreenImages(_ref) {
-  var _ref$imageSlug = _ref.imageSlug,
-      imageSlug = _ref$imageSlug === void 0 ? "" : _ref$imageSlug,
-      template = _ref.template,
-      _ref$element = _ref.element,
-      element = _ref$element === void 0 ? {} : _ref$element,
-      props = _ref.props;
-  var cdnImage = reactRedux.useSelector(function (state) {
-    return lodash.get(state, ["qt", "config", "cdn-image"]);
-  });
-
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      photoIndex = _useState2[0],
-      handleImage = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      isOpen = _useState4[0],
-      handleOpen = _useState4[1];
-
-  var deviceWidth = lodash.get(global, ["innerWidth"], 0);
-  var hyperlinks = lodash.get(element, ["story-elements"], []).map(function (image) {
-    return image.hyperlink;
-  });
-  var imageUrlList = [];
-
-  if (!imageSlug) {
-    imageUrlList = lodash.get(element, ["story-elements"], []).map(function (image) {
-      return "//".concat(cdnImage, "/").concat(image["image-s3-key"], "?w=").concat(deviceWidth);
-    });
-  }
-
-  var onClickHandler = function onClickHandler(index) {
-    handleOpen(true);
-    handleImage(index);
-  };
-
-  var onClickKey = imageSlug ? "onClick" : "onClickHandler";
-  var imageUrlListLength = imageUrlList.length;
-
-  var onMoveNext = function onMoveNext(imageUrlListLength) {
-    var next = (photoIndex + 1) % imageUrlListLength;
-    handleImage(next);
-  };
-
-  var onMovePrev = function onMovePrev(imageUrlListLength) {
-    var prev = (photoIndex + imageUrlListLength - 1) % imageUrlListLength;
-    handleImage(prev);
-  };
-
-  var onClose = function onClose() {
-    handleImage(0);
-    handleOpen(false);
-  };
-
-  var getHyperLink = function getHyperLink() {
-    if (element.hyperlink || hyperlinks[photoIndex]) {
-      return /*#__PURE__*/React__default["default"].createElement(HyperLink, {
-        hyperLink: element.hyperlink || hyperlinks[photoIndex]
-      });
-    }
-
-    return null;
-  };
-
-  var lightboxProps = imageSlug ? {
-    mainSrc: "//".concat(cdnImage, "/").concat(imageSlug, "?w=").concat(deviceWidth),
-    toolbarButtons: [getHyperLink()]
-  } : {
-    mainSrc: imageUrlList[photoIndex],
-    nextSrc: imageUrlList[(photoIndex + 1) % imageUrlListLength],
-    prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
-    onMoveNextRequest: function onMoveNextRequest() {
-      return onMoveNext(imageUrlListLength);
-    },
-    onMovePrevRequest: function onMovePrevRequest() {
-      return onMovePrev(imageUrlListLength);
-    },
-    toolbarButtons: [getHyperLink()]
-  };
-
-  var LoadingScreen = function LoadingScreen() {
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Loading, null));
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(template, _objectSpread(_defineProperty__default["default"]({}, onClickKey, onClickHandler), props)), isOpen ? /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React__default["default"].createElement(LoadingScreen, null)
-  }, /*#__PURE__*/React__default["default"].createElement(Lightbox, _extends__default["default"]({
-    wrapperClassName: "arr--image-lightbox",
-    onCloseRequest: onClose
-  }, lightboxProps))) : null);
-};
-FullScreenImages.propTypes = {
-  imageSlug: PropTypes__default["default"].string,
-  template: PropTypes__default["default"].func,
-  element: PropTypes__default["default"].shape({
-    "story-elements": PropTypes__default["default"].array
-  }),
-  props: PropTypes__default["default"].object
-};
-
-var _excluded = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var LeftArrow = function LeftArrow(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "#333" : _ref$color;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 10 16"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M17 20H-7V-4h24z",
-    opacity: ".384"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    stroke: color,
-    d: "M9 16L1 8l8-8"
-  })));
-};
-LeftArrow.propTypes = {
-  color: PropTypes__default["default"].string
-};
-
-var RightArrow = function RightArrow(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "#333" : _ref$color;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 10 16"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M-7-4h24v24H-7z",
-    opacity: ".384"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    stroke: color,
-    d: "M1 0l8 8-8 8"
-  })));
-};
-RightArrow.propTypes = {
-  color: PropTypes__default["default"].string
-};
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-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__default["default"].createElement(React__default["default"].Fragment, null, selectedIndex !== 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: previousClick,
-    className: ("left-arrow ".concat(getLeftArrowClassName) ? "left-arrow ".concat(getLeftArrowClassName) + " " : "") + _getClassName__default["default"]("arrow left-arrow-".concat(textColor, " ").concat(getLeftArrowClassName), _styleModuleImportMap$1)
-  }, /*#__PURE__*/React__default["default"].createElement(LeftArrow, {
-    color: textColor === "dark" ? "#fff" : "#333"
-  })) : null, selectedIndex < noOfItems - 1 && rightArrowView() ? /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: nextClick,
-    className: ("right-arrow ".concat(getRightArrowClassName) ? "right-arrow ".concat(getRightArrowClassName) + " " : "") + _getClassName__default["default"]("arrow right-arrow-".concat(textColor, " ").concat(getRightArrowClassName), _styleModuleImportMap$1)
-  }, /*#__PURE__*/React__default["default"].createElement(RightArrow, {
-    color: textColor === "dark" ? "#fff" : "#333"
-  })) : null);
-};
-SliderArrow.propTypes = {
-  noOfItems: PropTypes.number,
-  perView: PropTypes.number,
-  slideIndicator: PropTypes.string,
-  previousClick: PropTypes.func,
-  nextClick: PropTypes.func,
-  selectedIndex: PropTypes.number,
-  languageDirection: PropTypes.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__default["default"].createElement("ul", {
-    className: "slider-indicators slider-indicator-m_indicators__3MNXc"
-  }, indicatorItems.map(function (_, index) {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      key: "slider-".concat(index),
-      className: "indicator slider-indicator-m_indicator__gTv3x",
-      onClick: function onClick(e) {
-        return indicatorClick(e, index);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("button", {
-      "aria-pressed": selectedIndex === index ? "true" : "false",
-      className: ("indicator-button indicator-".concat(indicatorType) ? "indicator-button indicator-".concat(indicatorType) + " " : "") + _getClassName__default["default"]("indicator-button indicator-".concat(indicatorType, " indicator-").concat(indicatorType, "-").concat(textColor), _styleModuleImportMap)
-    }));
-  }));
-};
-SliderIndicator.propTypes = {
-  indicatorItems: PropTypes.array,
-  perView: PropTypes.number,
-  indicatorType: PropTypes.string,
-  indicatorClick: PropTypes.func,
-  selectedIndex: PropTypes.number
-};
-
-var smoothScroll = function smoothScroll(node, topOrLeft, horizontal) {
-  var _node$scrollTo;
-
-  node.scrollTo((_node$scrollTo = {}, _defineProperty__default["default"](_node$scrollTo, horizontal ? "left" : "top", topOrLeft), _defineProperty__default["default"](_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 = React.useState(0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      selectedIndex = _useState2[0],
-      setSelectedIndex = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      autoScroll = _useState4[0],
-      setAutoScroll = _useState4[1];
-
-  var languageDirection = reactRedux.useSelector(function (state) {
-    return lodash.get(state, ["qt", "config", "language", "direction"], "ltr");
-  });
-  var noOfItems = children ? children.length : 0;
-  var scroller = React.useRef(null);
-  var numberOfIndicatorsToShow = children.length - (perView - 1);
-  var indicatorItems = children.slice(0, numberOfIndicatorsToShow);
-  React.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
-
-  React.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__default["default"].createElement("div", {
-    className: "scroll-snap-container"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "scroll-snap-wrapper scroll-snap-m_wrapper__1Rz9v",
-    onMouseEnter: pauseAutoPlay,
-    onMouseLeave: pauseAutoPlay
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: scroller,
-    className: "scroll-snap-carousel scroll-snap-m_carousel__2m3cg"
-  }, children), isArrow && /*#__PURE__*/React__default["default"].createElement(SliderArrow, {
-    noOfItems: noOfItems,
-    perView: perView,
-    previousClick: previousClick,
-    nextClick: nextClick,
-    selectedIndex: selectedIndex,
-    languageDirection: languageDirection
-  })), children.length > perView && slideIndicator !== "none" && /*#__PURE__*/React__default["default"].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: PropTypes.array.isRequired,
-  isArrow: PropTypes.bool,
-  isInfinite: PropTypes.bool,
-  interval: PropTypes.number,
-  pauseOnHover: PropTypes.bool,
-  perView: PropTypes.number,
-  slideIndicator: PropTypes.string
-};
-
-var ImageSlideshowBase = function ImageSlideshowBase(props) {
-  if (!props.element) return null;
-
-  var Slide = function Slide(image, index, onClickHandler) {
-    var id = image.id,
-        imageS3Key = image["image-s3-key"],
-        metadata = image.metadata,
-        title = image.title,
-        _image$hyperlink = image.hyperlink,
-        hyperlink = _image$hyperlink === void 0 ? "" : _image$hyperlink;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "image-slideshow-m_slide__3URCC",
-      key: id
-    }, /*#__PURE__*/React__default["default"].createElement("figure", {
-      key: id,
-      className: "image-slideshow-m_image-container__2VTEK",
-      onClick: function onClick() {
-        return onClickHandler(index);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(components.LazyLoadImages, {
-      margin: "0px"
-    }, /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
-      slug: imageS3Key,
-      metadata: metadata,
-      "aspect-ratio": [16, 9],
-      defaultWidth: 480,
-      widths: [250, 480, 640],
-      imgParams: {
-        auto: ["format", "compress"]
-      },
-      className: "image-slideshow-m_image__1p1fO",
-      alt: title
-    }))), hyperlink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
-      hyperLink: hyperlink
-    }), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "image-slideshow-m_caption__mWpmc",
-      dangerouslySetInnerHTML: {
-        __html: title
-      }
-    }));
-  };
-
-  var ImageSlideshowTemplate = function ImageSlideshowTemplate(_ref) {
-    var onClickHandler = _ref.onClickHandler;
-    var storyElements = lodash.get(props, ["element", "story-elements"], []);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "arr--image-slideshow-element image-slideshow-m_slideshow__3jRFX",
-      "data-test-id": "image-slideshow"
-    }, /*#__PURE__*/React__default["default"].createElement(ScrollSnap, {
-      slideIndicator: "none"
-    }, storyElements.map(function (image, index) {
-      return Slide(image, index, onClickHandler);
-    })));
-  };
-
-  ImageSlideshowTemplate.propTypes = {
-    onClickHandler: PropTypes__default["default"].func
-  };
-  return /*#__PURE__*/React__default["default"].createElement(FullScreenImages, {
-    template: ImageSlideshowTemplate,
-    element: props.element
-  });
-};
-
-ImageSlideshowBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    "story-elements": PropTypes__default["default"].array
-  }),
-  story: shapeStory
-};
-var ImageSlideshow = withElementWrapper(ImageSlideshowBase);
-
-exports.ImageSlideshow = ImageSlideshow;