@mjhls/mjh-framework 1.0.118 → 1.0.120

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, useRef, useLayoutEffect, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -9,6 +9,8 @@ import Link from 'next/link';
 import { withRouter, useRouter } from 'next/router';
 import Media from 'react-bootstrap/Media';
 import { Media as Media$1, Container as Container$1, Dropdown, Figure, Carousel, Table, Button as Button$1, ProgressBar, Card as Card$1 } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Badge from 'react-bootstrap/Badge';
 import ListGroup from 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -16,7 +18,6 @@ import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
 import { FacebookShareButton, TwitterShareButton, PinterestShareButton, EmailShareButton, FacebookIcon, TwitterIcon, PinterestIcon, EmailIcon } from 'react-share';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
-import Button from 'react-bootstrap/Button';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
@@ -11587,7 +11588,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
     ),
     icon && React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n          .taxonomy-card:hover .taxonomy-icon {\n            transform: translateY(-50%) scale(1.5) translateX(0) !important;\n          }\n        '
     )
   );
@@ -11731,7 +11732,7 @@ var GroupDeck = function GroupDeck(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 0.5rem;\n          color: white;\n          padding: 0 1rem;\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        }\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          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: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 3px;\n          margin-top: -22px;\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\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
@@ -11931,7 +11932,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\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        }\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          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: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 2px;\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\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
@@ -12172,7 +12173,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
         return React__default.createElement(
           React__default.Fragment,
-          null,
+          { key: article._id ? article._id : index$$1 },
           React__default.createElement(
             VisibilitySensor,
             {
@@ -12192,7 +12193,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
                   React__default.createElement(
                     'a',
                     null,
-                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
+                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   )
                 ),
                 React__default.createElement(
@@ -12641,6 +12642,221 @@ var VideoSeriesListing = function (_React$Component) {
 }(React__default.Component);
 var VideoSeriesListing$1 = withRouter(VideoSeriesListing);
 
+var PublicationDeck = function PublicationDeck(props) {
+  var data = props.data,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
+      href = props.href,
+      Website = props.Website,
+      client = props.client;
+
+  var urlFor = function urlFor(source) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source);
+  };
+
+  var renderCardImage = function renderCardImage(thumbnail) {
+    if (thumbnail && thumbnail.asset) {
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
+    } else {
+      return Website.logo;
+    }
+  };
+
+  return React__default.createElement(
+    Row,
+    null,
+    data && data.map(function (row, index) {
+      return row.identifier && row.identifier.current && React__default.createElement(
+        Col,
+        { md: 12, lg: '4', style: { display: 'flex', flex: '1 0 auto' }, key: index },
+        React__default.createElement(
+          Card,
+          { className: 'block-card', style: { width: '200px' } },
+          React__default.createElement(
+            Link,
+            { href: href + '/' + row.identifier.current },
+            React__default.createElement(
+              'a',
+              null,
+              row.childIssue && row.childIssue.thumbnail && React__default.createElement(Card.Img, { variant: 'top', src: renderCardImage(row.childIssue.thumbnail), alt: row.name }),
+              React__default.createElement(
+                Card.Body,
+                null,
+                React__default.createElement(
+                  Card.Title,
+                  null,
+                  row.name
+                ),
+                React__default.createElement(
+                  Button,
+                  { variant: 'secondary' },
+                  'Browse Issues'
+                )
+              )
+            )
+          )
+        )
+      );
+    })
+  );
+};
+
+var IssueDeck = function IssueDeck(props) {
+  var data = props.data,
+      href = props.href,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
+      Website = props.Website,
+      client = props.client,
+      publication = props.publication;
+
+
+  var urlFor = function urlFor(source) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source);
+  };
+
+  var renderCardImage = function renderCardImage(thumbnail) {
+    if (thumbnail && thumbnail.asset) {
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
+    } else {
+      return Website.logo;
+    }
+  };
+
+  return React__default.createElement(
+    Row,
+    null,
+    data && data.map(function (row, index) {
+      return publication && row.identifier && row.identifier.current && React__default.createElement(
+        Col,
+        { md: 12, lg: 12, key: index },
+        React__default.createElement(
+          Link,
+          { href: href + '/' + publication + '/' + row.identifier.current },
+          React__default.createElement(
+            'a',
+            null,
+            React__default.createElement(
+              Card,
+              { className: 'queue-card journal-queue', style: { borderTop: '1px solid #EEE' } },
+              React__default.createElement(
+                Row,
+                { style: { flexDirection: 'left' } },
+                React__default.createElement(
+                  Col,
+                  { md: 12, lg: 4 },
+                  row.thumbnail && React__default.createElement(Card.Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.name })
+                ),
+                React__default.createElement(
+                  Col,
+                  null,
+                  React__default.createElement(
+                    Card.Body,
+                    { style: { padding: '20px' } },
+                    React__default.createElement(
+                      Card.Title,
+                      null,
+                      row.name
+                    ),
+                    React__default.createElement(
+                      'div',
+                      null,
+                      'Volume: ',
+                      row.volume
+                    ),
+                    React__default.createElement(
+                      'div',
+                      null,
+                      'Number: ',
+                      row.number
+                    ),
+                    React__default.createElement(
+                      Button,
+                      { style: { marginTop: '20px' }, variant: 'secondary' },
+                      'View Issue'
+                    )
+                  )
+                )
+              )
+            )
+          )
+        )
+      );
+    })
+  );
+};
+
+var IssueContentDeck = function IssueContentDeck(props) {
+  var data = props.data,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
+      Website = props.Website,
+      client = props.client;
+
+
+  var urlFor = function urlFor(source) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source);
+  };
+
+  var renderCardImage = function renderCardImage(thumbnail) {
+    if (thumbnail && thumbnail.asset) {
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
+    } else {
+      return Website.logo;
+    }
+  };
+
+  return React__default.createElement(
+    Row,
+    null,
+    data && data.map(function (row, index) {
+      return row.url && row.url.current && React__default.createElement(
+        Col,
+        { md: 12, lg: 6, style: { display: 'flex', flex: '1 0 auto' }, key: index },
+        React__default.createElement(
+          Card,
+          null,
+          React__default.createElement(
+            Link,
+            { href: '/view/[url]', as: '/view/' + row.url.current },
+            React__default.createElement(
+              'a',
+              null,
+              row.thumbnail && React__default.createElement(Card.Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.title }),
+              React__default.createElement(
+                Card.Body,
+                null,
+                row.issueSection && row.issueSection.name ? React__default.createElement(
+                  Badge,
+                  { variant: 'success' },
+                  row.issueSection && row.issueSection.name.name
+                ) : '',
+                React__default.createElement(
+                  Card.Title,
+                  null,
+                  row.title
+                )
+              )
+            )
+          )
+        )
+      );
+    })
+  );
+};
+
 var Column1 = function Column1(props) {
   var title = props.title;
 
@@ -12812,12 +13028,12 @@ var LeftNav = function LeftNav(props) {
               { key: subIndex },
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li', active: true },
+                { as: 'li', active: true, key: subIndex + '_1' },
                 row.name
               ),
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li' },
+                { as: 'li', key: subIndex + '_2' },
                 renderListGroupItem(subRow)
               )
             );
@@ -12827,7 +13043,7 @@ var LeftNav = function LeftNav(props) {
               { key: subIndex },
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li' },
+                { as: 'li', key: subIndex + '_1' },
                 renderListGroupItem(subRow)
               )
             );
@@ -12888,7 +13104,7 @@ var PageFilter = function PageFilter(props) {
       ),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { jsx: 'true' },
         '\n          .select-dropdown > a {\n            color: #8e8c84;\n          }\n        '
       )
     );
@@ -12944,7 +13160,7 @@ var Column3 = function Column3(props) {
       ),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { jsx: 'true' },
         '\n            .filter-box {\n              padding-top: 6px;\n              padding-right: 18px;\n            }\n            @media only screen and (min-width: 768px) {\n              .title-wrap {\n                display: flex;\n                justify-content: space-between;\n              }\n            }\n            @media only screen and (max-width: 767px) {\n              .filter-box {\n                float: right;\n                display: flex;\n                justify-content: flex-end;\n              }\n              .title-wrap {\n                display: flex;\n                flex-direction: column;\n                margin-bottom: 10px;\n              }\n            }\n          '
       ),
       (!main_36 || showRightAd) && React__default.createElement(
@@ -13178,7 +13394,7 @@ var Search = function Search(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .mobile-search {\n          width: 75%;\n          margin-right: 15px;\n        }\n      '
     )
   );
@@ -13232,6 +13448,336 @@ var NavFooter = function NavFooter(props) {
   );
 };
 
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/**
+ * Module exports.
+ * @public
+ */
+
+var parse_1 = parse;
+var serialize_1 = serialize;
+
+/**
+ * Module variables.
+ * @private
+ */
+
+var decode = decodeURIComponent;
+var encode = encodeURIComponent;
+var pairSplitRegExp = /; */;
+
+/**
+ * RegExp to match field-content in RFC 7230 sec 3.2
+ *
+ * field-content = field-vchar [ 1*( SP / HTAB ) field-vchar ]
+ * field-vchar   = VCHAR / obs-text
+ * obs-text      = %x80-FF
+ */
+
+var fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
+
+/**
+ * Parse a cookie header.
+ *
+ * Parse the given cookie header string into an object
+ * The object has the various cookies as keys(names) => values
+ *
+ * @param {string} str
+ * @param {object} [options]
+ * @return {object}
+ * @public
+ */
+
+function parse(str, options) {
+  if (typeof str !== 'string') {
+    throw new TypeError('argument str must be a string');
+  }
+
+  var obj = {};
+  var opt = options || {};
+  var pairs = str.split(pairSplitRegExp);
+  var dec = opt.decode || decode;
+
+  for (var i = 0; i < pairs.length; i++) {
+    var pair = pairs[i];
+    var eq_idx = pair.indexOf('=');
+
+    // skip things that don't look like key=value
+    if (eq_idx < 0) {
+      continue;
+    }
+
+    var key = pair.substr(0, eq_idx).trim();
+    var val = pair.substr(++eq_idx, pair.length).trim();
+
+    // quoted values
+    if ('"' == val[0]) {
+      val = val.slice(1, -1);
+    }
+
+    // only assign once
+    if (undefined == obj[key]) {
+      obj[key] = tryDecode(val, dec);
+    }
+  }
+
+  return obj;
+}
+
+/**
+ * Serialize data into a cookie header.
+ *
+ * Serialize the a name value pair into a cookie string suitable for
+ * http headers. An optional options object specified cookie parameters.
+ *
+ * serialize('foo', 'bar', { httpOnly: true })
+ *   => "foo=bar; httpOnly"
+ *
+ * @param {string} name
+ * @param {string} val
+ * @param {object} [options]
+ * @return {string}
+ * @public
+ */
+
+function serialize(name, val, options) {
+  var opt = options || {};
+  var enc = opt.encode || encode;
+
+  if (typeof enc !== 'function') {
+    throw new TypeError('option encode is invalid');
+  }
+
+  if (!fieldContentRegExp.test(name)) {
+    throw new TypeError('argument name is invalid');
+  }
+
+  var value = enc(val);
+
+  if (value && !fieldContentRegExp.test(value)) {
+    throw new TypeError('argument val is invalid');
+  }
+
+  var str = name + '=' + value;
+
+  if (null != opt.maxAge) {
+    var maxAge = opt.maxAge - 0;
+    if (isNaN(maxAge)) throw new Error('maxAge should be a Number');
+    str += '; Max-Age=' + Math.floor(maxAge);
+  }
+
+  if (opt.domain) {
+    if (!fieldContentRegExp.test(opt.domain)) {
+      throw new TypeError('option domain is invalid');
+    }
+
+    str += '; Domain=' + opt.domain;
+  }
+
+  if (opt.path) {
+    if (!fieldContentRegExp.test(opt.path)) {
+      throw new TypeError('option path is invalid');
+    }
+
+    str += '; Path=' + opt.path;
+  }
+
+  if (opt.expires) {
+    if (typeof opt.expires.toUTCString !== 'function') {
+      throw new TypeError('option expires is invalid');
+    }
+
+    str += '; Expires=' + opt.expires.toUTCString();
+  }
+
+  if (opt.httpOnly) {
+    str += '; HttpOnly';
+  }
+
+  if (opt.secure) {
+    str += '; Secure';
+  }
+
+  if (opt.sameSite) {
+    var sameSite = typeof opt.sameSite === 'string'
+      ? opt.sameSite.toLowerCase() : opt.sameSite;
+
+    switch (sameSite) {
+      case true:
+        str += '; SameSite=Strict';
+        break;
+      case 'lax':
+        str += '; SameSite=Lax';
+        break;
+      case 'strict':
+        str += '; SameSite=Strict';
+        break;
+      case 'none':
+        str += '; SameSite=None';
+        break;
+      default:
+        throw new TypeError('option sameSite is invalid');
+    }
+  }
+
+  return str;
+}
+
+/**
+ * Try decoding a string using a decoding function.
+ *
+ * @param {string} str
+ * @param {function} decode
+ * @private
+ */
+
+function tryDecode(str, decode) {
+  try {
+    return decode(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+function hasDocumentCookie() {
+    // Can we get/set cookies on document.cookie?
+    return typeof document === 'object' && typeof document.cookie === 'string';
+}
+function parseCookies(cookies, options) {
+    if (typeof cookies === 'string') {
+        return parse_1(cookies, options);
+    }
+    else if (typeof cookies === 'object' && cookies !== null) {
+        return cookies;
+    }
+    else {
+        return {};
+    }
+}
+function isParsingCookie(value, doNotParse) {
+    if (typeof doNotParse === 'undefined') {
+        // We guess if the cookie start with { or [, it has been serialized
+        doNotParse =
+            !value || (value[0] !== '{' && value[0] !== '[' && value[0] !== '"');
+    }
+    return !doNotParse;
+}
+function readCookie(value, options) {
+    if (options === void 0) { options = {}; }
+    var cleanValue = cleanupCookieValue(value);
+    if (isParsingCookie(cleanValue, options.doNotParse)) {
+        try {
+            return JSON.parse(cleanValue);
+        }
+        catch (e) {
+            // At least we tried
+        }
+    }
+    // Ignore clean value if we failed the deserialization
+    // It is not relevant anymore to trim those values
+    return value;
+}
+function cleanupCookieValue(value) {
+    // express prepend j: before serializing a cookie
+    if (value && value[0] === 'j' && value[1] === ':') {
+        return value.substr(2);
+    }
+    return value;
+}
+
+// We can't please Rollup and TypeScript at the same time
+// Only way to make both of them work
+var objectAssign = require('object-assign');
+var Cookies = /** @class */ (function () {
+    function Cookies(cookies, options) {
+        var _this = this;
+        this.changeListeners = [];
+        this.HAS_DOCUMENT_COOKIE = false;
+        this.cookies = parseCookies(cookies, options);
+        new Promise(function () {
+            _this.HAS_DOCUMENT_COOKIE = hasDocumentCookie();
+        }).catch(function () { });
+    }
+    Cookies.prototype._updateBrowserValues = function (parseOptions) {
+        if (!this.HAS_DOCUMENT_COOKIE) {
+            return;
+        }
+        this.cookies = parse_1(document.cookie, parseOptions);
+    };
+    Cookies.prototype._emitChange = function (params) {
+        for (var i = 0; i < this.changeListeners.length; ++i) {
+            this.changeListeners[i](params);
+        }
+    };
+    Cookies.prototype.get = function (name, options, parseOptions) {
+        if (options === void 0) { options = {}; }
+        this._updateBrowserValues(parseOptions);
+        return readCookie(this.cookies[name], options);
+    };
+    Cookies.prototype.getAll = function (options, parseOptions) {
+        if (options === void 0) { options = {}; }
+        this._updateBrowserValues(parseOptions);
+        var result = {};
+        for (var name_1 in this.cookies) {
+            result[name_1] = readCookie(this.cookies[name_1], options);
+        }
+        return result;
+    };
+    Cookies.prototype.set = function (name, value, options) {
+        var _a;
+        if (typeof value === 'object') {
+            value = JSON.stringify(value);
+        }
+        this.cookies = objectAssign({}, this.cookies, (_a = {}, _a[name] = value, _a));
+        if (this.HAS_DOCUMENT_COOKIE) {
+            document.cookie = serialize_1(name, value, options);
+        }
+        this._emitChange({ name: name, value: value, options: options });
+    };
+    Cookies.prototype.remove = function (name, options) {
+        var finalOptions = (options = objectAssign({}, options, {
+            expires: new Date(1970, 1, 1, 0, 0, 1),
+            maxAge: 0
+        }));
+        this.cookies = objectAssign({}, this.cookies);
+        delete this.cookies[name];
+        if (this.HAS_DOCUMENT_COOKIE) {
+            document.cookie = serialize_1(name, '', finalOptions);
+        }
+        this._emitChange({ name: name, value: undefined, options: options });
+    };
+    Cookies.prototype.addChangeListener = function (callback) {
+        this.changeListeners.push(callback);
+    };
+    Cookies.prototype.removeChangeListener = function (callback) {
+        var idx = this.changeListeners.indexOf(callback);
+        if (idx >= 0) {
+            this.changeListeners.splice(idx, 1);
+        }
+    };
+    return Cookies;
+}());
+
+var Cookies$1 = Cookies;
+// we seem to sometimes get the ES6 version despite requesting cjs here, not sure why
+// this isn't the ideal fix, but it'll do for now
+Cookies$1 = Cookies$1.default || Cookies$1;
+
+function nextCookies(ctx, options) {
+  // Note: Next.js Static export sets ctx.req to a fake request with no headers
+  var header = ctx.req && ctx.req.headers && ctx.req.headers.cookie;
+  var uc = new Cookies$1(header);
+  return uc.getAll(options);
+}
+
+var nextCookies_1 = nextCookies;
+
 var NavMagazine = function NavMagazine(props) {
   /*
   Example Nav with acceptable props
@@ -13252,8 +13798,7 @@ var NavMagazine = function NavMagazine(props) {
       website = props.website,
       _props$showLogin = props.showLogin,
       showLogin = _props$showLogin === undefined ? false : _props$showLogin,
-      _props$loginState = props.loginState,
-      loginState = _props$loginState === undefined ? false : _props$loginState;
+      allCookies = props.allCookies;
 
   var navRef = useRef(null);
 
@@ -13267,6 +13812,13 @@ var NavMagazine = function NavMagazine(props) {
       screenWidth = _useState4[0],
       setScreenWidth = _useState4[1];
 
+  var initialLoginState = allCookies.loggedIn;
+
+  var _useState5 = useState(initialLoginState),
+      _useState6 = slicedToArray(_useState5, 2),
+      loginState = _useState6[0],
+      setLoginState = _useState6[1];
+
   useEffect(function () {
     document.addEventListener('scroll', trackScrolling);
     return function () {
@@ -13279,6 +13831,50 @@ var NavMagazine = function NavMagazine(props) {
     setScreenWidth(parseInt(window.innerWidth));
   }, []);
 
+  useLayoutEffect(function () {
+    if (typeof GCN !== 'undefined') {
+      GCN.on('init').then(function (data) {
+        console.log('GCN init...');
+        setLoginState(data.loggedin);
+        if (data.loggedIn) {
+          console.log(' - logged in status');
+          document.cookie = 'loggedIn=' + data.loggedIn + '; path=/';
+        } else {
+          console.log(' - logged out status');
+          document.cookie = 'loggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
+        }
+      });
+
+      GCN.on('login').then(function (data) {
+        setLoginState(data.loggedin);
+        console.log('GCN login...');
+        document.cookie = 'loggedIn=' + data.loggedIn + '; path=/';
+      });
+
+      GCN.on('logout').then(function (data) {
+        setLoginState(data.loggedin);
+        console.log('GCN logout...');
+        document.cookie = 'loggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
+      });
+    } else {
+      console.error('GCN not defined for GCN events');
+    }
+  }, []);
+
+  useEffect(function () {
+    toggleLogin();
+  }, [loginState]);
+
+  var toggleLogin = function toggleLogin() {
+    if (loginState) {
+      document.getElementsByClassName('logged-in').style.display = '';
+      document.getElementsByClassName('logged-out').style.display = 'none';
+    } else {
+      document.getElementsByClassName('logged-in').style.display = 'none';
+      document.getElementsByClassName('logged-out').style.display = '';
+    }
+  };
+
   var trackScrolling = function trackScrolling() {
     var offsetTop = navRef.current.getBoundingClientRect().top;
 
@@ -13289,6 +13885,34 @@ var NavMagazine = function NavMagazine(props) {
     }
   };
 
+  var handleLogin = function handleLogin(e) {
+    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
+      GCN.onecount.login().then(function (result) {
+        console.log('login result: ', result);
+        setLoginState(GCN.onecount.isLoggedIn());
+      }).catch(function (error) {
+        console.log('login error:', error);
+        setLoginState(GCN.onecount.isLoggedIn());
+      });
+    } else {
+      console.error('GCN not defined');
+    }
+  };
+
+  var handleLogout = function handleLogout(e) {
+    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
+      GCN.onecount.logout().then(function (result) {
+        console.log('logout result:', result);
+        setLoginState(GCN.onecount.isLoggedIn());
+      }).catch(function (error) {
+        console.log('logout error:', error);
+        setLoginState(GCN.onecount.isLoggedIn());
+      });
+    } else {
+      console.error('GCN not defined');
+    }
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -13301,12 +13925,14 @@ var NavMagazine = function NavMagazine(props) {
         React__default.createElement(
           Nav,
           { id: 'navbar-top', className: 'justify-content-center navbar-top', style: { margin: '0 auto' } },
-          showLogin && !loginState && React__default.createElement(
+          showLogin && React__default.createElement(
             Nav.Item,
-            { id: 'nav-mobile-register' },
+            { id: 'nav-mobile-register', className: 'logged-out', style: { display: loginState ? 'none' : '' } },
             React__default.createElement(
               'div',
-              { className: 'px-2 py-2' },
+              { className: 'px-2 py-2', onClick: function onClick(e) {
+                  return handleLogin(e);
+                } },
               React__default.createElement(MdEmail, null),
               ' Register'
             )
@@ -13324,25 +13950,29 @@ var NavMagazine = function NavMagazine(props) {
               )
             )
           ),
-          showLogin && !loginState && React__default.createElement(
+          showLogin && React__default.createElement(
             Nav.Item,
-            { id: 'nav-mobile-login' },
+            { id: 'nav-mobile-login', className: 'logged-out', style: { display: loginState ? 'none' : '' } },
             React__default.createElement(
               'div',
-              { className: 'px-2 py-2 ' },
+              { className: 'px-2 py-2 ', onClick: function onClick(e) {
+                  return handleLogin(e);
+                } },
               React__default.createElement(IoMdLogIn, null),
               ' Login'
             )
           ),
-          showLogin && loginState && React__default.createElement(
+          showLogin && React__default.createElement(
             React__default.Fragment,
-            null,
+            { className: 'logged-in', style: { display: !loginState ? 'none' : '' } },
             React__default.createElement(
               Nav.Item,
               { id: 'nav-mobile-logout' },
               React__default.createElement(
                 'div',
-                { className: ' pl-2 pr-3 py-2 text-right' },
+                { className: 'pl-2 pr-3 py-2 text-right', onClick: function onClick(e) {
+                    return handleLogout(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Logout'
               )
@@ -13352,15 +13982,17 @@ var NavMagazine = function NavMagazine(props) {
         React__default.createElement(
           Nav,
           { style: { position: 'absolute', right: '15px' }, className: 'justify-content-end rightHeader' },
-          showLogin && !loginState && React__default.createElement(
+          showLogin && React__default.createElement(
             React__default.Fragment,
-            null,
+            { className: 'logged-out', style: { display: loginState ? 'none' : '' } },
             React__default.createElement(
               Nav.Item,
               null,
               React__default.createElement(
                 'div',
-                { className: 'px-2 py-2 mr-2', id: 'nav-register' },
+                { className: 'px-2 py-2 mr-2', id: 'nav-register', onClick: function onClick(e) {
+                    return handleLogin(e);
+                  } },
                 React__default.createElement(MdEmail, null),
                 ' Register'
               )
@@ -13370,21 +14002,25 @@ var NavMagazine = function NavMagazine(props) {
               null,
               React__default.createElement(
                 'div',
-                { className: ' px-2 py-2', id: 'nav-login' },
+                { className: 'px-2 py-2', id: 'nav-login', onClick: function onClick(e) {
+                    return handleLogin(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Login'
               )
             )
           ),
-          showLogin && loginState && React__default.createElement(
+          showLogin && React__default.createElement(
             React__default.Fragment,
-            null,
+            { className: 'logged-in', style: { display: !loginState ? 'none' : '' } },
             React__default.createElement(
               Nav.Item,
               null,
               React__default.createElement(
                 'div',
-                { className: ' px-2 py-2', id: 'nav-logout' },
+                { className: 'px-2 py-2', id: 'nav-logout', onClick: function onClick(e) {
+                    return handleLogout(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Logout'
               )
@@ -13512,12 +14148,18 @@ var NavMagazine = function NavMagazine(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        .nav-item svg{\n          margin-bottom: 2px;\n        }\n        #nav-login,\n        #nav-logout,\n        #nav-register {\n          padding: 0.5rem;\n          cursor: pointer;\n        }\n        #nav-mobile-login,\n        #nav-mobile-logout,\n        #nav-mobile-register {\n          display: none;\n          \n        }\n        #nav-mobile-logout, #nav-mobile-login{\n          position: absolute;\n          right: 1rem;\n        }\n        #nav-mobile-register {\n          position: absolute;\n          left: 1rem;\n        }\n       \n        @media screen and (max-width: 1199px) {\n          #nav-mobile-login,\n          #nav-mobile-logout,\n          #nav-mobile-register {\n            display: block;\n          }\n          .navbar-top {\n            flex-direction: row;\n            justify-content: space-around !important;\n            align-items: center;\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n            width: 100%;\n          }\n        }\n\n        @media screen and (max-width: 991px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n         \n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 376px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            width: 70%;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            margin-right: 5px;\n          }\n        }\n        @media screen and (max-width: 767px) {\n          .logo {\n            width: 100%;\n            padding-left: 10px;\n            padding-right: 10px;\n          }\n       \n        }\n      '
     )
   );
 };
 
+NavMagazine.getInitialProps = function (ctx) {
+  return {
+    allCookies: nextCookies_1(ctx)
+  };
+};
+
 var NavNative = function NavNative(props) {
   var logo = props.logo,
       dataObject = props.dataObject,
@@ -13642,7 +14284,7 @@ var NavNative = function NavNative(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        @media screen and (max-width: 991px) {\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            margin: 5px 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n        }\n      '
     )
   );
@@ -13720,7 +14362,7 @@ var NavNormal = function NavNormal(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        @media screen and (max-width: 991px) {\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n        }\n      '
     )
   );
@@ -14011,19 +14653,17 @@ var AD = function AD(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
-
   return React__default.createElement(
     lib_1,
-    { dfpNetworkId: networkID, targetingArguments: targeting, sizeMapping: sizeMapping, lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
+    {
+      dfpNetworkId: networkID,
+      targetingArguments: targeting,
+      sizeMapping: sizeMapping,
+      lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
     React__default.createElement(
       'div',
       { className: className },
-      React__default.createElement(lib_2, {
-        slotId: slotId,
-        sizes: sizes,
-        adUnit: adUnit,
-        sizeMapping: sizeMapping
-      })
+      React__default.createElement(lib_2, { slotId: slotId, sizes: sizes, adUnit: adUnit, sizeMapping: sizeMapping })
     )
   );
 };
@@ -14060,6 +14700,37 @@ var AD300x250x600 = function AD300x250x600(_ref) {
   });
 };
 
+var ADFooter = function ADFooter(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(true),
+      _useState2 = slicedToArray(_useState, 2),
+      showAd = _useState2[0],
+      setShowAd = _useState2[1];
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    showAd && React__default.createElement(
+      'div',
+      { className: 'ADFooter' },
+      children,
+      React__default.createElement(
+        'div',
+        { className: 'closeButton', onClick: function onClick() {
+            return setShowAd(false);
+          } },
+        'x'
+      )
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: true },
+      '\n          .ADFooter {\n            width: auto;\n            margin: 0;\n            background-color: #f5f5f5;\n            position: fixed;\n            bottom: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            z-index: 9000;\n          }\n          .closeButton {\n            position: absolute;\n            top: -10px;\n            right: -10px;\n            background: grey;\n            color: white;\n            font-weight: 500;\n            border: 2px solid white;\n            border-radius: 50%;\n            width: 30px;\n            height: 30px;\n            text-align: center;\n            font-size: 17px;\n            cursor: pointer;\n          }\n        '
+    )
+  );
+};
+
 var urlFor$1 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
   return builder.image(source);
@@ -14462,7 +15133,7 @@ var ms = function(val, options) {
   options = options || {};
   var type = typeof val;
   if (type === 'string' && val.length > 0) {
-    return parse(val);
+    return parse$1(val);
   } else if (type === 'number' && isNaN(val) === false) {
     return options.long ? fmtLong(val) : fmtShort(val);
   }
@@ -14480,7 +15151,7 @@ var ms = function(val, options) {
  * @api private
  */
 
-function parse(str) {
+function parse$1(str) {
   str = String(str);
   if (str.length > 100) {
     return;
@@ -16895,7 +17566,7 @@ function shouldUseNative() {
 	}
 }
 
-var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+var objectAssign$1 = shouldUseNative() ? Object.assign : function (target, source) {
 	var from;
 	var to = toObject(target);
 	var symbols;
@@ -16970,7 +17641,7 @@ var buildUrl = function buildUrl(props) {
     throw new Error('Invalid image reference in block, no `_ref` found on `asset`');
   }
 
-  return node(objectAssign({
+  return node(objectAssign$1({
     projectId: projectId,
     dataset: dataset
   }, options.imageOptions || {})).image(node$$1).toString();
@@ -17110,7 +17781,7 @@ var serializers = function (h, serializerOpts) {
       };
     }
 
-    var serializedNode = objectAssign({}, span, children);
+    var serializedNode = objectAssign$1({}, span, children);
     return h(serializers.span, {
       key: span._key || "span-".concat(index),
       node: serializedNode,
@@ -17348,7 +18019,7 @@ function nestLists(blocks) {
         // will mutate the input, and we don't want to blindly clone the entire tree.
         // Clone the last child while adding our new list as the last child of it
         var lastListItem = lastChild(currentList);
-        var newLastChild = objectAssign({}, lastListItem, {
+        var newLastChild = objectAssign$1({}, lastListItem, {
           children: lastListItem.children.concat(newList)
         }); // Swap the last child
 
@@ -17450,7 +18121,7 @@ var generateKeys = function (blocks) {
       return block;
     }
 
-    return objectAssign({
+    return objectAssign$1({
       _key: getStaticKey(block)
     }, block);
   });
@@ -17494,7 +18165,7 @@ var mergeSerializers = function mergeSerializers(defaultSerializers, userSeriali
     if (type === 'function') {
       acc[key] = isDefined(userSerializers[key]) ? userSerializers[key] : defaultSerializers[key];
     } else if (type === 'object') {
-      acc[key] = objectAssign({}, defaultSerializers[key], userSerializers[key]);
+      acc[key] = objectAssign$1({}, defaultSerializers[key], userSerializers[key]);
     } else {
       acc[key] = typeof userSerializers[key] === 'undefined' ? defaultSerializers[key] : userSerializers[key];
     }
@@ -17517,7 +18188,7 @@ var defaults$1 = {
 };
 
 function blocksToNodes(h, properties, defaultSerializers, serializeSpan) {
-  var props = objectAssign({}, defaults$1, properties);
+  var props = objectAssign$1({}, defaults$1, properties);
   var rawBlocks = Array.isArray(props.blocks) ? props.blocks : [props.blocks];
   var keyedBlocks = generateKeys(rawBlocks);
   var blocks = nestLists_1(keyedBlocks, props.listNestMode);
@@ -17756,7 +18427,7 @@ var Sidebar = function Sidebar(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .sidebar {\n          width: 40%;\n          padding: 1rem 0 0;\n          margin-left: 1rem;\n          margin-right: 10%;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            width: unset;\n            padding: 1.25rem;\n           margin-left: 1rem;\n           margin-right: 1rem;\n          }\n        }\n      '
     )
   );
@@ -17854,7 +18525,7 @@ var IFrame = function IFrame(_ref) {
   return React__default.createElement(
     'div',
     { className: 'd-block text-center mb-3' },
-    React__default.createElement('iframe', { className: 'w-100', src: url, frameBorder: '0' })
+    React__default.createElement('iframe', { className: 'w-100 iFrame-block', src: url, frameBorder: '0' })
   );
 };
 
@@ -18001,7 +18672,7 @@ function removeEventListener(type, listener) {
     }
 }
 
-var serialize = serializeNode;
+var serialize$1 = serializeNode;
 
 var voidElements = ["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"];
 
@@ -18303,7 +18974,7 @@ DOMElement.prototype.focus = function _Element_focus() {
 };
 
 DOMElement.prototype.toString = function _Element_toString() {
-    return serialize(this)
+    return serialize$1(this)
 };
 
 DOMElement.prototype.getElementsByClassName = function _Element_getElementsByClassName(classNames) {
@@ -20137,8 +20808,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   //variables
 
 
-  var get2 = router.asPath.split('/')[1];
-  var get3 = router.asPath.split('/')[2].split('?')[0];
+  var get2 = router && router.asPath ? router.asPath.split('/')[1] : '';
+  var get3 = router && router.asPath ? router.asPath.split('/')[2].split('?')[0] : '';
 
   // Once component mounts, set the variables
   useEffect(function () {
@@ -20279,7 +20950,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .vid-series .video-detail iframe {\n          height: 415px !important;\n        }\n        span.btn {\n          margin: 0 1rem;\n        }\n      '
     )
   );
@@ -20479,7 +21150,17 @@ var Quiz = function Quiz(_ref) {
   );
 };
 
-var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs, onVote, showVotes) {
+var Leads = function Leads(_ref) {
+  var url = _ref.url;
+
+  return React__default.createElement(
+    'div',
+    { className: 'd-block text-center mb-3' },
+    url && React__default.createElement('iframe', { className: 'w-100 h-100 leads-block', src: url, frameBorder: '0', allow: 'fullscreen' })
+  );
+};
+
+var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings) {
   return {
     types: {
       youtube: function youtube(_ref) {
@@ -20551,6 +21232,13 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
         var quizzes = node.quizzes;
 
         return React__default.createElement(Quiz, { quizzes: quizzes });
+      },
+      leads: function leads(_ref13) {
+        var node = _ref13.node;
+        var leadID = node.leadID;
+
+        var url = '' + drupalLeadSettings.baseUrl + leadID;
+        return React__default.createElement(Leads, { url: url });
       }
     },
     marks: {
@@ -20580,32 +21268,32 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
           children
         );
       },
-      alignleft: function alignleft(_ref13) {
-        var children = _ref13.children;
+      alignleft: function alignleft(_ref14) {
+        var children = _ref14.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'left' } },
           children
         );
       },
-      alignright: function alignright(_ref14) {
-        var children = _ref14.children;
+      alignright: function alignright(_ref15) {
+        var children = _ref15.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'right' } },
           children
         );
       },
-      aligncenter: function aligncenter(_ref15) {
-        var children = _ref15.children;
+      aligncenter: function aligncenter(_ref16) {
+        var children = _ref16.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'center' } },
           children
         );
       },
-      alignjustify: function alignjustify(_ref16) {
-        var children = _ref16.children;
+      alignjustify: function alignjustify(_ref17) {
+        var children = _ref17.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'justify' } },
@@ -20621,9 +21309,60 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
 //     ...,
 //      feature_img { asset-> {url} }
 //    }`
+
+
 var Feature = function Feature(props) {
   var dataset = props.dataset;
 
+  var checkUrlIsExternal = function checkUrlIsExternal(url) {
+    if (/(http|https?)([^\s]+)/g.test(url)) {
+      return true;
+    }
+    return false;
+  };
+
+  var renderUrl = function renderUrl(feature_link, feature_title, feature_body) {
+    if (checkUrlIsExternal(feature_link)) {
+      return React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          'a',
+          { href: feature_link, target: '_blank' },
+          React__default.createElement(
+            'h3',
+            { style: { color: 'white' } },
+            feature_title
+          ),
+          React__default.createElement(
+            'p',
+            { style: { color: '#eee' } },
+            feature_body
+          )
+        )
+      );
+    }
+
+    return React__default.createElement(
+      Link,
+      { href: feature_link },
+      React__default.createElement(
+        'a',
+        null,
+        React__default.createElement(
+          'h3',
+          { style: { color: 'white' } },
+          feature_title
+        ),
+        React__default.createElement(
+          'p',
+          { style: { color: '#eee' } },
+          feature_body
+        )
+      )
+    );
+  };
+
   return React__default.createElement(
     'div',
     null,
@@ -20644,24 +21383,7 @@ var Feature = function Feature(props) {
           React__default.createElement(
             Carousel$1.Caption,
             { style: { paddingRight: '50%', left: '3rem', right: '3rem', top: '0', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-            React__default.createElement(
-              Link,
-              { href: feature_link },
-              React__default.createElement(
-                'a',
-                null,
-                React__default.createElement(
-                  'h3',
-                  { style: { color: 'white' } },
-                  feature_title
-                ),
-                React__default.createElement(
-                  'p',
-                  { style: { color: '#eee' } },
-                  feature_body
-                )
-              )
-            )
+            renderUrl(feature_link, feature_title, feature_body)
           )
         );
       })
@@ -20705,7 +21427,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       }),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { 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        '
       )
     );
@@ -20731,7 +21453,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n      '
     )
   );
@@ -21091,5 +21813,5 @@ var PdfDownload = function PdfDownload(props) {
   );
 };
 
-export { ContentCard as DeckContent, GridContent$1 as GridContent, Queue as DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, YoutubeGroup, QueueDeckExpanded, VideoSeriesListing$1 as VideoSeriesListing, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, PageFilter, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search, Feature, Breadcrumbs, SetCookie, Hero, AlphabeticList, PdfDownload };
+export { ContentCard as DeckContent, GridContent$1 as GridContent, Queue as DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, YoutubeGroup, QueueDeckExpanded, VideoSeriesListing$1 as VideoSeriesListing, PublicationDeck, IssueDeck, IssueContentDeck, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, PageFilter, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD, AD300x250, AD300x250x600, AD728x90, ADFooter, getSerializers$1 as getSerializers, Search, Feature, Breadcrumbs, SetCookie, Hero, AlphabeticList, PdfDownload };
 //# sourceMappingURL=index.es.js.map