@mjhls/mjh-framework 1.0.817-image-crop-test-v4 → 1.0.818

package/dist/esm/ConferenceArticleCard.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 
 /*
 Example usage - targetedonc.com/latest-conference
@@ -27,8 +26,14 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
       props.index;
       var client = props.client;
 
-  // title, thumbnail, summary, published, documentGroup.identifier.current, documentGroup.identifier.name
 
+  var builder = imageUrlBuilder(client);
+
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
+
+  // title, thumbnail, summary, published, documentGroup.identifier.current, documentGroup.identifier.name
   return React.createElement(
     'div',
     { className: 'conference-media' },
@@ -37,7 +42,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
       { className: 'img-wrapper', href: '/view/' + (data.url ? data.url.current : '') },
       React.createElement('img', {
         className: 'mr-3 img-fluid',
-        src: data.thumbnail && urlFor({ client: client, source: data.thumbnail.asset, imageWidth: 350 }),
+        src: data.thumbnail && urlFor(data.thumbnail.asset).width(350).url(),
         alt: data.title
       })
     ),

package/dist/esm/DeckContent.js

@@ -12,7 +12,7 @@ import { withRouter } from 'next/router';
 import { d as debounce_1 } from './debounce-533d9748.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
 import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { m as main_43 } from './main-b5c5aac1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
@@ -34,7 +34,6 @@ import 'prop-types';
 import './isSymbol-a7e9aafe.js';
 import './toNumber-5aeba6e7.js';
 import 'react-dom';
-import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import './AdSlot.js';
 import './Beam.js';
@@ -56,7 +55,7 @@ var DeckContent = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeckContent.__proto__ || _Object$getPrototypeOf(DeckContent)).call.apply(_ref, [this].concat(args))), _this), _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.client = _this.props.client, _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeckContent.__proto__ || _Object$getPrototypeOf(DeckContent)).call.apply(_ref, [this].concat(args))), _this), _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.data,
       dataKeptToCompareNewDatarecord: _this.data,
       per: _this.params ? _this.params.to : 2,
@@ -117,10 +116,17 @@ var DeckContent = function (_React$Component) {
           }
         });
       });
+    }, _this.urlFor = function (source) {
+      var client = _this.props.client;
+
+      var builder = imageUrlBuilder(client);
+      return builder.image(source).auto('format');
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        var url = urlFor({ client: _this.client, source: row.thumbnail, imageHeight: _this.props.imageHeight || null, imageWidth: _this.props.imageWidth || null, imageFit: _this.props.imageFit || null });
-        return url;
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }

package/dist/esm/DeckQueue.js

@@ -14,7 +14,7 @@ import { L as LazyLoad } from './index-35bdcc81.js';
 import { g as get_1 } from './get-3c308da4.js';
 import { d as debounce_1 } from './debounce-533d9748.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as main_43 } from './main-b5c5aac1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
 import './_commonjsHelpers-0c4b6f40.js';
@@ -35,7 +35,6 @@ import 'react-dom';
 import './isSymbol-a7e9aafe.js';
 import './eq-bdcbf886.js';
 import './toNumber-5aeba6e7.js';
-import './index-0dbff1d1.js';
 
 var DeckQueue = function (_React$Component) {
   _inherits(DeckQueue, _React$Component);
@@ -51,7 +50,7 @@ var DeckQueue = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeckQueue.__proto__ || _Object$getPrototypeOf(DeckQueue)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.client = _this.props.client, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.imageHeight = _this.props.imageHeight ? _this.props.imageHeight : 270, _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeckQueue.__proto__ || _Object$getPrototypeOf(DeckQueue)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.imageHeight = _this.props.imageHeight ? _this.props.imageHeight : 270, _this.state = {
       data: _this.data,
       per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
@@ -81,6 +80,7 @@ var DeckQueue = function (_React$Component) {
           data = _this$state.data,
           query = _this$state.query,
           page = _this$state.page;
+      var client = _this.props.client;
 
 
       var params = _extends({}, _this.params, { from: from, to: to
@@ -109,10 +109,17 @@ var DeckQueue = function (_React$Component) {
           }
         });
       });
+    }, _this.urlFor = function (source) {
+      var client = _this.props.client;
+
+      var builder = imageUrlBuilder(client);
+      return builder.image(source).auto('format');
     }, _this.renderCardImage = function (row) {
       if (row.thumbnail && row.thumbnail.asset) {
-        var url = urlFor({ client: _this.client, source: row.thumbnail, imageHeight: _this.imageHeight || null, imageWidth: _this.props.imageWidth || null, imageFit: _this.props.imageFit || null });
-        return url;
+        var url = _this.urlFor(row.thumbnail);
+        url = url.height(_this.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }

package/dist/esm/ExternalResources.js

@@ -2,7 +2,7 @@ import { _ as _extends } from './extends-60e0e1c6.js';
 import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import React, { useState, useEffect } from 'react';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import { m as momentTimezone } from './index-79cfd25c.js';
 import { useRouter } from 'next/router';
 import Button from 'react-bootstrap/Button';
@@ -15,7 +15,6 @@ import './core.get-iterator-method-133dfacd.js';
 import 'prop-types';
 import './index-0dbff1d1.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-2446af28.js';
 import './events-6c3a7a63.js';
 import './index-c7e2ac95.js';

package/dist/esm/Feature.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as main_43 } from './main-b5c5aac1.js';
 import Carousel from 'react-bootstrap/Carousel';
-import './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 
 //Feature query to be used
@@ -17,8 +16,7 @@ import './_commonjsHelpers-0c4b6f40.js';
 var Feature = function Feature(props) {
   var dataset = props.dataset;
   var _props$controls = props.controls,
-      controls = _props$controls === undefined ? false : _props$controls,
-      client = props.client;
+      controls = _props$controls === undefined ? false : _props$controls;
 
 
   var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -28,6 +26,12 @@ var Feature = function Feature(props) {
     return false;
   };
 
+  var urlFor = function urlFor(source) {
+    var client = props.client;
+
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
   //image width updated.
   var imageWidth = 450;
   if (main_43) {
@@ -91,7 +95,7 @@ var Feature = function Feature(props) {
           React.createElement('img', {
             style: { maxHeight: '375px', minHeight: '300px', objectFit: 'cover', paddingLeft: '50%' },
             className: 'd-block w-100',
-            src: urlFor({ client: client, source: feature_img, imageWidth: imageWidth }),
+            src: urlFor(feature_img).width(imageWidth).url(),
             alt: feature_alt
           }),
           React.createElement(

package/dist/esm/ForbesHero.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import './web.dom.iterable-4109ff68.js';
 import './es6.string.iterator-bc33758b.js';
@@ -21,12 +20,15 @@ var fbsHero = function fbsHero(props) {
 
   var client = props.client;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 600 });
-
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -82,7 +84,7 @@ var fbsHero = function fbsHero(props) {
         var articleThumbnail = '';
         var articleAltText = article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;
@@ -125,7 +127,7 @@ var fbsHero = function fbsHero(props) {
     React.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .author-wrapper {\n          text-align: center;\n        }\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n\n          max-height: 400px;\n          min-height: 275px;\n          object-fit: cover;\n        }\n\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 145px;\n          min-width: 145px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
+      '\n        .author-wrapper {\n          text-align: center;\n        }\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n        }\n\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 145px;\n          min-width: 145px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
     )
   );
 };

package/dist/esm/GridContent.js

@@ -19,7 +19,7 @@ import { g as getContentCategory } from './getContentCategory-15dcc413.js';
 import { g as get_1 } from './get-3c308da4.js';
 import { d as debounce_1 } from './debounce-533d9748.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as main_43 } from './main-b5c5aac1.js';
 import './AD.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
@@ -47,7 +47,6 @@ import './Segment.js';
 import './isSymbol-a7e9aafe.js';
 import './eq-bdcbf886.js';
 import './toNumber-5aeba6e7.js';
-import './index-0dbff1d1.js';
 
 var GridContent = function (_React$Component) {
   _inherits(GridContent, _React$Component);
@@ -63,7 +62,7 @@ var GridContent = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GridContent.__proto__ || _Object$getPrototypeOf(GridContent)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.client = _this.props.client, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GridContent.__proto__ || _Object$getPrototypeOf(GridContent)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.data,
       per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
@@ -150,10 +149,17 @@ var GridContent = function (_React$Component) {
           }
         });
       });
+    }, _this.urlFor = function (source) {
+      var client = _this.props.client;
+
+      var builder = imageUrlBuilder(client);
+      return builder.image(source).auto('format');
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        var url = urlFor({ client: _this.client, source: row.thumbnail, imageHeight: _this.props.imageHeight || null, imageWidth: _this.props.imageWidth || null, imageFit: _this.props.imageFit || null });
-        return url;
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }

package/dist/esm/GridHero.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import 'react-dom';
 import 'prop-types';
 import './slicedToArray-be2f7a22.js';
@@ -26,11 +25,21 @@ var GridHero = function GridHero(props) {
       _props$subHeight = props.subHeight,
       subHeight = _props$subHeight === undefined ? 270 : _props$subHeight;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    var imageWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var imageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+    var url = builder.image(source);
+    if (imageWidth) url = url.width(imageWidth);
+    if (imageHeight) url = url.height(imageHeight);
+    return url.auto('format').url();
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: topWidth });
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset, topWidth);
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -87,7 +96,7 @@ var GridHero = function GridHero(props) {
         var articleThumbnail = '';
         var articleAltText = article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: subWidth, imageHeight: subHeight });
+          articleThumbnail = urlFor(article.thumbnail.asset, subWidth, subHeight);
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;

package/dist/esm/GroupDeck.js

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
 import { s as smoothscroll } from './smoothscroll-fa4e3f8c.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';
@@ -12,7 +12,6 @@ import './_is-array-3e99e06e.js';
 import './_object-pie-133f504a.js';
 import './_library-528f1934.js';
 import './core.get-iterator-method-133dfacd.js';
-import './index-0dbff1d1.js';
 
 var GroupDeck = function GroupDeck(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
@@ -35,6 +34,11 @@ var GroupDeck = function GroupDeck(props) {
       scrollPosition = _useState6[0],
       setScrollPosition = _useState6[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   useEffect(function () {
     //IE11 Polyfill
     smoothscroll.polyfill();
@@ -160,7 +164,7 @@ var GroupDeck = function GroupDeck(props) {
             var thumbnail = void 0;
 
             if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof(video.thumbnail == 'string')) {
               thumbnail = video.thumbnail;
             } else {
@@ -234,7 +238,7 @@ var GroupDeck = function GroupDeck(props) {
             var _url = '' + video.link;
             var _thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              _thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              _thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof(video.thumbnail == 'string')) {
               _thumbnail = video.thumbnail;
             } else {

package/dist/esm/HamMagazine.js

@@ -156,17 +156,11 @@ var HamMagazine = function HamMagazine(props) {
     var adSection = document.querySelector('.AD728x90');
     var navLinks = document.getElementById('nav-links');
     var mastNav = document.querySelector('.nav-brands');
-    if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);
-
-    if (window.pageYOffset > navOffsetTop) {
-      if (navRef.current && navRef.current.style) {
-        navRef.current.style.position = 'fixed';
-        if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
-      }
-    }
-    var stickyNav = window.addEventListener('scroll', function () {
+    var stickNavOnScroll = function stickNavOnScroll() {
       // Taking into consideration the height of the top navbar while setting the navigation fixed
+
       if (window && topNavRef && topNavRef.current && navRef && navRef.current && window.pageYOffset !== 0 && window.pageYOffset + topNavRef.current.clientHeight + navRef.current.clientHeight > navOffsetTop) {
+
         if (navRef.current && navRef.current.style) {
           navRef.current.style.position = 'fixed';
           if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
@@ -183,9 +177,25 @@ var HamMagazine = function HamMagazine(props) {
         setIsSticky(false);
         navLinks.style.margin = '0px auto 0px 0px';
       }
-    });
+    };
+    if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);
+
+    if (window.pageYOffset > navOffsetTop) {
+      if (navRef.current && navRef.current.style) {
+        navRef.current.style.position = 'fixed';
+        if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
+      }
+    }
+
+    if (props.initiallyCollapsed && !main_43) {
+      navRef.current.style.position = 'fixed';
+      setIsSticky(true);
+      navLinks.style.margin = 'auto';
+      if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
+    }
+    window.addEventListener('scroll', stickNavOnScroll);
     return function () {
-      window.removeEventListener('scroll', stickyNav);
+      window.removeEventListener('scroll', stickNavOnScroll);
     };
   }, []);
 

package/dist/esm/Hero.js

@@ -1,10 +1,21 @@
 import React from 'react';
 import { Card } from 'react-bootstrap';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
-import './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 
+var urlFor = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
+  var url = urlFor(thumbnail, client);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
+};
+
 var Hero = function Hero(_ref) {
   var data = _ref.data,
       client = _ref.client,
@@ -26,7 +37,7 @@ var Hero = function Hero(_ref) {
         { className: 'h4' },
         title
       ),
-      thumbnail && client && React.createElement(Card.Img, { src: urlFor({ source: thumbnail, client: client, imageHeight: imageHeight, imageWidth: imageWidth }), alt: title }),
+      thumbnail && client && React.createElement(Card.Img, { src: renderCardImage(thumbnail, client, imageHeight, imageWidth) }),
       summary && React.createElement(
         Card.Footer,
         { className: 'h6' },

package/dist/esm/HorizontalArticleListing.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ArticleCarousel from './ArticleCarousel.js';
 import { I as IoIosArrowForward } from './index.esm-3fdda599.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';
@@ -20,7 +20,6 @@ import './index-35bdcc81.js';
 import 'react-dom';
 import 'prop-types';
 import './smoothscroll-fa4e3f8c.js';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './main-b5c5aac1.js';
 import './iconBase-602d52fe.js';

package/dist/esm/HorizontalHero.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { a as FaLongArrowAltRight } from './index.esm-a8ff922c.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import './iconBase-602d52fe.js';
 
 var HorizontalHero = function HorizontalHero(props) {
   var client = props.client;
 
-
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   var topArticle = props.dataRecord[0];
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
   var _props$heroTitle = props.heroTitle,
@@ -21,8 +23,7 @@ var HorizontalHero = function HorizontalHero(props) {
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 350 });
-
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(350).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   }
   if (props.thumbnail) {

package/dist/esm/IssueContentDeck.js

@@ -4,19 +4,40 @@ import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
 import Badge from 'react-bootstrap/Badge';
 import { L as LazyLoad } from './index-35bdcc81.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import 'react-dom';
 import 'prop-types';
-import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import './web.dom.iterable-4109ff68.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';
 import './core.get-iterator-method-133dfacd.js';
 
+var urlFor = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var renderCardImage = function renderCardImage(props) {
+  var coverImage = props.coverImage,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
+      client = props.client,
+      Settings = props.Settings;
+
+  if (coverImage && coverImage.asset) {
+    var url = urlFor(coverImage, client);
+    if (imageHeight) url = url.height(imageHeight);
+    if (imageWidth) url = url.width(imageWidth);
+    return url.url();
+  } else {
+    return Settings.logo;
+  }
+};
+
 var PublicationDeckStack = function PublicationDeckStack(props) {
   var title = props.title,
       coverImage = props.coverImage,
@@ -25,12 +46,8 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
       author = props.author,
       summary = props.summary,
       section = props.section,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
       client = props.client,
       Settings = props.Settings,
       index = props.index,
@@ -56,7 +73,7 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
               { height: imageHeight },
               React.createElement(Card.Img, {
                 variant: 'right',
-                src: coverImage ? urlFor({ source: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit, client: client }) : Settings.logo,
+                src: renderCardImage({ coverImage: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, client: client, Settings: Settings }),
                 alt: title,
                 style: { width: '170px', height: 'auto', objectFit: 'contain', padding: '0.25rem', float: 'left' }
               })
@@ -147,7 +164,7 @@ var PublicationDeckBlock = function PublicationDeckBlock(props) {
         coverImage && React.createElement(
           LazyLoad,
           { height: imageHeight },
-          React.createElement(Card.Img, { variant: 'top', src: coverImage ? urlFor({ source: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit, client: client, Settings: Settings }) : Settings.logo, alt: title })
+          React.createElement(Card.Img, { variant: 'top', src: renderCardImage({ coverImage: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, client: client, Settings: Settings }), alt: title })
         ),
         React.createElement(
           Card.Body,

package/dist/esm/IssueDeck.js

@@ -7,7 +7,7 @@ import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 import { L as LazyLoad } from './index-35bdcc81.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -18,7 +18,6 @@ import './_object-pie-133f504a.js';
 import './web.dom.iterable-4109ff68.js';
 import 'react-dom';
 import 'prop-types';
-import './index-0dbff1d1.js';
 
 var usePrevious = function usePrevious(value) {
   var ref = useRef();
@@ -31,12 +30,8 @@ var usePrevious = function usePrevious(value) {
 var IssueDeck = function IssueDeck(props) {
   var data = props.data,
       href = props.href,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
       Website = props.Website,
       client = props.client,
       publication = props.publication,
@@ -68,10 +63,17 @@ var IssueDeck = function IssueDeck(props) {
 
   var prevValues = usePrevious(values);
 
+  var urlFor = function urlFor(source) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   var renderCardImage = function renderCardImage(thumbnail) {
     if (thumbnail && thumbnail.asset) {
-      var url = urlFor({ client: client, source: thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
-      return url;
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
     } else {
       return Website.logo;
     }