@mjhls/mjh-framework 1.0.314 → 1.0.316

package/dist/cjs/{YoutubeGroup-93aa7a6c.js → YoutubeGroup-22a738f1.js}

@@ -500,6 +500,7 @@ GROQ query -
 var YoutubeGroup = function YoutubeGroup(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
   var innerSlider = React.useRef(null);
+  var tile = React.useRef(null);
 
   React.useEffect(function () {
     //IE11 Polyfill
@@ -512,17 +513,27 @@ var YoutubeGroup = function YoutubeGroup(props) {
     var slide = e.target.parentElement;
     var scrollOffset = slide.scrollLeft;
     var viewableWidth = slide.clientWidth;
+
+    //calculate viewable size / slide
+    var numberOfSlidesToScroll = Math.floor(viewableWidth / (tile.current.offsetWidth + 20)); //width of the tile plus margin
+    var sliderMargin = numberOfSlidesToScroll * 10;
+    numberOfSlidesToScroll = numberOfSlidesToScroll * tile.current.offsetWidth + sliderMargin;
+
+    // console.log('numberOfSlidestoScrol: ',numberOfSlidesToScroll )
+    // console.log('tile.current.offsetWidth: ',tile.current.offsetWidth )
+    // console.log('viewableWidth: ',viewableWidth )
+
     var scrollDirection = void 0;
 
     if (direction === 'next') {
-      scrollDirection = scrollOffset + viewableWidth;
+      scrollDirection = scrollOffset + numberOfSlidesToScroll;
 
-      if (scrollDirection > innerSlider.current.offsetWidth) {
+      if (scrollOffset + viewableWidth > innerSlider.current.offsetWidth) {
         scrollDirection = 0;
       }
     }
     if (direction === 'prev') {
-      scrollDirection = scrollOffset - viewableWidth;
+      scrollDirection = scrollOffset - numberOfSlidesToScroll;
 
       if (scrollOffset === 0) {
         scrollDirection = innerSlider.current.offsetWidth;
@@ -573,7 +584,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
 
             return React__default.createElement(
               'div',
-              { key: index, className: 'tile' },
+              { ref: tile, key: index, className: 'tile' },
               current && current === url ? React__default.createElement(
                 'div',
                 { className: 'now-playing' },
@@ -608,7 +619,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
                 ),
                 React__default.createElement(
                   'div',
-                  { style: { color: variant }, className: 'tile__info' },
+                  { style: { color: '#fff' }, className: 'tile__info' },
                   video.title
                 )
               )
@@ -619,7 +630,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
             var _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
             return React__default.createElement(
               'div',
-              { key: index, className: 'tile' },
+              { ref: tile, key: index, className: 'tile' },
               React__default.createElement(
                 'a',
                 { href: _url },
@@ -640,7 +651,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
                     { className: 'tile__title' },
                     React__default.createElement(
                       'div',
-                      { style: { color: variant }, className: 'tile__title_text' },
+                      { style: { color: '#fff' }, className: 'tile__title_text' },
                       video.title
                     )
                   )
@@ -671,7 +682,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 1rem;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -23px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\n        }\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.25);\n          transform: scale(1.25);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\n        }\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -3px;\n        }\n        #vid-slider .tile__slider-next {\n          right: 0;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding: 0 1.2rem;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 1rem;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\n        }\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.15);\n          transform: scale(1.15);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\n        }\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
 };

package/dist/cjs/YoutubeGroup.js

@@ -6,7 +6,7 @@ require('prop-types');
 require('next/link');
 require('react-dom');
 require('./index-fa0fb52c.js');
-var YoutubeGroup = require('./YoutubeGroup-93aa7a6c.js');
+var YoutubeGroup = require('./YoutubeGroup-22a738f1.js');
 
 
 

package/dist/cjs/{debounce-ba3eaee2.js → debounce-528ad412.js}

@@ -828,15 +828,13 @@ var DFPManager = Object.assign(new EventEmitter.EventEmitter().setMaxListeners(0
       });
 
       if (_this5.lazyLoadIsEnabled()) {
-        var args = [];
-
         var config = _this5.getLazyLoadConfig();
 
-        if (config !== null) {
-          args.push(config);
+        if (config) {
+          pubadsService.enableLazyLoad(config);
+        } else {
+          pubadsService.enableLazyLoad();
         }
-
-        pubadsService.enableLazyLoad.call(args);
       }
 
       if (_this5.singleRequestIsEnabled()) {

package/dist/cjs/{get-de2660c3.js → get-3b23d857.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var debounce = require('./debounce-ba3eaee2.js');
+var debounce = require('./debounce-528ad412.js');
 
 /**
  * Checks if `value` is classified as an `Array` object.

package/dist/cjs/{index-39beccb3.js → index-b5eb3ff8.js}

@@ -60,35 +60,35 @@ function parseSource(source) {
     if (typeof source === 'string' && isUrl(source)) {
         // Someone passed an existing image url?
         image = {
-            asset: { _ref: urlToId(source) }
+            asset: { _ref: urlToId(source) },
         };
     }
     else if (typeof source === 'string') {
         // Just an asset id
         image = {
-            asset: { _ref: source }
+            asset: { _ref: source },
         };
     }
     else if (isRef(source)) {
         // We just got passed an asset directly
         image = {
-            asset: source
+            asset: source,
         };
     }
     else if (isAsset(source)) {
         // If we were passed an image asset document
         image = {
             asset: {
-                _ref: source._id || ''
-            }
+                _ref: source._id || '',
+            },
         };
     }
     else if (isAssetStub(source)) {
         // If we were passed a partial asset (`url`, but no `_id`)
         image = {
             asset: {
-                _ref: urlToId(source.asset.url)
-            }
+                _ref: urlToId(source.asset.url),
+            },
         };
     }
     else if (typeof source.asset === 'object') {
@@ -129,7 +129,7 @@ function applyDefaults(image) {
             left: 0,
             top: 0,
             bottom: 0,
-            right: 0
+            right: 0,
         };
     }
     if (!result.hotspot) {
@@ -137,7 +137,7 @@ function applyDefaults(image) {
             x: 0.5,
             y: 0.5,
             height: 1.0,
-            width: 1.0
+            width: 1.0,
         };
     }
     return result;
@@ -184,7 +184,7 @@ exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [
     ['crop', 'crop'],
     ['saturation', 'sat'],
     ['auto', 'auto'],
-    ['dpr', 'dpr']
+    ['dpr', 'dpr'],
 ];
 function urlForImage(options) {
     var spec = __assign({}, (options || {}));
@@ -203,7 +203,7 @@ function urlForImage(options) {
         left: cropLeft,
         top: cropTop,
         width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
-        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
+        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop),
     };
     // Compute hot spot rect in terms of pixel coordinates
     var hotSpotVerticalRadius = (image.hotspot.height * asset.height) / 2;
@@ -214,7 +214,7 @@ function urlForImage(options) {
         left: hotSpotCenterX - hotSpotHorizontalRadius,
         top: hotSpotCenterY - hotSpotVerticalRadius,
         right: hotSpotCenterX + hotSpotHorizontalRadius,
-        bottom: hotSpotCenterY + hotSpotVerticalRadius
+        bottom: hotSpotCenterY + hotSpotVerticalRadius,
     };
     // If irrelevant, or if we are requested to: don't perform crop/fit based on
     // the crop/hotspot.
@@ -296,7 +296,7 @@ function fit(source, spec) {
             left: Math.round(left),
             top: Math.round(top_2),
             width: Math.round(width),
-            height: Math.round(height)
+            height: Math.round(height),
         };
     }
     else {
@@ -318,13 +318,13 @@ function fit(source, spec) {
             left: Math.max(0, Math.floor(left)),
             top: Math.max(0, Math.floor(top_3)),
             width: Math.round(width),
-            height: Math.round(height)
+            height: Math.round(height),
         };
     }
     return {
         width: imgWidth,
         height: imgHeight,
-        rect: cropRect
+        rect: cropRect,
     };
 }
 
@@ -382,7 +382,7 @@ function urlBuilder(options) {
         return new ImageUrlBuilder(null, {
             baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
             projectId: projectId,
-            dataset: dataset
+            dataset: dataset,
         });
     }
     // Or just accept the options as given
@@ -395,7 +395,7 @@ var ImageUrlBuilder = /** @class */ (function () {
             ? __assign(__assign({}, (parent.options || {})), (options || {})) : __assign({}, (options || {})); // Copy options
     }
     ImageUrlBuilder.prototype.withOptions = function (options) {
-        var baseUrl = options.baseUrl || '';
+        var baseUrl = options.baseUrl || this.options.baseUrl;
         var newOptions = { baseUrl: baseUrl };
         for (var key in options) {
             if (options.hasOwnProperty(key)) {
@@ -523,7 +523,7 @@ var ImageUrlBuilder = /** @class */ (function () {
     ImageUrlBuilder.prototype.url = function () {
         return urlForImage_1$1.default(this.options);
     };
-    // Synonym for url()
+    // Alias for url()
     ImageUrlBuilder.prototype.toString = function () {
         return this.url();
     };

package/dist/cjs/index.js

@@ -7,12 +7,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
 require('./web.dom.iterable-0998bdc3.js');
-var debounce = require('./debounce-ba3eaee2.js');
-var main = require('./main-0ea1b808.js');
-var toConsumableArray = require('./toConsumableArray-f05a306f.js');
+var debounce = require('./debounce-528ad412.js');
+var main = require('./main-753fb093.js');
+var toConsumableArray = require('./toConsumableArray-18281c61.js');
 require('./core.get-iterator-method-e049ca4a.js');
 var _extends$2 = require('./extends-e94dbea5.js');
-var inherits$2 = require('./inherits-dd435947.js');
+var inherits$2 = require('./inherits-be59e8ae.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
@@ -20,28 +20,28 @@ var Container = _interopDefault(require('react-bootstrap/Container'));
 var Row = _interopDefault(require('react-bootstrap/Row'));
 var Col = _interopDefault(require('react-bootstrap/Col'));
 require('react-bootstrap/Card');
-var visibilitySensor = require('./visibility-sensor-b72d9527.js');
+var visibilitySensor = require('./visibility-sensor-c2ccc22d.js');
 var Link = _interopDefault(require('next/link'));
 var Router = require('next/router');
 var Router__default = _interopDefault(Router);
 require('react-dom');
-var index = require('./index-39beccb3.js');
+var index = require('./index-b5eb3ff8.js');
 require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 var slicedToArray = require('./slicedToArray-bed4d943.js');
-var AdSlot = require('./AdSlot-0af5afb9.js');
-require('./promise-2c453658.js');
-require('./ADInfeed-ee8f2922.js');
+var AdSlot = require('./AdSlot-fef815e9.js');
+require('./promise-e50b2d19.js');
+require('./ADInfeed-a7a5e9f3.js');
 var DeckContent = require('./DeckContent.js');
-var get$1 = require('./get-de2660c3.js');
-var GridContent = require('./GridContent-e6ff710e.js');
+var get$1 = require('./get-3b23d857.js');
+var GridContent = require('./GridContent-98e9ab78.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
-var TaxonomyCard = require('./TaxonomyCard-a8a64f98.js');
+var TaxonomyCard = require('./TaxonomyCard-22b72261.js');
 require('./react-social-icons-cd0d9d3b.js');
 var GroupDeck = require('./GroupDeck.js');
-var YoutubeGroup = require('./YoutubeGroup-93aa7a6c.js');
+var YoutubeGroup = require('./YoutubeGroup-22a738f1.js');
 var reactBootstrap = require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var index_esm = require('./index.esm-340d3792.js');
@@ -53,7 +53,7 @@ var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-7cd7e351.js');
+var TemplateNormal = require('./Normal-972b1cc8.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -2109,7 +2109,7 @@ var EventsDeck = function EventsDeck(_ref) {
               )
             )
           ),
-          main.main_36 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
+          main.main_39 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
             'div',
             { style: { margin: '0 auto' } },
             renderMobileAd(index, numberOfItemsBeforeAd)
@@ -2500,7 +2500,7 @@ var CMEDeck = function CMEDeck(_ref) {
               )
             )
           ),
-          main.main_36 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
+          main.main_39 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
             'div',
             { style: { margin: '0 auto' } },
             renderMobileAd(index, numberOfItemsBeforeAd)
@@ -2789,7 +2789,7 @@ var AD300x250 = function AD300x250(_ref) {
       pos = _ref$pos === undefined ? 'rec1' : _ref$pos;
 
   var mobileView = false;
-  if (main.main_36) {
+  if (main.main_39) {
     pos = 'rect1-mobile';
     mobileView = true;
   }
@@ -2819,7 +2819,7 @@ var AD300x250x600 = function AD300x250x600(_ref) {
       pos = _ref$pos === undefined ? 'rec2' : _ref$pos;
 
   var mobileView = false;
-  if (main.main_36) {
+  if (main.main_39) {
     pos = 'rect2-mobile';
     mobileView = true;
   }
@@ -3058,7 +3058,7 @@ var ADWelcome = function ADWelcome(_ref) {
     return --timeLeft;
   };
 
-  var _useState = React.useState(calculateTimeLeft(counter + 1)),
+  var _useState = React.useState(counter),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
       timeLeft = _useState2[0],
       setTimeLeft = _useState2[1];
@@ -3077,6 +3077,7 @@ var ADWelcome = function ADWelcome(_ref) {
     if (isFound) {
       var parent = document.getElementById('welcome-modal');
       parent.style.display = 'block';
+      calculateTimeLeft(counter + 1);
     } else {
       setFlag(true);
     }
@@ -13319,7 +13320,7 @@ var Poll = function Poll(_ref) {
   );
 };
 
-var numberOfPaginations = main.main_35 ? 4 : 10;
+var numberOfPaginations = main.main_38 ? 4 : 10;
 
 var Quiz = function Quiz(_ref) {
   var quizzes = _ref.quizzes,
@@ -13409,7 +13410,7 @@ var Quiz = function Quiz(_ref) {
   var renderPagination = function renderPagination() {
     return React__default.createElement(
       Pagination,
-      { className: 'p-0 m-0', size: main.main_35 && 'sm' },
+      { className: 'p-0 m-0', size: main.main_38 && 'sm' },
       React__default.createElement(Pagination.First, { onClick: function onClick() {
           return changePage('first');
         }, disabled: currentPage === 1 }),
@@ -13573,7 +13574,7 @@ var NativeAd = function NativeAd(props) {
 };
 
 var Figure = dynamic(function () {
-  return new Promise(function (resolve) { resolve(require('./Figure-434da9bb.js')); });
+  return Promise.resolve().then(function () { return require('./Figure-36e6957e.js'); });
 }, { ssr: false });
 
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -13795,7 +13796,7 @@ var Feature = function Feature(props) {
   };
   //image width
   var imageWidth = 900;
-  if (main.main_36) {
+  if (main.main_39) {
     imageWidth = 450;
   }
 
@@ -13902,7 +13903,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .breadcrumb {\n            border: none;\n            background: transparent;\n          }\n          .breadcrumb .breadcrumb-item a {\n            color: var(--primary);\n            font-size: 12px;\n          }\n          .breadcrumb .breadcrumb-item .active{\n            font-size: 12px;\n          }\n          .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n        '
+        '\n          .breadcrumb {\n            background: transparent;\n            padding-left: 0.25rem;\n          }\n          .breadcrumb .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n        '
       )
     );
   }
@@ -14000,11 +14001,39 @@ module.exports = { "default": keys, __esModule: true };
 
 var _Object$keys = _commonjsHelpers.unwrapExports(keys$1);
 
+var sortByName = function sortByName(arr) {
+  var items = [].concat(toConsumableArray._toConsumableArray(arr));
+  items.sort(function (a, b) {
+    var nameA = a.name.toUpperCase();
+    var nameB = b.name.toUpperCase();
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    return 0;
+  });
+  return items;
+};
+
 var AlphabeticList = function AlphabeticList(_ref) {
   var _ref$dataRecord = _ref.dataRecord,
       dataRecord = _ref$dataRecord === undefined ? [] : _ref$dataRecord;
 
-  var _useState = React.useState({}),
+  var itemsList = {};
+  if (dataRecord && dataRecord.length > 0) {
+    var sortedData = sortByName(dataRecord);
+    sortedData.forEach(function (item) {
+      var firstLetter = item.name.charAt(0).toUpperCase();
+      if (!itemsList[firstLetter]) {
+        itemsList[firstLetter] = [];
+      }
+      itemsList[firstLetter].push(item);
+    });
+  }
+
+  var _useState = React.useState(itemsList),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
       dataList = _useState2[0],
       setDataList = _useState2[1];
@@ -14056,36 +14085,6 @@ var AlphabeticList = function AlphabeticList(_ref) {
     );
   };
 
-  var sortByName = function sortByName(arr) {
-    var items = [].concat(toConsumableArray._toConsumableArray(arr));
-    items.sort(function (a, b) {
-      var nameA = a.name.toUpperCase();
-      var nameB = b.name.toUpperCase();
-      if (nameA < nameB) {
-        return -1;
-      }
-      if (nameA > nameB) {
-        return 1;
-      }
-      return 0;
-    });
-    return items;
-  };
-
-  React.useEffect(function () {
-    var itemsList = {};
-    var sortedData = sortByName(dataRecord);
-
-    sortedData.forEach(function (item) {
-      var firstLetter = item.name.charAt(0).toUpperCase();
-      if (!itemsList[firstLetter]) {
-        itemsList[firstLetter] = [];
-      }
-      itemsList[firstLetter].push(item);
-    });
-    setDataList(itemsList);
-  }, [dataRecord]);
-
   React.useEffect(function () {
     itemsRef.current = itemsRef.current.slice(0, _Object$keys(dataList).length);
   }, [dataList]);
@@ -16228,7 +16227,7 @@ var Article = function Article(props) {
   var renderIsiContent = function renderIsiContent(article) {
     var url = article.url.current;
 
-    if (regionalPages.includes(url)) {
+    if (regionalPages && regionalPages.includes(url)) {
       return React__default.createElement(ISIContent, null);
     } else if (nationalPage === url) {
       return React__default.createElement(ISIContent, { national: true });
@@ -16379,8 +16378,8 @@ var Article = function Article(props) {
         renderIsiContent(props.article)
       )
     ),
-    main.main_36 && React__default.createElement('hr', { className: 'add-seperater' }),
-    main.main_36 && props.article.Ads.map(function (ad, index) {
+    main.main_39 && React__default.createElement('hr', { className: 'add-seperater' }),
+    main.main_39 && props.article.Ads.map(function (ad, index) {
       return React__default.createElement(
         'div',
         { key: index, id: 'addid-' + index, style: { display: 'flex', flex: '1 0 auto' } },
@@ -16559,7 +16558,7 @@ var ArticleQueue = function ArticleQueue(props) {
         isLiveSite: isLiveSite
       };
       setPageConfig(_config);
-      if (!main.main_36) {
+      if (!main.main_39) {
         debounce.lib_3.getGoogletag().then(function (googletag) {
           if (window.googletag && googletag.pubadsReady) {
             var slots = googletag.pubads().getSlots();

package/dist/cjs/{inherits-dd435947.js → inherits-be59e8ae.js}

@@ -3,7 +3,7 @@
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
 var web_dom_iterable = require('./web.dom.iterable-0998bdc3.js');
-var debounce = require('./debounce-ba3eaee2.js');
+var debounce = require('./debounce-528ad412.js');
 var _extends$2 = require('./extends-e94dbea5.js');
 
 // most Object methods by ES6 should accept primitives